gistfile1.js

_SliderMenuActions = (function() {
    function _SliderMenuActions() {
      var $menuBtn, $page, sidebar, sidebarOffset;
      $page = $('#page');
      $menuBtn = $('#menuBtn');
      sidebar = false;
      sidebarOffset = window.innerWidth - 40;
      $page.hammer().on('drag', function(event) {
        event.gesture.preventDefault();
        event.gesture.stopPropagation();
        if (event.gesture.deltaX > sidebarOffset) {
          return false;
        }
        if (event.gesture.direction === 'right' && !sidebar) {
          $page.animate({
            translate3d: event.gesture.deltaX + 'px, 0, 0'
          }, 0);
        }
        if (event.gesture.direction === 'left' && sidebar) {
          return $page.animate({
            translate3d: (sidebarOffset + event.gesture.deltaX) + 'px, 0, 0'
          }, 0);
        }
      }).on('dragend', function(event) {
        var speed;
        event.gesture.stopDetect();
        event.gesture.preventDefault();
        event.gesture.stopPropagation();
        speed = 300 / event.gesture.velocityX;
        if (event.gesture.direction === 'right' && !sidebar) {
          if ((event.gesture.deltaX > sidebarOffset / 2) || (event.gesture.velocityX > 0.4)) {
            $page.animate({
              translate3d: sidebarOffset + 'px, 0, 0'
            }, speed, 'ease');
            return sidebar = true;
          } else {
            return $page.animate({
              translate3d: '0, 0, 0'
            }, 300, 'ease');
          }
        } else {
          if ((event.gesture.deltaX < sidebarOffset / 2) || (event.gesture.velocityX > 0.4)) {
            $page.animate({
              translate3d: '0, 0, 0'
            }, speed, 'ease');
            return sidebar = false;
          } else {
            return $page.animate({
              translate3d: sidebarOffset + 'px, 0, 0'
            }, 300, 'ease');
          }
        }
      });
      $menuBtn.on('click', function(event) {
        if (sidebar) {
          $page.animate({
            translate3d: '0, 0, 0'
          }, 300, 'ease');
          return sidebar = false;
        } else {
          $page.animate({
            translate3d: sidebarOffset + 'px, 0, 0'
          }, 300, 'ease');
          return sidebar = true;
        }
      });
    }

    return _SliderMenuActions;

  })();

SliderMenuActions

class _SliderMenuActions

    constructor:->
        $page         = $('#page') ##ID must be that of the page that slides
        $menuBtn      = $('#menuBtn') ## To add click events to a button to open and close menu
        sidebar       = false
        sidebarOffset = window.innerWidth - 40

        $page.hammer()
            .on('drag', (event)->
                event.gesture.preventDefault()
                event.gesture.stopPropagation()
                if(event.gesture.deltaX > sidebarOffset) then return false
                if(event.gesture.direction is 'right' and !sidebar) then $page.animate({ translate3d: event.gesture.deltaX + 'px, 0, 0'}, 0)
                if(event.gesture.direction is 'left' and sidebar) then $page.animate({ translate3d: (sidebarOffset + event.gesture.deltaX) + 'px, 0, 0'}, 0)
            )
            .on('dragend', (event)->
                event.gesture.stopDetect()
                event.gesture.preventDefault()
                event.gesture.stopPropagation()
                speed = 300 / event.gesture.velocityX
                if(event.gesture.direction is 'right' and !sidebar)
                    if((event.gesture.deltaX > sidebarOffset/2) or (event.gesture.velocityX > 0.4))
                        $page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, speed, 'ease')
                        sidebar = true
                    else
                        $page.animate({ translate3d: '0, 0, 0'}, 300, 'ease')

                else
                    if((event.gesture.deltaX < sidebarOffset/2) or (event.gesture.velocityX > 0.4))
                        $page.animate({ translate3d: '0, 0, 0'}, speed, 'ease')
                        sidebar = false
                    else
                        $page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, 300, 'ease')

            )

        ## Click menu event
        $menuBtn.on('click', (event)->
                if(sidebar)
                    $page.animate({ translate3d: '0, 0, 0'}, 300, 'ease')
                    sidebar = false
                else
                    $page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, 300, 'ease')
                    sidebar = true
            )