website

util.js (12433B)

---

 (function($) {
 
 	/**
 	 * 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() {
 
 					$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);