widget.js

Go to the documentation of this file.

 
define( [
                'remoto!stdlib:js/include/utils.js',
                'remoto!stdlib:js/include/preferences.js',
                'remoto!stdlib:js/paneManager/arrowMessage.js',
                'remoto!stdlib:js/widgets/widget.css',
                'jquery/jquery',
        ],
        function(utils,preferences,arrowMessage)
        {
                'use strict';
 
                function widget( d )
                {
                        //if (arguments.length == 0) return;    //base prototype setup
                        if (!d) return;                         //base prototype setup
 
                        this._label = d.label || null;          //label we see
                        this._variable = null;                  //set from the factory
                        this._value = ("value" in d) ? d.value : d.default;     //the widget's value, or the default value (or undefined if neither)
                        this._options = d.options || {};
                        this._change = d.change                 //onChange callback
                        this._default = d.default;              //used to decide if something is non-default, or to fail to
                        this._tip = d.tip || "";
                        this._id = utils.uuid();
                        this._activeUser = null;
                        this._validator = d.validator || null;
 
                        this._changeTimer = null;               //the timer used to release change events... many widgets release events too quickly.
                        this._immediate = false;
 
                        this._hidden = false;
                        this._enabled = ("enabled" in this._options) ? this._options.enabled : true;
                        this._error = null;
                        //this._active = false;
 
                        this._html = null;
                        this._widgetJq = null;
                        this._labelJq = null;
 
                        this._arrowAt = null;
                        this._arrowMessage = null;
                }
 
                widget.prototype = {
 
                        createHTML:     function()
                                        {
                                                if (this._html) return this._html;
 
                                                var a,g;
 
                                                this._html = $("<div class='widgetRow'>");
                                                a = this._html;
 
                                                if (this._options["class"])
                                                        this._html.addClass(this._options["class"]);
 
                                                a.attr("title",this._tip);
 
                                                var cl = this.createLabel();
                                                if (cl)
                                                        a.append( cl );
 
                                                var cw = this.createWidget();
                                                if (cw)
                                                {
                                                        var w = $("<div class='widgetField'>");
                                                        w.append( cw );
                                                        a.append( w );
                                                }
 
                                                if (this._options["hidden"]===true)
                                                        this.hidden = true;
 
                                                if (this._widgetJq)
                                                this._widgetJq.bind("keydown", function(e)
                                                {
                                                        if (e.keyCode === 83 && (e.metaKey || e.ctrlKey))
                                                        { //apple-s or ctrl-s was attempted... prevent it.
                                                                return false;
                                                        }
 
                                                        if (e.keyCode === 27)
                                                        {
                                                                this.blur();
                                                                return false;
                                                        }
                                                });
 
                                                return this._html;
                                        },
 
                        createWidget:   function()
                                        {
                                                if (this._widgetJq) return this._widgetJq;
 
                                                //this._widgetJq = $("<input class='widgetInputField' id='"+this._id+"' type='text' value=\""+this._value+"\"/>");
                                                this._widgetJq = $("<input class='widgetInputField' id='' type='text' value=''/>");
                                                this._widgetJq.attr( {id:this._id} );
                                                this._widgetJq.val(this._value);
 
                                                if (this._options["spellcheck"]===false)
                                                        this._widgetJq.attr("spellcheck","false");
 
                                                if (this._options["enabled"]!==true || !this._enabled)
                                                        this.enabled = false;
 
                                                if (this._options["placeholder"])
                                                        this._widgetJq.attr("placeholder",this._options["placeholder"]);
 
                                                if (this._options["autofocus"])
                                                        this._widgetJq.attr("autofocus","");
 
                                                if (this._options.class)
                                                        this._widgetJq.addClass(this._options.class);
 
                                                //console.log(this._options);
 
                                                //this._widgetJq.attr("autocomplete","off");
 
                                                this._widgetJq.bind("contextmenu", function(e) { e.stopPropagation(); } )       //allow default context, like copy, paste, spellcheck, etc.
 
                                                return this._widgetJq;
                                        },
 
                        createLabel:    function()
                                        {
                                                if (this._labelJq) return this._labelJq;
 
                                                this._labelJq = $("<label class='widgetLabel' for='"+this._id+"'>");
 
                                                if (this._options.hideLabel)
                                                {       this._labelJq.css("visibility","hidden");
                                                        this._labelJq.css({
                                                                padding:0,
                                                        //      width:0,
                                                                height:0,
                                                                margin:0
                                                        });
                                                }
                                                else
                                                        this._labelJq.text(this._label || this._variable);
 
                                                return this._labelJq;
                                        },
 
                        activate:       function()
                                        {
                                                if (this._widgetJq && this._change)
                                                {       this._widgetJq.unbind("change input");
                                                        this._widgetJq.bind("change input", this.sync.bind(this));
                                                }
 
                                                //this._html.bind("mouseenter", this.postMessageHandler.bind(this));
 
                                                this.validate();
                                        },
 
                        deactivate:     function()
                                        {
                                                if (this._widgetJq)
                                                        this._widgetJq.unbind("change input blur click");
 
                                                //if (this._html)
                                                //      this._html.unbind("mouseenter");
                                        },
 
                        sync:           function()
                                        {
                                                var v = this._widgetJq ? this._widgetJq.val() : null;
 
                                                this.value = v;
 
                                                return false;
                                        },
 
 
                        applyOptions:   function(ops)
                                        {
                                                for (var o in ops)
                                                {
                                                        var v = ops[o];
 
                                                        //console.warn(o);
 
                                                        switch(o)
                                                        {
                                                                case "enabled":         this.enabled = v;       break;
                                                                case "hidden":          this.hidden = v;        break;
 
                                                                default:                if (o in this._options)
                                                                                                this._options[o] = v;
                                                                                        break;
 
                                                        }
                                                }
                                        },
 
                        doChange:       function()
                                        {
                                                if (this._changeTimer)
                                                        clearTimeout( this._changeTimer );
 
                                                if (this._change)
                                                {
                                                        if (!this._immediate)
                                                        {
                                                                var THIS = this;
                                                                this._changeTimer = setTimeout( function() {
                                                                        THIS._change(THIS._variable,THIS._value,THIS);
                                                                        THIS._changeTimer = null;
                                                                }, preferences.fetch("uifrequency",100) );
                                                        }
                                                        else
                                                                this._change(this._variable,this._value,this);
                                                }
                                        },
 
                        enable:         function() { this.enabled = true; },
 
                        disable:        function() { this.enabled = false; },
 
                        set immediateValue(v)
                                        {
                                                if (this._value !== v)
                                                {
                                                        var i = this._immediate;
                                                        this._immediate = true;
                                                        this.value = v;
                                                        this._immediate = i;                            //return button value to its previous state (which may allow it to remain true, like for buttons)
 
                                                        if (this._activeUser)
                                                                this.arrowMessage( this._activeUser );
                                                }
                                        },
 
                        get value()     {
                                                return this._value;
                                        },
 
                        set value(v)    {
                                                var ov = this._value;
 
                                                this._value = v;
 
                                                if (ov !== v)
                                                {
                                                        if (this._widgetJq && this._widgetJq.val()!==v)
                                                                this._widgetJq.val(v);
 
                                                        var valid = this.validate();
 
                                                        if (this._change && valid===true)
                                                                this.doChange(v);
                                                }
 
                                                return this._value;
                                        },
 
                        get defaultValue() {
                                                return this._default;
                                        },
 
                        set defaultValue(v) {
                                                this._default = v;
                                                return this._default;
                                        },
 
                        get visibleWidget() {
                                                return this._widgetJq;
                                        },
 
                        get isDefault() {
                                                return (this.value === this.defaultValue)
                                        },
 
                        get nonDefaultValue() {
                                                if (!this.isDefault)
                                                        return this.value;
 
                                                return undefined;
                                        },
 
                        set validator(v) {
                                                this._validator = v;
                                        },
 
                        set error(e)    {
                                                this._error = e;
 
                                                if (this._labelJq)
                                                {       if (e===false || e===undefined || e===null)
                                                        {       this._labelJq.css("color","");
                                                                //this._labelJq.unbind("mouseover");
                                                                this._labelJq.removeAttr("title");
                                                        }
                                                        else
                                                        {
                                                                this._labelJq.css("color",widget.errorColor);
                                                                this._labelJq.attr("title",this._error);
                                                                //if (e!==true)
                                                                //      this._labelJq.bind("mouseover", this.postErrorHandler.bind(this) );
                                                        }
                                                }
 
                                                return e;
                                        },
 
                        get error()     {
                                                return this._error;
                                        },
 
                        set activeUser(u) {
                                                this._activeUser = u;
                                        },
 
                        get enabled()   {       return this._enabled;   },
 
                        set enabled(e)  {
                                                this._enabled = e ? true : false;
 
                                                if (this._widgetJq)
                                                {
                                                        if (this._enabled)
                                                        {       this._widgetJq.removeAttr("disabled");
                                                        }
                                                        else
                                                        {       this._widgetJq.attr("disabled","disabled");
                                                        }
                                                }
 
                                                return this._enabled;
                                        },
 
                        get hidden()    {
                                                return this._hidden;
                                        },
 
                        set hidden(e)   {
                                                this._hidden = e;
                                                if (this._html)
                                                {       if (this._hidden)
                                                                this._html.css("display","none");
                                                        else
                                                                this._html.css("display","");
                                                }
                                                else
                                                        console.log("no _html to hide!");
 
                                        },
 
                        validate:       function()
                                        {
                                                if (this._validator)
                                                {       var r = this._validator(this._value,this._options);
                                                        if (r===true)
                                                                this.error = false;
                                                        else
                                                                this.error = r;
                                                        return r;
                                                }
                                                else
                                                {
                                                        this.error = false;
                                                        return true;
                                                }
                                        },
 
                        arrowMessage:   function(m)
                                        {
                                                if (preferences.fetch("arrowMessages",true) === false)
                                                        return;
 
                                                //FIXME: do we want some kind of stacking here?  Or ability to add to an existing arrow message?
                                                if (this._arrowMessage)
                                                {       return;
                                                        this._arrowMessage.destroy();
                                                }
 
                                                var THIS = this;
                                                this._arrowMessage = new arrowMessage(m, this.visibleWidget, this._arrowAt);
                                                this._arrowMessage._completeCallback = function() { THIS._arrowMessage = null; };
                                        },
 
                        //save:         function()              //FIXME
                        //              {
                        //
                        //              },
 
                        /*
                        postMessageHandler: function()
                                        {
                                                if (this._tip)
                                                        this.postMessage( this._tip,this._widgetJq );
 
                                                //return false;                                                 //this disables mouseover to set the current pane, which prevents the space bar from setting single pane mode properly.
                                        },
 
                        postErrorHandler: function()
                                        {
                                                if (this._error)
                                                        this.postMessage( "<span style='color:red'>"+this._error+"</span>" );
 
                                                return false;
                                        },
 
                        postMessage:    function(m)
                                        {
                                                console.warn("Post message handler should be overwritten by some other function.  Base functionality does nothing.");
                                                console.log("Message: "+m);
                                        },
                        */
 
                        destroy:        function()
                                        {
                                                this.deactivate();
 
                                                if (this._widgetJq) this._widgetJq.remove();
                                                if (this._html) this._html.remove();
 
                                                this._widgetJq = null;
                                                this._html = null;
 
                                                for (var i in this)
                                                        delete this[i];
                                        }
                };
 
                widget.errorColor = "#FF6400";
 
                return widget;
        }
);