root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / foundation / foundation.topbar.js @ b3c1328b
History | View | Annotate | Download (6.8 kB)
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.0.0', |
10 |
|
11 |
settings : {
|
12 |
index : 0, |
13 |
stickyClass : 'sticky', |
14 |
custom_back_text: true, |
15 |
back_text: 'Back', |
16 |
init : false |
17 |
}, |
18 |
|
19 |
init : function (scope, method, options) { |
20 |
var self = this; |
21 |
this.scope = scope || this.scope; |
22 |
|
23 |
if (typeof method === 'object') { |
24 |
$.extend(true, this.settings, method); |
25 |
} |
26 |
|
27 |
if (typeof method != 'string') { |
28 |
|
29 |
$('.top-bar').each(function () { |
30 |
self.settings.$w = $(window); |
31 |
self.settings.$topbar = $(this); |
32 |
self.settings.$section = self.settings.$topbar.find('section'); |
33 |
self.settings.$titlebar = self.settings.$topbar.children('ul').first(); |
34 |
|
35 |
|
36 |
self.settings.$topbar.data('index', 0); |
37 |
|
38 |
var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar); |
39 |
self.settings.breakPoint = breakpoint.width(); |
40 |
breakpoint.remove(); |
41 |
|
42 |
self.assemble(); |
43 |
|
44 |
if (self.settings.$topbar.parent().hasClass('fixed')) { |
45 |
$('body').css('padding-top', self.outerHeight(self.settings.$topbar)); |
46 |
} |
47 |
}); |
48 |
|
49 |
if (!self.settings.init) {
|
50 |
this.events();
|
51 |
} |
52 |
|
53 |
return this.settings.init; |
54 |
} else {
|
55 |
// fire method
|
56 |
return this[method].call(this, options); |
57 |
} |
58 |
}, |
59 |
|
60 |
events : function () { |
61 |
var self = this; |
62 |
var offst = this.outerHeight($('.top-bar')); |
63 |
$(this.scope) |
64 |
.on('click.fndtn.topbar', '.top-bar .toggle-topbar', function (e) { |
65 |
var topbar = $(this).closest('.top-bar'), |
66 |
section = topbar.find('section, .section'),
|
67 |
titlebar = topbar.children('ul').first();
|
68 |
|
69 |
if (!topbar.data('height')) self.largestUL(); |
70 |
|
71 |
e.preventDefault(); |
72 |
|
73 |
if (self.breakpoint()) {
|
74 |
topbar |
75 |
.toggleClass('expanded')
|
76 |
.css('min-height', ''); |
77 |
} |
78 |
|
79 |
if (!topbar.hasClass('expanded')) { |
80 |
section.css({left: '0%'}); |
81 |
section.find('>.name').css({left: '100%'}); |
82 |
section.find('li.moved').removeClass('moved'); |
83 |
topbar.data('index', 0); |
84 |
} |
85 |
|
86 |
if (topbar.parent().hasClass('fixed')) { |
87 |
topbar.parent().removeClass('fixed');
|
88 |
$('body').css('padding-top','0'); |
89 |
window.scrollTo(0);
|
90 |
} else if (topbar.hasClass('fixed expanded')) { |
91 |
topbar.parent().addClass('fixed');
|
92 |
$('body').css('padding-top',offst); |
93 |
} |
94 |
|
95 |
}) |
96 |
|
97 |
.on('click.fndtn.topbar', '.top-bar .has-dropdown>a', function (e) { |
98 |
var topbar = $(this).closest('.top-bar'), |
99 |
section = topbar.find('section, .section'),
|
100 |
titlebar = topbar.children('ul').first();
|
101 |
|
102 |
if (Modernizr.touch || self.breakpoint()) {
|
103 |
e.preventDefault(); |
104 |
} |
105 |
|
106 |
if (self.breakpoint()) {
|
107 |
var $this = $(this), |
108 |
$selectedLi = $this.closest('li'); |
109 |
|
110 |
topbar.data('index', topbar.data('index') + 1); |
111 |
$selectedLi.addClass('moved'); |
112 |
section.css({left: -(100 * topbar.data('index')) + '%'}); |
113 |
section.find('>.name').css({left: 100 * topbar.data('index') + '%'}); |
114 |
|
115 |
$this.siblings('ul') |
116 |
.height(topbar.data('height') + self.outerHeight(titlebar, true)); |
117 |
topbar |
118 |
.css('min-height', topbar.data('height') + self.outerHeight(titlebar, true) * 2) |
119 |
} |
120 |
}); |
121 |
|
122 |
$(window).on('resize.fndtn.topbar', function () { |
123 |
if (!this.breakpoint()) { |
124 |
$('.top-bar').css('min-height', ''); |
125 |
} |
126 |
}.bind(this));
|
127 |
|
128 |
// Go up a level on Click
|
129 |
$(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back', function (e) { |
130 |
e.preventDefault(); |
131 |
|
132 |
var $this = $(this), |
133 |
topbar = $this.closest('.top-bar'), |
134 |
section = topbar.find('section, .section'),
|
135 |
$movedLi = $this.closest('li.moved'), |
136 |
$previousLevelUl = $movedLi.parent(); |
137 |
|
138 |
topbar.data('index', topbar.data('index') - 1); |
139 |
section.css({left: -(100 * topbar.data('index')) + '%'}); |
140 |
section.find('>.name').css({'left': 100 * topbar.data('index') + '%'}); |
141 |
|
142 |
if (topbar.data('index') === 0) { |
143 |
topbar.css('min-height', 0); |
144 |
} |
145 |
|
146 |
setTimeout(function () {
|
147 |
$movedLi.removeClass('moved'); |
148 |
}, 300);
|
149 |
}); |
150 |
}, |
151 |
|
152 |
breakpoint : function () { |
153 |
return $(window).width() <= this.settings.breakPoint || $('html').hasClass('lt-ie9'); |
154 |
}, |
155 |
|
156 |
assemble : function () { |
157 |
var self = this; |
158 |
// Pull element out of the DOM for manipulation
|
159 |
this.settings.$section.detach(); |
160 |
|
161 |
this.settings.$section.find('.has-dropdown>a').each(function () { |
162 |
var $link = $(this), |
163 |
$dropdown = $link.siblings('.dropdown'), |
164 |
$titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>'); |
165 |
|
166 |
// Copy link to subnav
|
167 |
if (self.settings.custom_back_text == true) { |
168 |
$titleLi.find('h5>a').html('« ' + self.settings.back_text); |
169 |
} else {
|
170 |
$titleLi.find('h5>a').html('« ' + $link.html()); |
171 |
} |
172 |
$dropdown.prepend($titleLi); |
173 |
}); |
174 |
|
175 |
// Put element back in the DOM
|
176 |
this.settings.$section.appendTo(this.settings.$topbar); |
177 |
|
178 |
// check for sticky
|
179 |
this.sticky();
|
180 |
}, |
181 |
|
182 |
largestUL : function () { |
183 |
var uls = this.settings.$topbar.find('section ul ul'), |
184 |
largest = uls.first(), |
185 |
total = 0,
|
186 |
self = this;
|
187 |
|
188 |
uls.each(function () {
|
189 |
if ($(this).children('li').length > largest.children('li').length) { |
190 |
largest = $(this); |
191 |
} |
192 |
}); |
193 |
|
194 |
largest.children('li').each(function () { total += self.outerHeight($(this), true); }); |
195 |
|
196 |
this.settings.$topbar.data('height', total); |
197 |
}, |
198 |
|
199 |
sticky : function () { |
200 |
var klass = '.' + this.settings.stickyClass; |
201 |
if ($(klass).length > 0) { |
202 |
var distance = $(klass).length ? $(klass).offset().top: 0, |
203 |
$window = $(window); |
204 |
var offst = this.outerHeight($('.top-bar')); |
205 |
|
206 |
$window.scroll(function() { |
207 |
if ($window.scrollTop() >= (distance)) { |
208 |
$(klass).addClass("fixed"); |
209 |
$('body').css('padding-top',offst); |
210 |
} |
211 |
|
212 |
else if ($window.scrollTop() < distance) { |
213 |
$(klass).removeClass("fixed"); |
214 |
$('body').css('padding-top','0'); |
215 |
} |
216 |
}); |
217 |
} |
218 |
}, |
219 |
|
220 |
off : function () { |
221 |
$(this.scope).off('.fndtn.topbar'); |
222 |
$(window).off('.fndtn.topbar'); |
223 |
} |
224 |
}; |
225 |
}(Foundation.zj, this, this.document)); |