;(function($){ $.fn.infinitypush = function(options){ /** * default options */ var defaults = { offcanvas : true, offcanvasspeed : 400, offcanvasleft : true, openingspeed : 400, closingspeed : 400, spacing : 90, pushdirectionleft : true, autoscroll : true, scrollspeed : 300, destroy : false }; var infinitypushwrapper = this; var opts = $.extend( {}, defaults, options ); /** * start navigation functions */ return this.each(function() { var oldposition = $(this).data('oldposition') || $('body'), navwrapper = 'ma-infinitypush-wrapper', navwrapperdiv = '', navbuttonactive = 'ma-infinitypush-active-button', navbutton = 'ma-infinitypush-button', navbuttondiv = '', infinitypush = 'ma-infinitypush', infinitypushopen = 'ma-infinitypush-open'; function destroy(){ $('.' + navbutton).unbind(); $('.' + infinitypush).unbind(); $('body').removeclass(infinitypushopen); $('.' + navwrapper).next().removeattr('style'); $('.' + navwrapper).find('.ma-infinitypush-inactive').removeclass('ma-infinitypush-inactive'); $('.' + navwrapper).find('.ma-infinitypush-active-item').removeclass('ma-infinitypush-active-item'); $('.' + navwrapper).find('.ma-infinitypush-close-subnav').remove(); $('.' + navwrapper).find('ul').removeattr('style'); infinitypushwrapper.prependto(oldposition); infinitypushwrapper.removeclass('ma-infinitypush ma-infinitypush-sub-open'); $('.' + navwrapper).remove(); $(this).removeclass(infinitypush); infinitypushwrapper.stop().removeattr('style'); } if(opts.destroy){ if($(this).hasclass(infinitypush)) destroy(); return; } // start navigation toggle function function infinitypushtoggle() { $('.' + navbutton).on('click', function(){ if($('body').hasclass(infinitypushopen)){ closinganimation(); } else { openinganimation(); } }); } if(!$(this).hasclass(infinitypush)){ $(this).data('oldposition', $(this).parent()); // move navigation after body if(!$(this).parent().is('body')) { $('body').prepend($(this)); } // wrapping the element & add new class name $(this).before(navwrapperdiv).addclass(infinitypush).appendto('.' + navwrapper); var navwidth = $('.' + navwrapper).width(); // start closing animation function function closinganimation() { if(opts.offcanvasleft == true) { $('.' + navwrapper).stop().animate({ left: '-' + navwidth + 'px' }, opts.offcanvasspeed); } else { $('.' + navwrapper).stop().animate({ right: '-' + navwidth + 'px' }, opts.offcanvasspeed); } $('.' + infinitypush).stop().animate({ opacity: 'hide' }, opts.offcanvasspeed); if(opts.offcanvasleft == true) { $('.' + navwrapper).next().stop().animate({ left: 0 }, opts.offcanvasspeed); } else { $('.' + navwrapper).next().stop().animate({ right: 0 }, opts.offcanvasspeed); } $('body').removeclass(infinitypushopen); } // start opening animation function openinganimation() { $('body').addclass(infinitypushopen); if(opts.offcanvasleft == true) { $('.' + navwrapper).stop().animate({ left: 0 }, opts.offcanvasspeed); } else { $('.' + navwrapper).stop().animate({ right: 0 }, opts.offcanvasspeed); } $('.' + infinitypush).stop().animate({ opacity: 'show' }, opts.offcanvasspeed); if(opts.offcanvasleft == true) { $('.' + navwrapper).next().stop().animate({ left: navwidth + 'px' }, opts.offcanvasspeed); } else { $('.' + navwrapper).next().stop().animate({ right: navwidth + 'px' }, opts.offcanvasspeed); } clickoutside(); } // start closing function by clicking outside the infinity navigation function clickoutside() { $('.' + infinitypushopen).on("mousedown touchstart", function (e) { if($('.' + infinitypushopen).length) { if (!$('.' + navwrapper).is(e.target) // if the target of the click isn't the container... && $('.' + navwrapper).has(e.target).length === 0) // ... nor a descendant of the container { closinganimation(); } } }); } // start infinity push function $('.' + infinitypush).on('click', 'a', function(){ // general settings var navwidth = $(infinitypushwrapper).width(), headparentul = $(this).parents(infinitypushwrapper).children('ul'), directparentul = $(this).closest('ul'), subul = $(this).parent().find('ul').first(), closesubname = 'ma-infinitypush-close-subnav', closesublink = '', inactivelist = 'ma-infinitypush-inactive', inactiveitem = 'ma-infinitypush-active-item', subopen = 'ma-infinitypush-sub-open'; if ( headparentul.hasclass(inactivelist) && headparentul.siblings().not(inactivelist) ) { // top ul has the class name & the siblings has not the class name /** * if statement for closing or opening the menu list */ if( directparentul.hasclass(inactivelist) ){ // parent ul has the class name, close the sub menu // closing animation if(opts.pushdirectionleft == true) { directparentul.find('ul').animate({ right: -(navwidth - opts.spacing), opacity: 'hide' }, opts.closingspeed); } else { directparentul.find('ul').animate({ left: -(navwidth - opts.spacing), opacity: 'hide' }, opts.closingspeed); } // removing the class name if( $(this).parent().parent().parent().hasclass(subopen) ) { $(infinitypushwrapper).removeclass(subopen); } else { // reset the directparentul width directparentul.animate({ width: navwidth - opts.spacing }, opts.closingspeed); } directparentul.removeclass(inactivelist); directparentul.find('ul').removeclass(inactivelist); directparentul.siblings().removeclass(inactivelist); directparentul.find('li').removeclass(inactiveitem); // removing the close link directparentul.find('.' + closesubname).animate({ opacity: 'hide' }, opts.closingspeed, function() { $(this).remove(); } ); return false; } else { // parent ul has not the class name, open the sub menu if exist or open the link if ( ( subul.length > 0 ) && ( !subul.is(':visible') ) ) { // if sub ul exist & is visible var getscrollposition = directparentul.scrolltop(); // adding the class names $(this).parent().addclass(inactiveitem); directparentul.addclass(inactivelist); // scrolling up function if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { directparentul.animate({ scrolltop: 0 }, opts.scrollspeed); } } // adding the close link if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { $(closesublink).delay(opts.scrollspeed).insertafter($(this)).css('display', 'none').animate({ opacity: 'show' }, opts.openingspeed); } else { $(closesublink).insertafter($(this)).css('display', 'none').animate({ opacity: 'show' }, opts.openingspeed); } } else { if(getscrollposition >= 1) { $(closesublink).insertafter($(this)).css({ display: 'none', top: getscrollposition }).animate({ opacity: 'show' }, opts.openingspeed); } else { $(closesublink).insertafter($(this)).css({ display: 'none', top: 0 }).animate({ opacity: 'show' }, opts.openingspeed); } } // opening animation if(opts.pushdirectionleft == true) { if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { subul.delay(opts.scrollspeed).css({ right: -(navwidth - opts.spacing) }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ right: -(navwidth - opts.spacing) }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } else { if(getscrollposition >= 1) { subul.css({ right: -(navwidth - opts.spacing), top: getscrollposition }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ right: -(navwidth - opts.spacing), top: 0 }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } } else { if(opts.autoscroll == true) { subul.delay(opts.scrollspeed).css({ left: -(navwidth - opts.spacing) }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { if(getscrollposition >= 1) { subul.css({ left: -(navwidth - opts.spacing), top: getscrollposition }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ left: -(navwidth - opts.spacing), top: 0 }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } } // changing the directparentul width directparentul.animate({ width: navwidth }, opts.openingspeed); return false; } } } else { // top ul has not the class name & the siblings has not the class name if ( ( subul.length > 0 ) && ( !subul.is(':visible') ) ) { // if sub ul exist & is visible var getscrollposition = $('.' + infinitypush).scrolltop(); // adding the class names $(this).parent().addclass(inactiveitem); directparentul.addclass(inactivelist); directparentul.siblings().addclass(inactivelist); if( $(infinitypushwrapper).find('ul').is(':visible') ) { $(infinitypushwrapper).addclass(subopen); } // scrolling up function if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { $('.' + infinitypush).animate({ scrolltop: 0 }, opts.scrollspeed); } } // adding the close link if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { $(closesublink).delay(opts.scrollspeed).insertafter($(this)).css('display', 'none').animate({ opacity: 'show' }, opts.openingspeed); } else { $(closesublink).insertafter($(this)).css('display', 'none').animate({ opacity: 'show' }, opts.openingspeed); } } else { if(getscrollposition >= 1) { $(closesublink).insertafter($(this)).css({ display: 'none', top: getscrollposition }).animate({ opacity: 'show' }, opts.openingspeed); } else { $(closesublink).insertafter($(this)).css({ display: 'none', top: 0 }).animate({ opacity: 'show' }, opts.openingspeed); } } // opening animation if(opts.pushdirectionleft == true) { // check if autoscroll is enabled if(opts.autoscroll == true) { // check if scroll position is not 0px if(getscrollposition >= 1) { subul.delay(opts.scrollspeed).css({ right: -(navwidth - opts.spacing) }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ right: -(navwidth - opts.spacing) }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } else { if(getscrollposition >= 1) { subul.css({ right: -(navwidth - opts.spacing), top: getscrollposition }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ right: -(navwidth - opts.spacing), top: 0 }).animate({ right: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } } else { if(opts.autoscroll == true) { subul.delay(opts.scrollspeed).css({ left: -(navwidth - opts.spacing) }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { if(getscrollposition >= 1) { subul.css({ left: -(navwidth - opts.spacing), top: getscrollposition }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } else { subul.css({ left: -(navwidth - opts.spacing), top: 0 }).animate({ left: 0, opacity: 'show', width: navwidth - opts.spacing }, opts.openingspeed); } } } return false; } } }); } }); }; })(jquery);