focus-example.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<style scoped>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass .yui3-js-enabled .yui3-checkboxes-loading { display: none; }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div class="intro">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Using Progressive Enhancement to skin checkboxes with the help of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <a href="../../api/Loader.html">Loader</a>,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <a href="../../api/module_classnamemanager.html">ClassNameManager
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Utility</a>, and the Event Utility's <code>focus</code> and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <code>blur</code> events and the <code>delegate</code> method.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div class="example yui3-skin-sam">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {{>focus-example-source}}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>Challenges</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassThere are a few challenges when trying to skin an HTML checkbox using CSS. To start, most of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a> don't provide
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasssupport for CSS properties like <code>border</code> and <code>background</code> on the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code><input type="checkbox"></code> element. Additionally, IE 6 and IE 7 (Quirks Mode)
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasslack support for attribute selectors — necessary to style the <code>checked</code> and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code>disabled</code> states. Additionally, IE 6 and 7 only support the <code>:focus</code> and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code>:active</code> pseudo classes on <code><a></code> elements, both of which are needed
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassto style a checkbox when it is focused or depressed.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>Approach</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassDespite the shortcomings in CSS support, with a little extra markup and through the use of
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassJavaScript it is possible to skin an <code><input type="checkbox"></code> element
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desaiconsistently well in all of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h4>Markup</h4>
479b9ac417be02467aadae8cd650d29050001f0bSatyen DesaiSince CSS support for the <code><input type="checkbox"></code> element is lacking, wrap
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code><input type="checkbox"></code> elements in one or more inline elements to provide the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassnecessary hooks for styling. In this example, each <code><input type="checkbox"></code>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasselement is wrapped by two <code><span></code>s.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="checkbox">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassTo style each checkbox, a class name of <code>yui3-checkbox</code> will be applied to the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassouttermost <code><span></code> wrapping each <code><input type="checkbox"></code>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasselement. An additional class will be used to represent the various states of each checkbox. The
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassclass name for each state will follow a consistent pattern: <code>yui3-checkbox-[state]</code>.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassFor this example, the following state-based class names will be used:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dt><code>yui3-checkbox-focus</code></dt>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dd>The checkbox has focus</dd>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dt><code>yui3-checkbox-active</code></dt>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dd>The checkbox is active (pressed)</dd>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dt><code>yui3-checkbox-checked</code></dt>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <dd>The checkbox is checked</dd>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassThe styles for each checkbox comes together as follows:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass width: 10px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass height: 10px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass border: inset 2px #999;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass background-color: #fff; /* Need to set a background color or IE won't get mouse events */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass they don't support use of negative margins without relative positioning.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _position: relative;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox span {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass display: block;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass height: 14px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass width: 12px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass overflow: hidden;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass /* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass margin: -5px 0 0 1px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass /* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass _position: absolute;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox span:after {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass content: ".";
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass visibility: hidden;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass line-height: 2;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Hide the actual checkbox offscreen so that it is out of view, but still accessible via
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass the keyboard.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox input {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass position: absolute;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass left: -10000px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox-focus {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass border-color: #39f;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass background-color: #9cf;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox-active {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass background-color: #ccc;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-checkbox-checked span {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass /* Draw a custom checkmark for the checked state using a background image. */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass background: url(checkmark.png) no-repeat;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h4>JavaScript</h4>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassApplication and removal of the state-based class names will be facilitated by JavaScript event
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasshandlers. Each event handler will track the state of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code><input type="checkbox"></code> element, and apply and remove corresponding
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassstate-based class names from its outtermost <code><span></code> —
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassmaking it easy to style each state. And since each JavaScript is required for state management,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassthe stylesheet for the skinned checkboxes will only be added to the page when JavaScript is
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassenabled. This will ensure that each checkbox works correctly with and without JavaScript enabled.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassSince there could easily be many instances of a skinned checkbox on the page, all event
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasslisteners will be attached to the containing element for all checkboxes. Each listener will
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasslisten for events as they bubble up from each checkbox. Relying on event bubbling will improve the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassoverall performance of the page by reducing the number of event handlers.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassSince the DOM <code>focus</code> and <code>blur</code> events do not bubble, use the Event Utility's
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events, as an alternative to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassattaching discrete focus and blur event handlers to the <code><input type="checkbox"></code>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasselement of each skinned checkbox. The
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../api/YUI.html#event_focus"><code>focus</code></a> and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../api/YUI.html#event_focus"><code>blur</code></a> custom events leverage
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasscapture-phase DOM event listeners, making it possible to attach a single focus and blur event
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasslistener on the containing element of each checkbox — thereby increasing the performance
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassof the page. The complete script for the example comes together as follows:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassYUI().use("*", function(Y) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass sCheckboxFocusClass = getClassName("checkbox", "focus"), // Create yui3-checkbox-focus
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass sCheckboxCheckedClass = getClassName("checkbox", "checked"), // Create yui3-checkbox-checked
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass sCheckboxActiveClass = getClassName("checkbox", "active"), // Create yui3-checkbox-active
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bKeyListenersInitialized = false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bMouseListenersInitialized = false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockDocumentMouseUp = false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockClearActive = false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockBlur = false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oActiveCheckbox;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var initKeyListeners = function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.delegate("keydown", onCheckboxKeyDown, ".yui3-checkbox");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.delegate("click", onCheckboxClick, ".yui3-checkbox");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.delegate("blur", onCheckboxBlur, "input[type=checkbox]");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bKeyListenersInitialized = true;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var initMouseListeners = function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.delegate("mouseover", onCheckboxMouseOver, ".yui3-checkbox");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.delegate("mouseout", onCheckboxMouseOut, ".yui3-checkbox-active");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bMouseListenersInitialized = true;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var getCheckbox = function (node) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai return (node.hasClass("yui3-checkbox") ? node : node.ancestor(".yui3-checkbox"));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var getCheckboxForLabel = function (label) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sID = label.getAttribute(forAttr),
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai oInput = Y.one("#" + sID);
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai if (oInput) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai oCheckbox = getCheckbox(oInput);
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai return oCheckbox;
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai var updateCheckedState = function (input) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai var oCheckbox = getCheckbox(input);
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai if (input.get("checked")) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desai oCheckbox.addClass(sCheckboxCheckedClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox.removeClass(sCheckboxCheckedClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var setActiveCheckbox = function (checkbox) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass checkbox.addClass(sCheckboxActiveClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oActiveCheckbox = checkbox;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var clearActiveCheckbox = function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (oActiveCheckbox) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oActiveCheckbox.removeClass(sCheckboxActiveClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oActiveCheckbox = null;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxMouseOver = function (event, matchedEl) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oActiveCheckbox.addClass(sCheckboxActiveClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxMouseOut = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.removeClass(sCheckboxActiveClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onDocumentMouseUp = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var oCheckbox;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (!bBlockDocumentMouseUp) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox = getCheckbox(event.target);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass clearActiveCheckbox();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockDocumentMouseUp = false;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxFocus = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Remove the focus style from any checkbox that might still have it
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var oCheckbox = Y.one("#checkboxes").one(".yui3-checkbox-focus");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (oCheckbox) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox.removeClass(sCheckboxFocusClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Defer adding key-related and click event listeners until
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // one of the checkboxes is initially focused.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (!bKeyListenersInitialized) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var oCheckbox = getCheckbox(this);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox.addClass(sCheckboxFocusClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxBlur = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (bBlockBlur) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockBlur = false;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var oCheckbox = getCheckbox(this);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox.removeClass(sCheckboxFocusClass);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass clearActiveCheckbox();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockClearActive = false;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxMouseDown = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Defer adding mouse-related and click event listeners until
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // the user mouses down on one of the checkboxes.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (!bMouseListenersInitialized) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var oCheckbox,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (this.get("nodeName").toLowerCase() === "label") {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // If the target of the event was the checkbox's label element, the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // label will dispatch a click event to the checkbox, meaning the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // "onCheckboxClick" handler will be called twice. For that reason
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // it is necessary to block the "onDocumentMouseUp" handler from
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // clearing the active state, so that a reference to the active
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // checkbox still exists the second time the "onCheckboxClick"
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // handler is called.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockDocumentMouseUp = true;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // When the user clicks the label instead of the checkbox itself,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // the checkbox will be blurred if it has focus. Since the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // "onCheckboxBlur" handler clears the active state it is
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // necessary to block the clearing of the active state when the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // label is clicked instead of the checkbox itself.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass bBlockClearActive = true;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox = getCheckboxForLabel(this);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oCheckbox = this;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Need to focus the input manually for two reasons:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // 1) Mousing down on a label in Webkit doesn't focus its
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // associated checkbox
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // 2) By default checkboxes are focused when the user mouses
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // down on them. However, since the actually checkbox is
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // obscurred by the two span elements that are used to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // style it, the checkbox wont' receive focus as it was
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // never the actual target of the mousedown event.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oInput = oCheckbox.one("input");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Calling Event.preventDefault won't block the blurring of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // currently focused element in IE, so we'll use the "bBlockBlur"
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // variable to stop the code in the blur event handler
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // from executing.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass setActiveCheckbox(oCheckbox);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Need to call preventDefault because by default mousing down on
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // an element will blur the element in the document that currently
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // has focus--in this case, the input element that was
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // just focused.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxClick = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (this.compareTo(oActiveCheckbox)) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass oInput = this.one("input");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // If the click event was fired via the mouse the checked
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // state will have to be manually updated since the input
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // is hidden offscreen and therefore couldn't be the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // target of the click.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass updateCheckedState(oInput);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass clearActiveCheckbox();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var onCheckboxKeyDown = function (event) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Style the checkbox as being active when the user presses the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // space bar
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass setActiveCheckbox(this);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.all("#checkboxes>div>span").addClass("yui3-checkbox");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Remove the "yui3-checkboxes-loading" class used to hide the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // checkboxes now that the checkboxes have been skinned.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.one("#checkboxes").removeClass("yui3-checkboxes-loading");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Add the minimum number of event listeners needed to start, bind the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // rest when needed
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui3-checkbox,label");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h4>Progressive Enhancement</h4>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassTo account for the scenario where the user has CSS enabled in their browser but JavaScript
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassis disabled, the CSS used to style the checkboxes will be loaded via JavaScript
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassusing the YUI instance's <a href="http://developer.yahoo.com/yui/3/yui#loader">built-in Loader</a>.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass base: "${buildDirectory}",
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Load the stylesheet for the skinned checkboxes via JavaScript,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // since without JavaScript skinning of the checkboxes wouldn't
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // be possible.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass "checkboxcss": {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass type: "css",
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fullpath: "${assetsDirectory}checkbox.css"
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass "checkboxjs": {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fullpath: "${assetsDirectory}checkbox.js",
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}).use("checkboxjs");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassTo prevent the user from seeing a flash unstyled content when JavaScript is enabled,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassa style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glasshide the markup while the JavaScript and CSS are in the process of loading. For more on using the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<code>yui3-js-enabled</code> class name, see the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../widget/#progressive">HIDING PROGRESSIVELY ENHANCED MARKUP</a> section of the
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<a href="../../widget/">YUI Widget landing page</a>.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass.yui3-js-enabled .yui3-checkboxes-loading {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass display: none;