Edit File - File Manager

Edit File: jquery-sliding-menu.js

/*
 *
 *	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'));
					}

// UpdateRequest menu width on menu toggle
					var menuWidth = menu.width();

// UpdateRequest 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();

// UpdateRequest wrapper width
					wrapper.width(menuPanels.length * menuWidth);

menuPanels.each(function(index, item)
					{
						var panel = $(item);

panel.width(menuWidth);

});

wrapper.css('margin-left','');
				}, 300);
			}
		}

};

} (jQuery));

Back to File Manager