https://watertownveterinaryclinic.com/responsive/foundation-4.3.2/js/foundation/foundation.topbar.js

1/*jslint unparam: true, browser: true, indent: 2 */
2
3;(function ($, window, document, undefined) {
4  'use strict';
5
6  Foundation.libs.topbar = {
7    name : 'topbar',
8
9    version: '4.3.2',
10
11    settings : {
12      index : 0,
13      stickyClass : 'sticky',
14      custom_back_text: true,
15      back_text: 'Back',
16      is_hover: true,
17      mobile_show_parent_link: false,
18      scrolltop : true, // jump to top when sticky nav menu toggle is clicked
19      init : false
20    },
21
22    init : function (section, method, options) {
23      Foundation.inherit(this, 'data_options addCustomRule');
24      var self = this;
25
26      if (typeof method === 'object') {
27        $.extend(true, this.settings, method);
28      } else if (typeof options !== 'undefined') {
29        $.extend(true, this.settings, options);
30      }
31
32      if (typeof method !== 'string') {
33
34        $('.top-bar, [data-topbar]').each(function () {
35          $.extend(true, self.settings, self.data_options($(this)));
36          self.settings.$w = $(window);
37          self.settings.$topbar = $(this);
38          self.settings.$section = self.settings.$topbar.find('section');
39          self.settings.$titlebar = self.settings.$topbar.children('ul').first();
40          self.settings.$topbar.data('index', 0);
41
42          var topbarContainer = self.settings.$topbar.parent();
43          if(topbarContainer.hasClass('fixed') || topbarContainer.hasClass(self.settings.stickyClass)) {
44            self.settings.$topbar.data('height', self.outerHeight(topbarContainer));
45            self.settings.$topbar.data('stickyoffset', topbarContainer.offset().top);
46          } else {
47            self.settings.$topbar.data('height', self.outerHeight(self.settings.$topbar));
48          }
49
50          var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar);
51          self.settings.breakPoint = breakpoint.width();
52          breakpoint.remove();
53
54          self.assemble();
55
56          if (self.settings.is_hover) {
57            self.settings.$topbar.find('.has-dropdown').addClass('not-click');
58          }
59
60          // Pad body when sticky (scrolled) or fixed.
61          self.addCustomRule('.f-topbar-fixed { padding-top: ' + self.settings.$topbar.data('height') + 'px }');
62
63          if (self.settings.$topbar.parent().hasClass('fixed')) {
64            $('body').addClass('f-topbar-fixed');
65          }
66        });
67
68        if (!self.settings.init) {
69          this.events();
70        }
71
72        return this.settings.init;
73      } else {
74        // fire method
75        return this[method].call(this, options);
76      }
77    },
78
79    toggle: function() {
80      var self = this;
81      var topbar = $('.top-bar, [data-topbar]'),
82          section = topbar.find('section, .section');
83
84      if (self.breakpoint()) {
85        if (!self.rtl) {
86          section.css({left: '0%'});
87          section.find('>.name').css({left: '100%'});
88        } else {
89          section.css({right: '0%'});
90          section.find('>.name').css({right: '100%'});
91        }
92
93        section.find('li.moved').removeClass('moved');
94        topbar.data('index', 0);
95
96        topbar
97          .toggleClass('expanded')
98          .css('height', '');
99      }
100
101      if(self.settings.scrolltop)
102      {
103        if (!topbar.hasClass('expanded')) {
104          if (topbar.hasClass('fixed')) {
105            topbar.parent().addClass('fixed');
106            topbar.removeClass('fixed');
107            $('body').addClass('f-topbar-fixed');
108          }
109        } else if (topbar.parent().hasClass('fixed')) {
110          if (self.settings.scrolltop) {
111            topbar.parent().removeClass('fixed');
112            topbar.addClass('fixed');
113            $('body').removeClass('f-topbar-fixed');
114
115            window.scrollTo(0,0);
116          } else {
117              topbar.parent().removeClass('expanded');
118          }
119        }
120      } else {
121        if(topbar.parent().hasClass(self.settings.stickyClass)) {
122          topbar.parent().addClass('fixed');
123        }
124
125        if(topbar.parent().hasClass('fixed')) {
126          if (!topbar.hasClass('expanded')) {
127            topbar.removeClass('fixed');
128            topbar.parent().removeClass('expanded');
129            self.updateStickyPositioning();
130          } else {
131            topbar.addClass('fixed');
132            topbar.parent().addClass('expanded');
133          }
134        }
135      }
136    },
137
138    timer : null,
139
140    events : function () {
141      var self = this;
142      $(this.scope)
143        .off('.fndtn.topbar')
144        .on('click.fndtn.topbar', '.top-bar .toggle-topbar, [data-topbar] .toggle-topbar', function (e) {
145          e.preventDefault();

146          self.toggle();
147        })
148
149        .on('click.fndtn.topbar', '.top-bar li.has-dropdown', function (e) {
150          var li = $(this),
151              target = $(e.target),
152              topbar = li.closest('[data-topbar], .top-bar'),
153              is_hover = topbar.data('topbar');
154
155          if(target.data('revealId')) {
156            self.toggle();
157            return;
158          }
159
160          if (self.breakpoint()) return;
161          if (self.settings.is_hover && !Modernizr.touch) return;
162
163          e.stopImmediatePropagation();
164
165          if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
166            e.preventDefault();
167          }
168
169          if (li.hasClass('hover')) {
170            li
171              .removeClass('hover')
172              .find('li')
173              .removeClass('hover');
174
175            li.parents('li.hover')
176              .removeClass('hover');
177          } else {
178            li.addClass('hover');
179          }
180        })
181
182        .on('click.fndtn.topbar', '.top-bar .has-dropdown>a, [data-topbar] .has-dropdown>a', function (e) {
183          if (self.breakpoint() && $(window).width() != self.settings.breakPoint) {
184
185            e.preventDefault();
186
187            var $this = $(this),
188                topbar = $this.closest('.top-bar, [data-topbar]'),
189                section = topbar.find('section, .section'),
190                dropdownHeight = $this.next('.dropdown').outerHeight(),
191                $selectedLi = $this.closest('li');
192
193            topbar.data('index', topbar.data('index') + 1);
194            $selectedLi.addClass('moved');
195
196            if (!self.rtl) {
197              section.css({left: -(100 * topbar.data('index')) + '%'});
198              section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
199            } else {
200              section.css({right: -(100 * topbar.data('index')) + '%'});
201              section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
202            }
203
204            topbar.css('height', self.outerHeight($this.siblings('ul'), true) + self.settings.$topbar.data('height'));
205          }
206        });
207
208      $(window).on('resize.fndtn.topbar', function () {
209        if (typeof self.settings.$topbar === 'undefined') { return; }
210        var stickyContainer = self.settings.$topbar.parent('.' + this.settings.stickyClass);
211        var stickyOffset;
212
213        if (!self.breakpoint()) {
214          var doToggle = self.settings.$topbar.hasClass('expanded');
215          $('.top-bar, [data-topbar]')
216            .css('height', '')
217            .removeClass('expanded')
218            .find('li')
219            .removeClass('hover');
220
221            if(doToggle) {
222              self.toggle();
223            }
224        }
225
226        if(stickyContainer.length > 0) {
227          if(stickyContainer.hasClass('fixed')) {
228            // Remove the fixed to allow for correct calculation of the offset.
229            stickyContainer.removeClass('fixed');
230
231            stickyOffset = stickyContainer.offset().top;
232            if($(document.body).hasClass('f-topbar-fixed')) {
233              stickyOffset -= self.settings.$topbar.data('height');
234            }
235
236            self.settings.$topbar.data('stickyoffset', stickyOffset);
237            stickyContainer.addClass('fixed');
238          } else {
239            stickyOffset = stickyContainer.offset().top;
240            self.settings.$topbar.data('stickyoffset', stickyOffset);
241          }
242        }
243      }.bind(this));
244
245      $('body').on('click.fndtn.topbar', function (e) {
246        var parent = $(e.target).closest('li').closest('li.hover');
247
248        if (parent.length > 0) {
249          return;
250        }
251
252        $('.top-bar li, [data-topbar] li').removeClass('hover');
253      });
254
255      // Go up a level on Click
256      $(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back, [data-topbar] .has-dropdown .back', function (e) {
257        e.preventDefault();
258
259        var $this = $(this),
260            topbar = $this.closest('.top-bar, [data-topbar]'),
261            section = topbar.find('section, .section'),
262            $movedLi = $this.closest('li.moved'),
263            $previousLevelUl = $movedLi.parent();
264
265        topbar.data('index', topbar.data('index') - 1);
266
267        if (!self.rtl) {
268          section.css({left: -(100 * topbar.data('index')) + '%'});
269          section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
270        } else {
271          section.css({right: -(100 * topbar.data('index')) + '%'});
272          section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
273        }
274
275        if (topbar.data('index') === 0) {
276          topbar.css('height', '');
277        } else {
278          topbar.css('height', self.outerHeight($previousLevelUl, true) + self.settings.$topbar.data('height'));
279        }
280
281        setTimeout(function () {
282          $movedLi.removeClass('moved');
283        }, 300);
284      });
285    },
286
287    breakpoint : function () {
288      return $(document).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9');
289    },
290
291    assemble : function () {
292      var self = this;
293      // Pull element out of the DOM for manipulation
294      this.settings.$section.detach();
295
296      this.settings.$section.find('.has-dropdown>a').each(function () {
297        var $link = $(this),
298            $dropdown = $link.siblings('.dropdown'),
299            url = $link.attr('href');
300
301        if (self.settings.mobile_show_parent_link && url && url.length > 1) {
302          var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li><li><a class="parent-link js-generated" href="' + url + '">' + $link.text() +'</a></li>');
303        } else {
304          var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
305        }
306
307        // Copy link to subnav
308        if (self.settings.custom_back_text == true) {
309          $titleLi.find('h5>a').html(self.settings.back_text);
310        } else {
311          $titleLi.find('h5>a').html('&laquo; ' + $link.html());
312        }
313        $dropdown.prepend($titleLi);
314      });
315
316      // Put element back in the DOM
317      this.settings.$section.appendTo(this.settings.$topbar);
318
319      // check for sticky
320      this.sticky();
321    },
322
323    height : function (ul) {
324      var total = 0,
325          self = this;
326
327      ul.find('> li').each(function () { total += self.outerHeight($(this), true); });
328
329      return total;
330    },
331
332    sticky : function () {
333      var $window = $(window),
334          self = this;
335
336      $window.scroll(function() {
337        self.updateStickyPositioning();
338      });
339    },
340
341    updateStickyPositioning: function() {
342      var klass = '.' + this.settings.stickyClass;
343      var $window = $(window);
344
345      if ($(klass).length > 0) {
346        var distance = this.settings.$topbar.data('stickyoffset');
347        if (!$(klass).hasClass('expanded')) {
348          if ($window.scrollTop() > (distance)) {
349            if (!$(klass).hasClass('fixed')) {
350              $(klass).addClass('fixed');
351              $('body').addClass('f-topbar-fixed');
352            }
353          } else if ($window.scrollTop() <= distance) {
354            if ($(klass).hasClass('fixed')) {
355              $(klass).removeClass('fixed');
356              $('body').removeClass('f-topbar-fixed');
357            }
358          }
359        }
360      }
361    },
362
363    off : function () {
364      $(this.scope).off('.fndtn.topbar');
365      $(window).off('.fndtn.topbar');
366    },
367
368    reflow : function () {}
369  };
370}(Foundation.zj, this, this.document));