1 | (function($) {
|
---|
2 |
|
---|
3 | /**
|
---|
4 | * Generate an indented list of links from a nav. Meant for use with panel().
|
---|
5 | * @return {jQuery} jQuery object.
|
---|
6 | */
|
---|
7 | $.fn.navList = function() {
|
---|
8 |
|
---|
9 | var $this = $(this);
|
---|
10 | $a = $this.find('a'),
|
---|
11 | b = [];
|
---|
12 |
|
---|
13 | $a.each(function() {
|
---|
14 |
|
---|
15 | var $this = $(this),
|
---|
16 | indent = Math.max(0, $this.parents('li').length - 1),
|
---|
17 | href = $this.attr('href'),
|
---|
18 | target = $this.attr('target');
|
---|
19 |
|
---|
20 | b.push(
|
---|
21 | '<a ' +
|
---|
22 | 'class="link depth-' + indent + '"' +
|
---|
23 | ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
|
---|
24 | ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
|
---|
25 | '>' +
|
---|
26 | '<span class="indent-' + indent + '"></span>' +
|
---|
27 | $this.text() +
|
---|
28 | '</a>'
|
---|
29 | );
|
---|
30 |
|
---|
31 | });
|
---|
32 |
|
---|
33 | return b.join('');
|
---|
34 |
|
---|
35 | };
|
---|
36 |
|
---|
37 | /**
|
---|
38 | * Panel-ify an element.
|
---|
39 | * @param {object} userConfig User config.
|
---|
40 | * @return {jQuery} jQuery object.
|
---|
41 | */
|
---|
42 | $.fn.panel = function(userConfig) {
|
---|
43 |
|
---|
44 | // No elements?
|
---|
45 | if (this.length == 0)
|
---|
46 | return $this;
|
---|
47 |
|
---|
48 | // Multiple elements?
|
---|
49 | if (this.length > 1) {
|
---|
50 |
|
---|
51 | for (var i=0; i < this.length; i++)
|
---|
52 | $(this[i]).panel(userConfig);
|
---|
53 |
|
---|
54 | return $this;
|
---|
55 |
|
---|
56 | }
|
---|
57 |
|
---|
58 | // Vars.
|
---|
59 | var $this = $(this),
|
---|
60 | $body = $('body'),
|
---|
61 | $window = $(window),
|
---|
62 | id = $this.attr('id'),
|
---|
63 | config;
|
---|
64 |
|
---|
65 | // Config.
|
---|
66 | config = $.extend({
|
---|
67 |
|
---|
68 | // Delay.
|
---|
69 | delay: 0,
|
---|
70 |
|
---|
71 | // Hide panel on link click.
|
---|
72 | hideOnClick: false,
|
---|
73 |
|
---|
74 | // Hide panel on escape keypress.
|
---|
75 | hideOnEscape: false,
|
---|
76 |
|
---|
77 | // Hide panel on swipe.
|
---|
78 | hideOnSwipe: false,
|
---|
79 |
|
---|
80 | // Reset scroll position on hide.
|
---|
81 | resetScroll: false,
|
---|
82 |
|
---|
83 | // Reset forms on hide.
|
---|
84 | resetForms: false,
|
---|
85 |
|
---|
86 | // Side of viewport the panel will appear.
|
---|
87 | side: null,
|
---|
88 |
|
---|
89 | // Target element for "class".
|
---|
90 | target: $this,
|
---|
91 |
|
---|
92 | // Class to toggle.
|
---|
93 | visibleClass: 'visible'
|
---|
94 |
|
---|
95 | }, userConfig);
|
---|
96 |
|
---|
97 | // Expand "target" if it's not a jQuery object already.
|
---|
98 | if (typeof config.target != 'jQuery')
|
---|
99 | config.target = $(config.target);
|
---|
100 |
|
---|
101 | // Panel.
|
---|
102 |
|
---|
103 | // Methods.
|
---|
104 | $this._hide = function(event) {
|
---|
105 |
|
---|
106 | // Already hidden? Bail.
|
---|
107 | if (!config.target.hasClass(config.visibleClass))
|
---|
108 | return;
|
---|
109 |
|
---|
110 | // If an event was provided, cancel it.
|
---|
111 | if (event) {
|
---|
112 |
|
---|
113 | event.preventDefault();
|
---|
114 | event.stopPropagation();
|
---|
115 |
|
---|
116 | }
|
---|
117 |
|
---|
118 | // Hide.
|
---|
119 | config.target.removeClass(config.visibleClass);
|
---|
120 |
|
---|
121 | // Post-hide stuff.
|
---|
122 | window.setTimeout(function() {
|
---|
123 |
|
---|
124 | // Reset scroll position.
|
---|
125 | if (config.resetScroll)
|
---|
126 | $this.scrollTop(0);
|
---|
127 |
|
---|
128 | // Reset forms.
|
---|
129 | if (config.resetForms)
|
---|
130 | $this.find('form').each(function() {
|
---|
131 | this.reset();
|
---|
132 | });
|
---|
133 |
|
---|
134 | }, config.delay);
|
---|
135 |
|
---|
136 | };
|
---|
137 |
|
---|
138 | // Vendor fixes.
|
---|
139 | $this
|
---|
140 | .css('-ms-overflow-style', '-ms-autohiding-scrollbar')
|
---|
141 | .css('-webkit-overflow-scrolling', 'touch');
|
---|
142 |
|
---|
143 | // Hide on click.
|
---|
144 | if (config.hideOnClick) {
|
---|
145 |
|
---|
146 | $this.find('a')
|
---|
147 | .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
|
---|
148 |
|
---|
149 | $this
|
---|
150 | .on('click', 'a', function(event) {
|
---|
151 |
|
---|
152 | var $a = $(this),
|
---|
153 | href = $a.attr('href'),
|
---|
154 | target = $a.attr('target');
|
---|
155 |
|
---|
156 | if (!href || href == '#' || href == '' || href == '#' + id)
|
---|
157 | return;
|
---|
158 |
|
---|
159 | // Cancel original event.
|
---|
160 | event.preventDefault();
|
---|
161 | event.stopPropagation();
|
---|
162 |
|
---|
163 | // Hide panel.
|
---|
164 | $this._hide();
|
---|
165 |
|
---|
166 | // Redirect to href.
|
---|
167 | window.setTimeout(function() {
|
---|
168 |
|
---|
169 | if (target == '_blank')
|
---|
170 | window.open(href);
|
---|
171 | else
|
---|
172 | window.location.href = href;
|
---|
173 |
|
---|
174 | }, config.delay + 10);
|
---|
175 |
|
---|
176 | });
|
---|
177 |
|
---|
178 | }
|
---|
179 |
|
---|
180 | // Event: Touch stuff.
|
---|
181 | $this.on('touchstart', function(event) {
|
---|
182 |
|
---|
183 | $this.touchPosX = event.originalEvent.touches[0].pageX;
|
---|
184 | $this.touchPosY = event.originalEvent.touches[0].pageY;
|
---|
185 |
|
---|
186 | })
|
---|
187 |
|
---|
188 | $this.on('touchmove', function(event) {
|
---|
189 |
|
---|
190 | if ($this.touchPosX === null
|
---|
191 | || $this.touchPosY === null)
|
---|
192 | return;
|
---|
193 |
|
---|
194 | var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
|
---|
195 | diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
|
---|
196 | th = $this.outerHeight(),
|
---|
197 | ts = ($this.get(0).scrollHeight - $this.scrollTop());
|
---|
198 |
|
---|
199 | // Hide on swipe?
|
---|
200 | if (config.hideOnSwipe) {
|
---|
201 |
|
---|
202 | var result = false,
|
---|
203 | boundary = 20,
|
---|
204 | delta = 50;
|
---|
205 |
|
---|
206 | switch (config.side) {
|
---|
207 |
|
---|
208 | case 'left':
|
---|
209 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
|
---|
210 | break;
|
---|
211 |
|
---|
212 | case 'right':
|
---|
213 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
|
---|
214 | break;
|
---|
215 |
|
---|
216 | case 'top':
|
---|
217 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
|
---|
218 | break;
|
---|
219 |
|
---|
220 | case 'bottom':
|
---|
221 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
|
---|
222 | break;
|
---|
223 |
|
---|
224 | default:
|
---|
225 | break;
|
---|
226 |
|
---|
227 | }
|
---|
228 |
|
---|
229 | if (result) {
|
---|
230 |
|
---|
231 | $this.touchPosX = null;
|
---|
232 | $this.touchPosY = null;
|
---|
233 | $this._hide();
|
---|
234 |
|
---|
235 | return false;
|
---|
236 |
|
---|
237 | }
|
---|
238 |
|
---|
239 | }
|
---|
240 |
|
---|
241 | // Prevent vertical scrolling past the top or bottom.
|
---|
242 | if (($this.scrollTop() < 0 && diffY < 0)
|
---|
243 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
|
---|
244 |
|
---|
245 | event.preventDefault();
|
---|
246 | event.stopPropagation();
|
---|
247 |
|
---|
248 | }
|
---|
249 |
|
---|
250 | });
|
---|
251 |
|
---|
252 | // Event: Prevent certain events inside the panel from bubbling.
|
---|
253 | $this.on('click touchend touchstart touchmove', function(event) {
|
---|
254 | event.stopPropagation();
|
---|
255 | });
|
---|
256 |
|
---|
257 | // Event: Hide panel if a child anchor tag pointing to its ID is clicked.
|
---|
258 | $this.on('click', 'a[href="#' + id + '"]', function(event) {
|
---|
259 |
|
---|
260 | event.preventDefault();
|
---|
261 | event.stopPropagation();
|
---|
262 |
|
---|
263 | config.target.removeClass(config.visibleClass);
|
---|
264 |
|
---|
265 | });
|
---|
266 |
|
---|
267 | // Body.
|
---|
268 |
|
---|
269 | // Event: Hide panel on body click/tap.
|
---|
270 | $body.on('click touchend', function(event) {
|
---|
271 | $this._hide(event);
|
---|
272 | });
|
---|
273 |
|
---|
274 | // Event: Toggle.
|
---|
275 | $body.on('click', 'a[href="#' + id + '"]', function(event) {
|
---|
276 |
|
---|
277 | event.preventDefault();
|
---|
278 | event.stopPropagation();
|
---|
279 |
|
---|
280 | config.target.toggleClass(config.visibleClass);
|
---|
281 |
|
---|
282 | });
|
---|
283 |
|
---|
284 | // Window.
|
---|
285 |
|
---|
286 | // Event: Hide on ESC.
|
---|
287 | if (config.hideOnEscape)
|
---|
288 | $window.on('keydown', function(event) {
|
---|
289 |
|
---|
290 | if (event.keyCode == 27)
|
---|
291 | $this._hide(event);
|
---|
292 |
|
---|
293 | });
|
---|
294 |
|
---|
295 | return $this;
|
---|
296 |
|
---|
297 | };
|
---|
298 |
|
---|
299 | /**
|
---|
300 | * Apply "placeholder" attribute polyfill to one or more forms.
|
---|
301 | * @return {jQuery} jQuery object.
|
---|
302 | */
|
---|
303 | $.fn.placeholder = function() {
|
---|
304 |
|
---|
305 | // Browser natively supports placeholders? Bail.
|
---|
306 | if (typeof (document.createElement('input')).placeholder != 'undefined')
|
---|
307 | return $(this);
|
---|
308 |
|
---|
309 | // No elements?
|
---|
310 | if (this.length == 0)
|
---|
311 | return $this;
|
---|
312 |
|
---|
313 | // Multiple elements?
|
---|
314 | if (this.length > 1) {
|
---|
315 |
|
---|
316 | for (var i=0; i < this.length; i++)
|
---|
317 | $(this[i]).placeholder();
|
---|
318 |
|
---|
319 | return $this;
|
---|
320 |
|
---|
321 | }
|
---|
322 |
|
---|
323 | // Vars.
|
---|
324 | var $this = $(this);
|
---|
325 |
|
---|
326 | // Text, TextArea.
|
---|
327 | $this.find('input[type=text],textarea')
|
---|
328 | .each(function() {
|
---|
329 |
|
---|
330 | var i = $(this);
|
---|
331 |
|
---|
332 | if (i.val() == ''
|
---|
333 | || i.val() == i.attr('placeholder'))
|
---|
334 | i
|
---|
335 | .addClass('polyfill-placeholder')
|
---|
336 | .val(i.attr('placeholder'));
|
---|
337 |
|
---|
338 | })
|
---|
339 | .on('blur', function() {
|
---|
340 |
|
---|
341 | var i = $(this);
|
---|
342 |
|
---|
343 | if (i.attr('name').match(/-polyfill-field$/))
|
---|
344 | return;
|
---|
345 |
|
---|
346 | if (i.val() == '')
|
---|
347 | i
|
---|
348 | .addClass('polyfill-placeholder')
|
---|
349 | .val(i.attr('placeholder'));
|
---|
350 |
|
---|
351 | })
|
---|
352 | .on('focus', function() {
|
---|
353 |
|
---|
354 | var i = $(this);
|
---|
355 |
|
---|
356 | if (i.attr('name').match(/-polyfill-field$/))
|
---|
357 | return;
|
---|
358 |
|
---|
359 | if (i.val() == i.attr('placeholder'))
|
---|
360 | i
|
---|
361 | .removeClass('polyfill-placeholder')
|
---|
362 | .val('');
|
---|
363 |
|
---|
364 | });
|
---|
365 |
|
---|
366 | // Password.
|
---|
367 | $this.find('input[type=password]')
|
---|
368 | .each(function() {
|
---|
369 |
|
---|
370 | var i = $(this);
|
---|
371 | var x = $(
|
---|
372 | $('<div>')
|
---|
373 | .append(i.clone())
|
---|
374 | .remove()
|
---|
375 | .html()
|
---|
376 | .replace(/type="password"/i, 'type="text"')
|
---|
377 | .replace(/type=password/i, 'type=text')
|
---|
378 | );
|
---|
379 |
|
---|
380 | if (i.attr('id') != '')
|
---|
381 | x.attr('id', i.attr('id') + '-polyfill-field');
|
---|
382 |
|
---|
383 | if (i.attr('name') != '')
|
---|
384 | x.attr('name', i.attr('name') + '-polyfill-field');
|
---|
385 |
|
---|
386 | x.addClass('polyfill-placeholder')
|
---|
387 | .val(x.attr('placeholder')).insertAfter(i);
|
---|
388 |
|
---|
389 | if (i.val() == '')
|
---|
390 | i.hide();
|
---|
391 | else
|
---|
392 | x.hide();
|
---|
393 |
|
---|
394 | i
|
---|
395 | .on('blur', function(event) {
|
---|
396 |
|
---|
397 | event.preventDefault();
|
---|
398 |
|
---|
399 | var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
---|
400 |
|
---|
401 | if (i.val() == '') {
|
---|
402 |
|
---|
403 | i.hide();
|
---|
404 | x.show();
|
---|
405 |
|
---|
406 | }
|
---|
407 |
|
---|
408 | });
|
---|
409 |
|
---|
410 | x
|
---|
411 | .on('focus', function(event) {
|
---|
412 |
|
---|
413 | event.preventDefault();
|
---|
414 |
|
---|
415 | var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
|
---|
416 |
|
---|
417 | x.hide();
|
---|
418 |
|
---|
419 | i
|
---|
420 | .show()
|
---|
421 | .focus();
|
---|
422 |
|
---|
423 | })
|
---|
424 | .on('keypress', function(event) {
|
---|
425 |
|
---|
426 | event.preventDefault();
|
---|
427 | x.val('');
|
---|
428 |
|
---|
429 | });
|
---|
430 |
|
---|
431 | });
|
---|
432 |
|
---|
433 | // Events.
|
---|
434 | $this
|
---|
435 | .on('submit', function() {
|
---|
436 |
|
---|
437 | $this.find('input[type=text],input[type=password],textarea')
|
---|
438 | .each(function(event) {
|
---|
439 |
|
---|
440 | var i = $(this);
|
---|
441 |
|
---|
442 | if (i.attr('name').match(/-polyfill-field$/))
|
---|
443 | i.attr('name', '');
|
---|
444 |
|
---|
445 | if (i.val() == i.attr('placeholder')) {
|
---|
446 |
|
---|
447 | i.removeClass('polyfill-placeholder');
|
---|
448 | i.val('');
|
---|
449 |
|
---|
450 | }
|
---|
451 |
|
---|
452 | });
|
---|
453 |
|
---|
454 | })
|
---|
455 | .on('reset', function(event) {
|
---|
456 |
|
---|
457 | event.preventDefault();
|
---|
458 |
|
---|
459 | $this.find('select')
|
---|
460 | .val($('option:first').val());
|
---|
461 |
|
---|
462 | $this.find('input,textarea')
|
---|
463 | .each(function() {
|
---|
464 |
|
---|
465 | var i = $(this),
|
---|
466 | x;
|
---|
467 |
|
---|
468 | i.removeClass('polyfill-placeholder');
|
---|
469 |
|
---|
470 | switch (this.type) {
|
---|
471 |
|
---|
472 | case 'submit':
|
---|
473 | case 'reset':
|
---|
474 | break;
|
---|
475 |
|
---|
476 | case 'password':
|
---|
477 | i.val(i.attr('defaultValue'));
|
---|
478 |
|
---|
479 | x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
---|
480 |
|
---|
481 | if (i.val() == '') {
|
---|
482 | i.hide();
|
---|
483 | x.show();
|
---|
484 | }
|
---|
485 | else {
|
---|
486 | i.show();
|
---|
487 | x.hide();
|
---|
488 | }
|
---|
489 |
|
---|
490 | break;
|
---|
491 |
|
---|
492 | case 'checkbox':
|
---|
493 | case 'radio':
|
---|
494 | i.attr('checked', i.attr('defaultValue'));
|
---|
495 | break;
|
---|
496 |
|
---|
497 | case 'text':
|
---|
498 | case 'textarea':
|
---|
499 | i.val(i.attr('defaultValue'));
|
---|
500 |
|
---|
501 | if (i.val() == '') {
|
---|
502 | i.addClass('polyfill-placeholder');
|
---|
503 | i.val(i.attr('placeholder'));
|
---|
504 | }
|
---|
505 |
|
---|
506 | break;
|
---|
507 |
|
---|
508 | default:
|
---|
509 | i.val(i.attr('defaultValue'));
|
---|
510 | break;
|
---|
511 |
|
---|
512 | }
|
---|
513 | });
|
---|
514 |
|
---|
515 | });
|
---|
516 |
|
---|
517 | return $this;
|
---|
518 |
|
---|
519 | };
|
---|
520 |
|
---|
521 | /**
|
---|
522 | * Moves elements to/from the first positions of their respective parents.
|
---|
523 | * @param {jQuery} $elements Elements (or selector) to move.
|
---|
524 | * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
|
---|
525 | */
|
---|
526 | $.prioritize = function($elements, condition) {
|
---|
527 |
|
---|
528 | var key = '__prioritize';
|
---|
529 |
|
---|
530 | // Expand $elements if it's not already a jQuery object.
|
---|
531 | if (typeof $elements != 'jQuery')
|
---|
532 | $elements = $($elements);
|
---|
533 |
|
---|
534 | // Step through elements.
|
---|
535 | $elements.each(function() {
|
---|
536 |
|
---|
537 | var $e = $(this), $p,
|
---|
538 | $parent = $e.parent();
|
---|
539 |
|
---|
540 | // No parent? Bail.
|
---|
541 | if ($parent.length == 0)
|
---|
542 | return;
|
---|
543 |
|
---|
544 | // Not moved? Move it.
|
---|
545 | if (!$e.data(key)) {
|
---|
546 |
|
---|
547 | // Condition is false? Bail.
|
---|
548 | if (!condition)
|
---|
549 | return;
|
---|
550 |
|
---|
551 | // Get placeholder (which will serve as our point of reference for when this element needs to move back).
|
---|
552 | $p = $e.prev();
|
---|
553 |
|
---|
554 | // Couldn't find anything? Means this element's already at the top, so bail.
|
---|
555 | if ($p.length == 0)
|
---|
556 | return;
|
---|
557 |
|
---|
558 | // Move element to top of parent.
|
---|
559 | $e.prependTo($parent);
|
---|
560 |
|
---|
561 | // Mark element as moved.
|
---|
562 | $e.data(key, $p);
|
---|
563 |
|
---|
564 | }
|
---|
565 |
|
---|
566 | // Moved already?
|
---|
567 | else {
|
---|
568 |
|
---|
569 | // Condition is true? Bail.
|
---|
570 | if (condition)
|
---|
571 | return;
|
---|
572 |
|
---|
573 | $p = $e.data(key);
|
---|
574 |
|
---|
575 | // Move element back to its original location (using our placeholder).
|
---|
576 | $e.insertAfter($p);
|
---|
577 |
|
---|
578 | // Unmark element as moved.
|
---|
579 | $e.removeData(key);
|
---|
580 |
|
---|
581 | }
|
---|
582 |
|
---|
583 | });
|
---|
584 |
|
---|
585 | };
|
---|
586 |
|
---|
587 | })(jQuery);
|
---|