assets/js/util.js

0001 (function($) {
0002
0003         /**

0004          * Generate an indented list of links from a nav. Meant for use with panel().

0005          * @return {jQuery} jQuery object.

0006          */
0007         $.fn.navList = function() {
0008
0009                 var     $this = $(this);
0010                         $a = $this.find('a'),
0011                         b = [];
0012
0013                 $a.each(function() {
0014
0015                         var     $this = $(this),
0016                                 indent = Math.max(0, $this.parents('li').length - 1),
0017                                 href = $this.attr('href'),
0018                                 target = $this.attr('target');
0019
0020                         b.push(
0021                                 '<a ' +
0022                                         'class="link depth-' + indent + '"' +
0023                                         ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
0024                                         ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
0025                                 '>' +
0026                                         '<span class="indent-' + indent + '"></span>' +
0027                                         $this.text() +
0028                                 '</a>'
0029                         );
0030
0031                 });
0032
0033                 return b.join('');
0034
0035         };
0036
0037         /**

0038          * Panel-ify an element.

0039          * @param {object} userConfig User config.

0040          * @return {jQuery} jQuery object.

0041          */
0042         $.fn.panel = function(userConfig) {
0043
0044                 // No elements?

0045                         if (this.length == 0)
0046                                 return $this;
0047
0048                 // Multiple elements?

0049                         if (this.length > 1) {
0050
0051                                 for (var i=0; i < this.length; i++)
0052                                         $(this[i]).panel(userConfig);
0053
0054                                 return $this;
0055
0056                         }
0057
0058                 // Vars.

0059                         var     $this = $(this),
0060                                 $body = $('body'),
0061                                 $window = $(window),
0062                                 id = $this.attr('id'),
0063                                 config;
0064
0065                 // Config.

0066                         config = $.extend({
0067
0068                                 // Delay.

0069                                         delay: 0,
0070
0071                                 // Hide panel on link click.

0072                                         hideOnClick: false,
0073
0074                                 // Hide panel on escape keypress.

0075                                         hideOnEscape: false,
0076
0077                                 // Hide panel on swipe.

0078                                         hideOnSwipe: false,
0079
0080                                 // Reset scroll position on hide.

0081                                         resetScroll: false,
0082
0083                                 // Reset forms on hide.

0084                                         resetForms: false,
0085
0086                                 // Side of viewport the panel will appear.

0087                                         side: null,
0088
0089                                 // Target element for "class".

0090                                         target: $this,
0091
0092                                 // Class to toggle.

0093                                         visibleClass: 'visible'
0094
0095                         }, userConfig);
0096
0097                         // Expand "target" if it's not a jQuery object already.

0098                                 if (typeof config.target != 'jQuery')
0099                                         config.target = $(config.target);
0100
0101                 // Panel.

0102
0103                         // Methods.

0104                                 $this._hide = function(event) {
0105
0106                                         // Already hidden? Bail.

0107                                                 if (!config.target.hasClass(config.visibleClass))
0108                                                         return;
0109
0110                                         // If an event was provided, cancel it.

0111                                                 if (event) {
0112
0113                                                         event.preventDefault();
0114                                                         event.stopPropagation();
0115
0116                                                 }
0117
0118                                         // Hide.

0119                                                 config.target.removeClass(config.visibleClass);
0120
0121                                         // Post-hide stuff.

0122                                                 window.setTimeout(function() {
0123
0124                                                         // Reset scroll position.

0125                                                                 if (config.resetScroll)
0126                                                                         $this.scrollTop(0);
0127
0128                                                         // Reset forms.

0129                                                                 if (config.resetForms)
0130                                                                         $this.find('form').each(function() {
0131                                                                                 this.reset();
0132                                                                         });
0133
0134                                                 }, config.delay);
0135
0136                                 };
0137
0138                         // Vendor fixes.

0139                                 $this
0140                                         .css('-ms-overflow-style', '-ms-autohiding-scrollbar')
0141                                         .css('-webkit-overflow-scrolling', 'touch');
0142
0143                         // Hide on click.

0144                                 if (config.hideOnClick) {
0145
0146                                         $this.find('a')
0147                                                 .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
0148
0149                                         $this
0150                                                 .on('click', 'a', function(event) {
0151
0152                                                         var $a = $(this),
0153                                                                 href = $a.attr('href'),
0154                                                                 target = $a.attr('target');
0155
0156                                                         if (!href || href == '#' || href == '' || href == '#' + id)
0157                                                                 return;
0158
0159                                                         // Cancel original event.

0160                                                                 event.preventDefault();
0161                                                                 event.stopPropagation();
0162
0163                                                         // Hide panel.

0164                                                                 $this._hide();
0165
0166                                                         // Redirect to href.

0167                                                                 window.setTimeout(function() {
0168
0169                                                                         if (target == '_blank')
0170                                                                                 window.open(href);
0171                                                                         else
0172                                                                                 window.location.href = href;
0173
0174                                                                 }, config.delay + 10);
0175
0176                                                 });
0177
0178                                 }
0179
0180                         // Event: Touch stuff.

0181                                 $this.on('touchstart', function(event) {
0182
0183                                         $this.touchPosX = event.originalEvent.touches[0].pageX;
0184                                         $this.touchPosY = event.originalEvent.touches[0].pageY;
0185
0186                                 })
0187
0188                                 $this.on('touchmove', function(event) {
0189
0190                                         if ($this.touchPosX === null
0191                                         ||      $this.touchPosY === null)
0192                                                 return;
0193
0194                                         var     diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
0195                                                 diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
0196                                                 th = $this.outerHeight(),
0197                                                 ts = ($this.get(0).scrollHeight - $this.scrollTop());
0198
0199                                         // Hide on swipe?

0200                                                 if (config.hideOnSwipe) {
0201
0202                                                         var result = false,
0203                                                                 boundary = 20,
0204                                                                 delta = 50;
0205
0206                                                         switch (config.side) {
0207
0208                                                                 case 'left':
0209                                                                         result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
0210                                                                         break;
0211
0212                                                                 case 'right':
0213                                                                         result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
0214                                                                         break;
0215
0216                                                                 case 'top':
0217                                                                         result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
0218                                                                         break;
0219
0220                                                                 case 'bottom':
0221                                                                         result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
0222                                                                         break;
0223
0224                                                                 default:
0225                                                                         break;
0226
0227                                                         }
0228
0229                                                         if (result) {
0230
0231                                                                 $this.touchPosX = null;
0232                                                                 $this.touchPosY = null;
0233                                                                 $this._hide();
0234
0235                                                                 return false;
0236
0237                                                         }
0238
0239                                                 }
0240
0241                                         // Prevent vertical scrolling past the top or bottom.

0242                                                 if (($this.scrollTop() < 0 && diffY < 0)
0243                                                 || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
0244
0245                                                         event.preventDefault();
0246                                                         event.stopPropagation();
0247
0248                                                 }
0249
0250                                 });
0251
0252                         // Event: Prevent certain events inside the panel from bubbling.

0253                                 $this.on('click touchend touchstart touchmove', function(event) {
0254                                         event.stopPropagation();
0255                                 });
0256
0257                         // Event: Hide panel if a child anchor tag pointing to its ID is clicked.

0258                                 $this.on('click', 'a[href="#' + id + '"]', function(event) {
0259
0260                                         event.preventDefault();
0261                                         event.stopPropagation();
0262
0263                                         config.target.removeClass(config.visibleClass);
0264
0265                                 });
0266
0267                 // Body.

0268
0269                         // Event: Hide panel on body click/tap.

0270                                 $body.on('click touchend', function(event) {
0271                                         $this._hide(event);
0272                                 });
0273
0274                         // Event: Toggle.

0275                                 $body.on('click', 'a[href="#' + id + '"]', function(event) {
0276
0277                                         event.preventDefault();
0278                                         event.stopPropagation();
0279
0280                                         config.target.toggleClass(config.visibleClass);
0281
0282                                 });
0283
0284                 // Window.

0285
0286                         // Event: Hide on ESC.

0287                                 if (config.hideOnEscape)
0288                                         $window.on('keydown', function(event) {
0289
0290                                                 if (event.keyCode == 27)
0291                                                         $this._hide(event);
0292
0293                                         });
0294
0295                 return $this;
0296
0297         };
0298
0299         /**

0300          * Apply "placeholder" attribute polyfill to one or more forms.

0301          * @return {jQuery} jQuery object.

0302          */
0303         $.fn.placeholder = function() {
0304
0305                 // Browser natively supports placeholders? Bail.

0306                         if (typeof (document.createElement('input')).placeholder != 'undefined')
0307                                 return $(this);
0308
0309                 // No elements?

0310                         if (this.length == 0)
0311                                 return $this;
0312
0313                 // Multiple elements?

0314                         if (this.length > 1) {
0315
0316                                 for (var i=0; i < this.length; i++)
0317                                         $(this[i]).placeholder();
0318
0319                                 return $this;
0320
0321                         }
0322
0323                 // Vars.

0324                         var $this = $(this);
0325
0326                 // Text, TextArea.

0327                         $this.find('input[type=text],textarea')
0328                                 .each(function() {
0329
0330                                         var i = $(this);
0331
0332                                         if (i.val() == ''
0333                                         ||  i.val() == i.attr('placeholder'))
0334                                                 i
0335                                                         .addClass('polyfill-placeholder')
0336                                                         .val(i.attr('placeholder'));
0337
0338                                 })
0339                                 .on('blur', function() {
0340
0341                                         var i = $(this);
0342
0343                                         if (i.attr('name').match(/-polyfill-field$/))
0344                                                 return;
0345
0346                                         if (i.val() == '')
0347                                                 i
0348                                                         .addClass('polyfill-placeholder')
0349                                                         .val(i.attr('placeholder'));
0350
0351                                 })
0352                                 .on('focus', function() {
0353
0354                                         var i = $(this);
0355
0356                                         if (i.attr('name').match(/-polyfill-field$/))
0357                                                 return;
0358
0359                                         if (i.val() == i.attr('placeholder'))
0360                                                 i
0361                                                         .removeClass('polyfill-placeholder')
0362                                                         .val('');
0363
0364                                 });
0365
0366                 // Password.

0367                         $this.find('input[type=password]')
0368                                 .each(function() {
0369
0370                                         var i = $(this);
0371                                         var x = $(
0372                                                                 $('<div>')
0373                                                                         .append(i.clone())
0374                                                                         .remove()
0375                                                                         .html()
0376                                                                         .replace(/type="password"/i, 'type="text"')
0377                                                                         .replace(/type=password/i, 'type=text')
0378                                         );
0379
0380                                         if (i.attr('id') != '')
0381                                                 x.attr('id', i.attr('id') + '-polyfill-field');
0382
0383                                         if (i.attr('name') != '')
0384                                                 x.attr('name', i.attr('name') + '-polyfill-field');
0385
0386                                         x.addClass('polyfill-placeholder')
0387                                                 .val(x.attr('placeholder')).insertAfter(i);
0388
0389                                         if (i.val() == '')
0390                                                 i.hide();
0391                                         else
0392                                                 x.hide();
0393
0394                                         i
0395                                                 .on('blur', function(event) {
0396
0397                                                         event.preventDefault();
0398
0399                                                         var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
0400
0401                                                         if (i.val() == '') {
0402
0403                                                                 i.hide();
0404                                                                 x.show();
0405
0406                                                         }
0407
0408                                                 });
0409
0410                                         x
0411                                                 .on('focus', function(event) {
0412
0413                                                         event.preventDefault();
0414
0415                                                         var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
0416
0417                                                         x.hide();
0418
0419                                                         i
0420                                                                 .show()
0421                                                                 .focus();
0422
0423                                                 })
0424                                                 .on('keypress', function(event) {
0425
0426                                                         event.preventDefault();
0427                                                         x.val('');
0428
0429                                                 });
0430
0431                                 });
0432
0433                 // Events.

0434                         $this
0435                                 .on('submit', function() {
0436
0437                                         $this.find('input[type=text],input[type=password],textarea')
0438                                                 .each(function(event) {
0439
0440                                                         var i = $(this);
0441
0442                                                         if (i.attr('name').match(/-polyfill-field$/))
0443                                                                 i.attr('name', '');
0444
0445                                                         if (i.val() == i.attr('placeholder')) {
0446
0447                                                                 i.removeClass('polyfill-placeholder');
0448                                                                 i.val('');
0449
0450                                                         }
0451
0452                                                 });
0453
0454                                 })
0455                                 .on('reset', function(event) {
0456
0457                                         event.preventDefault();
0458
0459                                         $this.find('select')
0460                                                 .val($('option:first').val());
0461
0462                                         $this.find('input,textarea')
0463                                                 .each(function() {
0464
0465                                                         var i = $(this),
0466                                                                 x;
0467
0468                                                         i.removeClass('polyfill-placeholder');
0469
0470                                                         switch (this.type) {
0471
0472                                                                 case 'submit':
0473                                                                 case 'reset':
0474                                                                         break;
0475
0476                                                                 case 'password':
0477                                                                         i.val(i.attr('defaultValue'));
0478
0479                                                                         x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
0480
0481                                                                         if (i.val() == '') {
0482                                                                                 i.hide();
0483                                                                                 x.show();
0484                                                                         }
0485                                                                         else {
0486                                                                                 i.show();
0487                                                                                 x.hide();
0488                                                                         }
0489
0490                                                                         break;
0491
0492                                                                 case 'checkbox':
0493                                                                 case 'radio':
0494                                                                         i.attr('checked', i.attr('defaultValue'));
0495                                                                         break;
0496
0497                                                                 case 'text':
0498                                                                 case 'textarea':
0499                                                                         i.val(i.attr('defaultValue'));
0500
0501                                                                         if (i.val() == '') {
0502                                                                                 i.addClass('polyfill-placeholder');
0503                                                                                 i.val(i.attr('placeholder'));
0504                                                                         }
0505
0506                                                                         break;
0507
0508                                                                 default:
0509                                                                         i.val(i.attr('defaultValue'));
0510                                                                         break;
0511
0512                                                         }
0513                                                 });
0514
0515                                 });
0516
0517                 return $this;
0518
0519         };
0520
0521         /**

0522          * Moves elements to/from the first positions of their respective parents.

0523          * @param {jQuery} $elements Elements (or selector) to move.

0524          * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.

0525          */
0526         $.prioritize = function($elements, condition) {
0527
0528                 var key = '__prioritize';
0529
0530                 // Expand $elements if it's not already a jQuery object.

0531                         if (typeof $elements != 'jQuery')
0532                                 $elements = $($elements);
0533
0534                 // Step through elements.

0535                         $elements.each(function() {
0536
0537                                 var     $e = $(this), $p,
0538                                         $parent = $e.parent();
0539
0540                                 // No parent? Bail.

0541                                         if ($parent.length == 0)
0542                                                 return;
0543
0544                                 // Not moved? Move it.

0545                                         if (!$e.data(key)) {
0546
0547                                                 // Condition is false? Bail.

0548                                                         if (!condition)
0549                                                                 return;
0550
0551                                                 // Get placeholder (which will serve as our point of reference for when this element needs to move back).

0552                                                         $p = $e.prev();
0553
0554                                                         // Couldn't find anything? Means this element's already at the top, so bail.

0555                                                                 if ($p.length == 0)
0556                                                                         return;
0557
0558                                                 // Move element to top of parent.

0559                                                         $e.prependTo($parent);
0560
0561                                                 // Mark element as moved.

0562                                                         $e.data(key, $p);
0563
0564                                         }
0565
0566                                 // Moved already?

0567                                         else {
0568
0569                                                 // Condition is true? Bail.

0570                                                         if (condition)
0571                                                                 return;
0572
0573                                                 $p = $e.data(key);
0574
0575                                                 // Move element back to its original location (using our placeholder).

0576                                                         $e.insertAfter($p);
0577
0578                                                 // Unmark element as moved.

0579                                                         $e.removeData(key);
0580
0581                                         }
0582
0583                         });
0584
0585         };
0586
0587 })(jQuery);