/*
* Author: Evgeniy Gusarov StMechanus (Diversant)
* Under the MIT License
*
* Version: 1.0.1
*
*/
;
(function ($) {
var settings = {
cntClass: 'rd-mobilemenu',
menuClass: 'rd-mobilemenu_ul',
submenuClass: 'rd-mobilemenu_submenu',
panelClass: 'rd-mobilepanel',
toggleClass: 'rd-mobilepanel_toggle',
titleClass: 'rd-mobilepanel_title'
},
lastY, dir;
var RDMobileMenu = function (element, options) {
this.options = options;
this.$source = $(element);
};
RDMobileMenu.prototype = {
init: function () {
var nav = this;
nav.createDOM();
nav.createListeners();
},
createDOM: function () {
var nav = this;
$('body')
.append($('<div/>', {
'class': settings.cntClass
}).append(nav.createNavDOM()))
.append($('<div/>', {
'class': settings.panelClass
})
.append($('<button/>', {
'class': settings.toggleClass
}).append($('<span/>')))
.append($('<h2/>', {
'class': settings.titleClass,
'text': document.title
})));
},
createNavDOM: function () {
var nav = this;
var menu = $('<ul>', {'class': settings.menuClass});
var li = nav.$source.children();
for (var i = 0; i < li.length; i++) {
var o = li[i].children,
item = null;
for (var j = 0; j < o.length; j++) {
if (o[j].tagName) {
if (!item) {
item = document.createElement('li');
if (li[i].className.indexOf('active') > -1) {
item.className = 'active';
}
}
switch (o[j].tagName.toLowerCase()) {
case 'a':
var link = o[j].cloneNode(true);
item.appendChild(link);
break;
case 'ul':
var submenu = o[j].cloneNode(true);
submenu.className = settings.submenuClass;
$(submenu).css({"display": "none"});
item.appendChild(submenu);
$(item).find('> a')
.each(function () {
$this = $(this);
$this.addClass('rd-with-ul')
.append($('<span/>', {class: 'rd-submenu-toggle'}))
.find('.rd-submenu-toggle')
.on('click', function (e) {
e.preventDefault();
$this = $(this).parent();
if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
$('.rd-with-ul').removeClass('active');
var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideDown();
$('.' + settings.submenuClass).not(submenu).stop().slideUp();
} else {
var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideUp();
}
});
});
break;
default:
break;
}
}
}
if (item) {
menu.append(item);
}
}
return menu;
},
createListeners: function () {
var nav = this;
nav.createToggleListener();
nav.createResizeListener();
},
createToggleListener: function () {
var nav = this,
type;
if (nav.isMobile()){
type = 'touchstart';
}else{
type = 'click';
}
$('body').delegate('.' + settings.toggleClass, type, function () {
var o = $('.' + settings.cntClass);
$(this).toggleClass('active');
if (o.hasClass('active')) {
$(this).removeClass('active');
o.removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
} else {
$(this).addClass('active');
o.addClass('active');
$('body').delegate('*', 'mousewheel', nav.scroll);
$('body').delegate('*', 'touchmove', nav.scroll);
$('body').delegate('*', 'touchend', nav.touchend);
$('body').delegate('*', 'touchstart', {type: type}, nav.close);
$('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
}
});
},
createResizeListener: function () {
var nav = this;
$(window).on('resize', function () {
var o = $('.' + settings.cntClass);
if (o.css('display') == 'none') {
o.removeClass('active');
$('.' + settings.toggleClass).removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
}
});
},
scroll: function (e) {
e.preventDefault();
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
) {
var delta = 0;
if (e.originalEvent.targetTouches) {
if (!lastY) lastY = y;
delta = (lastY - y);
lastY = y;
dir = delta > 0;
} else {
delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
}
menu.stop().scrollTop(menu.scrollTop() + delta);
}
return false;
},
touchend: function (e) {
var menu = $('.' + settings.menuClass);
menu.stop().animate({
scrollTop: menu.scrollTop() + (dir ? 100 : -100)
}, 3000, 'easeOutQuint');
lastY = undefined;
},
close: function (e) {
if (!e.originalEvent) {
return;
}
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (!(
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
)
) {
$('.' + settings.toggleClass).trigger(e.data.type);
}
},
isMobile: function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
};
$.fn.rdparallax = function (option) {
var o = this;
if (o.length) {
new RDMobileMenu(o[0]).init();
}
return o;
};
window.RDMobilemenu_autoinit = function (selector) {
var o = $(selector);
if (o.length) {
new RDMobileMenu(o[0]).init();
}
};
})(jQuery);
$(document).ready(function () {
RDMobilemenu_autoinit('[data-type="navbar"]');
});