https://www.aspire-leeds.co.uk/javascripts/foundation/foundation.section.js

1/*jslint unparam: true, browser: true, indent: 2 */
2
3;(function ($, window, document, undefined) {
4  'use strict';
5
6  Foundation.libs.section = {
7    name: 'section',
8
9    version : '4.1.2',
10
11    settings : {
12      deep_linking: false,
13      one_up: true,
14      callback: function (){}
15    },
16
17    init : function (scope, method, options) {
18      var self = this;
19      Foundation.inherit(this, 'throttle data_options position_right offset_right');
20
21      if (typeof method != 'string') {
22        this.set_active_from_hash();
23        this.events();
24
25        return true;
26      } else {
27        return this[method].call(this, options);
28      }
29    },
30
31    events : function () {
32      var self = this;
33
34      $(this.scope)
35        .on('click.fndtn.section', '[data-section] .title, [data-section] [data-section-title]', function (e) {
36          var $this = $(this),
37              section = $this.closest('[data-section]');
38
39          self.toggle_active.call(this, e, self);
40        });
41
42      $(window)
43        .on('resize.fndtn.section', self.throttle(function () {
44          self.resize.call(this);
45        }, 30))
46        .on('hashchange', function () {
47          if (!self.settings.toggled){
48            self.set_active_from_hash();
49            $(this).trigger('resize');
50          }
51        }).trigger('resize');
52
53      $(document)
54        .on('click.fndtn.section', function (e) {
55          if ($(e.target).closest('.title, [data-section-title]').length < 1) {
56            $('[data-section="vertical-nav"], [data-section="horizontal-nav"]')
57              .find('section, .section, [data-section-region]')
58              .removeClass('active')
59              .attr('style', '');
60          }
61        });
62
63    },
64
65    toggle_active : function (e, self) {
66      var $this = $(this),
67          section = $this.closest('section, .section, [data-section-region]'),
68          content = section.find('.content, [data-section-content]'),
69          parent = section.closest('[data-section]'),
70          self = Foundation.libs.section,
71          settings = $.extend({}, self.settings, self.data_options(parent));
72
73      self.settings.toggled = true;
74
75      if (!settings.deep_linking && content.length > 0) {
76        e.preventDefault();
77      }
78
79      if (section.hasClass('active')) {
80        if (self.small(parent)
81          || self.is_vertical(parent)
82          || self.is_horizontal(parent)
83          || self.is_accordion(parent)) {
84          section
85            .removeClass('active')
86            .attr('style', '');
87        }
88      } else {
89        var prev_active_section = null,
90            title_height = self.outerHeight(section.find('.title, [data-section-title]'));
91
92        if (self.small(parent) || settings.one_up) {
93          prev_active_section = $this.closest('[data-section]').find('section.active, .section.active, .active[data-section-region]');
94
95          if (self.small(parent)) {
96            prev_active_section.attr('style', '');
97          } else {
98            prev_active_section.attr('style', 'visibility: hidden; padding-top: '+title_height+'px;');
99          }
100        }
101
102        if (self.small(parent)) {
103          section.attr('style', '');
104        } else {
105          section.css('padding-top', title_height);
106        }
107
108        section.addClass('active');
109
110        if (prev_active_section !== null) {
111          prev_active_section.removeClass('active').attr('style', '');
112        }
113      }
114
115      setTimeout(function () {
116        self.settings.toggled = false;
117      }, 300);
118
119      settings.callback();
120    },
121
122    resize : function () {
123      var sections = $('[data-section]'),
124          self = Foundation.libs.section;
125
126      sections.each(function() {
127        var $this = $(this),
128            active_section = $this.find('section.active, .section.active, .active[data-section-region]'),
129            settings = $.extend({}, self.settings, self.data_options($this));
130
131        if (active_section.length > 1) {
132          active_section
133            .not(':first')
134            .removeClass('active')
135            .attr('style', '');
136        } else if (active_section.length < 1
137          && !self.is_vertical($this)
138          && !self.is_horizontal($this)
139          && !self.is_accordion($this)) {
140
141          var first = $this.find('section, .section, [data-section-region]').first();
142
143          if (settings.one_up) {
144            first.addClass('active');
145          }
146
147          if (self.small($this)) {
148            first.attr('style', '');
149          } else {
150            first.css('padding-top', self.outerHeight(first.find('.title, [data-section-title]')));
151          }
152        }
153
154        if (self.small($this)) {
155          active_section.attr('style', '');
156        } else {
157          active_section.css('padding-top', self.outerHeight(active_section.find('.title, [data-section-title]')));
158        }
159
160        self.position_titles($this);
161
162        if (self.is_horizontal($this) && !self.small($this)) {
163          self.position_content($this);
164        } else {
165          self.position_content($this, false);
166        }
167      });
168    },
169
170    is_vertical : function (el) {
171      return /vertical-nav/i.test(el.data('section'));
172    },
173
174    is_horizontal : function (el) {
175      return /horizontal-nav/i.test(el.data('section'));
176    },
177
178    is_accordion : function (el) {
179      return /accordion/i.test(el.data('section'));
180    },
181
182    is_tabs : function (el) {
183      return /tabs/i.test(el.data('section'));
184    },
185
186    set_active_from_hash : function () {
187      var hash = window.location.hash.substring(1),
188          sections = $('[data-section]'),
189          self = this;
190
191      sections.each(function () {
192        var section = $(this),
193            settings = $.extend({}, self.settings, self.data_options(section));
194
195        if (hash.length > 0 && settings.deep_linking) {
196          section
197            .find('section, .section, [data-section-region]')
198            .attr('style', '')
199            .removeClass('active');
200          section
201            .find('.content[data-slug="' + hash + '"], [data-section-content][data-slug="' + hash + '"]')
202            .closest('section, .section, [data-section-region]')
203            .addClass('active');
204        }
205      });
206    },
207
208    position_titles : function (section, off) {
209      var titles = section.find('.title, [data-section-title]'),
210          previous_width = 0,
211          self = this;
212
213      if (typeof off === 'boolean') {
214        titles.attr('style', '');
215
216      } else {
217        titles.each(function () {
218          if (!self.rtl) {
219            $(this).css('left', previous_width);
220          } else {
221            $(this).css('right', previous_width);
222          }
223          previous_width += self.outerWidth($(this));
224        });
225      }
226    },
227
228    position_content : function (section, off) {
229      var titles = section.find('.title, [data-section-title]'),
230          content = section.find('.content, [data-section-content]'),
231          self = this;
232
233      if (typeof off === 'boolean') {
234        content.attr('style', '');
235        section.attr('style', '');
236      } else {
237        section.find('section, .section, [data-section-region]').each(function () {
238          var title = $(this).find('.title, [data-section-title]'),
239              content = $(this).find('.content, [data-section-content]');
240          if (!self.rtl) {
241            content.css({left: title.position().left - 1, top: self.outerHeight(title) - 2});
242          } else {
243            content.css({right: self.position_right(title) + 1, top: self.outerHeight(title) - 2});
244          }
245        });
246
247        // temporary work around for Zepto outerheight calculation issues.
248        if (typeof Zepto === 'function') {
249          section.height(this.outerHeight(titles.first()));
250        } else {
251          section.height(this.outerHeight(titles.first()) - 2);
252        }
253      }
254
255    },
256
257    position_right : function (el) {
258      var section = el.closest('[data-section]'),
259          section_width = el.closest('[data-section]').width(),
260          offset = section.find('.title, [data-section-title]').length;
261      return (section_width - el.position().left - el.width() * (el.index() + 1) - offset);
262    },
263
264    reflow : function () {
265      $('[data-section]').trigger('resize');
266    },
267
268    small : function (el) {
269      var settings = $.extend({}, this.settings, this.data_options(el));
270      if (this.is_tabs(el)) {
271        return false;
272      }
273      if (el && this.is_accordion(el)) {
274        return true;
275      }
276      if ($('html').hasClass('lt-ie9')) {
277        return true;
278      }
279      if ($('html').hasClass('ie8compat')) {
280        return true;
281      }
282      return $(this.scope).width() < 768;
283    },
284
285    off : function () {
286      $(this.scope).off('.fndtn.section');
287      $(window).off('.fndtn.section');
288      $(document).off('.fndtn.section')
289    }
290  };
291}(Foundation.zj, this, this.document));