/*
*
* 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.menu = function(options)
{
var selector = this.selector;
var settings = $.extend(
{
datajson: false,
backlabel: 'back'
}, options);
return this.each(function()
{
var self = this,
menu = $(self),
data;
if (menu.hasclass('sliding-menu'))
{
return;
}
var menuwidth = menu.width();
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 = $('
');
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 = $('');
link.attr('class', item.styleclass);
link.attr('href', item.href);
link.text(item.label);
var 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 = $('').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 (href == '#')
{
e.preventdefault();
}
else if (href.indexof('#menu-panel') == 0)
{
var target = $(href),
isback = $(this).hasclass('back'),
marginleft = parseint(wrapper.css('margin-left'));
if (isback)
{
if (href == '#menu-panel-back')
{
target = currentpanel.prev();
}
wrapper.animate(
{
marginleft: marginleft + menuwidth
}, 'fast');
}
else
{
target.insertafter(currentpanel);
if (settings.backlabel === true)
{
$('.back', target).text(label);
}
else
{
$('.back', target).text(settings.backlabel);
}
wrapper.animate(
{
marginleft: marginleft - menuwidth
}, 'fast');
}
currentpanel = target;
menu.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').attr('href', '#menu-panel-' + id);
}
panel.attr('id', 'menu-panel-' + id);
if (index == 0)
{
panel.addclass('menu-panel-root');
}
else
{
panel.addclass('menu-panel');
var li = $(''),
back = $('').addclass('back').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;
}
};
} (jquery));