js/foundation/foundation.topbar.js

   1 ;
   2 (function ($, window, document, undefined) {
   3     'use strict';
   4
   5     Foundation.libs.topbar = {
   6         name: 'topbar',
   7
   8         version: '5.5.0',
   9
  10         settings: {
  11             index: 0,
  12             sticky_class: 'sticky',
  13             custom_back_text: true,
  14             back_text: 'Back',
  15             mobile_show_parent_link: true,
  16             is_hover: true,
  17             scrolltop: true, // jump to top when sticky nav menu toggle is clicked
  18             sticky_on: 'all'
  19         },
  20
  21         init: function (section, method, options) {
  22             Foundation.inherit(this, 'add_custom_rule register_media throttle');
  23             var self = this;
  24
  25             self.register_media('topbar', 'foundation-mq-topbar');
  26
  27             this.bindings(method, options);
  28
  29             self.S('[' + this.attr_name() + ']', this.scope).each(function () {
  30                 var topbar = $(this),
  31                     settings = topbar.data(self.attr_name(true) + '-init'),
  32                     section = self.S('section, .top-bar-section', this);
  33                 topbar.data('index', 0);
  34                 var topbarContainer = topbar.parent();
  35                 if (topbarContainer.hasClass('fixed') || self.is_sticky(topbar, topbarContainer, settings)) {
  36                     self.settings.sticky_class = settings.sticky_class;
  37                     self.settings.sticky_topbar = topbar;
  38                     topbar.data('height', topbarContainer.outerHeight());
  39                     topbar.data('stickyoffset', topbarContainer.offset().top);
  40                 } else {
  41                     topbar.data('height', topbar.outerHeight());
  42                 }
  43
  44                 if (!settings.assembled) {
  45                     self.assemble(topbar);
  46                 }
  47
  48                 if (settings.is_hover) {
  49                     self.S('.has-dropdown', topbar).addClass('not-click');
  50                 } else {
  51                     self.S('.has-dropdown', topbar).removeClass('not-click');
  52                 }
  53
  54                 // Pad body when sticky (scrolled) or fixed.
  55                 self.add_custom_rule('.f-topbar-fixed { padding-top: ' + topbar.data('height') + 'px }');
  56
  57                 if (topbarContainer.hasClass('fixed')) {
  58                     self.S('body').addClass('f-topbar-fixed');
  59                 }
  60             });
  61
  62         },
  63
  64         is_sticky: function (topbar, topbarContainer, settings) {
  65             var sticky = topbarContainer.hasClass(settings.sticky_class);
  66
  67             if (sticky && settings.sticky_on === 'all') {
  68                 return true;
  69             } else if (sticky && this.small() && settings.sticky_on === 'small') {
  70                 return (matchMedia(Foundation.media_queries.small).matches && !matchMedia(Foundation.media_queries.medium).matches && !matchMedia(Foundation.media_queries.large).matches);
  71                 //return true;
  72             } else if (sticky && this.medium() && settings.sticky_on === 'medium') {
  73                 return (matchMedia(Foundation.media_queries.small).matches && matchMedia(Foundation.media_queries.medium).matches && !matchMedia(Foundation.media_queries.large).matches);
  74                 //return true;
  75             } else if (sticky && this.large() && settings.sticky_on === 'large') {
  76                 return (matchMedia(Foundation.media_queries.small).matches && matchMedia(Foundation.media_queries.medium).matches &&
  77                 matchMedia(Foundation.media_queries.large).matches);
  78                 //return true;
  79             }
  80
  81             return false;
  82         },
  83
  84         toggle: function (toggleEl) {
  85             var self = this,
  86                 topbar;
  87
  88             if (toggleEl) {
  89                 topbar = self.S(toggleEl).closest('[' + this.attr_name() + ']');
  90             } else {
  91                 topbar = self.S('[' + this.attr_name() + ']');
  92             }
  93
  94             var settings = topbar.data(this.attr_name(true) + '-init');
  95
  96             var section = self.S('section, .top-bar-section', topbar);
  97
  98             if (self.breakpoint()) {
  99                 if (!self.rtl) {
 100                     section.css({left: '0%'});
 101                     $('>.name', section).css({left: '100%'});
 102                 } else {
 103                     section.css({right: '0%'});
 104                     $('>.name', section).css({right: '100%'});
 105                 }
 106
 107                 self.S('li.moved', section).removeClass('moved');
 108                 topbar.data('index', 0);
 109
 110                 topbar
 111                     .toggleClass('expanded')
 112                     .css('height', '');
 113             }
 114
 115             if (settings.scrolltop) {
 116                 if (!topbar.hasClass('expanded')) {
 117                     if (topbar.hasClass('fixed')) {
 118                         topbar.parent().addClass('fixed');
 119                         topbar.removeClass('fixed');
 120                         self.S('body').addClass('f-topbar-fixed');
 121                     }
 122                 } else if (topbar.parent().hasClass('fixed')) {
 123                     if (settings.scrolltop) {
 124                         topbar.parent().removeClass('fixed');
 125                         topbar.addClass('fixed');
 126                         self.S('body').removeClass('f-topbar-fixed');
 127
 128                         window.scrollTo(0, 0);
 129                     } else {
 130                         topbar.parent().removeClass('expanded');
 131                     }
 132                 }
 133             } else {
 134                 if (self.is_sticky(topbar, topbar.parent(), settings)) {
 135                     topbar.parent().addClass('fixed');
 136                 }
 137
 138                 if (topbar.parent().hasClass('fixed')) {
 139                     if (!topbar.hasClass('expanded')) {
 140                         topbar.removeClass('fixed');
 141                         topbar.parent().removeClass('expanded');
 142                         self.update_sticky_positioning();
 143                     } else {
 144                         topbar.addClass('fixed');
 145                         topbar.parent().addClass('expanded');
 146                         self.S('body').addClass('f-topbar-fixed');
 147                     }
 148                 }
 149             }
 150         },
 151
 152         timer: null,
 153
 154         events: function (bar) {
 155             var self = this,
 156                 S = this.S;
 157
 158             S(this.scope)
 159                 .off('.topbar')
 160                 .on('click.fndtn.topbar', '[' + this.attr_name() + '] .toggle-topbar', function (e) {
 161                     e.preventDefault();
 162                     self.toggle(this);
 163                 })
 164                 .on('click.fndtn.topbar', '.top-bar .top-bar-section li a[href^="#"],[' + this.attr_name() + '] .top-bar-section li a[href^="#"]', function (e) {
 165                     var li = $(this).closest('li');
 166                     if (self.breakpoint() && !li.hasClass('back') && !li.hasClass('has-dropdown')) {
 167                         self.toggle();
 168                     }
 169                 })
 170                 .on('click.fndtn.topbar', '[' + this.attr_name() + '] li.has-dropdown', function (e) {
 171                     var li = S(this),
 172                         target = S(e.target),
 173                         topbar = li.closest('[' + self.attr_name() + ']'),
 174                         settings = topbar.data(self.attr_name(true) + '-init');
 175
 176                     if (target.data('revealId')) {
 177                         self.toggle();
 178                         return;
 179                     }
 180
 181                     if (self.breakpoint()) return;
 182                     if (settings.is_hover && !Modernizr.touch) return;
 183
 184                     e.stopImmediatePropagation();
 185
 186                     if (li.hasClass('hover')) {
 187                         li
 188                             .removeClass('hover')
 189                             .find('li')
 190                             .removeClass('hover');
 191
 192                         li.parents('li.hover')
 193                             .removeClass('hover');
 194                     } else {
 195                         li.addClass('hover');
 196
 197                         $(li).siblings().removeClass('hover');
 198
 199                         if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
 200                             e.preventDefault();
 201                         }
 202                     }
 203                 })
 204                 .on('click.fndtn.topbar', '[' + this.attr_name() + '] .has-dropdown>a', function (e) {
 205                     if (self.breakpoint()) {
 206
 207                         e.preventDefault();
 208
 209                         var $this = S(this),
 210                             topbar = $this.closest('[' + self.attr_name() + ']'),
 211                             section = topbar.find('section, .top-bar-section'),
 212                             dropdownHeight = $this.next('.dropdown').outerHeight(),
 213                             $selectedLi = $this.closest('li');
 214
 215                         topbar.data('index', topbar.data('index') + 1);
 216                         $selectedLi.addClass('moved');
 217
 218                         if (!self.rtl) {
 219                             section.css({left: -(100 * topbar.data('index')) + '%'});
 220                             section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
 221                         } else {
 222                             section.css({right: -(100 * topbar.data('index')) + '%'});
 223                             section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
 224                         }
 225
 226                         topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
 227                     }
 228                 });
 229
 230             S(window).off('.topbar').on('resize.fndtn.topbar', self.throttle(function () {
 231                 self.resize.call(self);
 232             }, 50)).trigger('resize').trigger('resize.fndtn.topbar').load(function () {
 233                 // Ensure that the offset is calculated after all of the pages resources have loaded
 234                 S(this).trigger('resize.fndtn.topbar');
 235             });
 236
 237             S('body').off('.topbar').on('click.fndtn.topbar', function (e) {
 238                 var parent = S(e.target).closest('li').closest('li.hover');
 239
 240                 if (parent.length > 0) {
 241                     return;
 242                 }
 243
 244                 S('[' + self.attr_name() + '] li.hover').removeClass('hover');
 245             });
 246
 247             // Go up a level on Click
 248             S(this.scope).on('click.fndtn.topbar', '[' + this.attr_name() + '] .has-dropdown .back', function (e) {
 249                 e.preventDefault();
 250
 251                 var $this = S(this),
 252                     topbar = $this.closest('[' + self.attr_name() + ']'),
 253                     section = topbar.find('section, .top-bar-section'),
 254                     settings = topbar.data(self.attr_name(true) + '-init'),
 255                     $movedLi = $this.closest('li.moved'),
 256                     $previousLevelUl = $movedLi.parent();
 257
 258                 topbar.data('index', topbar.data('index') - 1);
 259
 260                 if (!self.rtl) {
 261                     section.css({left: -(100 * topbar.data('index')) + '%'});
 262                     section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
 263                 } else {
 264                     section.css({right: -(100 * topbar.data('index')) + '%'});
 265                     section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
 266                 }
 267
 268                 if (topbar.data('index') === 0) {
 269                     topbar.css('height', '');
 270                 } else {
 271                     topbar.css('height', $previousLevelUl.outerHeight(true) + topbar.data('height'));
 272                 }
 273
 274                 setTimeout(function () {
 275                     $movedLi.removeClass('moved');
 276                 }, 300);
 277             });
 278
 279             // Show dropdown menus when their items are focused
 280             S(this.scope).find('.dropdown a')
 281                 .focus(function () {
 282                     $(this).parents('.has-dropdown').addClass('hover');
 283                 })
 284                 .blur(function () {
 285                     $(this).parents('.has-dropdown').removeClass('hover');
 286                 });
 287         },
 288
 289         resize: function () {
 290             var self = this;
 291             self.S('[' + this.attr_name() + ']').each(function () {
 292                 var topbar = self.S(this),
 293                     settings = topbar.data(self.attr_name(true) + '-init');
 294
 295                 var stickyContainer = topbar.parent('.' + self.settings.sticky_class);
 296                 var stickyOffset;
 297
 298                 if (!self.breakpoint()) {
 299                     var doToggle = topbar.hasClass('expanded');
 300                     topbar
 301                         .css('height', '')
 302                         .removeClass('expanded')
 303                         .find('li')
 304                         .removeClass('hover');
 305
 306                     if (doToggle) {
 307                         self.toggle(topbar);
 308                     }
 309                 }
 310
 311                 if (self.is_sticky(topbar, stickyContainer, settings)) {
 312                     if (stickyContainer.hasClass('fixed')) {
 313                         // Remove the fixed to allow for correct calculation of the offset.
 314                         stickyContainer.removeClass('fixed');
 315
 316                         stickyOffset = stickyContainer.offset().top;
 317                         if (self.S(document.body).hasClass('f-topbar-fixed')) {
 318                             stickyOffset -= topbar.data('height');
 319                         }
 320
 321                         topbar.data('stickyoffset', stickyOffset);
 322                         stickyContainer.addClass('fixed');
 323                     } else {
 324                         stickyOffset = stickyContainer.offset().top;
 325                         topbar.data('stickyoffset', stickyOffset);
 326                     }
 327                 }
 328
 329             });
 330         },
 331
 332         breakpoint: function () {
 333             return !matchMedia(Foundation.media_queries['topbar']).matches;
 334         },
 335
 336         small: function () {
 337             return matchMedia(Foundation.media_queries['small']).matches;
 338         },
 339
 340         medium: function () {
 341             return matchMedia(Foundation.media_queries['medium']).matches;
 342         },
 343
 344         large: function () {
 345             return matchMedia(Foundation.media_queries['large']).matches;
 346         },
 347
 348         assemble: function (topbar) {
 349             var self = this,
 350                 settings = topbar.data(this.attr_name(true) + '-init'),
 351                 section = self.S('section, .top-bar-section', topbar);
 352
 353             // Pull element out of the DOM for manipulation
 354             section.detach();
 355
 356             self.S('.has-dropdown>a', section).each(function () {
 357                 var $link = self.S(this),
 358                     $dropdown = $link.siblings('.dropdown'),
 359                     url = $link.attr('href'),
 360                     $titleLi;
 361
 362
 363                 if (!$dropdown.find('.title.back').length) {
 364
 365                     if (settings.mobile_show_parent_link == true && url) {
 366                         $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link show-for-small-only"><a class="parent-link js-generated" href="' + url + '">' + $link.html() + '</a></li>');
 367                     } else {
 368                         $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
 369                     }
 370
 371                     // Copy link to subnav
 372                     if (settings.custom_back_text == true) {
 373                         $('h5>a', $titleLi).html(settings.back_text);
 374                     } else {
 375                         $('h5>a', $titleLi).html('&laquo; ' + $link.html());
 376                     }
 377                     $dropdown.prepend($titleLi);
 378                 }
 379             });
 380
 381             // Put element back in the DOM
 382             section.appendTo(topbar);
 383
 384             // check for sticky
 385             this.sticky();
 386
 387             this.assembled(topbar);
 388         },
 389
 390         assembled: function (topbar) {
 391             topbar.data(this.attr_name(true), $.extend({}, topbar.data(this.attr_name(true)), {assembled: true}));
 392         },
 393
 394         height: function (ul) {
 395             var total = 0,
 396                 self = this;
 397
 398             $('> li', ul).each(function () {
 399                 total += self.S(this).outerHeight(true);
 400             });
 401
 402             return total;
 403         },
 404
 405         sticky: function () {
 406             var self = this;
 407
 408             this.S(window).on('scroll', function () {
 409                 self.update_sticky_positioning();
 410             });
 411         },
 412
 413         update_sticky_positioning: function () {
 414             var klass = '.' + this.settings.sticky_class,
 415                 $window = this.S(window),
 416                 self = this;
 417
 418             if (self.settings.sticky_topbar && self.is_sticky(this.settings.sticky_topbar, this.settings.sticky_topbar.parent(), this.settings)) {
 419                 var distance = this.settings.sticky_topbar.data('stickyoffset');
 420                 if (!self.S(klass).hasClass('expanded')) {
 421                     if ($window.scrollTop() > (distance)) {
 422                         if (!self.S(klass).hasClass('fixed')) {
 423                             self.S(klass).addClass('fixed');
 424                             self.S('body').addClass('f-topbar-fixed');
 425                         }
 426                     } else if ($window.scrollTop() <= distance) {
 427                         if (self.S(klass).hasClass('fixed')) {
 428                             self.S(klass).removeClass('fixed');
 429                             self.S('body').removeClass('f-topbar-fixed');
 430                         }
 431                     }
 432                 }
 433             }
 434         },
 435
 436         off: function () {
 437             this.S(this.scope).off('.fndtn.topbar');
 438             this.S(window).off('.fndtn.topbar');
 439         },
 440
 441         reflow: function () {
 442         }
 443     };
 444 }(jQuery, window, window.document));