/* Copyright (c) 2006-2010, ePages GmbH All Rights Reserved. epages.html.formelementhin $Revision: 1.8 $ */ dojo.provide('epages.widget.FormElementHint'); dojo.require("epages.widget"); dojo.require("epages.html.element"); dojo.declare("epages.widget.FormElementHint", [dijit._Widget], { /** * public properties */ description : "", // String - the description text used as innerHTML for the hint /** * private properties */ _formDescriptionLayer : null, // DomNode - stores the layer dom element for the hint shape /** * dojo lifecycle methods */ postCreate: function() { // summary: widget lifecycle postCreate handler // description: // Determines the position of the widget's dom element and creates a hint layer element // containing the description text. Event handlers for showing and hiding the hint // are connected as well. var elementPosition = new epages.html.Element(this.domNode).getAbsolutePosition(dojo.body()); this._formDescriptionLayer = document.createElement("div"); var layerShadow = document.createElement("div"); layerShadow.className = "TooltipShadow"; with(this._formDescriptionLayer) { innerHTML = this.description; className = "Tooltip HideElement Wide"; onselectstart = function() { return false; }; style.MozUserSelect = "none"; style.WebkitUserSelect = "ignore"; style.left = (elementPosition.x + this.domNode.offsetWidth + 2) + "px"; style.top = elementPosition.y + "px"; appendChild(layerShadow); } dojo.style(this._formDescriptionLayer, "opacity", 0); dojo.body().appendChild(this._formDescriptionLayer); this.connect(this.domNode, "onfocus", "_showDescription"); this.connect(this.domNode, "onblur", "_hideDescription"); }, /** * private methods */ _showDescription: function() { // summary: Show hint with the description text // description: // Fade-turn the description layer visible var layer = this._formDescriptionLayer; layer.className = layer.className.replace(/HideElement/, ""); if(layer.offsetWidth > 300) { layer.style.width = "300px"; } dojo.fadeIn({node: layer, duration:200}).play(); }, _hideDescription: function() { // summary: Hide hint with the description text // description: // Fade-turn the description layer invisible var layer = this._formDescriptionLayer; dojo.fadeOut({ node: layer, duration:200 }).play(); setTimeout(function() { layer.className += " HideElement"; }, 200); } } );