YUI Library Examples: Event: Skinning via Progressive Enhancement using the Event Utility and the Loader

<span>
  <span>
    <input type="checkbox">
  </span>
</span>

.yui-checkbox {
    display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
    display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
    width: 10px;
    height: 10px;
    border: inset 2px #999;
    background-color: #fff; /*  Need to set a background color or IE won't get mouse events */  
 
    /*
        Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since 
        they don't support use of negative margins without relative positioning.  
    */
    _position: relative;
}
 
.yui-checkbox span {
    display: block;
    height: 14px;
    width: 12px;
    overflow: hidden;
 
    /* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
    margin: -5px 0 0 1px;
 
    /* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
    _margin: 0;
    _position: absolute;
    _top: -5px;
    _left: 1px;
 
}
 
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui-checkbox span:after {
    content: ".";
    visibility: hidden;
    line-height: 2;
}
 
/*
    Hide the actual checkbox offscreen so that it is out of view, but still accessible via 
    the keyboard. 
*/
.yui-checkbox input {
    position: absolute;
    left: -10000px;
}
 
.yui-checkbox-focus {
    border-color: #39f;
    background-color: #9cf;
}
 
.yui-checkbox-active {
    background-color: #ccc;
}
 
.yui-checkbox-checked span {
    /* Draw a custom checkmark for the checked state using a background image. */
    background: url(checkmark.png) no-repeat;
}

YUI().use("*", function(Y) {
 
    var UA = Y.UA,
        getClassName = Y.ClassNameManager.getClassName,
        sCheckboxFocusClass = getClassName("checkbox", "focus"),    // Create yui-checkbox-focus
        sCheckboxCheckedClass = getClassName("checkbox", "checked"),    // Create yui-checkbox-checked
        sCheckboxActiveClass = getClassName("checkbox", "active"),  // Create yui-checkbox-active
        bKeyListenersInitialized = false,
        bMouseListenersInitialized = false,
        forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
        bBlockDocumentMouseUp = false,
        bBlockClearActive = false,
        bBlockBlur = false,     
        oActiveCheckbox;            
 
 
    var initKeyListeners = function () {
 
        this.delegate("keydown", onCheckboxKeyDown, ".yui-checkbox");
        this.delegate("click", onCheckboxClick, ".yui-checkbox");
        this.delegate("blur", onCheckboxBlur, "input[type=checkbox]");
 
        bKeyListenersInitialized = true;
 
    };
 
 
    var initMouseListeners = function () {
 
        this.delegate("mouseover", onCheckboxMouseOver, ".yui-checkbox");
        this.delegate("mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
        this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
 
        bMouseListenersInitialized = true;
 
    };
 
 
    var getCheckbox = function (node) {
 
        return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
 
    };
 
 
    var getCheckboxForLabel = function (label) {
 
        var sID = label.getAttribute(forAttr),
            oInput,
            oCheckbox;
 
        if (sID) {
 
            oInput = Y.one("#" + sID);
 
            if (oInput) {
                oCheckbox = getCheckbox(oInput);
            }
 
        }
 
        return oCheckbox;
 
    };
 
 
    var updateCheckedState = function (input) {
 
        var oCheckbox = getCheckbox(input);
 
        if (input.get("checked")) {
            oCheckbox.addClass(sCheckboxCheckedClass);
        }
        else {
            oCheckbox.removeClass(sCheckboxCheckedClass);
        }
 
    };
 
 
    var setActiveCheckbox = function (checkbox) {
 
        checkbox.addClass(sCheckboxActiveClass);
        oActiveCheckbox = checkbox;
 
    };
 
 
    var clearActiveCheckbox = function () {
 
        if (oActiveCheckbox) {
            oActiveCheckbox.removeClass(sCheckboxActiveClass);
            oActiveCheckbox = null;
        }
 
    };
 
 
    var onCheckboxMouseOver = function (event, matchedEl) {
 
        if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) {
            oActiveCheckbox.addClass(sCheckboxActiveClass);
        }
 
    };
 
 
    var onCheckboxMouseOut = function (event) {
 
        this.removeClass(sCheckboxActiveClass);
 
    };              
 
 
    var onDocumentMouseUp = function (event) {
 
        var oCheckbox;
 
        if (!bBlockDocumentMouseUp) {
 
            oCheckbox = getCheckbox(event.target);
 
            if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) {
                clearActiveCheckbox();
            }
 
        }
 
        bBlockDocumentMouseUp = false;
 
    };
 
 
    var onCheckboxFocus = function (event) {
 
        //  Remove the focus style from any checkbox that might still have it
 
        var oCheckbox = Y.one("#checkboxes").one(".yui-checkbox-focus");
 
        if (oCheckbox) {
            oCheckbox.removeClass(sCheckboxFocusClass);
        }
 
        //  Defer adding key-related and click event listeners until 
        //  one of the checkboxes is initially focused.
 
        if (!bKeyListenersInitialized) {
            initKeyListeners.call(event.container);
        }
 
        var oCheckbox = getCheckbox(this);
 
        oCheckbox.addClass(sCheckboxFocusClass);
 
    };
 
 
    var onCheckboxBlur = function (event) {
 
        if (bBlockBlur) {
            bBlockBlur = false;
            return;
        }
 
        var oCheckbox = getCheckbox(this);
 
        oCheckbox.removeClass(sCheckboxFocusClass);
 
        if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) {
            clearActiveCheckbox();
        }
 
        bBlockClearActive = false;
 
    };
 
 
    var onCheckboxMouseDown = function (event) {
 
        //  Defer adding mouse-related and click event listeners until 
        //  the user mouses down on one of the checkboxes.
 
        if (!bMouseListenersInitialized) {
            initMouseListeners.call(event.container);
        }
 
        var oCheckbox,
            oInput;
 
 
        if (this.get("nodeName").toLowerCase() === "label") {
 
            //  If the target of the event was the checkbox's label element, the
            //  label will dispatch a click event to the checkbox, meaning the 
            //  "onCheckboxClick" handler will be called twice.  For that reason
            //  it is necessary to block the "onDocumentMouseUp" handler from
            //  clearing the active state, so that a reference to the active  
            //  checkbox still exists the second time the "onCheckboxClick"
            //  handler is called.
 
            bBlockDocumentMouseUp = true;
 
            //  When the user clicks the label instead of the checkbox itself, 
            //  the checkbox will be blurred if it has focus.  Since the 
            //  "onCheckboxBlur" handler clears the active state it is 
            //  necessary to block the clearing of the active state when the 
            //  label is clicked instead of the checkbox itself.
 
            bBlockClearActive = true;
 
            oCheckbox = getCheckboxForLabel(this);
 
        }
        else {
 
            oCheckbox = this;
 
        }
 
        //  Need to focus the input manually for two reasons:
        //  1)  Mousing down on a label in Webkit doesn't focus its  
        //      associated checkbox
        //  2)  By default checkboxes are focused when the user mouses 
        //      down on them.  However, since the actually checkbox is 
        //      obscurred by the two span elements that are used to 
        //      style it, the checkbox wont' receive focus as it was 
        //      never the actual target of the mousedown event.
 
        oInput = oCheckbox.one("input");
 
 
        //  Calling Event.preventDefault won't block the blurring of the 
        //  currently focused element in IE, so we'll use the "bBlockBlur"
        //  variable to stop the code in the blur event handler  
        //  from executing.
 
        bBlockBlur = (UA.ie && oInput.get("checked"));
 
 
        oInput.focus();
 
        setActiveCheckbox(oCheckbox);
 
        //  Need to call preventDefault because by default mousing down on
        //  an element will blur the element in the document that currently 
        //  has focus--in this case, the input element that was 
        //  just focused.
 
        event.preventDefault();
 
    };
 
 
    var onCheckboxClick = function (event) {
 
        var oInput;
 
        if (this.compareTo(oActiveCheckbox)) {
 
            oInput = this.one("input");
 
            if (!event.target.compareTo(oInput)) {
 
                //  If the click event was fired via the mouse the checked
                //  state will have to be manually updated since the input 
                //  is hidden offscreen and therefore couldn't be the 
                //  target of the click.
 
                oInput.set("checked", (!oInput.get("checked")));
 
            }
 
            updateCheckedState(oInput);
            clearActiveCheckbox();
 
        }
 
    };
 
 
    var onCheckboxKeyDown = function (event) {
 
        //  Style the checkbox as being active when the user presses the 
        //  space bar
 
        if (event.keyCode === 32) {
            setActiveCheckbox(this);
        }
 
    };
 
    Y.all("#checkboxes>div>span").addClass("yui-checkbox");
 
    //  Remove the "yui-checkboxes-loading" class used to hide the 
    //  checkboxes now that the checkboxes have been skinned.
 
    Y.one("#checkboxes").get("ownerDocument").get("documentElement").removeClass("yui-checkboxes-loading");
 
    //  Add the minimum number of event listeners needed to start, bind the 
    //  rest when needed
 
    Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui-checkbox,label");
    Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
 
});

YUI({
 
    base: "../../build/",
 
    //  Load the stylesheet for the skinned checkboxes via JavaScript, 
    //  since without JavaScript skinning of the checkboxes wouldn't 
    //  be possible.
 
    modules: {
 
        "checkboxcss": {
            type: "css",
            fullpath: "assets/checkbox.css"
        },
        "checkboxjs": {
            type: "js",
            fullpath: "assets/checkbox.js",
            requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
        }               
 
    }
 
}).use("checkboxjs", function(Y, result) {
 
    //  The callback supplied to use() will be executed regardless of
    //  whether the operation was successful or not.  The second parameter
    //  is a result object that has the status of the operation.  We can
    //  use this to try to recover from failures or timeouts.
 
    if (!result.success) {
 
        Y.log("Load failure: " + result.msg, "warn", "Example");
 
        //  Show the checkboxes if the loader failed that way the original 
        //  unskinned checkboxes will be visible so that the user can
        //  interact with them either way.
 
        document.documentElement.className = "";
 
    }
 
});