123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331 |
- /*
- *
- * jQuery Sliding Menu Plugin
- * Mobile app list-style navigation in the browser
- *
- * Written by Ali Zahid
- * http://designplox.com/jquery-sliding-menu
- *
- */
- (function($)
- {
- var usedIds = [];
- $.fn.slidingMenu = function(options)
- {
- var selector = this.selector;
- var rtl = false;
- if($('html').data('textdirection') == "rtl"){
- rtl = true;
- }
- var settings = $.extend(
- {
- dataJSON: false,
- backLabel: 'Back'
- }, options);
- return this.each(function()
- {
- var self = this,
- menu = $(self),
- data;
- if (menu.hasClass('sliding-menu'))
- {
- updateWidth();
- return;
- }
- var menuWidth = menu.outerWidth();
- // Updated menu widh
- //var menuWidth = menu[0].offsetWidth;
- if (settings.dataJSON)
- {
- data = processJSON(settings.dataJSON);
- }
- else
- {
- data = process(menu);
- }
- menu.empty().addClass('sliding-menu');
- var rootPanel;
- if (settings.dataJSON)
- {
- $(data).each(function(index, item)
- {
- var panel = $('<ul></ul>');
- if (item.root)
- {
- rootPanel = '#' + item.id;
- }
- panel.attr('id', item.id);
- panel.addClass('menu-panel');
- panel.width(menuWidth);
- $(item.children).each(function(index, item)
- {
- var link = $('<a></a>');
- link.attr('class', item.styleClass);
- link.attr('href', item.href);
- link.text(item.label);
- var li = $('<li></li>');
- li.append(link);
- panel.append(li);
- });
- menu.append(panel);
- });
- }
- else
- {
- $(data).each(function(index, item)
- {
- var panel = $(item);
- if (panel.hasClass('menu-panel-root'))
- {
- rootPanel = '#' + panel.attr('id');
- }
- panel.width(menuWidth);
- menu.append(item);
- });
- }
- rootPanel = $(rootPanel);
- rootPanel.addClass('menu-panel-root');
- var currentPanel = rootPanel;
- menu.height(rootPanel.height());
- var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);
- menu.wrapInner(wrapper);
- wrapper = $('.sliding-menu-wrapper', menu);
- $('a', self).on('click', function(e)
- {
- var href = $(this).attr('href'),
- label = $(this).text();
- if (wrapper.is(':animated'))
- {
- e.preventDefault();
- return;
- }
- if (href == '#')
- {
- e.preventDefault();
- }
- else if (href.indexOf('#menu-panel') == 0)
- {
- var target = $(href),
- isBack = $(this).hasClass('back'),
- marginLeft,
- marginRight;
- if (rtl === true){
- marginRight = parseInt(wrapper.css('margin-right'));
- }
- else{
- marginLeft = parseInt(wrapper.css('margin-left'));
- }
- // Update menu width on menu toggle
- var menuWidth = menu.width();
- // Update current panel when menu is reset
- if($(this).closest('ul').hasClass('menu-panel-root')){
- currentPanel = rootPanel;
- }
- if (isBack)
- {
- if (href == '#menu-panel-back')
- {
- target = currentPanel.prev();
- }
- if(rtl === true)
- properties = {marginRight: marginRight + menuWidth};
- else
- properties = {marginLeft: marginLeft + menuWidth};
- wrapper.stop(true, true).animate(properties, 'fast');
- }
- else
- {
- target.insertAfter(currentPanel);
- if (settings.backLabel === true)
- {
- $('.back', target).html('<i class="fa fa-arrow-circle-o-left back-in"></i>'+label);
- }
- else
- {
- $('.back', target).text(settings.backLabel);
- }
- if(rtl === true)
- properties = {marginRight: marginRight - menuWidth};
- else
- properties = {marginLeft: marginLeft - menuWidth};
- wrapper.stop(true, true).animate(properties,'fast');
- }
- currentPanel = target;
- menu.stop(true, true).animate(
- {
- height: target.height()
- }, 'fast');
- e.preventDefault();
- }
- });
- return this;
- });
- function process(data)
- {
- var ul = $('ul', data),
- panels = [];
- $(ul).each(function(index, item)
- {
- var panel = $(item),
- handler = panel.prev(),
- id = getNewId();
- if (handler.length == 1)
- {
- handler.addClass('nav-has-children dropdown-item').attr('href', '#menu-panel-' + id);
- handler.append('<i class="ft-arrow-right children-in"></i>')
- }
- panel.attr('id', 'menu-panel-' + id);
- if (index == 0)
- {
- panel.addClass('menu-panel-root');
- }
- else
- {
- panel.addClass('menu-panel');
- var li = $('<li></li>'),
- back = $('<a></a>').addClass('nav-has-parent back primary dropdown-item').attr('href', '#menu-panel-back');
- panel.prepend(back);
- }
- panels.push(item);
- });
- return panels;
- }
- function processJSON(data, parent)
- {
- var root = { id: 'menu-panel-' + getNewId(), children: [], root: (parent ? false : true) },
- panels = [];
- if (parent)
- {
- root.children.push(
- {
- styleClass: 'back',
- href: '#' + parent.id
- });
- }
- $(data).each(function(index, item)
- {
- root.children.push(item);
- if (item.children)
- {
- var panel = processJSON(item.children, root);
- item.href = '#' + panel[0].id;
- item.styleClass = 'nav';
- panels = panels.concat(panel);
- }
- });
- return [root].concat(panels);
- }
- function getNewId()
- {
- var id;
- do
- {
- id = Math.random().toString(36).substring(3, 8);
- }
- while (usedIds.indexOf(id) >= 0);
- usedIds.push(id);
- return id;
- }
- function updateWidth(){
- var wrapper = $('.sliding-menu-wrapper'),
- menuPanels = $('.sliding-menu-wrapper ul');
- if(menuPanels.length){
- setTimeout(function(){
- var menuWidth = $(selector).width();
- // Update wrapper width
- wrapper.width(menuPanels.length * menuWidth);
- menuPanels.each(function(index, item)
- {
- var panel = $(item);
- panel.width(menuWidth);
- });
- wrapper.css('margin-left','');
- }, 300);
- }
- }
- };
- } (jQuery));
|