查看文件: util.js

大小: 12.14 KB

类型: application/javascript

(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);