;(function ( $, window, document, undefined ) { $body = $( 'body' ); $.cbflynav = function( options, element ) { this.$el = $( element ); this._init( options ); }; $.cbflynav.defaults = { trigger: '.btn-flyout-trigger' ,cbnavwrapper: '#left-flyout-nav' ,cbcontentwrapper: '.layout-right-content' ,minwidth: 768 }; $.cbflynav.prototype = { _init : function( options ) { this.options = $.extend({}, $.cbflynav.defaults, options); //cache elements and intit variables this._config(); //initialize event listenters this._initevents(); }, _config : function() { this.open = false; this.copied = false; this.subnavopen = false; this.wasopened = false; this.$cbwrap = $('
'); this.$trigger = $(this.options.trigger); this.$regmenus = this.$el.children( 'ul.nav.nav-pill' ); this.$newmenus = $(this.$el.clone()); this.$contentmask = $(''); this.$navmask = $(''); this.$opensubnav = ""; }, _initevents : function() { var self = this; self.$trigger.on('click.cbflynav', function(e) { e.stoppropagation(); if ( !self.open ) { if ( !self.copied ) { self._copynav(); } self._opennav(); } else { self._closenav(); } self.wasopened = true; //console.log('wasopened: '+self.wasopened+ '. open? '+self.open); }); //hide menu when window is bigger than allowed minwidth $(window).on('resize', function() { var windowwidth = $(window).width(); if(self.open && windowwidth > self.options.minwidth){ self._closenav(); } }); //hide menu when body clicked. usign an a tag to mask content. self.$contentmask.on('click.cbflynav', function( e ) { e.preventdefault(); self._closenav(); }); self.$navmask.on('click.cbflynav', function( e ) { e.preventdefault(); self._closesubnav(); }); //handle clicks inside menu self.$newmenus.on( 'click.cbflynav', function( e ) { e.stoppropagation(); var $menu = $(this); //console.log("menu clicked"); }); //handle menu item clicks self.$newmenus.children().find('li').on('click.cbflynav', function(e) { e.stoppropagation(); var $item = $(this), $subnav = $item.find('ul.subnav'); if ($subnav.length > 0) { //item with subnav clicked e.preventdefault(); //console.log("item with subnav clicked"); $subnav.css('height', window.innerheight); self._opensubnav($subnav); } else { //item without subnav clicked //console.log("item without subnav clicked"); } }); }, _copynav : function() { var self = this; //console.log("copying nav"); var newwrap = $('
'); self.$newmenus.children( 'ul.nav.nav-pill' ).each(function() { $this = $(this); $this.removeclass('nav-pill').addclass('nav-flyout'); $this.find('.caret').replacewith(''); }); $(self.options.cbnavwrapper).prepend(self.$cbwrap.prepend(self.$newmenus)); self.copied = true; }, opennav : function() { if ( !this.open ) { this._opennav(); } }, _opennav : function() { var self = this; //console.log("opening nav"); $(self.options.cbnavwrapper).addclass('iscbflynavactive'); $(self.options.cbcontentwrapper) .addclass('iscbflynavactive') .append(self.$contentmask); self.open = true; }, closenav : function() { if ( !this.close ) { this._closenav(); } }, _closenav : function() { var self = this; //console.log("closing nav"); $(self.options.cbnavwrapper).removeclass('iscbflynavactive'); $(self.options.cbcontentwrapper).removeclass('iscbflynavactive'); if(self.subnavopen) { self._closesubnav(); } self.$contentmask.detach(); self.open = false; }, _opensubnav : function($subnav) { var self = this, $parent = $subnav.parent('li'); $subnav.addclass('is-subnav-visible'); $parent.addclass('is-active'); self.$newmenus.addclass('is-inactive'); self.$cbwrap.append(self.$navmask); $subnav.on('click.cbflynav', function(e) { e.stoppropagation(); }); self.$opensubnav = $subnav; self.subnavopen = true; }, _closesubnav : function() { var self = this, $parent = self.$opensubnav.parent('li'); self.$opensubnav.removeclass('is-subnav-visible'); $parent.removeclass('is-active'); self.$newmenus.removeclass('is-inactive'); self.$navmask.detach(); self.$opensubnav.off('click.cbflynav'); self.$opensubnav = ""; self.subnavopen = false; } }; $.fn.cbflyout = function ( options ) { this.each(function() { var instance = $.data( this, 'cbflyout' ); if ( instance ) { instance._init(); } else { instance = $.data( this, 'cbflyout', new $.cbflynav( options, this ) ); } }); return this; }; }(jquery, window, document));