Refactor code structure for improved readability and maintainability
This commit is contained in:
224
modules/lib/uniform/README.textile
Normal file
224
modules/lib/uniform/README.textile
Normal file
@ -0,0 +1,224 @@
|
||||
h1. Uniform
|
||||
|
||||
Sexy form elements with jQuery. Now with html5 attributes
|
||||
|
||||
Version 1.8
|
||||
|
||||
Requires jQuery 1.6+
|
||||
|
||||
Licensed under:
|
||||
MIT License - http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
h2. Installation
|
||||
|
||||
Installation of Uniform is quite simple. First, make sure you have jQuery 1.4+ installed. Then you’ll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page:
|
||||
|
||||
bc. <script src="jquery.uniform.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />
|
||||
|
||||
h2. Basic usage
|
||||
|
||||
Using Uniform can be quite easy as well. Simply call:
|
||||
|
||||
$("select").uniform();
|
||||
|
||||
To “uniform” all possible form elements, just do something like this:
|
||||
|
||||
$("select, input[type=checkbox], input[type=radio], input[type=file], input[type=submit], a.button, button").uniform();
|
||||
|
||||
A complete tag in the HEAD section of your site can therefore look like this:
|
||||
|
||||
bc. <script type='text/javascript'>
|
||||
$(function(){
|
||||
$("select, input:checkbox, input:radio, input:file").uniform();
|
||||
});
|
||||
</script>
|
||||
|
||||
Remember that it is essential to first follow the steps in the Installation section here above.
|
||||
|
||||
h2. Extra parameters
|
||||
|
||||
You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like this:
|
||||
|
||||
bc. $("select").uniform({
|
||||
param1: value,
|
||||
param2: value,
|
||||
param3: value
|
||||
});
|
||||
|
||||
h3. _NEW!_ selectAutoWidth(boolean)
|
||||
|
||||
*Default:* true
|
||||
If this option is set to true, Uniform will try to fit the select width to the actual content, if the select is populated via javascript it is recommended to set a custom width for the element (style="width:XX") or uniform it after being populated;
|
||||
|
||||
h3. _NEW!_ autoHide(boolean)
|
||||
|
||||
*Default:* true
|
||||
If this option is set to true, Uniform will hide the new elements if the existing elements are currently hidden using display: none;
|
||||
|
||||
*REMEMBER*: If you want to show a select or checkbox you'll need to show the new Uniform div instead of the child element.
|
||||
|
||||
h3. selectClass (string)
|
||||
|
||||
*Default:* “selector”
|
||||
Sets the class given to the wrapper div for select elements.
|
||||
|
||||
@$("select").uniform({selectClass: 'mySelectClass'});@
|
||||
|
||||
h3. radioClass (string)
|
||||
|
||||
*Default:* “radio”
|
||||
Sets the class given to the wrapper div for radio elements.
|
||||
|
||||
@$(":radio").uniform({radioClass: 'myRadioClass'});@
|
||||
|
||||
h3. checkboxClass (string)
|
||||
|
||||
*Default:* “checker”
|
||||
Sets the class given to the wrapper div for checkbox elements.
|
||||
|
||||
@$(":checkbox").uniform({checkboxClass: 'myCheckClass'});@
|
||||
|
||||
h3. fileClass (string)
|
||||
|
||||
*Default:* “uploader”
|
||||
Sets the class given to the wrapper div for file upload elements.
|
||||
|
||||
@$(":file").uniform({fileClass: 'myFileClass'});@
|
||||
|
||||
h3. filenameClass (string)
|
||||
|
||||
*Default:* “filename”
|
||||
Sets the class given to div inside a file upload container that spits out the filename.
|
||||
|
||||
@$(":file").uniform({filenameClass: 'myFilenameClass'});@
|
||||
|
||||
h3. fileBtnClass (string)
|
||||
|
||||
*Default:* “action”
|
||||
Sets the class given to div inside a file upload container that acts as the “Choose file” button.
|
||||
|
||||
@$(":file").uniform({fileBtnClass: 'myFileBtnClass'});@
|
||||
|
||||
h3. fileDefaultText (string)
|
||||
|
||||
*Default:* “No file selected”
|
||||
Sets the text written in the filename div of a file upload input when there is no file selected.
|
||||
|
||||
@$(":file").uniform({fileDefaultText: 'Select a file please'});@
|
||||
|
||||
h3. fileBtnText(string)
|
||||
|
||||
*Default:* “Choose File”
|
||||
Sets the text written on the action button inside a file upload input.
|
||||
|
||||
@$(":file").uniform({fileBtnText: 'Choose…'});@
|
||||
|
||||
h3. buttonClass(string)
|
||||
|
||||
*Default:* "button"
|
||||
Sets the class given to a button that's been uniformed
|
||||
|
||||
@$("input[type=button]").uniform({buttonClass: 'myBtnClass'});@
|
||||
|
||||
h3. checkedClass (string)
|
||||
|
||||
*Default:* “checked”
|
||||
Sets the class given to elements when they are checked (radios and checkboxes).
|
||||
|
||||
@$(":radio, :checkbox").uniform({checkedClass: 'myCheckedClass'});@
|
||||
|
||||
h3. focusClass (string)
|
||||
|
||||
*Default:* “focus”
|
||||
Sets the class given to elements when they are focused.
|
||||
|
||||
@$("select").uniform({focusClass: 'myFocusClass'});@
|
||||
|
||||
h3. disabledClass (string)
|
||||
|
||||
*Default:* “disabled”
|
||||
Sets the class given to elements when they are disabled.
|
||||
|
||||
@$("select").uniform({disabledClass: 'myDisabledClass'});@
|
||||
|
||||
h3. activeClass (string)
|
||||
|
||||
*Default:* “active”
|
||||
Sets the class given to elements when they are active (pressed).
|
||||
|
||||
@$("select").uniform({activeClass: 'myActiveClass'});@
|
||||
|
||||
h3. hoverClass (string)
|
||||
|
||||
*Default:* “hover”
|
||||
Sets the class given to elements when they are currently hovered.
|
||||
|
||||
@$("select").uniform({hoverClass: 'myHoverClass'});@
|
||||
|
||||
h3. useID (boolean)
|
||||
|
||||
*Default:* true
|
||||
If true, sets an ID on the container div of each form element. The ID is a prefixed version of the same ID of the form element.
|
||||
|
||||
@$("select").uniform({useID: false});@
|
||||
|
||||
h3. idPrefix (string)
|
||||
|
||||
*Default:* “uniform”
|
||||
If useID is set to true, this string is prefixed to element ID’s and attached to the container div of each uniformed element. If you have a checkbox with the ID of “remember-me” the container div would have the ID “uniform-remember-me”.
|
||||
|
||||
@$("select").uniform({idPrefix: 'container'});@
|
||||
|
||||
h3. resetSelector (boolean/string)
|
||||
|
||||
*Default:* false
|
||||
This parameter allows you to use a jQuery-style selector to point to a “reset” button in your form if you have one. Use false if you have no “reset” button, or a selector string that points to the reset button if you have one.
|
||||
|
||||
@$("select").uniform({resetSelector: 'input[type="reset"]'});@
|
||||
|
||||
h2. Additional functions
|
||||
|
||||
In addition to the parameters, there are a couple of other ways you can interact with Uniform.
|
||||
|
||||
h3. $.uniform.update([elem/selector string]);
|
||||
|
||||
If you need to change values on the form dynamically you must tell Uniform to update that element’s style. Fortunately, it’s very simple. Just call this function, and Uniform will do the rest.
|
||||
|
||||
@$.uniform.update("#myUpdatedCheckbox");@
|
||||
|
||||
If you are lazy, or just don’t specifically know which element to update, you can just leave out the parameter (see below) and Uniform will update all Uniformed elements on the page:
|
||||
|
||||
@$.uniform.update();@
|
||||
|
||||
h3. $.uniform.restore([elem/selector string]);
|
||||
|
||||
If you want to "un-uniform" something, simply call this function. It will remove the inline styles, extra dom elements, and event handlers, effectively restoring the element to it's previous state.
|
||||
|
||||
@$.uniform.restore("select");@
|
||||
|
||||
h3. $.uniform.elements[]
|
||||
|
||||
You can get an array of all the elements that have been Uniformed at any time using this public variable. Wouldn’t advise changing the contents though!
|
||||
|
||||
@var uniforms = $.uniform.elements;@
|
||||
|
||||
h2. Customizing CSS
|
||||
|
||||
To edit the CSS of Uniform it is highly recommended to not edit the theme files, but to override them using CSS. Make sure your CSS file comes after the uniform theme css file in the HEAD section.
|
||||
|
||||
It's common to want to resize the selects or other elements. The best way is to set the width property on the div element, span element and the form element itself. Look through the theme CSS in the _presentation_ section to see where the width property is currently set.
|
||||
|
||||
h2. Tips & tricks
|
||||
|
||||
Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:
|
||||
|
||||
Remember to change the CSS classes in the theme if you change the parameters for elements’ classes. This can be tedious work, but if you don’t do it, it’s not going to look correct. Find and Replace is your friend.
|
||||
|
||||
Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in Javascript or using a Reset button of some kind remember to call $.uniform.update(); to sync the changes with Uniform.
|
||||
|
||||
Uniform is disabled in IE6. It’s not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your “naked” form elements look alright in there.
|
||||
|
||||
You’re on your own for styling text inputs and more. Fortunately, things that are not handled by Uniform are pretty easy to skin. :)
|
||||
|
||||
If you have ideas, or bugs, please post them in GitHub. We rely on our users for ideas for improvements and bug reports. Otherwise Uniform will stay static.
|
||||
691
modules/lib/uniform/jquery.uniform.js
Normal file
691
modules/lib/uniform/jquery.uniform.js
Normal file
@ -0,0 +1,691 @@
|
||||
/*
|
||||
|
||||
Uniform v1.8.0
|
||||
Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC
|
||||
http://pixelmatrixdesign.com
|
||||
|
||||
Requires jQuery 1.3 or newer
|
||||
|
||||
Much thanks to Thomas Reynolds and Buck Wilson for their help and advice on this
|
||||
|
||||
Disabling text selection is made possible by Mathias Bynens <http://mathiasbynens.be/>
|
||||
and his noSelect plugin. <http://github.com/mathiasbynens/noSelect-jQuery-Plugin>
|
||||
|
||||
Also, thanks to David Kaneda and Eugene Bond for their contributions to the plugin
|
||||
|
||||
License:
|
||||
MIT License - http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
Enjoy!
|
||||
|
||||
*/
|
||||
|
||||
(function ($, undefined) {
|
||||
$.uniform = {
|
||||
options: {
|
||||
selectClass: 'uni-selector',
|
||||
radioClass: 'uni-radio',
|
||||
checkboxClass: 'uni-checker',
|
||||
fileClass: 'uni-uploader',
|
||||
filenameClass: 'uni-filename',
|
||||
fileBtnClass: 'uni-action',
|
||||
fileDefaultText: 'No file selected',
|
||||
fileBtnText: 'Choose File',
|
||||
checkedClass: 'uni-checked',
|
||||
focusClass: 'uni-focus',
|
||||
disabledClass: 'uni-disabled',
|
||||
buttonClass: 'uni-button',
|
||||
activeClass: 'uni-active',
|
||||
hoverClass: 'uni-hover',
|
||||
useID: true,
|
||||
idPrefix: 'uniform',
|
||||
resetSelector: false,
|
||||
autoHide: true,
|
||||
selectAutoWidth: false
|
||||
},
|
||||
elements: []
|
||||
};
|
||||
|
||||
if($.browser.msie && $.browser.version < 7){
|
||||
$.support.selectOpacity = false;
|
||||
}else{
|
||||
$.support.selectOpacity = true;
|
||||
}
|
||||
|
||||
$.fn.uniform = function (options) {
|
||||
|
||||
options = $.extend({}, $.uniform.options, options);
|
||||
|
||||
var el = this;
|
||||
//code for specifying a reset button
|
||||
if (options.resetSelector !== false) {
|
||||
$(options.resetSelector).mouseup(function () {
|
||||
function resetThis() {
|
||||
$.uniform.update(el);
|
||||
}
|
||||
window.setTimeout(resetThis, 10);
|
||||
});
|
||||
}
|
||||
|
||||
function doInput($el){
|
||||
$el.addClass($el.attr("type"));
|
||||
storeElement($el);
|
||||
}
|
||||
|
||||
function doTextarea($el){
|
||||
$el.addClass("uniform");
|
||||
storeElement($el);
|
||||
}
|
||||
|
||||
function doButton($el){
|
||||
var divTag = $("<div>"),
|
||||
spanTag = $("<span>");
|
||||
|
||||
divTag.addClass(options.buttonClass);
|
||||
|
||||
if(options.useID && $el.attr("id")) divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
||||
|
||||
var btnText;
|
||||
|
||||
if($el.is("a, button")){
|
||||
btnText = $el.text();
|
||||
}else if($el.is(":submit, :reset, input[type=button]")){
|
||||
btnText = $el.attr("value");
|
||||
}
|
||||
|
||||
btnText = btnText == "" ? $el.is(":reset") ? "Reset" : "Submit" : btnText;
|
||||
|
||||
spanTag.text(btnText);
|
||||
|
||||
$el.css("display", "none");
|
||||
$el.wrap(divTag);
|
||||
$el.wrap(spanTag);
|
||||
|
||||
//redefine variables
|
||||
divTag = $el.closest("div");
|
||||
spanTag = $el.closest("span");
|
||||
|
||||
if($el.is(":disabled")) divTag.addClass(options.disabledClass);
|
||||
|
||||
divTag
|
||||
.bind("mouseenter.uniform", function(){
|
||||
divTag.addClass(options.hoverClass);
|
||||
})
|
||||
.bind("mouseleave.uniform", function(){
|
||||
divTag.removeClass(options.hoverClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mousedown.uniform touchbegin.uniform", function(){
|
||||
divTag.addClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseup.uniform touchend.uniform", function(){
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("click.uniform touchend.uniform", function(e){
|
||||
if($(e.target).is("span, div")){
|
||||
if($el[0].dispatchEvent){
|
||||
var ev = document.createEvent('MouseEvents');
|
||||
ev.initEvent( 'click', true, true );
|
||||
$el[0].dispatchEvent(ev);
|
||||
}else{
|
||||
$el.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$el
|
||||
.bind("focus.uniform", function(){
|
||||
divTag.addClass(options.focusClass);
|
||||
})
|
||||
.bind("blur.uniform", function(){
|
||||
divTag.removeClass(options.focusClass);
|
||||
});
|
||||
|
||||
$.uniform.noSelect(divTag);
|
||||
storeElement($el);
|
||||
|
||||
}
|
||||
|
||||
function doSelect($el) {
|
||||
var divTag = $('<div />'),
|
||||
spanTag = $('<span />'),
|
||||
origElemWidth = $el.width();
|
||||
|
||||
if($el.css("display") == "none" && options.autoHide){
|
||||
divTag.hide();
|
||||
}
|
||||
|
||||
divTag.addClass(options.selectClass);
|
||||
|
||||
/**
|
||||
* Thanks to @MaxEvron @kjantzer and @furkanmustafa from GitHub
|
||||
*/
|
||||
if(options.selectAutoWidth){
|
||||
var origDivWidth = divTag.width();
|
||||
var origSpanWidth = spanTag.width();
|
||||
var adjustDiff = origSpanWidth-origElemWidth;
|
||||
divTag.width(origDivWidth - adjustDiff + 25);
|
||||
$el.width(origElemWidth + 32);
|
||||
$el.css('left','2px');
|
||||
spanTag.width(origElemWidth);
|
||||
}
|
||||
|
||||
if(options.useID && $el.attr("id")){
|
||||
divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
||||
}
|
||||
|
||||
var selected = $el.find(":selected:first");
|
||||
if(selected.length == 0){
|
||||
selected = $el.find("option:first");
|
||||
}
|
||||
spanTag.html(selected.html());
|
||||
|
||||
$el.css('opacity', 0);
|
||||
$el.wrap(divTag);
|
||||
$el.before(spanTag);
|
||||
//redefine variables
|
||||
divTag = $el.parent("div");
|
||||
spanTag = $el.siblings("span");
|
||||
|
||||
if(options.selectAutoWidth) {
|
||||
var padding = parseInt(divTag.css("paddingLeft"), 10);
|
||||
spanTag.width(origElemWidth-padding-15);
|
||||
$el.width(origElemWidth+padding);
|
||||
$el.css('min-width', origElemWidth+padding + 'px');
|
||||
divTag.width(origElemWidth+padding);
|
||||
}
|
||||
|
||||
|
||||
$el
|
||||
.bind("change.uniform", function() {
|
||||
spanTag.text($el.find(":selected").html());
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("focus.uniform", function() {
|
||||
divTag.addClass(options.focusClass);
|
||||
})
|
||||
.bind("blur.uniform", function() {
|
||||
divTag.removeClass(options.focusClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mousedown.uniform touchbegin.uniform", function() {
|
||||
divTag.addClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseup.uniform touchend.uniform", function() {
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("click.uniform touchend.uniform", function(){
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseenter.uniform", function() {
|
||||
divTag.addClass(options.hoverClass);
|
||||
})
|
||||
.bind("mouseleave.uniform", function() {
|
||||
divTag.removeClass(options.hoverClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("keyup.uniform", function(){
|
||||
spanTag.text($el.find(":selected").html());
|
||||
});
|
||||
|
||||
//handle disabled state
|
||||
if($el.is(":disabled")){
|
||||
//box is checked by default, check our box
|
||||
divTag.addClass(options.disabledClass);
|
||||
}
|
||||
$.uniform.noSelect(spanTag);
|
||||
|
||||
storeElement($el);
|
||||
|
||||
}
|
||||
|
||||
function doCheckbox($el){
|
||||
var divTag = $('<div />'),
|
||||
spanTag = $('<span />');
|
||||
|
||||
if($el.css("display") == "none" && options.autoHide){
|
||||
divTag.hide();
|
||||
}
|
||||
|
||||
divTag.addClass(options.checkboxClass);
|
||||
|
||||
//assign the id of the element
|
||||
if(options.useID && $el.attr("id")){
|
||||
divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
||||
}
|
||||
|
||||
//wrap with the proper elements
|
||||
$el.wrap(divTag);
|
||||
$el.wrap(spanTag);
|
||||
|
||||
//redefine variables
|
||||
spanTag = $el.parent();
|
||||
divTag = spanTag.parent();
|
||||
|
||||
//hide normal input and add focus classes
|
||||
$el
|
||||
.css("opacity", 0)
|
||||
.bind("focus.uniform", function(){
|
||||
divTag.addClass(options.focusClass);
|
||||
})
|
||||
.bind("blur.uniform", function(){
|
||||
divTag.removeClass(options.focusClass);
|
||||
})
|
||||
.bind("click.uniform touchend.uniform", function(){
|
||||
if ( $el.is(":checked") ) {
|
||||
// An unchecked box was clicked. Change the checkbox to checked.
|
||||
$el.attr("checked", "checked");
|
||||
spanTag.addClass(options.checkedClass);
|
||||
} else {
|
||||
// A checked box was clicked. Change the checkbox to unchecked.
|
||||
$el.removeAttr("checked");
|
||||
spanTag.removeClass(options.checkedClass);
|
||||
}
|
||||
})
|
||||
.bind("mousedown.uniform touchbegin.uniform", function() {
|
||||
divTag.addClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseup.uniform touchend.uniform", function() {
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseenter.uniform", function() {
|
||||
divTag.addClass(options.hoverClass);
|
||||
})
|
||||
.bind("mouseleave.uniform", function() {
|
||||
divTag.removeClass(options.hoverClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
});
|
||||
|
||||
//handle defaults
|
||||
if($el.is(":checked")){
|
||||
$el.attr("checked", "checked"); // helpful when its by-default checked
|
||||
//box is checked by default, check our box
|
||||
spanTag.addClass(options.checkedClass);
|
||||
}
|
||||
|
||||
//handle disabled state
|
||||
if($el.is(":disabled")){
|
||||
//box is disabled by default, disable our box
|
||||
divTag.addClass(options.disabledClass);
|
||||
}
|
||||
|
||||
storeElement($el);
|
||||
}
|
||||
|
||||
function doRadio($el){
|
||||
var divTag = $('<div />'),
|
||||
spanTag = $('<span />');
|
||||
|
||||
if($el.css("display") == "none" && options.autoHide){
|
||||
divTag.hide();
|
||||
}
|
||||
|
||||
divTag.addClass(options.radioClass);
|
||||
|
||||
if(options.useID && $el.attr("id")){
|
||||
divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
||||
}
|
||||
|
||||
//wrap with the proper elements
|
||||
$el.wrap(divTag);
|
||||
$el.wrap(spanTag);
|
||||
|
||||
//redefine variables
|
||||
spanTag = $el.parent();
|
||||
divTag = spanTag.parent();
|
||||
|
||||
//hide normal input and add focus classes
|
||||
$el
|
||||
.css("opacity", 0)
|
||||
.bind("focus.uniform", function(){
|
||||
divTag.addClass(options.focusClass);
|
||||
})
|
||||
.bind("blur.uniform", function(){
|
||||
divTag.removeClass(options.focusClass);
|
||||
})
|
||||
.bind("click.uniform touchend.uniform", function(){
|
||||
if(!$el.is(":checked")){
|
||||
//box was just unchecked, uncheck span
|
||||
spanTag.removeClass(options.checkedClass);
|
||||
}else{
|
||||
//box was just checked, check span
|
||||
var classes = options.radioClass.split(" ")[0];
|
||||
$("." + classes + " span." + options.checkedClass + ":has([name='" + $el.attr('name') + "'])").removeClass(options.checkedClass);
|
||||
spanTag.addClass(options.checkedClass);
|
||||
}
|
||||
})
|
||||
.bind("mousedown.uniform touchend.uniform", function() {
|
||||
if(!$el.is(":disabled")){
|
||||
divTag.addClass(options.activeClass);
|
||||
}
|
||||
})
|
||||
.bind("mouseup.uniform touchbegin.uniform", function() {
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseenter.uniform touchend.uniform", function() {
|
||||
divTag.addClass(options.hoverClass);
|
||||
})
|
||||
.bind("mouseleave.uniform", function() {
|
||||
divTag.removeClass(options.hoverClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
});
|
||||
|
||||
//handle defaults
|
||||
if($el.is(":checked")){
|
||||
//box is checked by default, check span
|
||||
spanTag.addClass(options.checkedClass);
|
||||
}
|
||||
//handle disabled state
|
||||
if($el.is(":disabled")){
|
||||
//box is checked by default, check our box
|
||||
divTag.addClass(options.disabledClass);
|
||||
}
|
||||
|
||||
storeElement($el);
|
||||
|
||||
}
|
||||
|
||||
function doFile($el) {
|
||||
var divTag = $('<div />'),
|
||||
filenameTag = $('<span>'+options.fileDefaultText+'</span>'),
|
||||
btnTag = $('<span>'+options.fileBtnText+'</span>');
|
||||
|
||||
if($el.css("display") == "none" && options.autoHide){
|
||||
divTag.hide();
|
||||
}
|
||||
|
||||
divTag.addClass(options.fileClass);
|
||||
filenameTag.addClass(options.filenameClass);
|
||||
btnTag.addClass(options.fileBtnClass);
|
||||
|
||||
if(options.useID && $el.attr("id")){
|
||||
divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
|
||||
}
|
||||
|
||||
//wrap with the proper elements
|
||||
$el.wrap(divTag);
|
||||
$el.after(btnTag);
|
||||
$el.after(filenameTag);
|
||||
|
||||
//redefine variables
|
||||
divTag = $el.closest("div");
|
||||
filenameTag = $el.siblings("." + options.filenameClass);
|
||||
btnTag = $el.siblings("." + options.fileBtnClass);
|
||||
|
||||
//set the size
|
||||
if (!$el.attr("size")) {
|
||||
$el.attr("size", divTag.width() / 10);
|
||||
}
|
||||
|
||||
//actions
|
||||
var setFilename = function()
|
||||
{
|
||||
var filename = $el.val();
|
||||
if (filename === '')
|
||||
{
|
||||
filename = options.fileDefaultText;
|
||||
}
|
||||
else
|
||||
{
|
||||
filename = filename.split(/[\/\\]+/);
|
||||
filename = filename[(filename.length-1)];
|
||||
}
|
||||
filenameTag.text(filename);
|
||||
};
|
||||
|
||||
// Account for input saved across refreshes
|
||||
setFilename();
|
||||
|
||||
$el
|
||||
.css("opacity", 0)
|
||||
.bind("focus.uniform", function(){
|
||||
divTag.addClass(options.focusClass);
|
||||
})
|
||||
.bind("blur.uniform", function(){
|
||||
divTag.removeClass(options.focusClass);
|
||||
})
|
||||
.bind("mousedown.uniform", function() {
|
||||
if(!$el.is(":disabled")){
|
||||
divTag.addClass(options.activeClass);
|
||||
}
|
||||
})
|
||||
.bind("mouseup.uniform", function() {
|
||||
divTag.removeClass(options.activeClass);
|
||||
})
|
||||
.bind("mouseenter.uniform", function() {
|
||||
divTag.addClass(options.hoverClass);
|
||||
})
|
||||
.bind("mouseleave.uniform", function() {
|
||||
divTag.removeClass(options.hoverClass);
|
||||
divTag.removeClass(options.activeClass);
|
||||
});
|
||||
|
||||
// IE7 doesn't fire onChange until blur or second fire.
|
||||
if ($.browser.msie){
|
||||
// IE considers browser chrome blocking I/O, so it
|
||||
// suspends tiemouts until after the file has been selected.
|
||||
$el.bind('click.uniform.ie7', function() {
|
||||
setTimeout(setFilename, 0);
|
||||
});
|
||||
}else{
|
||||
// All other browsers behave properly
|
||||
$el.bind('change.uniform', setFilename);
|
||||
}
|
||||
|
||||
//handle defaults
|
||||
if($el.is(":disabled")){
|
||||
//box is checked by default, check our box
|
||||
divTag.addClass(options.disabledClass);
|
||||
}
|
||||
|
||||
$.uniform.noSelect(filenameTag);
|
||||
$.uniform.noSelect(btnTag);
|
||||
|
||||
storeElement($el);
|
||||
|
||||
}
|
||||
|
||||
$.uniform.restore = function(elem){
|
||||
if(elem == undefined){
|
||||
elem = $($.uniform.elements);
|
||||
}
|
||||
$(elem).each(function(){
|
||||
//Skip not uniformed elements
|
||||
if (!$(this).data('uniformed')) {
|
||||
return;
|
||||
}
|
||||
if($(this).is(":checkbox")){
|
||||
//unwrap from span and div
|
||||
$(this).unwrap().unwrap();
|
||||
}else if($(this).is("select")){
|
||||
//remove sibling span
|
||||
$(this).siblings("span").remove();
|
||||
//unwrap parent div
|
||||
$(this).unwrap();
|
||||
}else if($(this).is(":radio")){
|
||||
//unwrap from span and div
|
||||
$(this).unwrap().unwrap();
|
||||
}else if($(this).is(":file")){
|
||||
//remove sibling spans
|
||||
$(this).siblings("span").remove();
|
||||
//unwrap parent div
|
||||
$(this).unwrap();
|
||||
}else if($(this).is("button, :submit, :reset, a, input[type='button']")){
|
||||
//unwrap from span and div
|
||||
$(this).unwrap().unwrap();
|
||||
}
|
||||
|
||||
//unbind events
|
||||
$(this).unbind(".uniform");
|
||||
|
||||
//reset inline style
|
||||
$(this).css("opacity", "1");
|
||||
|
||||
//remove item from list of uniformed elements
|
||||
var index = $.inArray($(elem), $.uniform.elements);
|
||||
$.uniform.elements.splice(index, 1);
|
||||
$(this).removeData('uniformed');
|
||||
});
|
||||
};
|
||||
|
||||
function storeElement($el){
|
||||
//mark the element as uniformed
|
||||
$el.data('uniformed','true');
|
||||
//store this element in our global array
|
||||
elem = $el.get();
|
||||
if (elem.length > 1) {
|
||||
$.each(elem, function (i, val) {
|
||||
$.uniform.elements.push(val);
|
||||
});
|
||||
} else {
|
||||
$.uniform.elements.push(elem);
|
||||
}
|
||||
}
|
||||
|
||||
//noSelect v1.0
|
||||
$.uniform.noSelect = function(elem) {
|
||||
function f() {
|
||||
return false;
|
||||
};
|
||||
$(elem).each(function() {
|
||||
this.onselectstart = this.ondragstart = f; // Webkit & IE
|
||||
$(this)
|
||||
.mousedown(f) // Webkit & Opera
|
||||
.css({ MozUserSelect: 'none' }); // Firefox
|
||||
});
|
||||
};
|
||||
|
||||
$.uniform.update = function(elem){
|
||||
if(elem == undefined){
|
||||
elem = $($.uniform.elements);
|
||||
}
|
||||
//sanitize input
|
||||
elem = $(elem);
|
||||
|
||||
elem.each(function () {
|
||||
//do to each item in the selector
|
||||
//function to reset all classes
|
||||
var $e = $(this);
|
||||
if (!$e.data('uniformed')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($e.is("select")) {
|
||||
//element is a select
|
||||
var spanTag = $e.siblings("span");
|
||||
var divTag = $e.parent("div");
|
||||
|
||||
divTag.removeClass(options.hoverClass + " " + options.focusClass + " " + options.activeClass);
|
||||
|
||||
//reset current selected text
|
||||
spanTag.html($e.find(":selected").html());
|
||||
|
||||
if ($e.is(":disabled")) {
|
||||
divTag.addClass(options.disabledClass);
|
||||
} else {
|
||||
divTag.removeClass(options.disabledClass);
|
||||
}
|
||||
|
||||
} else if ($e.is(":checkbox")) {
|
||||
//element is a checkbox
|
||||
var spanTag = $e.closest("span");
|
||||
var divTag = $e.closest("div");
|
||||
|
||||
divTag.removeClass(options.hoverClass + " " + options.focusClass + " " + options.activeClass);
|
||||
spanTag.removeClass(options.checkedClass);
|
||||
|
||||
if ($e.is(":checked")) {
|
||||
spanTag.addClass(options.checkedClass);
|
||||
}
|
||||
if ($e.is(":disabled")) {
|
||||
divTag.addClass(options.disabledClass);
|
||||
} else {
|
||||
divTag.removeClass(options.disabledClass);
|
||||
}
|
||||
|
||||
} else if ($e.is(":radio")) {
|
||||
//element is a radio
|
||||
var spanTag = $e.closest("span");
|
||||
var divTag = $e.closest("div");
|
||||
|
||||
divTag.removeClass(options.hoverClass + " " + options.focusClass + " " + options.activeClass);
|
||||
spanTag.removeClass(options.checkedClass);
|
||||
|
||||
if ($e.is(":checked")) {
|
||||
spanTag.addClass(options.checkedClass);
|
||||
}
|
||||
|
||||
if ($e.is(":disabled")) {
|
||||
divTag.addClass(options.disabledClass);
|
||||
} else {
|
||||
divTag.removeClass(options.disabledClass);
|
||||
}
|
||||
} else if ($e.is(":file")){
|
||||
var divTag = $e.parent("div");
|
||||
var filenameTag = $e.siblings("."+options.filenameClass);
|
||||
btnTag = $e.siblings(options.fileBtnClass);
|
||||
|
||||
divTag.removeClass(options.hoverClass + " " + options.focusClass + " " + options.activeClass);
|
||||
|
||||
filenameTag.text($e.val());
|
||||
|
||||
if ($e.is(":disabled")) {
|
||||
divTag.addClass(options.disabledClass);
|
||||
} else {
|
||||
divTag.removeClass(options.disabledClass);
|
||||
}
|
||||
}else if($e.is(":submit, :reset, button, a, input[type='button']")){
|
||||
var divTag = $e.closest("div");
|
||||
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
|
||||
|
||||
if ($e.is(":disabled")){
|
||||
divTag.addClass(options.disabledClass);
|
||||
} else {
|
||||
divTag.removeClass(options.disabledClass);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
var $el = $(this);
|
||||
|
||||
//avoid uniforming elements already uniformed
|
||||
if ($el.data('uniformed')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// IE6 can't be styled
|
||||
if(! $.support.selectOpacity){
|
||||
return;
|
||||
}
|
||||
|
||||
if($el.is("select")){
|
||||
//element is a select
|
||||
if(!this.multiple){
|
||||
//element is not a multi-select
|
||||
if($el.attr("size") == undefined || $el.attr("size") <= 1){
|
||||
doSelect($el);
|
||||
}
|
||||
}
|
||||
}else if($el.is(":checkbox")){
|
||||
//element is a checkbox
|
||||
doCheckbox($el);
|
||||
}else if($el.is(":radio")){
|
||||
//element is a radio
|
||||
doRadio($el);
|
||||
}else if($el.is(":file")){
|
||||
//element is a file upload
|
||||
doFile($el);
|
||||
}else if($el.is(":text, :password, input[type='email'], input[type='search'], input[type='tel'], input[type='url'], input[type='datetime'], input[type='date'], input[type='month'], input[type='week'], input[type='time'], input[type='datetime-local'], input[type='number'], input[type='color']")){
|
||||
doInput($el);
|
||||
}else if($el.is("textarea")){
|
||||
doTextarea($el);
|
||||
}else if($el.is("a, :submit, :reset, button, input[type='button']")){
|
||||
doButton($el);
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
19
modules/lib/uniform/jquery.uniform.min.js
vendored
Normal file
19
modules/lib/uniform/jquery.uniform.min.js
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
(function(d,i){d.uniform={options:{selectClass:"uni-selector",radioClass:"uni-radio",checkboxClass:"uni-checker",fileClass:"uni-uploader",filenameClass:"uni-filename",fileBtnClass:"uni-action",fileDefaultText:"No file selected",fileBtnText:"Choose File",checkedClass:"uni-checked",focusClass:"uni-focus",disabledClass:"uni-disabled",buttonClass:"uni-button",activeClass:"uni-active",hoverClass:"uni-hover",useID:!0,idPrefix:"uniform",resetSelector:!1,autoHide:!0,selectAutoWidth:!1},elements:[]};d.support.selectOpacity=
|
||||
d.browser.msie&&7>d.browser.version?!1:!0;d.fn.uniform=function(b){function j(a){var c=d("<div>"),e=d("<span>");c.addClass(b.buttonClass);b.useID&&a.attr("id")&&c.attr("id",b.idPrefix+"-"+a.attr("id"));var f;a.is("a, button")?f=a.text():a.is(":submit, :reset, input[type=button]")&&(f=a.attr("value"));f=""==f?a.is(":reset")?"Reset":"Submit":f;e.text(f);a.css("display","none");a.wrap(c);a.wrap(e);c=a.closest("div");e=a.closest("span");a.is(":disabled")&&c.addClass(b.disabledClass);c.bind("mouseenter.uniform",
|
||||
function(){c.addClass(b.hoverClass)}).bind("mouseleave.uniform",function(){c.removeClass(b.hoverClass);c.removeClass(b.activeClass)}).bind("mousedown.uniform touchbegin.uniform",function(){c.addClass(b.activeClass)}).bind("mouseup.uniform touchend.uniform",function(){c.removeClass(b.activeClass)}).bind("click.uniform touchend.uniform",function(b){d(b.target).is("span, div")&&(a[0].dispatchEvent?(b=document.createEvent("MouseEvents"),b.initEvent("click",!0,!0),a[0].dispatchEvent(b)):a.click())});a.bind("focus.uniform",
|
||||
function(){c.addClass(b.focusClass)}).bind("blur.uniform",function(){c.removeClass(b.focusClass)});d.uniform.noSelect(c);h(a)}function k(a){var c=d("<div />"),e=d("<span />"),f=a.width();"none"==a.css("display")&&b.autoHide&&c.hide();c.addClass(b.selectClass);if(b.selectAutoWidth){var g=c.width(),l=e.width()-f;c.width(g-l+25);a.width(f+32);a.css("left","2px");e.width(f)}b.useID&&a.attr("id")&&c.attr("id",b.idPrefix+"-"+a.attr("id"));g=a.find(":selected:first");0==g.length&&(g=a.find("option:first"));
|
||||
e.html(g.html());a.css("opacity",0);a.wrap(c);a.before(e);c=a.parent("div");e=a.siblings("span");b.selectAutoWidth&&(g=parseInt(c.css("paddingLeft"),10),e.width(f-g-15),a.width(f+g),a.css("min-width",f+g+"px"),c.width(f+g));a.bind("change.uniform",function(){e.text(a.find(":selected").html());c.removeClass(b.activeClass)}).bind("focus.uniform",function(){c.addClass(b.focusClass)}).bind("blur.uniform",function(){c.removeClass(b.focusClass);c.removeClass(b.activeClass)}).bind("mousedown.uniform touchbegin.uniform",
|
||||
function(){c.addClass(b.activeClass)}).bind("mouseup.uniform touchend.uniform",function(){c.removeClass(b.activeClass)}).bind("click.uniform touchend.uniform",function(){c.removeClass(b.activeClass)}).bind("mouseenter.uniform",function(){c.addClass(b.hoverClass)}).bind("mouseleave.uniform",function(){c.removeClass(b.hoverClass);c.removeClass(b.activeClass)}).bind("keyup.uniform",function(){e.text(a.find(":selected").html())});a.is(":disabled")&&c.addClass(b.disabledClass);d.uniform.noSelect(e);h(a)}
|
||||
function m(a){var c=d("<div />"),e=d("<span />");"none"==a.css("display")&&b.autoHide&&c.hide();c.addClass(b.checkboxClass);b.useID&&a.attr("id")&&c.attr("id",b.idPrefix+"-"+a.attr("id"));a.wrap(c);a.wrap(e);e=a.parent();c=e.parent();a.css("opacity",0).bind("focus.uniform",function(){c.addClass(b.focusClass)}).bind("blur.uniform",function(){c.removeClass(b.focusClass)}).bind("click.uniform touchend.uniform",function(){a.is(":checked")?(a.attr("checked","checked"),e.addClass(b.checkedClass)):(a.removeAttr("checked"),
|
||||
e.removeClass(b.checkedClass))}).bind("mousedown.uniform touchbegin.uniform",function(){c.addClass(b.activeClass)}).bind("mouseup.uniform touchend.uniform",function(){c.removeClass(b.activeClass)}).bind("mouseenter.uniform",function(){c.addClass(b.hoverClass)}).bind("mouseleave.uniform",function(){c.removeClass(b.hoverClass);c.removeClass(b.activeClass)});a.is(":checked")&&(a.attr("checked","checked"),e.addClass(b.checkedClass));a.is(":disabled")&&c.addClass(b.disabledClass);h(a)}function n(a){var c=
|
||||
d("<div />"),e=d("<span />");"none"==a.css("display")&&b.autoHide&&c.hide();c.addClass(b.radioClass);b.useID&&a.attr("id")&&c.attr("id",b.idPrefix+"-"+a.attr("id"));a.wrap(c);a.wrap(e);e=a.parent();c=e.parent();a.css("opacity",0).bind("focus.uniform",function(){c.addClass(b.focusClass)}).bind("blur.uniform",function(){c.removeClass(b.focusClass)}).bind("click.uniform touchend.uniform",function(){if(a.is(":checked")){var c=b.radioClass.split(" ")[0];d("."+c+" span."+b.checkedClass+":has([name='"+a.attr("name")+
|
||||
"'])").removeClass(b.checkedClass);e.addClass(b.checkedClass)}else e.removeClass(b.checkedClass)}).bind("mousedown.uniform touchend.uniform",function(){a.is(":disabled")||c.addClass(b.activeClass)}).bind("mouseup.uniform touchbegin.uniform",function(){c.removeClass(b.activeClass)}).bind("mouseenter.uniform touchend.uniform",function(){c.addClass(b.hoverClass)}).bind("mouseleave.uniform",function(){c.removeClass(b.hoverClass);c.removeClass(b.activeClass)});a.is(":checked")&&e.addClass(b.checkedClass);
|
||||
a.is(":disabled")&&c.addClass(b.disabledClass);h(a)}function o(a){var c=d("<div />"),e=d("<span>"+b.fileDefaultText+"</span>"),f=d("<span>"+b.fileBtnText+"</span>");"none"==a.css("display")&&b.autoHide&&c.hide();c.addClass(b.fileClass);e.addClass(b.filenameClass);f.addClass(b.fileBtnClass);b.useID&&a.attr("id")&&c.attr("id",b.idPrefix+"-"+a.attr("id"));a.wrap(c);a.after(f);a.after(e);c=a.closest("div");e=a.siblings("."+b.filenameClass);f=a.siblings("."+b.fileBtnClass);a.attr("size")||a.attr("size",
|
||||
c.width()/10);var g=function(){var c=a.val();""===c?c=b.fileDefaultText:(c=c.split(/[\/\\]+/),c=c[c.length-1]);e.text(c)};g();a.css("opacity",0).bind("focus.uniform",function(){c.addClass(b.focusClass)}).bind("blur.uniform",function(){c.removeClass(b.focusClass)}).bind("mousedown.uniform",function(){a.is(":disabled")||c.addClass(b.activeClass)}).bind("mouseup.uniform",function(){c.removeClass(b.activeClass)}).bind("mouseenter.uniform",function(){c.addClass(b.hoverClass)}).bind("mouseleave.uniform",
|
||||
function(){c.removeClass(b.hoverClass);c.removeClass(b.activeClass)});d.browser.msie?a.bind("click.uniform.ie7",function(){setTimeout(g,0)}):a.bind("change.uniform",g);a.is(":disabled")&&c.addClass(b.disabledClass);d.uniform.noSelect(e);d.uniform.noSelect(f);h(a)}function h(a){a.data("uniformed","true");elem=a.get();1<elem.length?d.each(elem,function(a,b){d.uniform.elements.push(b)}):d.uniform.elements.push(elem)}var b=d.extend({},d.uniform.options,b),p=this;!1!==b.resetSelector&&d(b.resetSelector).mouseup(function(){window.setTimeout(function(){d.uniform.update(p)},
|
||||
10)});d.uniform.restore=function(a){a==i&&(a=d(d.uniform.elements));d(a).each(function(){if(d(this).data("uniformed")){d(this).is(":checkbox")?d(this).unwrap().unwrap():d(this).is("select")?(d(this).siblings("span").remove(),d(this).unwrap()):d(this).is(":radio")?d(this).unwrap().unwrap():d(this).is(":file")?(d(this).siblings("span").remove(),d(this).unwrap()):d(this).is("button, :submit, :reset, a, input[type='button']")&&d(this).unwrap().unwrap();d(this).unbind(".uniform");d(this).css("opacity",
|
||||
"1");var b=d.inArray(d(a),d.uniform.elements);d.uniform.elements.splice(b,1);d(this).removeData("uniformed")}})};d.uniform.noSelect=function(a){function b(){return!1}d(a).each(function(){this.onselectstart=this.ondragstart=b;d(this).mousedown(b).css({MozUserSelect:"none"})})};d.uniform.update=function(a){a==i&&(a=d(d.uniform.elements));a=d(a);a.each(function(){var a=d(this);if(a.data("uniformed"))if(a.is("select")){var e=a.siblings("span"),f=a.parent("div");f.removeClass(b.hoverClass+" "+b.focusClass+
|
||||
" "+b.activeClass);e.html(a.find(":selected").html());a.is(":disabled")?f.addClass(b.disabledClass):f.removeClass(b.disabledClass)}else a.is(":checkbox")?(e=a.closest("span"),f=a.closest("div"),f.removeClass(b.hoverClass+" "+b.focusClass+" "+b.activeClass),e.removeClass(b.checkedClass),a.is(":checked")&&e.addClass(b.checkedClass),a.is(":disabled")?f.addClass(b.disabledClass):f.removeClass(b.disabledClass)):a.is(":radio")?(e=a.closest("span"),f=a.closest("div"),f.removeClass(b.hoverClass+" "+b.focusClass+
|
||||
" "+b.activeClass),e.removeClass(b.checkedClass),a.is(":checked")&&e.addClass(b.checkedClass),a.is(":disabled")?f.addClass(b.disabledClass):f.removeClass(b.disabledClass)):a.is(":file")?(f=a.parent("div"),e=a.siblings("."+b.filenameClass),btnTag=a.siblings(b.fileBtnClass),f.removeClass(b.hoverClass+" "+b.focusClass+" "+b.activeClass),e.text(a.val()),a.is(":disabled")?f.addClass(b.disabledClass):f.removeClass(b.disabledClass)):a.is(":submit, :reset, button, a, input[type='button']")&&(f=a.closest("div"),
|
||||
f.removeClass(b.hoverClass+" "+b.focusClass+" "+b.activeClass),a.is(":disabled")?f.addClass(b.disabledClass):f.removeClass(b.disabledClass))})};return this.each(function(){var a=d(this);!a.data("uniformed")&&d.support.selectOpacity&&(a.is("select")?this.multiple||(a.attr("size")==i||1>=a.attr("size"))&&k(a):a.is(":checkbox")?m(a):a.is(":radio")?n(a):a.is(":file")?o(a):a.is(":text, :password, input[type='email'], input[type='search'], input[type='tel'], input[type='url'], input[type='datetime'], input[type='date'], input[type='month'], input[type='week'], input[type='time'], input[type='datetime-local'], input[type='number'], input[type='color']")?
|
||||
(a.addClass(a.attr("type")),h(a)):a.is("textarea")?(a.addClass("uniform"),h(a)):a.is("a, :submit, :reset, button, input[type='button']")&&j(a))})}})(jQuery);
|
||||
Reference in New Issue
Block a user