1 /**

     2  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

     3  * All rights reserved.

     4  * This component and the accompanying materials are made available

     5  * under the terms of the License "Eclipse Public License v1.0"

     6  * which accompanies this distribution, and is available

     7  * at the URL "http://www.eclipse.org/legal/epl-v10.html".

     8  *

     9  * Initial Contributors:

    10  * Nokia Corporation - initial contribution.

    11  * 

    12  * Contributors:

    13  * 

    14  * Description:

    15  * 

    16  */

    17 

    18 ///////////////////////////////////////////////////////////////////////////////

    19 // The NavigationButton class implements a button control for use in

    20 // navigational contexts in menu-style UIs.

    21 

    22 // Constructor.

    23 function NavigationButton(id, image, text) {

    24     if (id != UI_NO_INIT_ID) {

    25         this.init(id, image, text);

    26     }

    27 }

    28 

    29 // NavigationButton inherits from ActionControl.

    30 NavigationButton.prototype = new ActionControl(UI_NO_INIT_ID);

    31 

    32 // Button table element.

    33 NavigationButton.prototype.tableElement = null;

    34 

    35 // Button table row element.

    36 NavigationButton.prototype.tableRowElement = null;

    37 

    38 // Button table left cell element.

    39 NavigationButton.prototype.tableLeftCellElement = null;

    40 

    41 // Button table right cell element.

    42 NavigationButton.prototype.tableRightCellElement = null;

    43 

    44 // Button image element.

    45 NavigationButton.prototype.imageElement = null;

    46 

    47 // Button link element.

    48 NavigationButton.prototype.linkElement = null;

    49 

    50 // Button text element.

    51 NavigationButton.prototype.textElement = null;

    52 

    53 // Initializer - called from constructor.

    54 NavigationButton.prototype.init = function(id, image, text) {

    55     uiLogger.debug("NavigationButton.init(" + id + ", " + image + ", " + text + ")");

    56     

    57     // call superclass initializer

    58     ActionControl.prototype.init.call(this, id, null);

    59     

    60     // remove caption element

    61     this.assemblyElement.removeChild(this.captionElement);

    62     

    63     // construct the button

    64     this.buttonElement = document.createElement("div");

    65     this.tableElement = document.createElement("table");

    66     this.tableRowElement = document.createElement("tr");

    67     this.tableLeftCellElement = document.createElement("td");

    68     this.tableRightCellElement = document.createElement("td");

    69     this.imageElement = null;

    70     this.linkElement = document.createElement("a");

    71     this.linkElement.href = "JavaScript:void(0)";

    72     this.textElement = document.createElement("span");

    73     this.tableElement.appendChild(this.tableRowElement);

    74     this.tableRowElement.appendChild(this.tableLeftCellElement);

    75     this.tableRowElement.appendChild(this.tableRightCellElement);

    76     this.tableRightCellElement.appendChild(this.linkElement);

    77     this.linkElement.appendChild(this.textElement);

    78     this.buttonElement.appendChild(this.tableElement);

    79     this.controlElement.appendChild(this.buttonElement);

    80     

    81     // set the image and text

    82     this.setImage(image);

    83     this.setText(text);

    84     

    85     // bind event listeners

    86     this.bindActionControlListeners();

    87     

    88     // update the style

    89     this.updateStyleFromState();

    90 };

    91 

    92 // Sets the enabled state.

    93 NavigationButton.prototype.setEnabled = function(enabled) {

    94     uiLogger.debug("NavigationButton.setEnabled(" + enabled + ")");

    95     

    96     // bail out early if there is no change in state

    97     if (this.enabled == enabled) {

    98         return;

    99     }

   100     

   101     // set the enabled state

   102     this.enabled = enabled;

   103     

   104     if (this.enabled) {

   105         // diabled -> enabled

   106         this.tableRightCellElement.removeChild(this.textElement);

   107         this.tableRightCellElement.appendChild(this.linkElement);

   108         this.linkElement.appendChild(this.textElement);

   109     } else {

   110         // enabled -> diabled

   111         this.linkElement.removeChild(this.textElement);

   112         this.tableRightCellElement.removeChild(this.linkElement);

   113         this.tableRightCellElement.appendChild(this.textElement);

   114     }

   115     

   116     // update the style

   117     this.updateStyleFromState();

   118 };

   119 

   120 // Returns the button image (URL); null if none.

   121 NavigationButton.prototype.getImage = function() {

   122     return (this.imageElement != null) ? this.imageElement.src : null;

   123 };

   124 

   125 // Sets the button image (URL); null if none.

   126 NavigationButton.prototype.setImage = function(image) {

   127     uiLogger.debug("NavigationButton.setImage(" + image + ")");

   128     

   129     if (image == null) {

   130         // remove image - if any

   131         if (this.imageElement != null) {

   132             this.tableLeftCellElement.removeChild(this.imageElement);

   133         }

   134     } else {

   135         // default to not append image element

   136         var append = false;

   137         

   138         // create image element if one doesn't exist

   139         if (this.imageElement == null) {

   140             this.imageElement = document.createElement("img");

   141             this.imageElement.setAttribute("alt", "");

   142             append = true;

   143         }

   144         

   145         // set image source URL

   146         this.imageElement.src = image;

   147         

   148         // append the image element to the left cell?

   149         if (append) {

   150             this.tableLeftCellElement.appendChild(this.imageElement);

   151         }

   152     }

   153 };

   154 

   155 // Returns the button text.

   156 NavigationButton.prototype.getText = function() {

   157     return this.textElement.innerHTML;

   158 };

   159 

   160 // Sets the button text.

   161 NavigationButton.prototype.setText = function(text) {

   162     uiLogger.debug("NavigationButton.setText(" + text + ")");

   163     this.textElement.innerHTML = (text == null) ? "" : text;;

   164 };

   165 

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

   167 NavigationButton.prototype.updateStyleFromState = function() {

   168     uiLogger.debug("NavigationButton.updateStyleFromState()");

   169     

   170     // determine the state name

   171     var stateName = this.getStyleStateName();

   172     

   173     // set root element class name

   174     this.setClassName(this.rootElement, "Control");

   175     

   176     // set the control assembly class names

   177     this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);

   178     

   179     // control element

   180     this.setClassName(this.controlElement, "ControlElement NavigationButtonControlElement");

   181     

   182     // set the button table class names

   183     this.setClassName(this.buttonElement, "NavigationButton");

   184     this.setClassName(this.tableElement, "NavigationButtonTable");

   185     this.setClassName(this.tableRowElement, "NavigationButtonRow");

   186     this.setClassName(this.tableLeftCellElement, "NavigationButtonImageCell");

   187     this.setClassName(this.tableRightCellElement, "NavigationButtonTextCell");

   188     

   189     // set image class names

   190     if (this.imageElement) {

   191         this.setClassName(this.imageElement, "NavigationButtonImage");

   192     }

   193     

   194     // set the button text class name

   195     this.setClassName(this.textElement, "NavigationButtonText NavigationButtonText" + stateName);

   196 };