Function widget

pattern/canvas.js:3482–3576

(canvas, variable, type, options)

// function widget(canvas, variable, type, {parent: null, value: null, min: 0, max: 1, step: 0.01, index: 1, callback: function(e){}})
function widget(canvas, variable, type, options) {
    /* Creates a widget linked to the given canvas.
     * The type of the widget can be STRING or NUMBER (field), BOOLEAN (checkbox),
     * RANGE (slider), LIST (dropdown list), or FUNCTION (button).
     * The value of the widget can be retrieved as canvas.variables[variable] (or canvas.variables.variable).
     * Optionally, a default value can be given. 
     * For lists, this is an array and optionally an index of the selected value.
     * For sliders, you can also set min, max and step.
     * For functions, an optional callback(event){} must be given.
     * To get at the current canvas from inside the callback, use event.target.canvas.
     * Use event.target.canvas.focus() if drawing occurs in the callback.
     */
    var v = variable;
    var o = options || {};
    if (canvas.variables[v] === undefined) {
        var parent = (o && o.parent)? o.parent : $(canvas.id + "_widgets");
        if (!parent) {
            // No widget container is given, or exists.
            // Insert a <div id="[canvas.id]_widgets" class="widgets"> after the <canvas> element.
            parent = document.createElement("div");
            parent.id = (canvas.id + "_widgets");
            parent.className = "widgets";
            canvas.element.parentNode.insertBefore(parent, canvas.element.nextSibling);
        }
        // Create <input> element with id [canvas.id]_[variable].
        // Create an onchange() that will set the variable to the value of the widget.
        // For FUNCTION, it is an onclick() that will call options.callback(e).
        var id = canvas.id + "_" + v;
        // Fix callback event and event.target on IE8 and Safari2.
        // Function does nothing when propagate=false.
        var cb = function(e, propagate) {
            if (!e)
                e = window.event;
            if (!e.target)
                e.target = e.srcElement || document;
            if (e.target.nodeType === 3)
                e.target = e.target.parentNode;
            if (o.callback && propagate != false)
                o.callback(e);
        }
        // <input type="text" id="id" value="" />
        if (type == STRING || type == TEXT) {
            var s = "<input type='text' id='"+v+"' value='"+(o.value||"").replace(/'/g,"&#39;")+"' />";
            var f = function(e,p) { canvas.variables[this.id] = this.value; cb(e,p); };
        // <input type="text" id="id" value="0" />
        } else if (type == NUMBER) {
            var s = "<input type='text' id='"+v+"' value='"+(o.value||0)+"' />";
            var f = function(e,p) { canvas.variables[this.id] = parseFloat(this.value); cb(e,p); };
        // <input type="checkbox" id="variable" />
        } else if (type == BOOLEAN) {
            var s = "<input type='checkbox' id='"+v+"'"+((o.value==true)?" checked":"")+" />";
            var f = function(e,p) { canvas.variables[this.id] = this.checked; cb(e,p); };
        // <input type="range" id="id" value="0" min="0" max="0" step="0.01" />
        } else if (type == RANGE) {
            var s = "<input type='range' id='"+v+"' value='"+(o.value||0)+"'"
                  + " min='"+(o.min||0)+"' max='"+(o.max||1)+"' step='"+(o.step||0.01)+"' />";
            var f = function(e,p) { canvas.variables[this.id] = parseFloat(this.value); cb(e,p); };
        // <select id="id"><option value="value[i]">value[i]</option>...</select>