@@ 1015-1348 (lines=334) @@ | ||
1012 | }); |
|
1013 | })(jQuery); |
|
1014 | ||
1015 | (function(UI) { |
|
1016 | ||
1017 | "use strict"; |
|
1018 | ||
1019 | var stacks = []; |
|
1020 | ||
1021 | UI.component('stackMargin', { |
|
1022 | ||
1023 | defaults: { |
|
1024 | cls: 'uk-margin-small-top', |
|
1025 | rowfirst: false, |
|
1026 | observe: false |
|
1027 | }, |
|
1028 | ||
1029 | boot: function() { |
|
1030 | ||
1031 | // init code |
|
1032 | UI.ready(function(context) { |
|
1033 | ||
1034 | UI.$('[data-uk-margin]', context).each(function() { |
|
1035 | ||
1036 | var ele = UI.$(this); |
|
1037 | ||
1038 | if (!ele.data('stackMargin')) { |
|
1039 | UI.stackMargin(ele, UI.Utils.options(ele.attr('data-uk-margin'))); |
|
1040 | } |
|
1041 | }); |
|
1042 | }); |
|
1043 | }, |
|
1044 | ||
1045 | init: function() { |
|
1046 | ||
1047 | var $this = this; |
|
1048 | ||
1049 | UI.$win.on('resize orientationchange', (function() { |
|
1050 | ||
1051 | var fn = function() { |
|
1052 | $this.process(); |
|
1053 | }; |
|
1054 | ||
1055 | UI.$(function() { |
|
1056 | fn(); |
|
1057 | UI.$win.on('load', fn); |
|
1058 | }); |
|
1059 | ||
1060 | return UI.Utils.debounce(fn, 20); |
|
1061 | })()); |
|
1062 | ||
1063 | this.on('display.uk.check', function(e) { |
|
1064 | if (this.element.is(':visible')) this.process(); |
|
1065 | }.bind(this)); |
|
1066 | ||
1067 | if (this.options.observe) { |
|
1068 | ||
1069 | UI.domObserve(this.element, function(e) { |
|
1070 | if ($this.element.is(':visible')) $this.process(); |
|
1071 | }); |
|
1072 | } |
|
1073 | ||
1074 | stacks.push(this); |
|
1075 | }, |
|
1076 | ||
1077 | process: function() { |
|
1078 | ||
1079 | var $this = this, columns = this.element.children(); |
|
1080 | ||
1081 | UI.Utils.stackMargin(columns, this.options); |
|
1082 | ||
1083 | if (!this.options.rowfirst || !columns.length) { |
|
1084 | return this; |
|
1085 | } |
|
1086 | ||
1087 | // Mark first column elements |
|
1088 | var group = {}, minleft = false; |
|
1089 | ||
1090 | columns.removeClass(this.options.rowfirst).each(function(offset, $ele){ |
|
1091 | ||
1092 | $ele = UI.$(this); |
|
1093 | ||
1094 | if (this.style.display != 'none') { |
|
1095 | offset = $ele.offset().left; |
|
1096 | ((group[offset] = group[offset] || []) && group[offset]).push(this); |
|
1097 | minleft = minleft === false ? offset : Math.min(minleft, offset); |
|
1098 | } |
|
1099 | }); |
|
1100 | ||
1101 | UI.$(group[minleft]).addClass(this.options.rowfirst); |
|
1102 | ||
1103 | return this; |
|
1104 | } |
|
1105 | ||
1106 | }); |
|
1107 | ||
1108 | ||
1109 | // responsive element e.g. iframes |
|
1110 | ||
1111 | (function(){ |
|
1112 | ||
1113 | var elements = [], check = function(ele) { |
|
1114 | ||
1115 | if (!ele.is(':visible')) return; |
|
1116 | ||
1117 | var width = ele.parent().width(), |
|
1118 | iwidth = ele.data('width'), |
|
1119 | ratio = (width / iwidth), |
|
1120 | height = Math.floor(ratio * ele.data('height')); |
|
1121 | ||
1122 | ele.css({height: (width < iwidth) ? height : ele.data('height')}); |
|
1123 | }; |
|
1124 | ||
1125 | UI.component('responsiveElement', { |
|
1126 | ||
1127 | defaults: {}, |
|
1128 | ||
1129 | boot: function() { |
|
1130 | ||
1131 | // init code |
|
1132 | UI.ready(function(context) { |
|
1133 | ||
1134 | UI.$('iframe.uk-responsive-width, [data-uk-responsive]', context).each(function() { |
|
1135 | ||
1136 | var ele = UI.$(this), obj; |
|
1137 | ||
1138 | if (!ele.data('responsiveElement')) { |
|
1139 | obj = UI.responsiveElement(ele, {}); |
|
1140 | } |
|
1141 | }); |
|
1142 | }); |
|
1143 | }, |
|
1144 | ||
1145 | init: function() { |
|
1146 | ||
1147 | var ele = this.element; |
|
1148 | ||
1149 | if (ele.attr('width') && ele.attr('height')) { |
|
1150 | ||
1151 | ele.data({ |
|
1152 | width : ele.attr('width'), |
|
1153 | height: ele.attr('height') |
|
1154 | }).on('display.uk.check', function(){ |
|
1155 | check(ele); |
|
1156 | }); |
|
1157 | ||
1158 | check(ele); |
|
1159 | ||
1160 | elements.push(ele); |
|
1161 | } |
|
1162 | } |
|
1163 | }); |
|
1164 | ||
1165 | UI.$win.on('resize load', UI.Utils.debounce(function(){ |
|
1166 | ||
1167 | elements.forEach(function(ele){ |
|
1168 | check(ele); |
|
1169 | }); |
|
1170 | ||
1171 | }, 15)); |
|
1172 | ||
1173 | })(); |
|
1174 | ||
1175 | ||
1176 | // helper |
|
1177 | ||
1178 | UI.Utils.stackMargin = function(elements, options) { |
|
1179 | ||
1180 | options = UI.$.extend({ |
|
1181 | cls: 'uk-margin-small-top' |
|
1182 | }, options); |
|
1183 | ||
1184 | elements = UI.$(elements).removeClass(options.cls); |
|
1185 | ||
1186 | var min = false; |
|
1187 | ||
1188 | elements.each(function(offset, height, pos, $ele){ |
|
1189 | ||
1190 | $ele = UI.$(this); |
|
1191 | ||
1192 | if ($ele.css('display') != 'none') { |
|
1193 | ||
1194 | offset = $ele.offset(); |
|
1195 | height = $ele.outerHeight(); |
|
1196 | pos = offset.top + height; |
|
1197 | ||
1198 | $ele.data({ |
|
1199 | ukMarginPos: pos, |
|
1200 | ukMarginTop: offset.top |
|
1201 | }); |
|
1202 | ||
1203 | if (min === false || (offset.top < min.top) ) { |
|
1204 | ||
1205 | min = { |
|
1206 | top : offset.top, |
|
1207 | left : offset.left, |
|
1208 | pos : pos |
|
1209 | }; |
|
1210 | } |
|
1211 | } |
|
1212 | ||
1213 | }).each(function($ele) { |
|
1214 | ||
1215 | $ele = UI.$(this); |
|
1216 | ||
1217 | if ($ele.css('display') != 'none' && $ele.data('ukMarginTop') > min.top && $ele.data('ukMarginPos') > min.pos) { |
|
1218 | $ele.addClass(options.cls); |
|
1219 | } |
|
1220 | }); |
|
1221 | }; |
|
1222 | ||
1223 | UI.Utils.matchHeights = function(elements, options) { |
|
1224 | ||
1225 | elements = UI.$(elements).css('min-height', ''); |
|
1226 | options = UI.$.extend({ row : true }, options); |
|
1227 | ||
1228 | var matchHeights = function(group){ |
|
1229 | ||
1230 | if (group.length < 2) return; |
|
1231 | ||
1232 | var max = 0; |
|
1233 | ||
1234 | group.each(function() { |
|
1235 | max = Math.max(max, UI.$(this).outerHeight()); |
|
1236 | }).each(function() { |
|
1237 | ||
1238 | var element = UI.$(this), |
|
1239 | height = max - (element.css('box-sizing') == 'border-box' ? 0 : (element.outerHeight() - element.height())); |
|
1240 | ||
1241 | element.css('min-height', height + 'px'); |
|
1242 | }); |
|
1243 | }; |
|
1244 | ||
1245 | if (options.row) { |
|
1246 | ||
1247 | elements.first().width(); // force redraw |
|
1248 | ||
1249 | setTimeout(function(){ |
|
1250 | ||
1251 | var lastoffset = false, group = []; |
|
1252 | ||
1253 | elements.each(function() { |
|
1254 | ||
1255 | var ele = UI.$(this), offset = ele.offset().top; |
|
1256 | ||
1257 | if (offset != lastoffset && group.length) { |
|
1258 | ||
1259 | matchHeights(UI.$(group)); |
|
1260 | group = []; |
|
1261 | offset = ele.offset().top; |
|
1262 | } |
|
1263 | ||
1264 | group.push(ele); |
|
1265 | lastoffset = offset; |
|
1266 | }); |
|
1267 | ||
1268 | if (group.length) { |
|
1269 | matchHeights(UI.$(group)); |
|
1270 | } |
|
1271 | ||
1272 | }, 0); |
|
1273 | ||
1274 | } else { |
|
1275 | matchHeights(elements); |
|
1276 | } |
|
1277 | }; |
|
1278 | ||
1279 | (function(cacheSvgs){ |
|
1280 | ||
1281 | UI.Utils.inlineSvg = function(selector, root) { |
|
1282 | ||
1283 | var images = UI.$(selector || 'img[src$=".svg"]', root || document).each(function(){ |
|
1284 | ||
1285 | var img = UI.$(this), |
|
1286 | src = img.attr('src'); |
|
1287 | ||
1288 | if (!cacheSvgs[src]) { |
|
1289 | ||
1290 | var d = UI.$.Deferred(); |
|
1291 | ||
1292 | UI.$.get(src, {nc: Math.random()}, function(data){ |
|
1293 | d.resolve(UI.$(data).find('svg')); |
|
1294 | }); |
|
1295 | ||
1296 | cacheSvgs[src] = d.promise(); |
|
1297 | } |
|
1298 | ||
1299 | cacheSvgs[src].then(function(svg) { |
|
1300 | ||
1301 | var $svg = UI.$(svg).clone(); |
|
1302 | ||
1303 | if (img.attr('id')) $svg.attr('id', img.attr('id')); |
|
1304 | if (img.attr('class')) $svg.attr('class', img.attr('class')); |
|
1305 | if (img.attr('style')) $svg.attr('style', img.attr('style')); |
|
1306 | ||
1307 | if (img.attr('width')) { |
|
1308 | $svg.attr('width', img.attr('width')); |
|
1309 | if (!img.attr('height')) $svg.removeAttr('height'); |
|
1310 | } |
|
1311 | ||
1312 | if (img.attr('height')){ |
|
1313 | $svg.attr('height', img.attr('height')); |
|
1314 | if (!img.attr('width')) $svg.removeAttr('width'); |
|
1315 | } |
|
1316 | ||
1317 | img.replaceWith($svg); |
|
1318 | }); |
|
1319 | }); |
|
1320 | }; |
|
1321 | ||
1322 | // init code |
|
1323 | UI.ready(function(context) { |
|
1324 | UI.Utils.inlineSvg('[data-uk-svg]', context); |
|
1325 | }); |
|
1326 | ||
1327 | })({}); |
|
1328 | ||
1329 | UI.Utils.getCssVar = function(name) { |
|
1330 | ||
1331 | /* usage in css: .var-name:before { content:"xyz" } */ |
|
1332 | ||
1333 | var val, doc = document.documentElement, element = doc.appendChild(document.createElement('div')); |
|
1334 | ||
1335 | element.classList.add('var-'+name); |
|
1336 | ||
1337 | try { |
|
1338 | val = JSON.parse(val = getComputedStyle(element, ':before').content.replace(/^["'](.*)["']$/, '$1')); |
|
1339 | } catch (e) { |
|
1340 | val = undefined; |
|
1341 | } |
|
1342 | ||
1343 | doc.removeChild(element); |
|
1344 | ||
1345 | return val; |
|
1346 | } |
|
1347 | ||
1348 | })(UIkit2); |
|
1349 | ||
1350 | (function(UI) { |
|
1351 |
@@ 2-335 (lines=334) @@ | ||
1 | /*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ |
|
2 | (function(UI) { |
|
3 | ||
4 | "use strict"; |
|
5 | ||
6 | var stacks = []; |
|
7 | ||
8 | UI.component('stackMargin', { |
|
9 | ||
10 | defaults: { |
|
11 | cls: 'uk-margin-small-top', |
|
12 | rowfirst: false, |
|
13 | observe: false |
|
14 | }, |
|
15 | ||
16 | boot: function() { |
|
17 | ||
18 | // init code |
|
19 | UI.ready(function(context) { |
|
20 | ||
21 | UI.$('[data-uk-margin]', context).each(function() { |
|
22 | ||
23 | var ele = UI.$(this); |
|
24 | ||
25 | if (!ele.data('stackMargin')) { |
|
26 | UI.stackMargin(ele, UI.Utils.options(ele.attr('data-uk-margin'))); |
|
27 | } |
|
28 | }); |
|
29 | }); |
|
30 | }, |
|
31 | ||
32 | init: function() { |
|
33 | ||
34 | var $this = this; |
|
35 | ||
36 | UI.$win.on('resize orientationchange', (function() { |
|
37 | ||
38 | var fn = function() { |
|
39 | $this.process(); |
|
40 | }; |
|
41 | ||
42 | UI.$(function() { |
|
43 | fn(); |
|
44 | UI.$win.on('load', fn); |
|
45 | }); |
|
46 | ||
47 | return UI.Utils.debounce(fn, 20); |
|
48 | })()); |
|
49 | ||
50 | this.on('display.uk.check', function(e) { |
|
51 | if (this.element.is(':visible')) this.process(); |
|
52 | }.bind(this)); |
|
53 | ||
54 | if (this.options.observe) { |
|
55 | ||
56 | UI.domObserve(this.element, function(e) { |
|
57 | if ($this.element.is(':visible')) $this.process(); |
|
58 | }); |
|
59 | } |
|
60 | ||
61 | stacks.push(this); |
|
62 | }, |
|
63 | ||
64 | process: function() { |
|
65 | ||
66 | var $this = this, columns = this.element.children(); |
|
67 | ||
68 | UI.Utils.stackMargin(columns, this.options); |
|
69 | ||
70 | if (!this.options.rowfirst || !columns.length) { |
|
71 | return this; |
|
72 | } |
|
73 | ||
74 | // Mark first column elements |
|
75 | var group = {}, minleft = false; |
|
76 | ||
77 | columns.removeClass(this.options.rowfirst).each(function(offset, $ele){ |
|
78 | ||
79 | $ele = UI.$(this); |
|
80 | ||
81 | if (this.style.display != 'none') { |
|
82 | offset = $ele.offset().left; |
|
83 | ((group[offset] = group[offset] || []) && group[offset]).push(this); |
|
84 | minleft = minleft === false ? offset : Math.min(minleft, offset); |
|
85 | } |
|
86 | }); |
|
87 | ||
88 | UI.$(group[minleft]).addClass(this.options.rowfirst); |
|
89 | ||
90 | return this; |
|
91 | } |
|
92 | ||
93 | }); |
|
94 | ||
95 | ||
96 | // responsive element e.g. iframes |
|
97 | ||
98 | (function(){ |
|
99 | ||
100 | var elements = [], check = function(ele) { |
|
101 | ||
102 | if (!ele.is(':visible')) return; |
|
103 | ||
104 | var width = ele.parent().width(), |
|
105 | iwidth = ele.data('width'), |
|
106 | ratio = (width / iwidth), |
|
107 | height = Math.floor(ratio * ele.data('height')); |
|
108 | ||
109 | ele.css({height: (width < iwidth) ? height : ele.data('height')}); |
|
110 | }; |
|
111 | ||
112 | UI.component('responsiveElement', { |
|
113 | ||
114 | defaults: {}, |
|
115 | ||
116 | boot: function() { |
|
117 | ||
118 | // init code |
|
119 | UI.ready(function(context) { |
|
120 | ||
121 | UI.$('iframe.uk-responsive-width, [data-uk-responsive]', context).each(function() { |
|
122 | ||
123 | var ele = UI.$(this), obj; |
|
124 | ||
125 | if (!ele.data('responsiveElement')) { |
|
126 | obj = UI.responsiveElement(ele, {}); |
|
127 | } |
|
128 | }); |
|
129 | }); |
|
130 | }, |
|
131 | ||
132 | init: function() { |
|
133 | ||
134 | var ele = this.element; |
|
135 | ||
136 | if (ele.attr('width') && ele.attr('height')) { |
|
137 | ||
138 | ele.data({ |
|
139 | width : ele.attr('width'), |
|
140 | height: ele.attr('height') |
|
141 | }).on('display.uk.check', function(){ |
|
142 | check(ele); |
|
143 | }); |
|
144 | ||
145 | check(ele); |
|
146 | ||
147 | elements.push(ele); |
|
148 | } |
|
149 | } |
|
150 | }); |
|
151 | ||
152 | UI.$win.on('resize load', UI.Utils.debounce(function(){ |
|
153 | ||
154 | elements.forEach(function(ele){ |
|
155 | check(ele); |
|
156 | }); |
|
157 | ||
158 | }, 15)); |
|
159 | ||
160 | })(); |
|
161 | ||
162 | ||
163 | // helper |
|
164 | ||
165 | UI.Utils.stackMargin = function(elements, options) { |
|
166 | ||
167 | options = UI.$.extend({ |
|
168 | cls: 'uk-margin-small-top' |
|
169 | }, options); |
|
170 | ||
171 | elements = UI.$(elements).removeClass(options.cls); |
|
172 | ||
173 | var min = false; |
|
174 | ||
175 | elements.each(function(offset, height, pos, $ele){ |
|
176 | ||
177 | $ele = UI.$(this); |
|
178 | ||
179 | if ($ele.css('display') != 'none') { |
|
180 | ||
181 | offset = $ele.offset(); |
|
182 | height = $ele.outerHeight(); |
|
183 | pos = offset.top + height; |
|
184 | ||
185 | $ele.data({ |
|
186 | ukMarginPos: pos, |
|
187 | ukMarginTop: offset.top |
|
188 | }); |
|
189 | ||
190 | if (min === false || (offset.top < min.top) ) { |
|
191 | ||
192 | min = { |
|
193 | top : offset.top, |
|
194 | left : offset.left, |
|
195 | pos : pos |
|
196 | }; |
|
197 | } |
|
198 | } |
|
199 | ||
200 | }).each(function($ele) { |
|
201 | ||
202 | $ele = UI.$(this); |
|
203 | ||
204 | if ($ele.css('display') != 'none' && $ele.data('ukMarginTop') > min.top && $ele.data('ukMarginPos') > min.pos) { |
|
205 | $ele.addClass(options.cls); |
|
206 | } |
|
207 | }); |
|
208 | }; |
|
209 | ||
210 | UI.Utils.matchHeights = function(elements, options) { |
|
211 | ||
212 | elements = UI.$(elements).css('min-height', ''); |
|
213 | options = UI.$.extend({ row : true }, options); |
|
214 | ||
215 | var matchHeights = function(group){ |
|
216 | ||
217 | if (group.length < 2) return; |
|
218 | ||
219 | var max = 0; |
|
220 | ||
221 | group.each(function() { |
|
222 | max = Math.max(max, UI.$(this).outerHeight()); |
|
223 | }).each(function() { |
|
224 | ||
225 | var element = UI.$(this), |
|
226 | height = max - (element.css('box-sizing') == 'border-box' ? 0 : (element.outerHeight() - element.height())); |
|
227 | ||
228 | element.css('min-height', height + 'px'); |
|
229 | }); |
|
230 | }; |
|
231 | ||
232 | if (options.row) { |
|
233 | ||
234 | elements.first().width(); // force redraw |
|
235 | ||
236 | setTimeout(function(){ |
|
237 | ||
238 | var lastoffset = false, group = []; |
|
239 | ||
240 | elements.each(function() { |
|
241 | ||
242 | var ele = UI.$(this), offset = ele.offset().top; |
|
243 | ||
244 | if (offset != lastoffset && group.length) { |
|
245 | ||
246 | matchHeights(UI.$(group)); |
|
247 | group = []; |
|
248 | offset = ele.offset().top; |
|
249 | } |
|
250 | ||
251 | group.push(ele); |
|
252 | lastoffset = offset; |
|
253 | }); |
|
254 | ||
255 | if (group.length) { |
|
256 | matchHeights(UI.$(group)); |
|
257 | } |
|
258 | ||
259 | }, 0); |
|
260 | ||
261 | } else { |
|
262 | matchHeights(elements); |
|
263 | } |
|
264 | }; |
|
265 | ||
266 | (function(cacheSvgs){ |
|
267 | ||
268 | UI.Utils.inlineSvg = function(selector, root) { |
|
269 | ||
270 | var images = UI.$(selector || 'img[src$=".svg"]', root || document).each(function(){ |
|
271 | ||
272 | var img = UI.$(this), |
|
273 | src = img.attr('src'); |
|
274 | ||
275 | if (!cacheSvgs[src]) { |
|
276 | ||
277 | var d = UI.$.Deferred(); |
|
278 | ||
279 | UI.$.get(src, {nc: Math.random()}, function(data){ |
|
280 | d.resolve(UI.$(data).find('svg')); |
|
281 | }); |
|
282 | ||
283 | cacheSvgs[src] = d.promise(); |
|
284 | } |
|
285 | ||
286 | cacheSvgs[src].then(function(svg) { |
|
287 | ||
288 | var $svg = UI.$(svg).clone(); |
|
289 | ||
290 | if (img.attr('id')) $svg.attr('id', img.attr('id')); |
|
291 | if (img.attr('class')) $svg.attr('class', img.attr('class')); |
|
292 | if (img.attr('style')) $svg.attr('style', img.attr('style')); |
|
293 | ||
294 | if (img.attr('width')) { |
|
295 | $svg.attr('width', img.attr('width')); |
|
296 | if (!img.attr('height')) $svg.removeAttr('height'); |
|
297 | } |
|
298 | ||
299 | if (img.attr('height')){ |
|
300 | $svg.attr('height', img.attr('height')); |
|
301 | if (!img.attr('width')) $svg.removeAttr('width'); |
|
302 | } |
|
303 | ||
304 | img.replaceWith($svg); |
|
305 | }); |
|
306 | }); |
|
307 | }; |
|
308 | ||
309 | // init code |
|
310 | UI.ready(function(context) { |
|
311 | UI.Utils.inlineSvg('[data-uk-svg]', context); |
|
312 | }); |
|
313 | ||
314 | })({}); |
|
315 | ||
316 | UI.Utils.getCssVar = function(name) { |
|
317 | ||
318 | /* usage in css: .var-name:before { content:"xyz" } */ |
|
319 | ||
320 | var val, doc = document.documentElement, element = doc.appendChild(document.createElement('div')); |
|
321 | ||
322 | element.classList.add('var-'+name); |
|
323 | ||
324 | try { |
|
325 | val = JSON.parse(val = getComputedStyle(element, ':before').content.replace(/^["'](.*)["']$/, '$1')); |
|
326 | } catch (e) { |
|
327 | val = undefined; |
|
328 | } |
|
329 | ||
330 | doc.removeChild(element); |
|
331 | ||
332 | return val; |
|
333 | } |
|
334 | ||
335 | })(UIkit2); |
|
336 |