Completing Our Draggable Off-Canvas Menu with GreenSock_part2 (end)

What You'll Be Creating

The JavaScript

JavaScript is the last stop of this draggable menu journey, but before we write one line of JS we’ll need to write a module pattern setup.

1. var dragaebelMenu = (function() {
2.   function doSomething() {…}
3.   return {
4.     init: function() {…}
5.   }
6. })();
7. dragaebelMenu.init(); // start it!

Variables

For the configuration setup we’ll define some variables for future reference.

1. var dragaebelMenu = (function() { 
2.   var container   = document.querySelectorAll('.js-dragsurface')[0],
3.       nav         = document.querySelectorAll('.js-dragnav')[0],
4.       nav_trigger = document.querySelectorAll('.js-dragtoggle')[0],
5.       logo        = document.querySelectorAll('.js-draglogo')[0],
6.       gs_targets  = [ container, nav, logo, nav_trigger ],
7.       closed_nav  = nav.offsetWidth + getScrollBarWidth(); 
8. })();

Most of these variables are simply grabbing DOM elements, with the exception of the last two that define our GreenSock targets plus the width of the navigation menu. The utility function getScrollBarWidth() (outside our discussion today) retrieves the width of the scroll bar so we can position the nav just beyond the width of the bar itself in order to see it when the menu opens. The targets are what we move when the menu opens in order to allow adjacent content to be pushed.

Methods

To keep things short I’ll only discuss methods that are extremely important to the functionality of the menu behavior. Everything else that you’ll see in the demo not discussed here is the “sugar on top” stuff that makes the menu even more powerful.

1. function menu(duration) {
2.   container._gsTransform.x === -closed_nav ? 
3.     TweenMax.to(gs_targets, duration, { x: 0, ease: Linear.easeIn }) : 
4.     TweenMax.to(gs_targets, duration, { x: -closed_nav, ease: Linear.easeOut });
5. }

The menu function detects whether the container’s x coordinate equals the closed nav state. If so it sets the targets back to their starting position, otherwise sets them to their open position.

1. function isOpen() {
2.   return container._gsTransform.x < 0;
3. }

This is a utility function to check the menu’s state. This will return 0 if the menu is closed, or a negative value if it’s open.

1. function updateNav(event) {
2.   TweenMax.set([nav, logo, nav_trigger], { x: container._gsTransform.x });
3. }

This is another utility function which sets the target’s x coordinate inside the array parameter of the .set() method to the container’s x position everytime the onDrag or onThrowUpdate event happens. This is part of the Draggable object instance.

1. function enableSelect() {
2.   container.onselectstart = null; // Fires when the object is being selected.
3.   TweenMax.set(container, { userSelect: 'text' });
4. } 
5. function disableSelect() {
6.   TweenMax.set(container, { userSelect: 'none' });
7. } 
8. function isSelecting() {
9.   // window.getSelection: Returns a Selection object representing
10.   // the range of text selected by the user or the current position
11.   // of the caret.
12.   return !!window.getSelection().toString().length;
13. }

These functions help to determine if someone is really selecting text in order to enable / disbale selection capabilities when someone drags across the screen. This is not the most ideal behavior for mouse events, but again, as we already mentioned, you can’t detect a touch screen.

Draggable Instance

1. Draggable.create([targets], {options})

As we discussed in the previous tutorial about Draggable, this will create the instance of the Draggable object and target the DOM objects of our choice that can be passed as as an array.

1. Draggable.create([container], {
2.   type: 'x',
3.   dragClickables: false,
4.   throwProps: true,
5.   dragResistance: 0.025,
6.   edgeResistance: 0.99999999,
7.   maxDuration: 0.25,
8.   throwResistance: 2000,
9.   cursor: 'resize',
10.   allowEventDefault: true,
11.   bounds: {…},
12.   onDrag: updateNav,
13.   onDragEnd: function(event) {…},
14.   liveSnap: function(value) {…},
15.   onPress: function(event) {…},
16.   onClick: function(event) {…},
17.   onThrowUpdate: function() {…}
18. });

This is our entire Draggable instance and the properties used. The actual demo code contains comments I’ve left in order to understand and gain a better persepective on what each one is responsible for. I encourage you to look into the demo code and even challenge you to deconstruct the why and how.
Written  by Dennis Gaebel

If you found this post interesting, follow and support us.
Suggest for you:

JavaScript For Beginners - Learn JavaScript From Scratch

JavaScript for Absolute Beginners

JavaScript For Absolute Beginners - Build Simple Projects

JavaScript Bootcamp - 2016