#### Limitless - Form Styling

##### Bootstrap switch

Inputs switch.min.js

###### Overview

Turn checkboxes and radio buttons into toggle switches. This library is created by Mattia Larentis and maintained by the core team, with the help of the community.

###### Usage

The plugin is jQuery and Bootstrap dependent. Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load Bootstrap -->
    <script src="../../../../global_assets/js/main/bootstrap.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/forms/styling/switch.min.js"></script>

Create an HTML element with `id`, `class`, or `name` attributes:

    <!-- Create element -->
    <input type="checkbox" name="my-checkbox" checked="checked">

Finally call the plugin via JavaScript:

    // Initialize plugin
    $(function() {
    	$("[name='my-checkbox']").bootstrapSwitch({
    		// options
    	});
    });

###### Plugin options

The Options API allows you to customize the dropdown list by setting custom options and getting all current options.

Name | Attribute | Default | Description
--- | --- | --- | ---
`state` | `checked` | true | The checkbox state
`size` | `data-size` | null | The checkbox size
`animate` | `data-animate` | true | Animate the switch
`disabled` | `disabled` | false | Disable state
`readonly` | `readonly` | false | Readonly state
`indeterminate` | `data-indeterminate` | false | Indeterminate state
`inverse` | `data-inverse` | false | Inverse switch direction
`radioAllOff` | `data-radio-all-off` | false | Allow this radio button to be unchecked by the user
`onColor` | `data-on-color` | 'primary' | Color of the left side of the switch. Supports all BS contextual classes
`offColor` | `data-off-color` | 'default' | Color of the right side of the switch. Supports all BS contextual classes
`onText` | `data-on-text` | 'ON' | Text of the left side of the switch
`offText` | `data-off-text` | 'OFF' | Text of the right side of the switch
`labelText` | `data-label-text` | '&nbsp;' | Text of the center handle of the switch
`handleWidth` | `data-handle-width` | 'auto' | Width of the left and right sides in pixels
`labelWidth` | `data-label-width` | 'auto' | Width of the center handle in pixels
`baseClass` | `data-base-class` | 'bootstrap-switch' | Global class prefix
`wrapperClass` | `data-wrapper-class` | 'wrapper' | Container element class(es)

`onInit`

    function(event, state) {}

Callback function to execute on initialization

`onSwitchChange`

    function(event, state) {}

Callback function to execute on switch state change

###### Plugin methods

In Bootstrap Switch, every option is also a method. If the second parameter is omitted, the method return the current value.

You can invoke methods as follows:

    // Methods
    $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

Available methods:

Name | Description
--- | ---
`toggleState` | Toggle the switch state
`toggleAnimate` | Toggle the animate option
`toggleDisabled` | Toggle the disabled state
`toggleReadonly` | Toggle the readonly state
`toggleIndeterminate` | Toggle the indeterminate state
`toggleInverse` | Toggle the inverse option
`destroy` | Destroy the instance of Bootstrap Switch

###### Plugin events

All the events are namespaced, therefore always append .bootstrapSwitch when you attach your handlers.

You can register to the emitted events as follow:

    // Events
    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
    	console.log(this); // DOM element
    	console.log(event); // jQuery event
    	console.log(state); // true | false
    });

Available events:

Name | Description
--- | ---
`init` | Triggered on initialization. 'this' refers to the DOM element
`switchChange` | Triggered on switch state change. 'this' refers to the DOM element

###### Plugin info

Property | Description
--- | ---
File name | switch.min.js
Location | global_assets/js/plugins/forms/styling/
Links | Official plugin website Github project page

##### Switchery

Inputs switchery.min.js

###### Overview

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/forms/styling/switchery.min.js"></script>

Create an HTML element with `id`, `class`, or `name` attributes:

    <!-- Create element -->
    <input type="checkbox" name="my-checkbox" checked="checked" class="switcher">

Finally call the plugin via JavaScript:

    // Initialize plugin
    var elem = document.querySelector('.js-switch');
    var init = new Switchery(elem);

###### Plugin options

Name | Default | Description
--- | --- | ---
`color` | '#64bd63' | Color of the switch element (HEX or RGB value)
`secondaryColor` | '#dfdfdf' | Secondary color for background color and border, when the switch is off
`jackColor` | '#fff' | Default color of the jack/handle element
`jackSecondaryColor` | null | Color of unchecked jack/handle element
`className` | 'switchery' | Class name for the switch element (by default styled in switchery.css)
`disabled` | false | Enable or disable click events and changing the state of the switch (boolean value)
`disabledOpacity` | 0.5 | Opacity of the switch when it's disabled (0 to 1)
`speed` | '0.4s' | Length of time that the transition will take, ex. '0.4s', '1s', '2.2s' (Note: transition speed of the handle is twice shorter)
`size` | 'default' | Size of the switch element (small or large)

###### Plugin API

Name | Description
--- | ---
`.destroy()` | Unbinding all event handlers attached to the switch element to prepare the object for garbage collection
`.enable()` | Enable disabled switch by re-adding event handlers and changing the opacity to 1
`.disable()` | Disable switch by unbinding attached events and changing opacity to `disabledOpacity` value
`.isDisabled()` | Check if switch is currently disabled by checking the readonly and disabled attributes on the checkbox and the disabled option set via JS. If any of those are present, the returned value is `true`

###### Plugin info

Property | Description
--- | ---
File name | switchery.min.js
Location | global_assets/js/plugins/forms/styling/
Links | Official plugin website Github project page

##### Uniform

Inputs uniform.min.js

###### Overview

Sexy form elements with jQuery. Now with HTML5 attributes! Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3.

###### Usage

Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you’ll want to link to the `jquery.uniform.js` file in the head area of your page.

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/forms/styling/uniform.min.js"></script>

Create an HTML element with `id`, `class`, or `name` attributes:

    <!-- Create element -->
    <input type="checkbox" name="my-checkbox" checked="checked" class="styled">

Finally call the plugin via JavaScript:

    // Initialize plugin
    $("select").uniform({
    	// options
    });

###### Plugin options

Name | Default | Description
--- | --- | ---
`autoHide` | true | If this option is set to `true`, Uniform will hide the new elements if the existing elements are currently hidden using `display: none`.If you want to show a select or checkbox you'll need to show the new Uniform `div` instead of the child element
`eventNamespace` | ".uniform" | Binds events using this namespace with jQuery. Useful if you want to unbind them later. Shouldn't probably need to be changed unless it conflicts with other code
`idPrefix` | "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"`
`useID` | 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
`submitDefaultHtml` | "Submit" | This text is what's shown on form submit buttons. It is very similar to `resetDefaultHtml`
`activeClass` | "active" | Sets the class given to elements when they are active (pressed)
`buttonClass` | "button" | Sets the class given to a button that's been Uniformed
`checkboxClass` | "checker" | Sets the class given to the wrapper div for checkbox elements
`checkedClass` | "checked" | Sets the class given to elements when they are checked (radios and checkboxes)
`disabledClass` | "disabled" | Sets the class given to elements when they are disabled
`inputAddTypeAsClass` | true | When true, `<input>` elements will get a class applied that is equal to their `"type"` attribute
`inputClass` | "uniform-input" | Applies this class to all input elements when they get uniformed
`radioClass` | "radio" | Sets the class given to the wrapper div for radio elements. Should be changed to `.choice`
`focusClass` | "focus" | Sets the class given to elements when they are focused
`hoverClass` | "hover" | Sets the class given to elements when they are currently hovered
`textareaClass` | "uniform" | The class that is applied to textarea elements
`wrapperClass` | null | When uniforming, the top level element that wraps the input is given this class. When elements would not normally be given a wrapper element, this option will create a wrapper element anyway. This can really help with running multiple themes on a single page
`fileButtonClass` | "action" | Sets the class given to `div` inside a file upload container that acts as the `"Choose file"` button
`fileButtonHtml` | "Choose File" | Sets the text written on the action button inside a file upload input
`fileClass` | "uploader" | Sets the class given to the wrapper div for file upload elements
`fileDefaultHtml` | "No file selected" | Sets the text written in the filename div of a file upload input when there is no file selected
`filenameClass` | "filename" | Sets the class given to div inside a file upload container that spits out the filename
`resetDefaultHtml` | "Reset" | This text is what's shown on form reset buttons. It is very similar to `submitDefaultHtml`
`resetSelector` | 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
`selectAutoWidth` | true | If this option is set to `true`, Uniform will try to fit the select width to the actual content. When `false`, it forces the selects to all be the width that was specified in the theme. When using auto widths, the size of the element is detected, then wrapped by Uniform and expanded to fit the wrapping
`selectClass` | "selector" | Sets the class given to the wrapper div for select elements, but not multiselects
`selectMultiClass` | "uniform-multiselect" | Sets the class given to the wrapper div for select elements that are multiselects

###### Plugin API

Name | Description
--- | ---
`$.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();` | If you don't mind updating all Uniformed elements or just don’t specifically know which element to update, you can just leave out the parameter and Uniform will update all Uniformed elements on the page
`$.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.elements[]` | You can get an array of all the elements that have been Uniformed at any time using this public variable. I don't advise changing the contents!

###### Tips and 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. See Issue #270 for the little bit of code you will need.
- Likewise, when you add elements to the DOM, perhaps via AJAX, and they need to get styled, you will need to use $('#newElement').uniform() on it so the styling is applied.
- There is a bug in Safari 5.1 that will cause the web rendering process to crash when you use custom fonts. For more information, see Issue #183.
- With IE9, you may have problems with some fonts on your site. See Issue #226 if you mysteriously see a blank page or blank form elements. The fonts in Uniform have been arranged to work around this, but custom themes may not work properly.
- If you are having problems with automatically sized select elements in Firefox, double check and ensure your CSS files are listed before jQuery, Uniform and your code that uniforms the form elements. Also check the selectAutoWidth property's documentation.

###### Plugin info

Property | Description
--- | ---
File name | uniform.min.js
Location | global_assets/js/plugins/forms/styling/
Links | Official plugin website Github project page