1 /*

     2 © Copyright 2008 Nokia Corporation. All rights reserved.

     3 

     4 IMPORTANT:  The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia

     5 Corporation (“Nokia”) in consideration of your agreement to the following terms. Your use, installation

     6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If

     7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example

     8 Widget files.

     9 

    10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia

    11 grants you a personal, non-exclusive license, under Nokia’s copyrights in the WRTKit and Example

    12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,

    13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60

    14 Widgets.

    15 

    16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such

    17 redistributions of the WRTKit and Example files.

    18 

    19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products

    20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.

    21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by

    22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that

    23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files

    24 may be incorporated.

    25 

    26 The WRTKit and Example files are provided on an "AS IS" basis.  NOKIA MAKES NO

    27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED

    28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A

    29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION

    30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.

    31 

    32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR

    33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

    34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

    35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR

    36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY

    37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,

    38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    39 

    40 */

    41 

    42 ///////////////////////////////////////////////////////////////////////////////

    43 // The Control class is an abstract base class for all user interface controls.

    44 

    45 // Constructor.

    46 function Control(id, caption) {

    47     if (id != UI_NO_INIT_ID) {

    48         this.init(id, caption);

    49     }

    50 }

    51 

    52 // Control inherits from UIElement.

    53 Control.prototype = new UIElement(UI_NO_INIT_ID);

    54 

    55 // The view that control belongs to.

    56 Control.prototype.view = null;

    57 

    58 // Is the control focused?

    59 Control.prototype.focused = false;

    60 

    61 // Is the pointer over this control?

    62 Control.prototype.hovering = false;

    63 

    64 // The element hierarchy in a control is as follows:

    65 //

    66 // rootElement

    67 //     assemblyElement

    68 //         captionElement

    69 //         controlElement

    70 //

    71 // The assembly element groups the portion of a control that typically handle

    72 // the visual effects for focus and hover states. Having a separate root and

    73 // assembly elements allows other elements to be added to a control without

    74 // them being affected by the CSS rules of the assembly element.

    75 

    76 // The assembly element of this control.

    77 Control.prototype.assemblyElement = null;

    78 

    79 // The caption of this control; null if none.

    80 Control.prototype.caption = null;

    81 

    82 // The caption element of this control.

    83 Control.prototype.captionElement = null;

    84 

    85 // The control element of this control.

    86 Control.prototype.controlElement = null;

    87 

    88 // Initializer - called from constructor.

    89 Control.prototype.init = function(id, caption) {

    90     uiLogger.debug("Control.init(" + id + ", " + caption + ")");

    91     

    92     // call superclass initializer

    93     UIElement.prototype.init.call(this, id);

    94     

    95     // create assembly, caption and control elements

    96     this.assemblyElement = document.createElement("div");

    97     this.captionElement = document.createElement("div");

    98     this.assemblyElement.appendChild(this.captionElement);

    99     this.controlElement = document.createElement("div");

   100     this.assemblyElement.appendChild(this.controlElement);

   101     this.rootElement.appendChild(this.assemblyElement);

   102     

   103     // set the caption

   104     // style is not updated because the subclass will update the style later

   105     // when it has completely initialized the component

   106     this.setCaption(caption, true);

   107 }

   108 

   109 // Returns the caption; null if none.

   110 Control.prototype.getCaption = function() {

   111     return this.caption;

   112 }

   113 

   114 // Sets the caption; null if none.

   115 Control.prototype.setCaption = function(caption, noStyleUpdate) {

   116     uiLogger.debug("Control.setCaption(" + caption + ")");

   117     

   118     // set the display style

   119     this.captionElement.style.display = (caption == null) ? "none" : "block";

   120     

   121     // set the caption

   122     this.caption = caption;

   123     this.captionElement.innerHTML = (caption == null) ? "" : caption;

   124     

   125     // update style

   126     if (!noStyleUpdate) {

   127         this.updateStyleFromState();

   128     }

   129 }

   130 

   131 // Returns the enabled state.

   132 // Override this in subclasses as required to implement the state change.

   133 Control.prototype.isEnabled = function() {

   134     return false;

   135 }

   136 

   137 // Sets the enabled state.

   138 // Override this in subclasses as required to implement the state change.

   139 Control.prototype.setEnabled = function(enabled) {

   140     uiLogger.debug("Control.setEnabled(" + enabled + ")");

   141 }

   142 

   143 // Returns the focusable state for the control.

   144 // Defaults focusable if enabled - override this in subclasses as required.

   145 Control.prototype.isFocusable = function() {

   146     return this.isEnabled();

   147 }

   148 

   149 // Returns the focused state for the control.

   150 Control.prototype.isFocused = function() {

   151     return this.focused;

   152 }

   153 

   154 // Sets the focused state for the control.

   155 // Note: This may not always succeed.

   156 // Override this in subclasses as required to implement the state change.

   157 Control.prototype.setFocused = function(focused) {

   158     uiLogger.debug("Control.setFocused(" + focused + ")");

   159     // note that this.focused gets set as a result of focusStateChanged() being called

   160     // rather than setting it explicitly here

   161 }

   162 

   163 // Called when the focus state has changed for this control.

   164 Control.prototype.focusStateChanged = function(focused) {

   165     uiLogger.debug("Control.focusStateChanged(" + focused + ")");

   166     if (this.focused != focused) {

   167         this.focused = focused;

   168         

   169         // let the view know about the focus change

   170         if (this.view != null) {

   171             this.view.focusedControlChanged(focused ? this : null);

   172         }

   173         

   174         // update the style from the current state

   175         this.updateStyleFromState();

   176         

   177         // notify event listeners

   178         this.fireEvent(this.createEvent("FocusStateChanged", focused));

   179     }

   180 }

   181 

   182 // Called when the hover state has changed for this control.

   183 Control.prototype.hoverStateChanged = function(hovering) {

   184     uiLogger.debug("Control.hoverStateChanged(" + hovering + ")");

   185     if (this.hovering != hovering) {

   186         this.hovering = hovering;

   187         

   188         // update the style from the current state

   189         this.updateStyleFromState();

   190         

   191         // notify event listeners

   192         this.fireEvent(this.createEvent("HoverStateChanged", hovering));

   193     }

   194 }

   195 

   196 // Helper method that returns the state name for the current state.

   197 Control.prototype.getStyleStateName = function() {

   198     var focusable = this.isFocusable();

   199     if (focusable && this.focused) {

   200         return "Focus";

   201     } else if (focusable && this.hovering) {

   202         return "Hover";

   203     } else if (!this.isEnabled()) {

   204         return "Disabled";

   205     } else {

   206         return "Normal";

   207     }

   208 }

   209 

   210 // Resets the state tracking for focus and hover.

   211 // Override this in subclasses as required to implement the state reset.

   212 Control.prototype.resetFocusState = function() {

   213     uiLogger.debug("Control.resetFocusState()");

   214     this.hovering = false;

   215     this.focused = false;

   216     this.updateStyleFromState();

   217 }

   218 

   219 // Helper function that sets a classname for an element.

   220 // Only sets the class name if it actually is different from the current value.

   221 Control.prototype.setClassName = function(element, className) {

   222     if (element.className != className) {

   223         element.className = className;

   224     }

   225 }

   226 

   227 // Updates the style of the control to reflects the state of the control.

   228 // Override this in subclasses as required to implement the state change.

   229 Control.prototype.updateStyleFromState = function() {

   230     uiLogger.debug("Control.updateStyleFromState()");

   231 }