wbo1/client-data/js/canvascolor.js

/**
 *                CANVASCOLOR color picker
 *********************************************************
 * @licstart  The following is the entire license notice for the
 *  JavaScript code in this page.
 *
 * Copyright (C) 2013-2014  Ophir LOJKINE
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend
 */


/*jshint bitwise:false*/

// ==ClosureCompiler==
// @output_file_name canvascolor.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @js_externs var canvascolor;
// @language ecmascript5_strict
// @use_types_for_optimization true
// ==/ClosureCompiler==

var canvascolor = (function() {//Code Isolation
    "use strict";

    (function addCSS () {
        var styleTag = document.createElement("style");
        styleTag.innerHTML = [".canvascolor-container{",
            "background-color:black;",
            "border-radius:5px;",
            "overflow:hidden;",
            "width:179px;",
            "padding:2px;",
            "display:none;",
            "}",
            ".canvascolor-container canvas{",
            "cursor:crosshair;",
            "}",
            ".canvascolor-history{",
            "overflow:auto;",
            "}",
            ".canvascolor-history > div{",
            "margin:2px;",
            "display:inline-block;",
            "}"].join("");
        document.head.appendChild(styleTag);
    })();

    function hsv2rgb (h,s,v) {
        if( s === 0 ) return [v,v,v]; // achromatic (grey)

        h /= (Math.PI/6);			// sector 0 to 5
        var i = h|0,
            f = h - i,			// factorial part of h
            p = v * ( 1 - s ),
            q = v * ( 1 - s * f ),
            t = v * ( 1 - s * ( 1 - f ) );
        switch( i%6 ) {
            case 0: return [v,t,p];
            case 1: return [q,v,p];
            case 2: return [p,v,t];
            case 3: return [p,q,v];
            case 4: return [t,p,v];
            case 5:return [v,p,q];
        }
    }

    function isFixedPosition(elem) {
        do {
            if (getComputedStyle(elem).position === "fixed") return true;
        } while ( (elem = elem.parentElement) !== null );
        return false;
    }

    var containerTemplate;
    (function createContainer(){
        containerTemplate = document.createElement("div");
        containerTemplate.className = "canvascolor-container";
        var canvas = document.createElement("canvas");
        var historyDiv = document.createElement("div");
        historyDiv.className = "canvascolor-history";
        containerTemplate.appendChild(canvas);
        containerTemplate.appendChild(historyDiv);
    })();

    function canvascolor(elem) {
        var curcolor = elem.value || "#000";

        var w=200, h=w/2;

        var container = containerTemplate.cloneNode(true);
        container.style.width = w+"px";
        container.style.position = isFixedPosition(elem) ? "fixed" : "absolute";
        var canvas = container.getElementsByTagName("canvas")[0];
        var ctx = canvas.getContext("2d");
        canvas.width = w; canvas.height=h;

        var prevcolorsDiv = container.getElementsByClassName("canvascolor-history")[0];
        prevcolorsDiv.style.width=w+"px";
        prevcolorsDiv.style.maxHeight=h+"px";

        var previewdiv = createColorDiv(curcolor);
        previewdiv.style.border = "1px solid white";
        previewdiv.style.borderRadius = "5px";

        document.body.appendChild(container);

        function displayContainer(){
            var rect = elem.getBoundingClientRect();
            var conttop=(rect.top+rect.height+3),
                contleft=rect.left;
            if (container.style.position !== "fixed") {
                conttop += document.documentElement.scrollTop;
                contleft += document.documentElement.scrollLeft;
            }
            container.style.top = conttop+"px";
            container.style.left = contleft+"px";
            container.style.display = "block";
        }
        function hideContainer(){
            container.style.display = "none";
        }

        elem.addEventListener("mouseover", displayContainer, true);
        container.addEventListener("mouseleave", hideContainer, false);
        elem.addEventListener("keyup", function(){
            changeColor(elem.value, true);
        }, true);

        changeColor(elem.value, true);

        var idata = ctx.createImageData(w,h);

        function rgb2hex (rgb) {
            function num2hex (c) {return (c*15/255|0).toString(16);}
            return "#"+num2hex(rgb[0])+num2hex(rgb[1])+num2hex(rgb[2]);
        }

        function colorAt(coords) {
            var x=coords[0], y=coords[1];
            return hsv2rgb(x/w*Math.PI, 1, (1-y/h)*255);
        }

        function render() {
            for (var x=0; x<w; x++) {
                for (var y=0;y<h; y++) {
                    var i = 4*(x+y*w);
                    var rgb = colorAt([x,y]);
                    idata.data[i] = rgb[0];//Red
                    idata.data[i+1] = rgb[1];//Green
                    idata.data[i+2] = rgb[2];//Blue
                    idata.data[i+3] = 255;
                }
            }
            ctx.putImageData(idata,0,0);
        }

        render();


        /** Changes the current color (the value of the input field) and updates other variables accordingly
         * @param {string} color The new color. Must be a valid CSS color string if ensureValid is not specified
         * @param {boolean} [ensureValid=false] Do not make the change if color is not a valid CSS color
         */
        function changeColor(color, ensureValid) {
            elem.style.backgroundColor = color;
            if (ensureValid && elem.style.backgroundColor.length === 0) {
                elem.style.backgroundColor = curcolor;
                return;
            }
            previewdiv.style.backgroundColor = color;
            curcolor = color;
            elem.value = color;
            elem.focus();
        }

        function createColorDiv (color) {
            var div = document.createElement("div");
            div.style.width = (w/3-10)+"px";
            div.style.height = (h/3-8)+"px";
            div.style.backgroundColor = color;
            div.addEventListener("click", function(){
                changeColor(color);
            }, true);
            if (prevcolorsDiv.childElementCount <= 1) prevcolorsDiv.appendChild(div);
            else prevcolorsDiv.insertBefore(div,prevcolorsDiv.children[1]);
            return div;
        }

        function canvasPos(evt) {
            var canvasrect = canvas.getBoundingClientRect();
            return [evt.clientX - canvasrect.left, evt.clientY - canvasrect.top];
        }

        canvas.addEventListener("mousemove", function(evt){
            var coords = canvasPos(evt);
            previewdiv.style.backgroundColor = rgb2hex(colorAt(coords));
        }, true);

        canvas.addEventListener("click", function(evt){
            var coords = canvasPos(evt);
            var color = rgb2hex(colorAt(coords));
            createColorDiv(color);
            changeColor(color);
        }, true);

        canvas.addEventListener("mouseleave", function(){
            previewdiv.style.backgroundColor = curcolor;
        }, true);
    }


    //Put a color picker on every input[type=color] if the browser doesn't support this input type
    //and on every input with the class canvascolor
    var pickers = document.querySelectorAll("input.canvascolor, input[type=color]");
    for (var i=0;i <pickers.length; i++) {
        var input = pickers.item(i);
        //If the browser supports native color picker and the user didn't
        //explicitly added canvascolor to the element, we do not add a custom color picker
        if (input.type !== "color" ||
            input.className.split(" ").indexOf("canvascolor") !== -1) {
            canvascolor(input);
        }
    }

    return canvascolor;
}());