|
|
| Line 1: |
Line 1: |
| − | (function($) {
| + | - deprecated - |
| − | | + | |
| − | /**
| + | |
| − | * Generate an indented list of links from a nav. Meant for use with panel().
| + | |
| − | * @return {jQuery} jQuery object.
| + | |
| − | */
| + | |
| − | $.fn.navList = function() {
| + | |
| − | | + | |
| − | var $this = $(this);
| + | |
| − | $a = $this.find('a'),
| + | |
| − | b = [];
| + | |
| − | | + | |
| − | $a.each(function() {
| + | |
| − | | + | |
| − | var $this = $(this),
| + | |
| − | indent = Math.max(0, $this.parents('li').length - 1),
| + | |
| − | href = $this.attr('href'),
| + | |
| − | target = $this.attr('target');
| + | |
| − | | + | |
| − | b.push(
| + | |
| − | '<a ' +
| + | |
| − | 'class="link depth-' + indent + '"' +
| + | |
| − | ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
| + | |
| − | ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
| + | |
| − | '>' +
| + | |
| − | '<span class="indent-' + indent + '"></span>' +
| + | |
| − | $this.text() +
| + | |
| − | '</a>'
| + | |
| − | );
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | return b.join('');
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Panel-ify an element.
| + | |
| − | * @param {object} userConfig User config.
| + | |
| − | * @return {jQuery} jQuery object.
| + | |
| − | */
| + | |
| − | $.fn.panel = function(userConfig) {
| + | |
| − | | + | |
| − | // No elements?
| + | |
| − | if (this.length == 0)
| + | |
| − | return $this;
| + | |
| − | | + | |
| − | // Multiple elements?
| + | |
| − | if (this.length > 1) {
| + | |
| − | | + | |
| − | for (var i=0; i < this.length; i++)
| + | |
| − | $(this[i]).panel(userConfig);
| + | |
| − | | + | |
| − | return $this;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Vars.
| + | |
| − | var $this = $(this),
| + | |
| − | $body = $('body'),
| + | |
| − | $window = $(window),
| + | |
| − | id = $this.attr('id'),
| + | |
| − | config;
| + | |
| − | | + | |
| − | // Config.
| + | |
| − | config = $.extend({
| + | |
| − | | + | |
| − | // Delay.
| + | |
| − | delay: 0,
| + | |
| − | | + | |
| − | // Hide panel on link click.
| + | |
| − | hideOnClick: false,
| + | |
| − | | + | |
| − | // Hide panel on escape keypress.
| + | |
| − | hideOnEscape: false,
| + | |
| − | | + | |
| − | // Hide panel on swipe.
| + | |
| − | hideOnSwipe: false,
| + | |
| − | | + | |
| − | // Reset scroll position on hide.
| + | |
| − | resetScroll: false,
| + | |
| − | | + | |
| − | // Reset forms on hide.
| + | |
| − | resetForms: false,
| + | |
| − | | + | |
| − | // Side of viewport the panel will appear.
| + | |
| − | side: null,
| + | |
| − | | + | |
| − | // Target element for "class".
| + | |
| − | target: $this,
| + | |
| − | | + | |
| − | // Class to toggle.
| + | |
| − | visibleClass: 'visible'
| + | |
| − | | + | |
| − | }, userConfig);
| + | |
| − | | + | |
| − | // Expand "target" if it's not a jQuery object already.
| + | |
| − | if (typeof config.target != 'jQuery')
| + | |
| − | config.target = $(config.target);
| + | |
| − | | + | |
| − | // Panel.
| + | |
| − | | + | |
| − | // Methods.
| + | |
| − | $this._hide = function(event) {
| + | |
| − | | + | |
| − | // Already hidden? Bail.
| + | |
| − | if (!config.target.hasClass(config.visibleClass))
| + | |
| − | return;
| + | |
| − | | + | |
| − | // If an event was provided, cancel it.
| + | |
| − | if (event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | event.stopPropagation();
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Hide.
| + | |
| − | config.target.removeClass(config.visibleClass);
| + | |
| − | | + | |
| − | // Post-hide stuff.
| + | |
| − | window.setTimeout(function() {
| + | |
| − | | + | |
| − | // Reset scroll position.
| + | |
| − | if (config.resetScroll)
| + | |
| − | $this.scrollTop(0);
| + | |
| − | | + | |
| − | // Reset forms.
| + | |
| − | if (config.resetForms)
| + | |
| − | $this.find('form').each(function() {
| + | |
| − | this.reset();
| + | |
| − | });
| + | |
| − | | + | |
| − | }, config.delay);
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | // Vendor fixes.
| + | |
| − | $this
| + | |
| − | .css('-ms-overflow-style', '-ms-autohiding-scrollbar')
| + | |
| − | .css('-webkit-overflow-scrolling', 'touch');
| + | |
| − | | + | |
| − | // Hide on click.
| + | |
| − | if (config.hideOnClick) {
| + | |
| − | | + | |
| − | $this.find('a')
| + | |
| − | .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
| + | |
| − | | + | |
| − | $this
| + | |
| − | .on('click', 'a', function(event) {
| + | |
| − | | + | |
| − | var $a = $(this),
| + | |
| − | href = $a.attr('href'),
| + | |
| − | target = $a.attr('target');
| + | |
| − | | + | |
| − | if (!href || href == '#' || href == '' || href == '#' + id)
| + | |
| − | return;
| + | |
| − | | + | |
| − | // Cancel original event.
| + | |
| − | event.preventDefault();
| + | |
| − | event.stopPropagation();
| + | |
| − | | + | |
| − | // Hide panel.
| + | |
| − | $this._hide();
| + | |
| − | | + | |
| − | // Redirect to href.
| + | |
| − | window.setTimeout(function() {
| + | |
| − | | + | |
| − | if (target == '_blank')
| + | |
| − | window.open(href);
| + | |
| − | else
| + | |
| − | window.location.href = href;
| + | |
| − | | + | |
| − | }, config.delay + 10);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Event: Touch stuff.
| + | |
| − | $this.on('touchstart', function(event) {
| + | |
| − | | + | |
| − | $this.touchPosX = event.originalEvent.touches[0].pageX;
| + | |
| − | $this.touchPosY = event.originalEvent.touches[0].pageY;
| + | |
| − | | + | |
| − | })
| + | |
| − | | + | |
| − | $this.on('touchmove', function(event) {
| + | |
| − | | + | |
| − | if ($this.touchPosX === null
| + | |
| − | || $this.touchPosY === null)
| + | |
| − | return;
| + | |
| − | | + | |
| − | var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
| + | |
| − | diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
| + | |
| − | th = $this.outerHeight(),
| + | |
| − | ts = ($this.get(0).scrollHeight - $this.scrollTop());
| + | |
| − | | + | |
| − | // Hide on swipe?
| + | |
| − | if (config.hideOnSwipe) {
| + | |
| − | | + | |
| − | var result = false,
| + | |
| − | boundary = 20,
| + | |
| − | delta = 50;
| + | |
| − | | + | |
| − | switch (config.side) {
| + | |
| − | | + | |
| − | case 'left':
| + | |
| − | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'right':
| + | |
| − | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'top':
| + | |
| − | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'bottom':
| + | |
| − | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
| + | |
| − | break;
| + | |
| − | | + | |
| − | default:
| + | |
| − | break;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | if (result) {
| + | |
| − | | + | |
| − | $this.touchPosX = null;
| + | |
| − | $this.touchPosY = null;
| + | |
| − | $this._hide();
| + | |
| − | | + | |
| − | return false;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Prevent vertical scrolling past the top or bottom.
| + | |
| − | if (($this.scrollTop() < 0 && diffY < 0)
| + | |
| − | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | event.stopPropagation();
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | // Event: Prevent certain events inside the panel from bubbling.
| + | |
| − | $this.on('click touchend touchstart touchmove', function(event) {
| + | |
| − | event.stopPropagation();
| + | |
| − | });
| + | |
| − | | + | |
| − | // Event: Hide panel if a child anchor tag pointing to its ID is clicked.
| + | |
| − | $this.on('click', 'a[href="#' + id + '"]', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | event.stopPropagation();
| + | |
| − | | + | |
| − | config.target.removeClass(config.visibleClass);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | // Body.
| + | |
| − | | + | |
| − | // Event: Hide panel on body click/tap.
| + | |
| − | $body.on('click touchend', function(event) {
| + | |
| − | $this._hide(event);
| + | |
| − | });
| + | |
| − | | + | |
| − | // Event: Toggle.
| + | |
| − | $body.on('click', 'a[href="#' + id + '"]', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | event.stopPropagation();
| + | |
| − | | + | |
| − | config.target.toggleClass(config.visibleClass);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | // Window.
| + | |
| − | | + | |
| − | // Event: Hide on ESC.
| + | |
| − | if (config.hideOnEscape)
| + | |
| − | $window.on('keydown', function(event) {
| + | |
| − | | + | |
| − | if (event.keyCode == 27)
| + | |
| − | $this._hide(event);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | return $this;
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Apply "placeholder" attribute polyfill to one or more forms.
| + | |
| − | * @return {jQuery} jQuery object.
| + | |
| − | */
| + | |
| − | $.fn.placeholder = function() {
| + | |
| − | | + | |
| − | // Browser natively supports placeholders? Bail.
| + | |
| − | if (typeof (document.createElement('input')).placeholder != 'undefined')
| + | |
| − | return $(this);
| + | |
| − | | + | |
| − | // No elements?
| + | |
| − | if (this.length == 0)
| + | |
| − | return $this;
| + | |
| − | | + | |
| − | // Multiple elements?
| + | |
| − | if (this.length > 1) {
| + | |
| − | | + | |
| − | for (var i=0; i < this.length; i++)
| + | |
| − | $(this[i]).placeholder();
| + | |
| − | | + | |
| − | return $this;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Vars.
| + | |
| − | var $this = $(this);
| + | |
| − | | + | |
| − | // Text, TextArea.
| + | |
| − | $this.find('input[type=text],textarea')
| + | |
| − | .each(function() {
| + | |
| − | | + | |
| − | var i = $(this);
| + | |
| − | | + | |
| − | if (i.val() == ''
| + | |
| − | || i.val() == i.attr('placeholder'))
| + | |
| − | i
| + | |
| − | .addClass('polyfill-placeholder')
| + | |
| − | .val(i.attr('placeholder'));
| + | |
| − | | + | |
| − | })
| + | |
| − | .on('blur', function() {
| + | |
| − | | + | |
| − | var i = $(this);
| + | |
| − | | + | |
| − | if (i.attr('name').match(/-polyfill-field$/))
| + | |
| − | return;
| + | |
| − | | + | |
| − | if (i.val() == '')
| + | |
| − | i
| + | |
| − | .addClass('polyfill-placeholder')
| + | |
| − | .val(i.attr('placeholder'));
| + | |
| − | | + | |
| − | })
| + | |
| − | .on('focus', function() {
| + | |
| − | | + | |
| − | var i = $(this);
| + | |
| − | | + | |
| − | if (i.attr('name').match(/-polyfill-field$/))
| + | |
| − | return;
| + | |
| − | | + | |
| − | if (i.val() == i.attr('placeholder'))
| + | |
| − | i
| + | |
| − | .removeClass('polyfill-placeholder')
| + | |
| − | .val('');
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | // Password.
| + | |
| − | $this.find('input[type=password]')
| + | |
| − | .each(function() {
| + | |
| − | | + | |
| − | var i = $(this);
| + | |
| − | var x = $(
| + | |
| − | $('<div>')
| + | |
| − | .append(i.clone())
| + | |
| − | .remove()
| + | |
| − | .html()
| + | |
| − | .replace(/type="password"/i, 'type="text"')
| + | |
| − | .replace(/type=password/i, 'type=text')
| + | |
| − | );
| + | |
| − | | + | |
| − | if (i.attr('id') != '')
| + | |
| − | x.attr('id', i.attr('id') + '-polyfill-field');
| + | |
| − | | + | |
| − | if (i.attr('name') != '')
| + | |
| − | x.attr('name', i.attr('name') + '-polyfill-field');
| + | |
| − | | + | |
| − | x.addClass('polyfill-placeholder')
| + | |
| − | .val(x.attr('placeholder')).insertAfter(i);
| + | |
| − | | + | |
| − | if (i.val() == '')
| + | |
| − | i.hide();
| + | |
| − | else
| + | |
| − | x.hide();
| + | |
| − | | + | |
| − | i
| + | |
| − | .on('blur', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | | + | |
| − | var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
| + | |
| − | | + | |
| − | if (i.val() == '') {
| + | |
| − | | + | |
| − | i.hide();
| + | |
| − | x.show();
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | x
| + | |
| − | .on('focus', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | | + | |
| − | var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
| + | |
| − | | + | |
| − | x.hide();
| + | |
| − | | + | |
| − | i
| + | |
| − | .show()
| + | |
| − | .focus();
| + | |
| − | | + | |
| − | })
| + | |
| − | .on('keypress', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | x.val('');
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | // Events.
| + | |
| − | $this
| + | |
| − | .on('submit', function() {
| + | |
| − | kel
| + | |
| − | $this.find('input[type=text],input[type=password],textarea')
| + | |
| − | .each(function(event) {
| + | |
| − | | + | |
| − | var i = $(this);
| + | |
| − | | + | |
| − | if (i.attr('name').match(/-polyfill-field$/))
| + | |
| − | i.attr('name', '');
| + | |
| − | | + | |
| − | if (i.val() == i.attr('placeholder')) {
| + | |
| − | | + | |
| − | i.removeClass('polyfill-placeholder');
| + | |
| − | i.val('');
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | })
| + | |
| − | .on('reset', function(event) {
| + | |
| − | | + | |
| − | event.preventDefault();
| + | |
| − | | + | |
| − | $this.find('select')
| + | |
| − | .val($('option:first').val());
| + | |
| − | | + | |
| − | $this.find('input,textarea')
| + | |
| − | .each(function() {
| + | |
| − | | + | |
| − | var i = $(this),
| + | |
| − | x;
| + | |
| − | | + | |
| − | i.removeClass('polyfill-placeholder');
| + | |
| − | | + | |
| − | switch (this.type) {
| + | |
| − | | + | |
| − | case 'submit':
| + | |
| − | case 'reset':
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'password':
| + | |
| − | i.val(i.attr('defaultValue'));
| + | |
| − | | + | |
| − | x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
| + | |
| − | | + | |
| − | if (i.val() == '') {
| + | |
| − | i.hide();
| + | |
| − | x.show();
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | i.show();
| + | |
| − | x.hide();
| + | |
| − | }
| + | |
| − | | + | |
| − | break;
| + | |
| − | | + | |
| − | case 'checkbox':
| + | |
| − | case 'radio':
| + | |
| − | i.attr('checked', i.attr('defaultValue'));
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'text':
| + | |
| − | case 'textarea':
| + | |
| − | i.val(i.attr('defaultValue'));
| + | |
| − | | + | |
| − | if (i.val() == '') {
| + | |
| − | i.addClass('polyfill-placeholder');
| + | |
| − | i.val(i.attr('placeholder'));
| + | |
| − | }
| + | |
| − | | + | |
| − | break;
| + | |
| − | | + | |
| − | default:
| + | |
| − | i.val(i.attr('defaultValue'));
| + | |
| − | break;
| + | |
| − | | + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | return $this;
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Moves elements to/from the first positions of their respective parents.
| + | |
| − | * @param {jQuery} $elements Elements (or selector) to move.
| + | |
| − | * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
| + | |
| − | */
| + | |
| − | $.prioritize = function($elements, condition) {
| + | |
| − | | + | |
| − | var key = '__prioritize';
| + | |
| − | | + | |
| − | // Expand $elements if it's not already a jQuery object.
| + | |
| − | if (typeof $elements != 'jQuery')
| + | |
| − | $elements = $($elements);
| + | |
| − | | + | |
| − | // Step through elements.
| + | |
| − | $elements.each(function() {
| + | |
| − | | + | |
| − | var $e = $(this), $p,
| + | |
| − | $parent = $e.parent();
| + | |
| − | | + | |
| − | // No parent? Bail.
| + | |
| − | if ($parent.length == 0)
| + | |
| − | return;
| + | |
| − | | + | |
| − | // Not moved? Move it.
| + | |
| − | if (!$e.data(key)) {
| + | |
| − | | + | |
| − | // Condition is false? Bail.
| + | |
| − | if (!condition)
| + | |
| − | return;
| + | |
| − | | + | |
| − | // Get placeholder (which will serve as our point of reference for when this element needs to move back).
| + | |
| − | $p = $e.prev();
| + | |
| − | | + | |
| − | // Couldn't find anything? Means this element's already at the top, so bail.
| + | |
| − | if ($p.length == 0)
| + | |
| − | return;
| + | |
| − | | + | |
| − | // Move element to top of parent.
| + | |
| − | $e.prependTo($parent);
| + | |
| − | | + | |
| − | // Mark element as moved.
| + | |
| − | $e.data(key, $p);
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | // Moved already?
| + | |
| − | else {
| + | |
| − | | + | |
| − | // Condition is true? Bail.
| + | |
| − | if (condition)
| + | |
| − | return;
| + | |
| − | | + | |
| − | $p = $e.data(key);
| + | |
| − | | + | |
| − | // Move element back to its original location (using our placeholder).
| + | |
| − | $e.insertAfter($p);
| + | |
| − | | + | |
| − | // Unmark element as moved.
| + | |
| − | $e.removeData(key);
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | })(jQuery);
| + | |