mypackage_wrt/WRTKit/UI/ContentPanel.js
changeset 42 20be4dd42b12
equal deleted inserted replaced
41:315255cd1aef 42:20be4dd42b12
       
     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 ContentPanel class is a control for displaying content. The panel
       
    44 // can be expanded and collapsed.
       
    45 
       
    46 // Constructor.
       
    47 function ContentPanel(id, caption, content, foldable, expanded) {
       
    48     if (id != UI_NO_INIT_ID) {
       
    49         this.init(id, caption, content, foldable, expanded);
       
    50     }
       
    51 }
       
    52 
       
    53 // ContentPanel inherits from Control.
       
    54 ContentPanel.prototype = new Control(UI_NO_INIT_ID);
       
    55 
       
    56 // The element hierarchy in a content panel is as follows:
       
    57 //
       
    58 // rootElement
       
    59 //     assemblyElement
       
    60 //         captionElement
       
    61 //             foldToggleElement
       
    62 //                 captionLinkElement
       
    63 //                     captionTextElement
       
    64 //     contentElement
       
    65 //
       
    66 // captionTextElement is moved under foldToggleElement if disabled
       
    67 // or captionElement if not foldable
       
    68 
       
    69 // The fold toggle element used for folding content panels.
       
    70 ContentPanel.prototype.foldToggleElement = null;
       
    71 
       
    72 // The caption link element of this control.
       
    73 ContentPanel.prototype.captionLinkElement = null;
       
    74 
       
    75 // The caption text element of this control.
       
    76 ContentPanel.prototype.captionTextElement = null;
       
    77 
       
    78 // The content element of this control.
       
    79 ContentPanel.prototype.contentElement = null;
       
    80 
       
    81 // The foldable state of this control.
       
    82 ContentPanel.prototype.foldable = false;
       
    83 
       
    84 // The expanded state of this control.
       
    85 ContentPanel.prototype.expanded = false;
       
    86 
       
    87 // Enabled status.
       
    88 ContentPanel.prototype.enabled = false;
       
    89 
       
    90 // Initializer - called from constructor.
       
    91 ContentPanel.prototype.init = function(id, caption, content, foldable, expanded) {
       
    92     uiLogger.debug("ContentPanel.init(" + id + ", " + caption + ", " + content + ", " + foldable + ", " + expanded + ")");
       
    93     
       
    94     // call superclass initializer
       
    95     Control.prototype.init.call(this, id, caption);
       
    96     
       
    97     // the control defaults to enabled
       
    98     this.enabled = true;
       
    99     
       
   100     // create caption text element
       
   101     this.captionTextElement = document.createElement("span");
       
   102     
       
   103     // disconnect the control element
       
   104     this.assemblyElement.removeChild(this.controlElement);
       
   105     
       
   106     // set the foldable state
       
   107     this.foldable = foldable;
       
   108     
       
   109     // is this a foldable content panel?
       
   110     if (foldable) {
       
   111         // create fold toggle element
       
   112         this.foldToggleElement = document.createElement("div");
       
   113         this.captionElement.appendChild(this.foldToggleElement);
       
   114         
       
   115         // create caption link and add to caption element
       
   116         this.captionLinkElement = document.createElement("a");
       
   117         this.captionLinkElement.href = "JavaScript:void(0)";
       
   118         this.foldToggleElement.appendChild(this.captionLinkElement);
       
   119         
       
   120         // add the text element to the link element
       
   121         this.captionLinkElement.appendChild(this.captionTextElement);
       
   122         
       
   123         // bind event listeners
       
   124         var self = this;
       
   125         this.captionLinkElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);
       
   126         this.captionLinkElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);
       
   127         this.foldToggleElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);
       
   128         this.foldToggleElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);
       
   129         this.foldToggleElement.addEventListener("mousedown", function(event) {
       
   130                                                                  self.captionClicked();
       
   131                                                                  event.stopPropagation();
       
   132                                                                  event.preventDefault();
       
   133                                                              }, true);
       
   134         this.foldToggleElement.addEventListener("keydown", function(event) {
       
   135                                                                // center and enter trigger the action
       
   136                                                                if (event.keyCode == 0 || event.keyCode == 13) {
       
   137                                                                    self.captionClicked();
       
   138                                                                    event.stopPropagation();
       
   139                                                                    event.preventDefault();
       
   140                                                                }
       
   141                                                            }, true);
       
   142         
       
   143         this.expanded = expanded;
       
   144     } else {
       
   145         // since this is not a foldable panel the content should be expanded
       
   146         this.expanded = true;
       
   147         
       
   148         // add the text element directly to the caption element
       
   149         this.captionElement.appendChild(this.captionTextElement);
       
   150     }
       
   151     
       
   152     // create content element
       
   153     this.contentElement = document.createElement("div");
       
   154     this.contentElement.style.display = this.expanded ? "block" : "none";
       
   155     this.rootElement.appendChild(this.contentElement);
       
   156     
       
   157     // set caption, content and expanded state
       
   158     this.setCaption(caption);
       
   159     this.setContent(content);
       
   160     
       
   161     // update style
       
   162     this.updateStyleFromState();
       
   163 }
       
   164 
       
   165 // Returns the enabled state.
       
   166 ContentPanel.prototype.isEnabled = function() {
       
   167     return this.enabled;
       
   168 }
       
   169 
       
   170 // Sets the enabled state.
       
   171 ContentPanel.prototype.setEnabled = function(enabled) {
       
   172     uiLogger.debug("ContentPanel.setEnabled(" + enabled + ")");
       
   173     
       
   174     // bail out early if there is no change in state
       
   175     if (this.enabled == enabled) {
       
   176         return;
       
   177     }
       
   178     
       
   179     // set the enabled state
       
   180     this.enabled = enabled;
       
   181     
       
   182     // is this a foldable content?
       
   183     if (this.foldable) {
       
   184          // the caption link must be disabled
       
   185         if (this.enabled) {
       
   186             // diabled -> enabled
       
   187             this.foldToggleElement.removeChild(this.captionTextElement);
       
   188             this.foldToggleElement.appendChild(this.captionLinkElement);
       
   189             this.captionLinkElement.appendChild(this.captionTextElement);
       
   190         } else {
       
   191             // enabled -> diabled
       
   192             this.captionLinkElement.removeChild(this.captionTextElement);
       
   193             this.foldToggleElement.removeChild(this.captionLinkElement);
       
   194             this.foldToggleElement.appendChild(this.captionTextElement);
       
   195         }
       
   196     }
       
   197     
       
   198     // update style
       
   199     this.updateStyleFromState();    
       
   200 }
       
   201 
       
   202 // Returns the caption; null if none.
       
   203 ContentPanel.prototype.getCaption = function() {
       
   204     return this.caption;
       
   205 }
       
   206 
       
   207 // Sets the caption; null if none.
       
   208 ContentPanel.prototype.setCaption = function(caption) {
       
   209     // bail out if the caption text element has not been created
       
   210     // this is to prevent the superclass init calling this before
       
   211     // we've initialized our custom caption
       
   212     if (this.captionTextElement == null)
       
   213         return;
       
   214     
       
   215     uiLogger.debug("ContentPanel.setCaption(" + caption + ")");
       
   216     
       
   217     // set the display style
       
   218     this.captionElement.style.display = (caption == null) ? "none" : "block";
       
   219     
       
   220     // set the caption
       
   221     this.caption = caption;
       
   222     this.captionTextElement.innerHTML = (caption == null) ? "" : caption;
       
   223     
       
   224     // update style
       
   225     this.updateStyleFromState();
       
   226 }
       
   227 
       
   228 // Returns the content.
       
   229 ContentPanel.prototype.getContent = function() {
       
   230     return this.contentElement.innerHTML;
       
   231 }
       
   232 
       
   233 // Sets the content.
       
   234 ContentPanel.prototype.setContent = function(content) {
       
   235     uiLogger.debug("ContentPanel.setContent(" + content + ")");
       
   236     this.contentElement.innerHTML = (content == null) ? "" : content;
       
   237 }
       
   238 
       
   239 // Returns the focusable state for the control.
       
   240 ContentPanel.prototype.isFocusable = function() {
       
   241     // a content panel is focusable if it's foldable and enabled
       
   242     return (this.foldable && this.enabled);
       
   243 }
       
   244 
       
   245 // Sets the focused state for the control.
       
   246 // Note: This may not always succeed.
       
   247 ContentPanel.prototype.setFocused = function(focused) {
       
   248     uiLogger.debug("ContentPanel.setFocused(" + focused + ")");
       
   249     if (this.enabled && this.foldable) {
       
   250         if (focused) {
       
   251             this.captionLinkElement.focus();
       
   252         } else {
       
   253             this.captionLinkElement.blur();
       
   254         }
       
   255     }
       
   256     // note that this.focused gets set as a result of focusStateChanged() being called
       
   257     // rather than setting it explicitly here
       
   258 }
       
   259 
       
   260 // Returns the expanded state.
       
   261 ContentPanel.prototype.isExpanded = function() {
       
   262     return this.expanded;
       
   263 }
       
   264 
       
   265 // Sets the expanded state.
       
   266 ContentPanel.prototype.setExpanded = function(expanded) {
       
   267     uiLogger.debug("ContentPanel.setExpanded(" + expanded + ")");
       
   268     
       
   269     // make sure only foldable content panels are folded
       
   270     if (!this.foldable) {
       
   271         uiLogger.warn("Cannot fold a non-foldable content panel!");
       
   272         return;
       
   273     }
       
   274     
       
   275     this.expanded = expanded;
       
   276     if (this.expanded) {
       
   277         // expand
       
   278         this.contentElement.style.display = "block";
       
   279         
       
   280         // find out control top and bottom
       
   281         var controlTop = this.getAbsoluteTop(this.rootElement);
       
   282         var controlHeight = this.rootElement.clientHeight;
       
   283         var controlBottom = controlTop + controlHeight;
       
   284         
       
   285         // find out the viewport top and bottom
       
   286         var viewportTop = window.scrollY;
       
   287         var viewportHeight = window.innerHeight;
       
   288         var viewportBottom = viewportTop + viewportHeight;
       
   289         
       
   290         // make sure the control is positioned so that it can be seen
       
   291         var overflow = controlBottom - viewportBottom;
       
   292         if (overflow > 0) {
       
   293             // there's overflow so we need to scroll to get the control
       
   294             // into the viewport - however not so far that the control
       
   295             // goes past the viewport top.
       
   296             var distanceToTop = controlTop - viewportTop;
       
   297             var scrollAmount = Math.min(overflow, distanceToTop);
       
   298             window.scrollBy(0, scrollAmount);
       
   299         }
       
   300     } else {
       
   301         // collapse
       
   302         this.contentElement.style.display = "none";
       
   303     }
       
   304     
       
   305     // notify event listeners
       
   306     this.fireEvent(this.createEvent("ExpandedStateChanged", this.expanded));
       
   307     
       
   308     // update the style
       
   309     this.updateStyleFromState();
       
   310 }
       
   311 
       
   312 // Returns the absolute position (y) of the given element.
       
   313 ContentPanel.prototype.getAbsoluteTop = function(element) {
       
   314     // traverse from element to root and add top-offset
       
   315     // for each element we find on the way
       
   316     var absTop = 0;
       
   317     while (element != null) {
       
   318         absTop += element.offsetTop;
       
   319         element = element.offsetParent;
       
   320     }
       
   321     return absTop;
       
   322 }
       
   323 
       
   324 // Callback for when the caption is clicked.
       
   325 ContentPanel.prototype.captionClicked = function() {
       
   326     uiLogger.debug("ContentPanel.captionClicked()");
       
   327     
       
   328     // if we're enabled then a click results toggling the expanded state
       
   329     if (this.enabled) {
       
   330         // focus when clicked
       
   331         if (!this.focused) {
       
   332             this.captionLinkElement.focus();
       
   333         }
       
   334         
       
   335         // toggle the expanded state
       
   336         this.setExpanded(!this.expanded);
       
   337     }
       
   338 }
       
   339 
       
   340 // Updates the style of the control to reflects the state of the control.
       
   341 ContentPanel.prototype.updateStyleFromState = function() {
       
   342     uiLogger.debug("ContentPanel.updateStyleFromState()");
       
   343 
       
   344     // determine the state name
       
   345     var stateName = this.getStyleStateName();
       
   346     
       
   347     // set root element class name
       
   348     this.setClassName(this.rootElement, "Control");
       
   349 
       
   350     // set the control assembly class names
       
   351     this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);
       
   352     
       
   353     if (this.foldable) {
       
   354         // foldable content panel
       
   355         this.setClassName(this.captionElement, "ContentPanelCaptionFoldable");
       
   356         this.setClassName(this.foldToggleElement, "ContentPanelFoldToggle ContentPanelFoldToggle" + (this.expanded ? "Expanded" : "Collapsed"));
       
   357     } else {
       
   358         // non-folding
       
   359         this.setClassName(this.captionElement, "ContentPanelCaptionNonFoldable");
       
   360     }
       
   361     
       
   362     // set the content caption text class names
       
   363     this.setClassName(this.captionTextElement, "ContentPanelCaptionText ContentPanelCaptionText" + stateName);
       
   364     
       
   365     // set the content element class names
       
   366     this.setClassName(this.contentElement, "ContentPanelContent");
       
   367 	
       
   368 }