https://doktor.is/wp-content/themes/doktor/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.2.2',
10
11    settings : {
12      index : 0,
13      stickyClass : 'sticky',
14      custom_back_text: true,
15      back_text: 'Back',
16      is_hover: true,
17      scrolltop : true, // jump to top when sticky nav menu toggle is clicked
18      init : false
19    },
20
21    init : function (section, method, options) {
22      Foundation.inherit(this, 'data_options');
23      var self = this;
24
25      if (typeof method === 'object') {
26        $.extend(true, this.settings, method);
27      } else if (typeof options !== 'undefined') {
28        $.extend(true, this.settings, options);
29      }
30
31      if (typeof method !== 'string') {
32
33        $('.top-bar, [data-topbar]').each(function () {
34          $.extend(true, self.settings, self.data_options($(this)));
35          self.settings.$w = $(window);
36          self.settings.$topbar = $(this);
37          self.settings.$section = self.settings.$topbar.find('section');
38          self.settings.$titlebar = self.settings.$topbar.children('ul').first();
39          self.settings.$topbar.data('index', 0);
40
41          var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar);
42          self.settings.breakPoint = breakpoint.width();
43          breakpoint.remove();
44
45          self.assemble();
46
47          if (self.settings.$topbar.parent().hasClass('fixed')) {
48            $('body').css('padding-top', self.outerHeight(self.settings.$topbar));
49          }
50        });
51
52        if (!self.settings.init) {
53          this.events();
54        }
55
56        return this.settings.init;
57      } else {
58        // fire method
59        return this[method].call(this, options);
60      }
61    },
62
63    events : function () {
64      var self = this;
65      var offst = this.outerHeight($('.top-bar, [data-topbar]'));
66      $(this.scope)
67        .off('.fndtn.topbar')
68        .on('click.fndtn.topbar', '.top-bar .toggle-topbar, [data-topbar] .toggle-topbar', function (e) {
69          var topbar = $(this).closest('.top-bar, [data-topbar]'),
70              section = topbar.find('section, .section'),
71              titlebar = topbar.children('ul').first();
72
73          e.preventDefault();
74
75          if (self.breakpoint()) {
76            if (!self.rtl) {
77              section.css({left: '0%'});
78              section.find('>.name').css({left: '100%'});
79            } else {
80              section.css({right: '0%'});
81              section.find('>.name').css({right: '100%'});
82            }
83
84            section.find('li.moved').removeClass('moved');
85            topbar.data('index', 0);
86
87            topbar
88              .toggleClass('expanded')
89              .css('max-height', '');
90          }
91
92          if (!topbar.hasClass('expanded')) {
93            if (topbar.hasClass('fixed')) {
94              topbar.parent().addClass('fixed');
95              topbar.removeClass('fixed');
96              $('body').css('padding-top',offst);
97            }
98          } else if (topbar.parent().hasClass('fixed')) {
99            topbar.parent().removeClass('fixed');
100            topbar.addClass('fixed');
101            $('body').css('padding-top','0');
102
103            if (self.settings.scrolltop) {
104              window.scrollTo(0,0);
105            }
106          }
107        })
108
109        .on('mouseenter mouseleave', '.top-bar li', function (e) {
110          if (!self.settings.is_hover) return;
111
112          if (/enter|over/i.test(e.type)) {
113            $(this).addClass('hover');
114          } else {
115            $(this).removeClass('hover');
116          }
117        })
118
119        .on('click.fndtn.topbar', '.top-bar li.has-dropdown', function (e) {
120          if (self.breakpoint()) return;
121
122          var li = $(this),
123              target = $(e.target),
124              topbar = li.closest('[data-topbar], .top-bar'),
125              is_hover = topbar.data('topbar');
126
127          if (self.settings.is_hover && !Modernizr.touch) return;
128
129          e.stopImmediatePropagation();
130
131          if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
132            e.preventDefault();
133          }
134
135          if (li.hasClass('hover')) {
136            li
137              .removeClass('hover')
138              .find('li')
139              .removeClass('hover');
140          } else {
141            li.addClass('hover');
142          }
143        })
144
145        .on('click.fndtn.topbar', '.top-bar .has-dropdown>a, [data-topbar] .has-dropdown>a', function (e) {
146          if (self.breakpoint()) {
147            e.preventDefault();
148
149            var $this = $(this),
150                topbar = $this.closest('.top-bar, [data-topbar]'),
151                section = topbar.find('section, .section'),
152                titlebar = topbar.children('ul').first(),
153                dropdownHeight = $this.next('.dropdown').outerHeight(),
154                $selectedLi = $this.closest('li');
155
156            topbar.data('index', topbar.data('index') + 1);
157            $selectedLi.addClass('moved');
158
159            if (!self.rtl) {
160              section.css({left: -(100 * topbar.data('index')) + '%'});
161              section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
162            } else {
163              section.css({right: -(100 * topbar.data('index')) + '%'});
164              section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
165            }
166
167            topbar.css('max-height', self.height($this.siblings('ul')) + self.outerHeight(titlebar, true));
168          }
169        });
170
171      $(window).on('resize.fndtn.topbar', function () {
172        if (!self.breakpoint()) {
173          $('.top-bar, [data-topbar]')
174            .css('max-height', '')
175            .removeClass('expanded')
176            .find('li')
177            .removeClass('hover');
178        }
179      }.bind(this));
180
181      $('body').on('click.fndtn.topbar', function (e) {
182        var parent = $(e.target).closest('[data-topbar], .top-bar');
183
184        if (parent.length > 0) {
185          return;
186        }
187
188        $('.top-bar li, [data-topbar] li').removeClass('hover');
189      });
190
191      // Go up a level on Click
192      $(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back, [data-topbar] .has-dropdown .back', function (e) {
193        e.preventDefault();
194
195        var $this = $(this),
196            topbar = $this.closest('.top-bar, [data-topbar]'),
197            titlebar = topbar.children('ul').first(),
198            section = topbar.find('section, .section'),
199            $movedLi = $this.closest('li.moved'),
200            $previousLevelUl = $movedLi.parent();
201
202        topbar.data('index', topbar.data('index') - 1);
203
204        if (!self.rtl) {
205          section.css({left: -(100 * topbar.data('index')) + '%'});
206          section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
207        } else {
208          section.css({right: -(100 * topbar.data('index')) + '%'});
209          section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
210        }
211
212        if (topbar.data('index') === 0) {
213          topbar.css('max-height', '');
214        } else {
215          topbar.css('max-height', self.height($previousLevelUl) + self.outerHeight(titlebar, true));
216        }
217
218        setTimeout(function () {
219          $movedLi.removeClass('moved');
220        }, 300);
221      });
222    },
223
224    breakpoint : function () {
225      return $(document).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9');
226    },
227
228    assemble : function () {
229      var self = this;
230      // Pull element out of the DOM for manipulation
231      this.settings.$section.detach();
232
233      this.settings.$section.find('.has-dropdown>a').each(function () {
234        var $link = $(this),
235            $dropdown = $link.siblings('.dropdown'),
236            url = $link.attr('href');
237
238        if (url && url.length > 1) {
239          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>');
240        } else {
241          var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
242        }
243
244        // Copy link to subnav
245        if (self.settings.custom_back_text == true) {
246          $titleLi.find('h5>a').html('&laquo; ' + self.settings.back_text);
247        } else {
248          $titleLi.find('h5>a').html('&laquo; ' + $link.html());
249        }
250        $dropdown.prepend($titleLi);
251      });
252
253      // Put element back in the DOM
254      this.settings.$section.appendTo(this.settings.$topbar);
255
256      // check for sticky
257      this.sticky();
258    },
259
260    height : function (ul) {
261      var total = 0,
262          self = this;
263
264      ul.find('> li').each(function () { total += self.outerHeight($(this), true); });
265
266      return total;
267    },
268
269    sticky : function () {
270      var klass = '.' + this.settings.stickyClass;
271      if ($(klass).length > 0) {
272        var distance = $(klass).length ? $(klass).offset().top: 0,
273            $window = $(window);
274            var offst = this.outerHeight($('.top-bar'));
275
276          $window.scroll(function() {
277            if ($window.scrollTop() >= (distance)) {
278              $(klass).addClass("fixed");
279              $('body').css('padding-top',offst);
280            }
281
282            else if ($window.scrollTop() < distance) {
283              $(klass).removeClass("fixed");
284              $('body').css('padding-top','0');
285            }
286        });
287      }
288    },
289
290    off : function () {
291      $(this.scope).off('.fndtn.topbar');
292      $(window).off('.fndtn.topbar');
293    },
294
295    reflow : function () {}
296  };
297}(Foundation.zj, this, this.document));