JAVASCRIPT 38
Jquery.jpanelmenu.js Guest on 14th July 2020 05:41:00 PM
  1. /**
  2.   *
  3.   * jPanelMenu 1.3.0 (http://jpanelmenu.com)
  4.   * By Anthony Colangelo (http://acolangelo.com)
  5.   *
  6. * */
  7.  
  8. (function($){
  9.         $.jPanelMenu = function(options) {
  10.                 if ( typeof(options) == "undefined" || options == null ) { options = {}; };
  11.  
  12.                 var jP = {
  13.                         options: $.extend({
  14.                                 menu: '#menu',
  15.                                 trigger: '.menu-trigger',
  16.                                 excludedPanelContent: 'style, script',
  17.  
  18.                                 direction: 'left',
  19.                                 openPosition: '250px',
  20.                                 animated: true,
  21.                                 closeOnContentClick: true,
  22.  
  23.                                 keyboardShortcuts: [
  24.                                         {
  25.                                                 code: 27,
  26.                                                 open: false,
  27.                                                 close: true
  28.                                         },
  29.                                         {
  30.                                                 code: 37,
  31.                                                 open: false,
  32.                                                 close: true
  33.                                         },
  34.                                         {
  35.                                                 code: 39,
  36.                                                 open: true,
  37.                                                 close: true
  38.                                         },
  39.                                         {
  40.                                                 code: 77,
  41.                                                 open: true,
  42.                                                 close: true
  43.                                         }
  44.                                 ],
  45.  
  46.                                 duration: 150,
  47.                                 openDuration: options.duration || 150,
  48.                                 closeDuration: options.duration || 150,
  49.  
  50.                                 easing: 'ease-in-out',
  51.                                 openEasing: options.easing || 'ease-in-out',
  52.                                 closeEasing: options.easing || 'ease-in-out',
  53.  
  54.                                 before: function(){ },
  55.                                 beforeOpen: function(){ },
  56.                                 beforeClose: function(){ },
  57.  
  58.                                 after: function(){ },
  59.                                 afterOpen: function(){ },
  60.                                 afterClose: function(){ },
  61.  
  62.                                 beforeOn: function(){ },
  63.                                 afterOn: function(){ },
  64.  
  65.                                 beforeOff: function(){ },
  66.                                 afterOff: function(){ }
  67.                         },options),
  68.  
  69.                         settings: {
  70.                                 transitionsSupported:   'WebkitTransition' in document.body.style ||
  71.                                                                                 'MozTransition' in document.body.style ||
  72.                                                                                 'msTransition' in document.body.style ||
  73.                                                                                 'OTransition' in document.body.style ||
  74.                                                                                 'Transition' in document.body.style
  75.                                 ,
  76.                                 shiftFixedChildren: false,
  77.                                 panelPosition: 'relative',
  78.                                 positionUnits: 'px'
  79.                         },
  80.  
  81.                         menu: '#jPanelMenu-menu',
  82.  
  83.                         panel: '.jPanelMenu-panel',
  84.  
  85.                         fixedChildren: [],
  86.  
  87.                         timeouts: {},
  88.  
  89.                         clearTimeouts: function() {
  90.                                 clearTimeout(jP.timeouts.open);
  91.                                 clearTimeout(jP.timeouts.afterOpen);
  92.                                 clearTimeout(jP.timeouts.afterClose);
  93.                         },
  94.  
  95.                         setPositionUnits: function() {
  96.                                 var foundUnit = false,
  97.                                         allowedUnits = ['%','px','em']
  98.                                 ;
  99.  
  100.                                 for ( unitID in allowedUnits ) {
  101.                                         var unit = allowedUnits[unitID];
  102.                                         if ( jP.options.openPosition.toString().substr(-unit.length) == unit )
  103.                                         {
  104.                                                 foundUnit = true;
  105.                                                 jP.settings.positionUnits = unit;
  106.                                         }
  107.                                 }
  108.  
  109.                                 if ( !foundUnit ) { jP.options.openPosition = parseInt(jP.options.openPosition) + jP.settings.positionUnits }
  110.                         },
  111.  
  112.                         checkFixedChildren: function() {
  113.                                 jP.disableTransitions();
  114.  
  115.                                 var defaultPanelStyle = { position: $(jP.panel).css('position') };
  116.  
  117.                                 defaultPanelStyle[jP.options.direction] = ($(jP.panel).css(jP.options.direction) == 'auto')?0:$(jP.panel).css(jP.options.direction);
  118.  
  119.                                 $(jP.panel).find('> *').each(function(){
  120.                                         if ( $(this).css('position') == 'fixed' && $(this).css(jP.options.direction) == 'auto' ) { jP.fixedChildren.push(this); }
  121.                                 });
  122.                                
  123.                                 if ( jP.fixedChildren.length > 0 )
  124.                                 {
  125.                                         var newPanelStyle = { position: 'relative' };
  126.                                         newPanelStyle[jP.options.direction] = '1px';
  127.                                         jP.setPanelStyle(newPanelStyle);
  128.  
  129.                                         if ( parseInt($(jP.fixedChildren[0]).offset().left) == 0 ) { jP.settings.shiftFixedChildren = true; }
  130.                                 }
  131.  
  132.                                 jP.setPanelStyle(defaultPanelStyle);
  133.                         },
  134.  
  135.                         setjPanelMenuStyles: function() {
  136.                                 var bgColor = '#fff';
  137.                                 var htmlBG = $('html').css('background-color');
  138.                                 var bodyBG = $('body').css('background-color');
  139.  
  140.                                 if ( bodyBG != 'transparent' && bodyBG != "rgba(0, 0, 0, 0)") { bgColor = bodyBG; }
  141.                                 else if ( htmlBG != 'transparent' && htmlBG != "rgba(0, 0, 0, 0)") { bgColor = htmlBG; }
  142.                                 else { bgColor = '#fff'; }
  143.  
  144.                                 if ( $('#jPanelMenu-style-master').length == 0 )
  145.                                 {
  146.                                         $('body').append('<style id="jPanelMenu-style-master">body{width:100%}.jPanelMenu,body{overflow-x:hidden}#jPanelMenu-menu{display:block;position:fixed;top:0;'+jP.options.direction+':0;height:100%;z-index:-1;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.jPanelMenu-panel{position:static;'+jP.options.direction+':0;top:0;z-index:2;width:100%;min-height:100%;background:' + bgColor + '}</style>');
  147.                                 }
  148.                         },
  149.  
  150.                         setMenuState: function(open) {
  151.                                 var position = (open)?'open':'closed';
  152.                                 $('body').attr('data-menu-position', position);
  153.                         },
  154.  
  155.                         getMenuState: function() {
  156.                                 return $('body').attr('data-menu-position');
  157.                         },
  158.  
  159.                         menuIsOpen: function() {
  160.                                 if ( jP.getMenuState() == 'open' ) return true;
  161.                                 else return false;
  162.                         },
  163.  
  164.                         setMenuStyle: function(styles) {
  165.                                 $(jP.menu).css(styles);
  166.                         },
  167.  
  168.                         setPanelStyle: function(styles) {
  169.                                 $(jP.panel).css(styles);
  170.                         },
  171.  
  172.                         showMenu: function() {
  173.                                 jP.setMenuStyle({
  174.                                         display: 'block'
  175.                                 });
  176.                                 jP.setMenuStyle({
  177.                                         'z-index': '1'
  178.                                 });
  179.                         },
  180.  
  181.                         hideMenu: function() {
  182.                                 jP.setMenuStyle({
  183.                                         'z-index': '-1'
  184.                                 });
  185.                                 jP.setMenuStyle({
  186.                                         display: 'none'
  187.                                 });
  188.                         },
  189.  
  190.                         enableTransitions: function(duration, easing) {
  191.                                 var formattedDuration = duration/1000;
  192.                                 var formattedEasing = jP.getCSSEasingFunction(easing);
  193.                                 jP.disableTransitions();
  194.                                 $('body').append('<style id="jPanelMenu-style-transitions">.jPanelMenu-panel{-webkit-transition: all ' + formattedDuration + 's ' + formattedEasing + '; -moz-transition: all ' + formattedDuration + 's ' + formattedEasing + '; -o-transition: all ' + formattedDuration + 's ' + formattedEasing + '; transition: all ' + formattedDuration + 's ' + formattedEasing + ';}</style>');
  195.                         },
  196.  
  197.                         disableTransitions: function() {
  198.                                 $('#jPanelMenu-style-transitions').remove();
  199.                         },
  200.  
  201.                         enableFixedTransitions: function(selector, id, duration, easing) {
  202.                                 var formattedDuration = duration/1000;
  203.                                 var formattedEasing = jP.getCSSEasingFunction(easing);
  204.                                 jP.disableFixedTransitions(id);
  205.                                 $('body').append('<style id="jPanelMenu-style-fixed-' + id + '">' + selector + '{-webkit-transition: all ' + formattedDuration + 's ' + formattedEasing + '; -moz-transition: all ' + formattedDuration + 's ' + formattedEasing + '; -o-transition: all ' + formattedDuration + 's ' + formattedEasing + '; transition: all ' + formattedDuration + 's ' + formattedEasing + ';}</style>');
  206.                         },
  207.  
  208.                         disableFixedTransitions: function(id) {
  209.                                 $('#jPanelMenu-style-fixed-' + id).remove();
  210.                         },
  211.  
  212.                         getCSSEasingFunction: function(name) {
  213.                                 switch ( name )
  214.                                 {
  215.                                         case 'linear':
  216.                                                 return name;
  217.                                                 break;
  218.  
  219.                                         case 'ease':
  220.                                                 return name;
  221.                                                 break;
  222.  
  223.                                         case 'ease-in':
  224.                                                 return name;
  225.                                                 break;
  226.  
  227.                                         case 'ease-out':
  228.                                                 return name;
  229.                                                 break;
  230.  
  231.                                         case 'ease-in-out':
  232.                                                 return name;
  233.                                                 break;
  234.  
  235.                                         default:
  236.                                                 return 'ease-in-out';
  237.                                                 break;
  238.                                 }
  239.                         },
  240.  
  241.                         getJSEasingFunction: function(name) {
  242.                                 switch ( name )
  243.                                 {
  244.                                         case 'linear':
  245.                                                 return name;
  246.                                                 break;
  247.  
  248.                                         default:
  249.                                                 return 'swing';
  250.                                                 break;
  251.                                 }
  252.                         },
  253.  
  254.                         openMenu: function(animated) {
  255.                                 if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
  256.                                
  257.                                 jP.clearTimeouts();
  258.  
  259.                                 jP.options.before();
  260.                                 jP.options.beforeOpen();
  261.  
  262.                                 jP.setMenuState(true);
  263.  
  264.                                 jP.setPanelStyle({ position: 'relative' });
  265.                                
  266.                                 jP.showMenu();
  267.  
  268.                                 var animationChecks = {
  269.                                         none: (!animated)?true:false,
  270.                                         transitions: (animated && jP.settings.transitionsSupported)?true:false
  271.                                 };
  272.  
  273.                                 if ( animationChecks.transitions || animationChecks.none ) {
  274.                                         if ( animationChecks.none ) jP.disableTransitions();
  275.                                         if ( animationChecks.transitions ) jP.enableTransitions(jP.options.openDuration, jP.options.openEasing);
  276.  
  277.                                         var newPanelStyle = {};
  278.                                         newPanelStyle[jP.options.direction] = jP.options.openPosition;
  279.                                         jP.setPanelStyle(newPanelStyle);
  280.  
  281.                                         if ( jP.settings.shiftFixedChildren )
  282.                                         {
  283.                                                 $(jP.fixedChildren).each(function(){
  284.                                                         var id = $(this).prop("tagName").toLowerCase() + ' ' + $(this).attr('class'),
  285.                                                                 selector = id.replace(' ','.'),
  286.                                                                 id = id.replace(' ','-')
  287.                                                         ;
  288.  
  289.                                                         if ( animationChecks.none ) jP.disableFixedTransitions(id);
  290.                                                         if ( animationChecks.transitions ) jP.enableFixedTransitions(selector, id, jP.options.openDuration, jP.options.openEasing);
  291.  
  292.                                                         var newChildrenStyle = {};
  293.                                                         newChildrenStyle[jP.options.direction] = jP.options.openPosition;
  294.                                                         $(this).css(newChildrenStyle);
  295.                                                 });
  296.                                         }
  297.  
  298.                                         jP.timeouts.afterOpen = setTimeout(function(){
  299.                                                 jP.disableTransitions();
  300.                                                 if ( jP.settings.shiftFixedChildren )
  301.                                                 {
  302.                                                         $(jP.fixedChildren).each(function(){
  303.                                                                 var id = $(this).prop("tagName").toLowerCase() + ' ' + $(this).attr('class'),
  304.                                                                         id = id.replace(' ','-')
  305.                                                                 ;
  306.  
  307.                                                                 jP.disableFixedTransitions(id);
  308.                                                         });
  309.                                                 }
  310.  
  311.                                                 jP.options.after();
  312.                                                 jP.options.afterOpen();
  313.                                                 jP.initiateContentClickListeners();
  314.                                         }, jP.options.openDuration);
  315.                                 }
  316.                                 else {
  317.                                         var formattedEasing = jP.getJSEasingFunction(jP.options.openEasing);
  318.  
  319.                                         var animationOptions = {};
  320.                                         animationOptions[jP.options.direction] = jP.options.openPosition;
  321.                                         $(jP.panel).stop().animate(animationOptions, jP.options.openDuration, formattedEasing, function(){
  322.                                                 jP.options.after();
  323.                                                 jP.options.afterOpen();
  324.                                                 jP.initiateContentClickListeners();
  325.                                         });
  326.  
  327.                                         if ( jP.settings.shiftFixedChildren )
  328.                                         {
  329.                                                 $(jP.fixedChildren).each(function(){
  330.                                                         var childrenAnimationOptions = {};
  331.                                                         childrenAnimationOptions[jP.options.direction] = jP.options.openPosition;
  332.                                                         $(this).stop().animate(childrenAnimationOptions, jP.options.openDuration, formattedEasing);
  333.                                                 });
  334.                                         }
  335.                                 }
  336.                         },
  337.  
  338.                         closeMenu: function(animated) {
  339.                                 if ( typeof(animated) == "undefined" || animated == null ) { animated = jP.options.animated };
  340.  
  341.                                 jP.clearTimeouts();
  342.  
  343.                                 jP.options.before();
  344.                                 jP.options.beforeClose();
  345.  
  346.                                 jP.setMenuState(false);
  347.  
  348.                                 var animationChecks = {
  349.                                         none: (!animated)?true:false,
  350.                                         transitions: (animated && jP.settings.transitionsSupported)?true:false
  351.                                 };
  352.  
  353.                                 if ( animationChecks.transitions || animationChecks.none ) {
  354.                                         if ( animationChecks.none ) jP.disableTransitions();
  355.                                         if ( animationChecks.transitions ) jP.enableTransitions(jP.options.closeDuration, jP.options.closeEasing);
  356.  
  357.                                         var newPanelStyle = {};
  358.                                         newPanelStyle[jP.options.direction] = 0 + jP.settings.positionUnits;
  359.                                         jP.setPanelStyle(newPanelStyle);
  360.  
  361.                                         if ( jP.settings.shiftFixedChildren )
  362.                                         {
  363.                                                 $(jP.fixedChildren).each(function(){
  364.                                                         var id = $(this).prop("tagName").toLowerCase() + ' ' + $(this).attr('class'),
  365.                                                                 selector = id.replace(' ','.'),
  366.                                                                 id = id.replace(' ','-')
  367.                                                         ;
  368.  
  369.                                                         if ( animationChecks.none ) jP.disableFixedTransitions(id);
  370.                                                         if ( animationChecks.transitions ) jP.enableFixedTransitions(selector, id, jP.options.closeDuration, jP.options.closeEasing);
  371.  
  372.                                                         var newChildrenStyle = {};
  373.                                                         newChildrenStyle[jP.options.direction] = 0 + jP.settings.positionUnits;
  374.                                                         $(this).css(newChildrenStyle);
  375.                                                 });
  376.                                         }
  377.  
  378.                                         jP.timeouts.afterClose = setTimeout(function(){
  379.                                                 jP.setPanelStyle({ position: jP.settings.panelPosition });
  380.  
  381.                                                 jP.disableTransitions();
  382.                                                 if ( jP.settings.shiftFixedChildren )
  383.                                                 {
  384.                                                         $(jP.fixedChildren).each(function(){
  385.                                                                 var id = $(this).prop("tagName").toLowerCase() + ' ' + $(this).attr('class'),
  386.                                                                         id = id.replace(' ','-')
  387.                                                                 ;
  388.  
  389.                                                                 jP.disableFixedTransitions(id);
  390.                                                         });
  391.                                                 }
  392.  
  393.                                                 jP.hideMenu();
  394.                                                 jP.options.after();
  395.                                                 jP.options.afterClose();
  396.                                                 jP.destroyContentClickListeners();
  397.                                         }, jP.options.closeDuration);
  398.                                 }
  399.                                 else {
  400.                                         var formattedEasing = jP.getJSEasingFunction(jP.options.closeEasing);
  401.  
  402.                                         var animationOptions = {};
  403.                                         animationOptions[jP.options.direction] = 0 + jP.settings.positionUnits;
  404.                                         $(jP.panel).stop().animate(animationOptions, jP.options.closeDuration, formattedEasing, function(){
  405.                                                 jP.setPanelStyle({ position: jP.settings.panelPosition });
  406.  
  407.                                                 jP.hideMenu();
  408.                                                 jP.options.after();
  409.                                                 jP.options.afterClose();
  410.                                                 jP.destroyContentClickListeners();
  411.                                         });
  412.  
  413.                                         if ( jP.settings.shiftFixedChildren )
  414.                                         {
  415.                                                 $(jP.fixedChildren).each(function(){
  416.                                                         var childrenAnimationOptions = {};
  417.                                                         childrenAnimationOptions[jP.options.direction] = 0 + jP.settings.positionUnits;
  418.                                                         $(this).stop().animate(childrenAnimationOptions, jP.options.closeDuration, formattedEasing);
  419.                                                 });
  420.                                         }
  421.                                 }
  422.                         },
  423.  
  424.                         triggerMenu: function(animated) {
  425.                                 if ( jP.menuIsOpen() ) jP.closeMenu(animated);
  426.                                 else jP.openMenu(animated);
  427.                         },
  428.  
  429.                         initiateClickListeners: function() {
  430.                                 $(document).on('click',jP.options.trigger,function(){ jP.triggerMenu(jP.options.animated); return false; });
  431.                         },
  432.  
  433.                         destroyClickListeners: function() {
  434.                                 $(document).off('click',jP.options.trigger,null);
  435.                         },
  436.  
  437.                         initiateContentClickListeners: function() {
  438.                                 if ( !jP.options.closeOnContentClick ) return false;
  439.  
  440.                                 $(document).on('click',jP.panel,function(e){
  441.                                         if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
  442.                                 });
  443.                                
  444.                                 $(document).on('touchend',jP.panel,function(e){
  445.                                         if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
  446.                                 });
  447.                         },
  448.  
  449.                         destroyContentClickListeners: function() {
  450.                                 if ( !jP.options.closeOnContentClick ) return false;
  451.  
  452.                                 $(document).off('click',jP.panel,null);
  453.                                 $(document).off('touchend',jP.panel,null);
  454.                         },
  455.  
  456.                         initiateKeyboardListeners: function() {
  457.                                 var preventKeyListeners = ['input', 'textarea'];
  458.                                 $(document).on('keydown',function(e){
  459.                                         var target = $(e.target),
  460.                                         prevent = false;
  461.                                         $.each(preventKeyListeners, function(){
  462.                                                 if (target.is(this.toString())) { prevent = true; }
  463.                                         });
  464.                                         if ( prevent ) { return true; }
  465.  
  466.                                         for ( mapping in jP.options.keyboardShortcuts ) {
  467.                                                 if ( e.which == jP.options.keyboardShortcuts[mapping].code )
  468.                                                 {
  469.                                                         var key = jP.options.keyboardShortcuts[mapping];
  470.  
  471.                                                         if ( key.open && key.close ) { jP.triggerMenu(jP.options.animated); }
  472.                                                         else if ( (key.open && !key.close) && !jP.menuIsOpen() ) { jP.openMenu(jP.options.animated); }
  473.                                                         else if ( (!key.open && key.close) && jP.menuIsOpen() ) { jP.closeMenu(jP.options.animated); }
  474.  
  475.                                                         return false;
  476.                                                 }
  477.                                         }
  478.                                 });
  479.                         },
  480.  
  481.                         destroyKeyboardListeners: function() {
  482.                                 $(document).off('keydown',null);
  483.                         },
  484.  
  485.                         setupMarkup: function() {
  486.                                 $('html').addClass('jPanelMenu');
  487.                                 $('body > *').not(jP.menu + ', ' + jP.options.excludedPanelContent).wrapAll('<div class="' + jP.panel.replace('.','') + '"/>');
  488.                                 $(jP.options.menu).clone().attr('id', jP.menu.replace('#','')).insertAfter('body > ' + jP.panel);
  489.                         },
  490.  
  491.                         resetMarkup: function() {
  492.                                 $('html').removeClass('jPanelMenu');
  493.                                 $('body > ' + jP.panel + ' > *').unwrap();
  494.                                 $(jP.menu).remove();
  495.                         },
  496.  
  497.                         init: function() {
  498.                                 jP.options.beforeOn();
  499.  
  500.                                 jP.initiateClickListeners();
  501.                                 if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.initiateKeyboardListeners(); }
  502.  
  503.                                 jP.setjPanelMenuStyles();
  504.                                 jP.setMenuState(false);
  505.                                 jP.setupMarkup();
  506.  
  507.                                 jP.setMenuStyle({ width: jP.options.openPosition });
  508.  
  509.                                 jP.checkFixedChildren();
  510.                                 jP.setPositionUnits();
  511.  
  512.                                 jP.closeMenu(false);
  513.  
  514.                                 jP.options.afterOn();
  515.                         },
  516.  
  517.                         destroy: function() {
  518.                                 jP.options.beforeOff();
  519.  
  520.                                 jP.closeMenu();
  521.                                 jP.destroyClickListeners();
  522.                                 if ( Object.prototype.toString.call(jP.options.keyboardShortcuts) === '[object Array]' ) { jP.destroyKeyboardListeners(); }
  523.  
  524.                                 jP.resetMarkup();
  525.                                 var childrenStyles = {};
  526.                                 childrenStyles[jP.options.direction] = 'auto';
  527.                                 $(jP.fixedChildren).each(function(){ $(this).css(childrenStyles); });
  528.                                 jP.fixedChildren = [];
  529.  
  530.                                 jP.options.afterOff();
  531.                         }
  532.                 };
  533.  
  534.                 return {
  535.                         on: jP.init,
  536.                         off: jP.destroy,
  537.                         trigger: jP.triggerMenu,
  538.                         open: jP.openMenu,
  539.                         close: jP.closeMenu,
  540.                         isOpen: jP.menuIsOpen,
  541.                         menu: jP.menu,
  542.                         getMenu: function() { return $(jP.menu); },
  543.                         panel: jP.panel,
  544.                         getPanel: function() { return $(jP.panel); }
  545.                 };
  546.         };
  547. })(jQuery);

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.