332 lines
5.8 KiB
JavaScript
Executable File
332 lines
5.8 KiB
JavaScript
Executable File
/*
|
|
*
|
|
* 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="la la-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));
|