+++ /dev/null
-/*\r
-� Copyright 2008 Nokia Corporation. All rights reserved.\r
-\r
-IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia\r
-Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation\r
-and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If\r
-you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example\r
-Widget files.\r
-\r
-In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia\r
-grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example\r
-Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,\r
-CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60\r
-Widgets.\r
-\r
-If you redistribute the WRTKit and Example files, you must retain this entire notice in all such\r
-redistributions of the WRTKit and Example files.\r
-\r
-You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products\r
-that include the WRTKit and Example files without the prior written explicit agreement with Nokia.\r
-Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by\r
-Nokia herein, including but not limited to any patent rights that may be infringed by your products that\r
-incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files\r
-may be incorporated.\r
-\r
-The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO\r
-WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED\r
-WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A\r
-PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION\r
-ALONE OR IN COMBINATION WITH YOUR PRODUCTS.\r
-\r
-IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR\r
-CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\r
-SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\r
-INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR\r
-DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY\r
-OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,\r
-EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r
-\r
-*/\r
-\r
-///////////////////////////////////////////////////////////////////////////////\r
-// The ContentPanel class is a control for displaying content. The panel\r
-// can be expanded and collapsed.\r
-\r
-// Constructor.\r
-function ContentPanel(id, caption, content, foldable, expanded) {\r
- if (id != UI_NO_INIT_ID) {\r
- this.init(id, caption, content, foldable, expanded);\r
- }\r
-}\r
-\r
-// ContentPanel inherits from Control.\r
-ContentPanel.prototype = new Control(UI_NO_INIT_ID);\r
-\r
-// The element hierarchy in a content panel is as follows:\r
-//\r
-// rootElement\r
-// assemblyElement\r
-// captionElement\r
-// foldToggleElement\r
-// captionLinkElement\r
-// captionTextElement\r
-// contentElement\r
-//\r
-// captionTextElement is moved under foldToggleElement if disabled\r
-// or captionElement if not foldable\r
-\r
-// The fold toggle element used for folding content panels.\r
-ContentPanel.prototype.foldToggleElement = null;\r
-\r
-// The caption link element of this control.\r
-ContentPanel.prototype.captionLinkElement = null;\r
-\r
-// The caption text element of this control.\r
-ContentPanel.prototype.captionTextElement = null;\r
-\r
-// The content element of this control.\r
-ContentPanel.prototype.contentElement = null;\r
-\r
-// The foldable state of this control.\r
-ContentPanel.prototype.foldable = false;\r
-\r
-// The expanded state of this control.\r
-ContentPanel.prototype.expanded = false;\r
-\r
-// Enabled status.\r
-ContentPanel.prototype.enabled = false;\r
-\r
-// Initializer - called from constructor.\r
-ContentPanel.prototype.init = function(id, caption, content, foldable, expanded) {\r
- uiLogger.debug("ContentPanel.init(" + id + ", " + caption + ", " + content + ", " + foldable + ", " + expanded + ")");\r
- \r
- // call superclass initializer\r
- Control.prototype.init.call(this, id, caption);\r
- \r
- // the control defaults to enabled\r
- this.enabled = true;\r
- \r
- // create caption text element\r
- this.captionTextElement = document.createElement("span");\r
- \r
- // disconnect the control element\r
- this.assemblyElement.removeChild(this.controlElement);\r
- \r
- // set the foldable state\r
- this.foldable = foldable;\r
- \r
- // is this a foldable content panel?\r
- if (foldable) {\r
- // create fold toggle element\r
- this.foldToggleElement = document.createElement("div");\r
- this.captionElement.appendChild(this.foldToggleElement);\r
- \r
- // create caption link and add to caption element\r
- this.captionLinkElement = document.createElement("a");\r
- this.captionLinkElement.href = "JavaScript:void(0)";\r
- this.foldToggleElement.appendChild(this.captionLinkElement);\r
- \r
- // add the text element to the link element\r
- this.captionLinkElement.appendChild(this.captionTextElement);\r
- \r
- // bind event listeners\r
- var self = this;\r
- this.captionLinkElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);\r
- this.captionLinkElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);\r
- this.foldToggleElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);\r
- this.foldToggleElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);\r
- this.foldToggleElement.addEventListener("mousedown", function(event) {\r
- self.captionClicked();\r
- event.stopPropagation();\r
- event.preventDefault();\r
- }, true);\r
- this.foldToggleElement.addEventListener("keydown", function(event) {\r
- // center and enter trigger the action\r
- if (event.keyCode == 0 || event.keyCode == 13) {\r
- self.captionClicked();\r
- event.stopPropagation();\r
- event.preventDefault();\r
- }\r
- }, true);\r
- \r
- this.expanded = expanded;\r
- } else {\r
- // since this is not a foldable panel the content should be expanded\r
- this.expanded = true;\r
- \r
- // add the text element directly to the caption element\r
- this.captionElement.appendChild(this.captionTextElement);\r
- }\r
- \r
- // create content element\r
- this.contentElement = document.createElement("div");\r
- this.contentElement.style.display = this.expanded ? "block" : "none";\r
- this.rootElement.appendChild(this.contentElement);\r
- \r
- // set caption, content and expanded state\r
- this.setCaption(caption);\r
- this.setContent(content);\r
- \r
- // update style\r
- this.updateStyleFromState();\r
-}\r
-\r
-// Returns the enabled state.\r
-ContentPanel.prototype.isEnabled = function() {\r
- return this.enabled;\r
-}\r
-\r
-// Sets the enabled state.\r
-ContentPanel.prototype.setEnabled = function(enabled) {\r
- uiLogger.debug("ContentPanel.setEnabled(" + enabled + ")");\r
- \r
- // bail out early if there is no change in state\r
- if (this.enabled == enabled) {\r
- return;\r
- }\r
- \r
- // set the enabled state\r
- this.enabled = enabled;\r
- \r
- // is this a foldable content?\r
- if (this.foldable) {\r
- // the caption link must be disabled\r
- if (this.enabled) {\r
- // diabled -> enabled\r
- this.foldToggleElement.removeChild(this.captionTextElement);\r
- this.foldToggleElement.appendChild(this.captionLinkElement);\r
- this.captionLinkElement.appendChild(this.captionTextElement);\r
- } else {\r
- // enabled -> diabled\r
- this.captionLinkElement.removeChild(this.captionTextElement);\r
- this.foldToggleElement.removeChild(this.captionLinkElement);\r
- this.foldToggleElement.appendChild(this.captionTextElement);\r
- }\r
- }\r
- \r
- // update style\r
- this.updateStyleFromState(); \r
-}\r
-\r
-// Returns the caption; null if none.\r
-ContentPanel.prototype.getCaption = function() {\r
- return this.caption;\r
-}\r
-\r
-// Sets the caption; null if none.\r
-ContentPanel.prototype.setCaption = function(caption) {\r
- // bail out if the caption text element has not been created\r
- // this is to prevent the superclass init calling this before\r
- // we've initialized our custom caption\r
- if (this.captionTextElement == null)\r
- return;\r
- \r
- uiLogger.debug("ContentPanel.setCaption(" + caption + ")");\r
- \r
- // set the display style\r
- this.captionElement.style.display = (caption == null) ? "none" : "block";\r
- \r
- // set the caption\r
- this.caption = caption;\r
- this.captionTextElement.innerHTML = (caption == null) ? "" : caption;\r
- \r
- // update style\r
- this.updateStyleFromState();\r
-}\r
-\r
-// Returns the content.\r
-ContentPanel.prototype.getContent = function() {\r
- return this.contentElement.innerHTML;\r
-}\r
-\r
-// Sets the content.\r
-ContentPanel.prototype.setContent = function(content) {\r
- uiLogger.debug("ContentPanel.setContent(" + content + ")");\r
- this.contentElement.innerHTML = (content == null) ? "" : content;\r
-}\r
-\r
-// Returns the focusable state for the control.\r
-ContentPanel.prototype.isFocusable = function() {\r
- // a content panel is focusable if it's foldable and enabled\r
- return (this.foldable && this.enabled);\r
-}\r
-\r
-// Sets the focused state for the control.\r
-// Note: This may not always succeed.\r
-ContentPanel.prototype.setFocused = function(focused) {\r
- uiLogger.debug("ContentPanel.setFocused(" + focused + ")");\r
- if (this.enabled && this.foldable) {\r
- if (focused) {\r
- this.captionLinkElement.focus();\r
- } else {\r
- this.captionLinkElement.blur();\r
- }\r
- }\r
- // note that this.focused gets set as a result of focusStateChanged() being called\r
- // rather than setting it explicitly here\r
-}\r
-\r
-// Returns the expanded state.\r
-ContentPanel.prototype.isExpanded = function() {\r
- return this.expanded;\r
-}\r
-\r
-// Sets the expanded state.\r
-ContentPanel.prototype.setExpanded = function(expanded) {\r
- uiLogger.debug("ContentPanel.setExpanded(" + expanded + ")");\r
- \r
- // make sure only foldable content panels are folded\r
- if (!this.foldable) {\r
- uiLogger.warn("Cannot fold a non-foldable content panel!");\r
- return;\r
- }\r
- \r
- this.expanded = expanded;\r
- if (this.expanded) {\r
- // expand\r
- this.contentElement.style.display = "block";\r
- \r
- // find out control top and bottom\r
- var controlTop = this.getAbsoluteTop(this.rootElement);\r
- var controlHeight = this.rootElement.clientHeight;\r
- var controlBottom = controlTop + controlHeight;\r
- \r
- // find out the viewport top and bottom\r
- var viewportTop = window.scrollY;\r
- var viewportHeight = window.innerHeight;\r
- var viewportBottom = viewportTop + viewportHeight;\r
- \r
- // make sure the control is positioned so that it can be seen\r
- var overflow = controlBottom - viewportBottom;\r
- if (overflow > 0) {\r
- // there's overflow so we need to scroll to get the control\r
- // into the viewport - however not so far that the control\r
- // goes past the viewport top.\r
- var distanceToTop = controlTop - viewportTop;\r
- var scrollAmount = Math.min(overflow, distanceToTop);\r
- window.scrollBy(0, scrollAmount);\r
- }\r
- } else {\r
- // collapse\r
- this.contentElement.style.display = "none";\r
- }\r
- \r
- // notify event listeners\r
- this.fireEvent(this.createEvent("ExpandedStateChanged", this.expanded));\r
- \r
- // update the style\r
- this.updateStyleFromState();\r
-}\r
-\r
-// Returns the absolute position (y) of the given element.\r
-ContentPanel.prototype.getAbsoluteTop = function(element) {\r
- // traverse from element to root and add top-offset\r
- // for each element we find on the way\r
- var absTop = 0;\r
- while (element != null) {\r
- absTop += element.offsetTop;\r
- element = element.offsetParent;\r
- }\r
- return absTop;\r
-}\r
-\r
-// Callback for when the caption is clicked.\r
-ContentPanel.prototype.captionClicked = function() {\r
- uiLogger.debug("ContentPanel.captionClicked()");\r
- \r
- // if we're enabled then a click results toggling the expanded state\r
- if (this.enabled) {\r
- // focus when clicked\r
- if (!this.focused) {\r
- this.captionLinkElement.focus();\r
- }\r
- \r
- // toggle the expanded state\r
- this.setExpanded(!this.expanded);\r
- }\r
-}\r
-\r
-// Updates the style of the control to reflects the state of the control.\r
-ContentPanel.prototype.updateStyleFromState = function() {\r
- uiLogger.debug("ContentPanel.updateStyleFromState()");\r
-\r
- // determine the state name\r
- var stateName = this.getStyleStateName();\r
- \r
- // set root element class name\r
- this.setClassName(this.rootElement, "Control");\r
-\r
- // set the control assembly class names\r
- this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);\r
- \r
- if (this.foldable) {\r
- // foldable content panel\r
- this.setClassName(this.captionElement, "ContentPanelCaptionFoldable");\r
- this.setClassName(this.foldToggleElement, "ContentPanelFoldToggle ContentPanelFoldToggle" + (this.expanded ? "Expanded" : "Collapsed"));\r
- } else {\r
- // non-folding\r
- this.setClassName(this.captionElement, "ContentPanelCaptionNonFoldable");\r
- }\r
- \r
- // set the content caption text class names\r
- this.setClassName(this.captionTextElement, "ContentPanelCaptionText ContentPanelCaptionText" + stateName);\r
- \r
- // set the content element class names\r
- this.setClassName(this.contentElement, "ContentPanelContent");\r
-}\r
projects / ptas / blobdiff