[
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2017 Ahmed Radwan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "Checkout the demo [here](http://ahmedrad.github.io/sliiide/).\n\nFirst things first, this plugin is currently in Beta, please feel free to take if for a test ride into the wild and send back any feedback or bugs you might encounter. I created this plugin out of frustration with all the slider jQuery plugins out there that just weren’t doing it for me. Enjoy :)\n\n##What to use this for?\nYou have a div (probably a nav menu or a side bar) that you want to animate with a sliding effect from outside the viewport to inside the viewport. You want to have complete control over the distance this div slides but you don’t want to worry about how to position it or how to stretch it to match the screen’s dimensions. You also don’t wanna bother with how the animation affects the rest of the page, how to deal with scrolling and the logic behind activating and deactivating the menu.\n\n##Any Dependencies?\nThe plugin is built on jQuery 2.1.0 but could potentially work with older and newer versions, give it a shot and let me know how it goes if you run into any problems. Otherwise, there’s no CSS file or anything else needed. This plugin manipulates inline styles for the element you're using as a slide menu and some manipulation to the body element. If you're also doing a lot of inline style manipulation you might run into conflicts.\n\n####this plugin officially supports chrome, firefox, safari, IE 10/11 and Edge\n\n##How to use it?\n1- Download the sliiide js file (or the minified version) from the github repo, include the js file before the body end tag and make sure jQuery is included before it. Or just use bower \"bower install sliiide\"\n\n2- you’ll need a div (a nav menu or whatever you have in mind) and set its visibility to hidden. PLEASE MAKE SURE THIS DIV IS A DIRECT CHILD OF THE BODY ELEMENT. You also need a settings object.\n```\n\tvar settings = {\n      \t\ttoggle: \"#sliiider-toggle\", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.\n      \t\texit_selector: \".slider-exit\", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar\n      \t\tanimation_duration: \"0.5s\", //how long it takes to slide the menu\n     \t\tplace: \"left\", //where is the menu sliding from, possible options are (left | right | top | bottom)\n      \t\tanimation_curve: \"cubic-bezier(0.54, 0.01, 0.57, 1.03)\", //animation curve for the sliding animation\n      \t\tbody_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div\n     \t\tno_scroll: true, //set to true if you want the scrolling disabled while the menu is active\n\t\t\t\tauto_close: false //set to true if you want the slider to auto close everytime a child link of it is clicked\n    \t\t\t};\n\n\t$(‘#menu’).sliiide(settings); //initialize sliiide\n```\n3- If you’re going to slide that div horizontally (from the right or left) then you need to style the width of the div yourself and sliiide will stretch the height for you to full window height. If you’re going to slide it vertically (from the top or the bottom) then you need to style the height and sliiide will stretch the width for you. the sliding effect will change to match whatever styling you added to the width (or height) of the element.\n\n4- useful functions available for you:\n```\n  var menu = $('.left-menu').sliiide({place: 'left', exit_selector: '.some-exit-selector', toggle: '#some-toggle-selector,        no_scroll: true, body_slide: true'});\n\n  menu.activate(); //slides the menu open\n  menu.deactivate(); //slides the menu closed\n  menu.reset(); //removes all the css that sliiide added to any element\n```\nThat’s it, you now should be good to go, feel free to report back any issues you encounter I’m happy to continue working on this.\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"sliiide\",\n  \"main\": \"sliiide.min.js\",\n  \"homepage\": \"https://github.com/ahmedrad/sliiide\",\n  \"authors\": [\n    \"Ahmed Radwan <ahmedrad@gmail.com>\"\n  ],\n  \"description\": \"The Easiest Way to Create a Sliding Nav Menu with jQuery\",\n  \"moduleType\": [\n    \"globals\"\n  ],\n  \"keywords\": [\n    \"jquery\",\n    \"plugin\",\n    \"slide\",\n    \"slideout\",\n    \"menu\",\n    \"navigation\",\n    \"offcanvas\"\n  ],\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "sliiide.js",
    "content": "(function ($) {\n\n//get IE version if browser is IE\n  var ie = (function detectIE() {\n    var ua = window.navigator.userAgent;\n\n    var msie = ua.indexOf('MSIE ');\n    if (msie > 0) {\n      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);\n    }\n\n    var trident = ua.indexOf('Trident/');\n    if (trident > 0) {\n      var rv = ua.indexOf('rv:');\n      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);\n    }\n\n    var edge = ua.indexOf('Edge/');\n    if (edge > 0) {\n      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);\n    }\n    return false;\n  })();\n\n  $.fn.sliiide = function(options) {\n\n    var settings = $.extend({\n      toggle: \"#sliiider-toggle\",\n      exit_selector: \".slider-exit\",\n      animation_duration: \"0.5s\",\n      place: \"right\",\n      animation_curve: \"cubic-bezier(0.54, 0.01, 0.57, 1.03)\",\n      body_slide: true,\n      no_scroll: false,\n      auto_close: false\n    }, options );\n\n    var newSize;\n    var clicked = false;\n    var $sliiider = $(this);\n    var $toggle = $(settings.toggle);\n    var $exit = $(settings.exit_selector);\n    var $body = $('body');\n    var bodySlideDistance;\n\n    var bodyResetProp = {\n      transform: '',\n      'overflow-x': '',\n      transition: '',\n      position: ''\n    };\n\n    var sliiiderResetProp = {\n      transform: '',\n      transition: '',\n      width: '',\n      height: '',\n      left: '',\n      top:'',\n      bottom:'',\n      right:''\n    };\n\n    var prepareProperties = {\n      visibility: 'hidden',\n      transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve,\n      position: 'fixed'\n    };\n\n    var bodyChildrenProp = {\n      transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve\n    };\n\n    var htmlProp = {\n      'overflow-x': 'hidden'\n    };\n\n    var bodySlidePrepare = {\n      position: 'relative', // to make overflow-x hidden work with mobile browsers\n      'overflow-x': 'hidden',\n    };\n\n\n    var bodySlideProp = {\n\n      setleft: function(distance) {\n        this.left.activateAnimation.transform = 'translateX('+distance+'px)';\n        this.left.deactivateAnimation.transform = 'translateX(0px)';\n      },\n      setright: function(distance) {\n        this.right.activateAnimation.transform = 'translateX(-'+distance+'px)';\n        this.right.deactivateAnimation.transform = 'translateX(0px)';\n      },\n      setbottom: function(distance) {\n        this.bottom.activateAnimation.transform = 'translateY(-'+distance+'px)';\n        this.bottom.deactivateAnimation.transform = 'translateY(0px)';\n      },\n      settop: function(distance) {\n        this.top.activateAnimation.transform = 'translateY('+distance+'px)';\n        this.top.deactivateAnimation.transform = 'translateY(0px)';\n      },\n      left: {\n        activateAnimation: {transform:''},\n        deactivateAnimation: {transform: ''}\n      },\n      right: {\n        activateAnimation: {transform: ''},\n        deactivateAnimation: {transform: ''}\n      },\n      top: {\n        activateAnimation: {transform: ''},\n        deactivateAnimation: {transform: ''}\n      },\n      bottom: {\n        activateAnimation: {transform: ''},\n        deactivateAnimation: {transform: ''}\n      }\n    };\n\n    var Prop = {\n\n      left: {\n        properties: function() {\n          var left = '-' + $sliiider.width() + 'px';\n          return {top: '0', left: left};\n        },\n        activateAnimation: {transform: 'translateX(100%)'},\n        deactivateAnimation: {transform: 'translateX(0)'},\n        size: function (wHeight, wWidth) {\n          return {height: wHeight};\n        }\n      },\n\n      right: {\n        properties: function() {\n          var right = '-' + $sliiider.width() + 'px';\n          return {top: '0', right: right};\n        },\n        activateAnimation: {transform: 'translateX(-100%)'},\n        deactivateAnimation: {transform: 'translateX(0)'},\n        size: function (wHeight, wWidth) {\n          return {height: wHeight};\n        }\n\n      },\n\n      top: {\n        properties: function() {\n          var top = '-' + $sliiider.height() + 'px';\n          return {left: '0', right:'0', top: top};\n        },\n        activateAnimation: {transform: 'translateY(100%)'},\n        deactivateAnimation: {transform: 'translateY(0)'},\n        size: function (wHeight, wWidth) {\n          return {width: wWidth};\n        }\n      },\n\n      bottom: {\n        properties: function() {\n          var bottom = '-' + $sliiider.height() + 'px';\n          return {left:0, right:0 , bottom: bottom};\n        },\n        activateAnimation: {transform: 'translateY(-100%)'},\n        deactivateAnimation: {transform: 'translateY(0)'},\n        size: function (wHeight, wWidth) {\n          return {width: wWidth};\n        }\n      }\n    };\n\n    var prefixCSS = function(cssProp) {\n      $.each(cssProp, function(k, v) {\n        if(k === 'transition')\n        { var trnsCSS = {};\n        var trnsProp = v.split(' ',1)[0];\n        var trnsAttr = v.split(' '); trnsAttr.shift(); trnsAttr = trnsAttr.join(' ');\n        trnsCSS['-webkit-'+k] = '-webkit-' + trnsProp + ' ' + trnsAttr;\n        trnsCSS['-ms-'+k] = '-ms-' + trnsProp + ' ' + trnsAttr;\n        $.extend(cssProp, trnsCSS);\n      }\n      else if (k === 'transform')\n      {\n        var trnsfCSS = {};\n        trnsfCSS['-webkit-'+k] = v;\n        trnsfCSS['-ms-'+k] = v;\n      }\n    });\n\n    return cssProp;\n  };\n\n  var siiize = function() {\n    var windowSize = {};\n    var scroll = getScrollBarWidth();\n    windowSize.height = $(window).height();\n    windowSize.width = $(window).width() + scroll;\n    newSize = Prop[settings.place].size(windowSize.height, windowSize.width);\n    $sliiider.css(newSize);\n    $sliiider.css(prefixCSS(Prop[settings.place].properties()));\n    setSlideDistance();\n  };\n\n  var setSlideDistance = function() {\n    if(settings.body_slide)\n    {\n      if(settings.place === 'right' || settings.place === 'left')\n      {\n        bodySlideDistance = $sliiider.width();\n      }\n      else\n      {\n        bodySlideDistance = $sliiider.height();\n      }\n      bodySlideProp['set'+settings.place](bodySlideDistance);\n    }\n  };\n\n  var prepare = function() {\n    $sliiider.css(prefixCSS(prepareProperties));\n    $sliiider.css(prefixCSS(Prop[settings.place].properties()));\n    setSlideDistance();\n  };\n\n  var getScrollBarWidth = function() {\n    var inner = document.createElement('p');\n    inner.style.width = \"100%\";\n    inner.style.height = \"200px\";\n\n    var outer = document.createElement('div');\n    outer.style.position = \"absolute\";\n    outer.style.top = \"0px\";\n    outer.style.left = \"0px\";\n    outer.style.visibility = \"hidden\";\n    outer.style.width = \"200px\";\n    outer.style.height = \"150px\";\n    outer.style.overflow = \"hidden\";\n    outer.appendChild (inner);\n\n    document.body.appendChild (outer);\n    var w1 = inner.offsetWidth;\n    outer.style.overflow = 'scroll';\n    var w2 = inner.offsetWidth;\n    if (w1 === w2) { w2 = outer.clientWidth; }\n\n    document.body.removeChild (outer);\n\n    return (w1 - w2);\n  };\n\n  var activate = function() {\n    siiize(); //sets the size of the slider menu and the distance the body will travel on sliding\n    $sliiider.css('visibility','visible');\n    if(settings.body_slide)\n      {\n      $body.css(prefixCSS(bodySlidePrepare));\n      $('html').css(htmlProp);\n      $body.children().css(prefixCSS(bodyChildrenProp));\n      $body.children().css(prefixCSS(bodySlideProp[settings.place].activateAnimation));\n      if((ie !== false) && (ie <= 11))\n        {\n          $sliiider.css(prefixCSS(Prop[settings.place].activateAnimation));\n        }\n\n      //dealing with the browser bug of inability to transform fixed elements\n\n      var windowHeight = $(window).height();\n      var scrollTop = $(window).scrollTop();\n      var sliiiderHeight = $sliiider.height();\n      var sliiiderOffsetTop = $sliiider.offset().top;\n\n      // if((sliiiderOffsetTop !== scrollTop) && settings.place !== \"bottom\" && !(ie && ie <= 11 && settings.place ===\"top\"))\n      //   {\n      //     $sliiider.css('top', scrollTop);\n      //   }\n      // if(((sliiiderOffsetTop !== scrollTop + windowHeight) && (settings.place === \"bottom\")))\n      //   {\n      //   $sliiider.css('top', scrollTop + windowHeight - sliiiderHeight).css('bottom','');\n      //   }\n      }\n\n    else {\n      $sliiider.css(prefixCSS(Prop[settings.place].activateAnimation));\n    }\n\n    if(settings.no_scroll)  {\n      disable_scroll();\n    }\n\n    clicked = true;\n  };\n\n  var hideSlider = function(e) {\n    $sliiider.css('visibility','hidden');\n    $body.css(bodyResetProp);\n    $('html').css(bodyResetProp);\n    $body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);\n    prepare();\n  };\n\n  function deactivate() {\n\n    $body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);\n\n    if(settings.body_slide) {\n      $body.children().css(prefixCSS(bodySlideProp[settings.place].deactivateAnimation));\n      if((ie !== false) && (ie <= 11))\n        {$sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));}\n    }\n\n    else {\n      $sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));\n    }\n\n    if(settings.no_scroll)  {\n      enable_scroll();\n    }\n\n    clicked = false;\n  }\n\n  siiize();\n  prepare();\n  $(window).resize(siiize);\n  $sliiider.resize(siiize);\n\n  var handleToggle = function() {\n    if (!clicked)\n    {activate();}\n    else\n    {deactivate();}\n  };\n\n  $toggle.click(handleToggle);\n  if (settings.auto_close) {\n    $sliiider.find('a').on('click', function() {deactivate();});\n  }\n  $exit.on('click', function() {deactivate();});\n\n  var deleteProp = function() {\n    $body.css(bodyResetProp);\n    $sliiider.css(sliiiderResetProp);\n    $(window).off('resize', siiize);\n    $toggle.off('click', handleToggle);\n  };\n\n\n  var menu = {\n    reset: function(name) {\n      $body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);\n      deactivate();\n    },\n    deactivate: function() {deactivate();},\n    activate: function() {activate();}\n  };\n\n  return menu;\n};\n\n//enable and disable scroll\n// left: 37, up: 38, right: 39, down: 40,\n// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36\nvar keys = {37: 1, 38: 1, 39: 1, 40: 1};\n\nfunction preventDefault(e) {\n  e = e || window.event;\n  if (e.preventDefault)\n  e.preventDefault();\n  e.returnValue = false;\n}\n\nfunction preventDefaultForScrollKeys(e) {\n  if (keys[e.keyCode]) {\n    preventDefault(e);\n    return false;\n  }\n}\n\nfunction disable_scroll() {\n  if (window.addEventListener) // older FF\n  window.addEventListener('DOMMouseScroll', preventDefault, false);\n  window.onwheel = preventDefault; // modern standard\n  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE\n  window.ontouchmove  = preventDefault; // mobile\n  document.onkeydown  = preventDefaultForScrollKeys;\n}\n\nfunction enable_scroll() {\n  if (window.removeEventListener)\n  window.removeEventListener('DOMMouseScroll', preventDefault, false);\n  window.onmousewheel = document.onmousewheel = null;\n  window.onwheel = null;\n  window.ontouchmove = null;\n  document.onkeydown = null;\n}\n\n}(jQuery));\n"
  }
]