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