1/** 2* Gumby Navbar 3*/ 4!function($) { 5 6 'use strict'; 7 8 // define and init module on touch enabled devices only 9 if(!Gumby.gumbyTouch) { 10 return; 11 } 12 13 function Navbar($el) { 14 15 Gumby.debug('Initializing Navbar', $el); 16 17 this.$el = $el; 18 this.$dropDowns = this.$el.find('li:has(.dropdown)'); 19 var scope = this; 20 21 var persist = this.$el.attr('gumby-persist'); 22 if(typeof persist === 'undefined' && persist !== 'false') { 23 this.$el.find('li:not(:has(.dropdown)) a').on(Gumby.click, function() { 24 scope.$el.find('ul').removeClass('active'); 25 }); 26 } 27 28 // when navbar items 29 this.$dropDowns 30 // are tapped hide/show dropdowns 31 .on(Gumby.click, this.toggleDropdown) 32 // are swiped right open link 33 .on('swiperight', this.openLink); 34 35 // if there's a link set 36 if(this.$dropDowns.children('a').attr('href') !== '#') { 37 // append an icon 38 this.$dropDowns.children('a').append('<i class="icon-popup"></i>').children('i') 39 // and bind to click event to open link 40 .on(Gumby.click, this.openLink); 41 } 42 43 // override with childlinks 44 this.$el.find('li:not(:has(.dropdown)) a[href]').on(Gumby.click, this.openLink); 45 } 46 47 Navbar.prototype.toggleDropdown = function(e) { 48 e.preventDefault(); 49 50 if($(this).parents('.dropdown')) { 51 e.stopImmediatePropagation(); 52 } 53 54 if($(e.target).is('i')) { 55 return; 56 } 57 58 var $this = $(this); 59 60 if($this.hasClass('active')) { 61 $this.removeClass('active'); 62 } else { 63 $this.addClass('active'); 64 } 65 }; 66 67 // handle opening list item link 68 Navbar.prototype.openLink = function(e) { 69 e.preventDefault(); 70 71 var $this = $(this), 72 $el = $this, href; 73 74 // tapped icon 75 if($this.is('i')) { 76 $el = $this.parent('a'); 77 // swiped li 78 } else if($this.is('li')) { 79 $el = $this.children('a'); 80 } 81 82 href = $el.attr('href'); 83 84 // open in new window 85 if($el.attr('target') == 'blank') { 86 window.open(href); 87 // regular relocation 88 } else { 89 window.location = href; 90 } 91 }; 92 93 // add initialisation 94 Gumby.addInitalisation('navbar', function() { 95 $('.navbar').each(function() { 96 var $this = $(this); 97 // this element has already been initialized 98 if($this.data('isNavbar')) { 99 return true; 100 } 101 // mark element as initialized 102 $this.data('isNavbar', true); 103 new Navbar($this); 104 }); 105 }); 106 107 // register UI module 108 Gumby.UIModule({ 109 module: 'navbar', 110 events: [], 111 init: function() { 112 Gumby.initialize('navbar'); 113 } 114 }); 115}(jQuery); 116