[Laszlo-checkins] r10635 - openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip
max@openlaszlo.org
max at openlaszlo.org
Thu Aug 7 19:37:04 PDT 2008
Author: max
Date: 2008-08-07 19:37:03 -0700 (Thu, 07 Aug 2008)
New Revision: 10635
Modified:
openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltip.lzx
openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltipview.lzx
Log:
+ Add patch from LPP-6814.
Modified: openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltip.lzx
===================================================================
--- openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltip.lzx 2008-08-08 01:04:05 UTC (rev 10634)
+++ openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltip.lzx 2008-08-08 02:37:03 UTC (rev 10635)
@@ -3,140 +3,162 @@
@subtopic Tooltip
-->
<library>
+<include href="tooltipview.lzx"/>
-<include href="tooltipview.lzx"/>
<!--- This class allows you to show a floating "tooltip" on any
- view. To use it you make it a child of a view. The parent view has
- to be clickable for the tooltip to work. Setting clickable to false
- will disable the tooltip.
-
- For example:
+ view. To use it you make it a child of a view. The parent view has
+ to be clickable for the tooltip to work. Setting clickable to false
+ will disable the tooltip.
- <example executable="false">
- <button text="OK">
- <tooltip>This is a tip.</tooltip>
- </button>
- </example>
+ For example:
- The appearance of the tooltip is determined by a view on the canvas
- which must be named "tooltipview" and have a setText method and
- options="ignorelayout"
--->
+ <example executable="false">
+ <button text="OK">
+ <tooltip>This is a tip.</tooltip>
+ </button>
+ </example>
+
+ The appearance of the tooltip is determined by a view on the canvas
+ which must be named "tooltipview" and have a setText method and
+ options="ignorelayout" -->
<class name="tooltip" extends="node" initstage="late">
- <!--- text that appears in the tooltip. null or empty string means tooltip will not show. -->
+ <!--// ATTRIBUTES ///////////////////////////////////////////////////////-->
+ <!--- Text that appears in the tooltip. null or empty string means the
+ tooltip will not show. -->
<attribute name="text" type="text"/>
- <!--- @keywords private -->
- <attribute name="_mousein" value="false" type="boolean"/>
- <!--- @keywords private -->
- <attribute name="_checkdel" value="null"/>
- <!--- @keywords private -->
- <attribute name="_lastmousex" value="0"/>
- <!--- @keywords private -->
- <attribute name="_lastmousey" value="0"/>
- <!--- offset of tooltip from parent view-->
- <attribute name="p_yoffset" value="15" />
- <!--- values = "'right',''"
- attribute to align a tooltip 'right' so that it's right edge is flush
- with it's parent's right edge ( minus 10 pixel inset ). -->
- <attribute name="tipalign" value="" type="string" />
- <!--- values = "'above','below',''"
- attribute to control if the tooltip shows up above or below the
+
+ <!--- Attribute to align a tooltip 'right' so that it's right edge is flush
+ with it's parent's right edge (minus 10 pixel inset). -->
+ <attribute name="tipalign" type="string" value=""/>
+
+ <!--- Attribute to control if the tooltip shows up above or below the
mouse position. Leaving this value empty indicates a best guess
- will be made by the component. '-->
- <attribute name="tipvalign" value="" type="string"/>
-
+ will be made by the component. Allowed values
+ are 'above' and 'below' or ''. -->
+ <attribute name="tipvalign" type="string" value=""/>
+
+ <!--- The number of milliseconds until the tip is shown. -->
+ <attribute name="showTime" type="number" value="500"/>
+
+ <!--- The minimum number of milliseconds until the tip is hidden. -->
+ <attribute name="minHideTime" type="number" value="1500"/>
+
+ <!--- The number of milliseconds per character in the tip
+ until the tip is hidden. -->
+ <attribute name="hideTimePerChar" type="number" value="75"/>
+
+
+ <!--// HANDLERS /////////////////////////////////////////////////////////-->
<!--- @keywords private -->
- <method event="oninit">
- this.overdel = new LzDelegate(this, "startCheck",parent,"onmouseover");
- this.outdel = new LzDelegate(this, "hideTip",parent,"onmouseout");
- this.outdel.register(parent, "onclick");
- </method>
+ <handler name="oninit">
+ this._overDel = new LzDelegate(this, "_handleMouseover", parent, "onmouseover");
+ this._outDel = new LzDelegate(this, "_handleMouseout", parent, "onmouseout");
+ </handler>
+
+ <!--// METHODS //////////////////////////////////////////////////////////-->
<!--- @keywords private -->
- <method name="startCheck">
- <![CDATA[
- if (this.text != null && this.text != "") {
- this._mousein = true;
- if (!this._checkdel) this._checkdel = new LzDelegate(this, "checkTip");
- this._lastmousex = canvas.getMouse('x');
- this._lastmousey = canvas.getMouse('y');
- this.lasttime = new Date();
-
- LzIdle.callOnIdle(this._checkdel);
+ <method name="_handleMouseover">
+ if (!this.text) return;
+
+ // If we're not really over then abort.
+ if (!parent.containsPt(parent.getMouse('x'), parent.getMouse('y'))) {
+ this._handleMouseout();
+ return;
}
- ]]>
+
+ // Setup Timer
+ this._lastmousex = canvas.getMouse('x');
+ this._lastmousey = canvas.getMouse('y');
+ if (!this['_showDel']) this._showDel = new LzDelegate(this, "_showTip");
+ LzTimer.resetTimer(this._showDel, this.showTime);
+
+ // Setup a mousemove listener to hide the tip on move
+ if (!this['_mouseMoveDel']) this._mouseMoveDel = new LzDelegate(this, "_handleMousemove");
+ this._mouseMoveDel.register(LzGlobalMouse, "onmousemove");
</method>
<!--- @keywords private -->
- <method name="checkTip">
- if (!this._mousein) return;
- var now = new Date();
- var newmousex = canvas.getMouse('x');
- var newmousey = canvas.getMouse('y');
- var timediff = now.getTime() - this.lasttime.getTime();
-
- if ((this._lastmousex != newmousex) || (this._lastmousey != newmousey)) {
- this._lastmousex = newmousex;
- this._lastmousey = newmousey;
- this.lasttime = now;
+ <method name="_handleMousemove">
+ // Hide tip on move
+ this._hideTip();
+
+ // If we're not over anymore then abort.
+ if (!parent.containsPt(parent.getMouse('x'), parent.getMouse('y'))) {
+ this._handleMouseout();
+ return;
}
- if (timediff > 500) {
- this.showTip();
- } else {
- LzIdle.callOnIdle(this._checkdel);
- }
+
+ // Reset Timer
+ this._lastmousex = canvas.getMouse('x');
+ this._lastmousey = canvas.getMouse('y');
+ LzTimer.resetTimer(this._showDel, this.showTime);
</method>
<!--- @keywords private -->
- <method name="showTip"> <![CDATA[
+ <method name="_handleMouseout">
+ if (!this.text) return;
+
+ if (this['_mouseMoveDel']) this._mouseMoveDel.unregisterAll();
+ if (this['_showDel']) LzTimer.removeTimer(this._showDel);
+
+ // Hide tip on mouseout
+ this._hideTip();
+ </method>
+
+ <!--- @keywords private -->
+ <method name="_showTip">
canvas.tooltipview.setText(this.text);
- var py = parent.getAttributeRelative( 'y', canvas )
+ var py = parent.getAttributeRelative('y', canvas);
var tipx = canvas.width;
- if ( tipalign == 'right' ) {
- tipx = parent.getAttributeRelative( 'x', canvas ) + parent.width;
+ if (tipalign == 'right') {
+ tipx = parent.getAttributeRelative('x', canvas) + parent.width;
}
-
+
tipx = Math.min(tipx - canvas.tooltipview.width - 10, this._lastmousex - 5);
-
+
var tipy = this._lastmousey + 25;
var pointerontop;
switch (this.tipvalign) {
- case "above":
- tipy = this._lastmousey - 25;
- pointerontop = false;
- break;
-
- case "below":
- tipy = this._lastmousey + 25;
- pointerontop = true;
- break;
-
- default:
- if (tipy > canvas.height - 30) {
+ case "above":
tipy = this._lastmousey - 25;
pointerontop = false;
- } else {
+ break;
+
+ case "below":
tipy = this._lastmousey + 25;
pointerontop = true;
- }
-
+ break;
+
+ default:
+ if (tipy > canvas.height - 30) {
+ tipy = this._lastmousey - 25;
+ pointerontop = false;
+ } else {
+ tipy = this._lastmousey + 25;
+ pointerontop = true;
+ }
}
+
+ canvas.tooltipview.setX(tipx);
+ canvas.tooltipview.setY(tipy);
+ canvas.tooltipview.setPointerX(this._lastmousex, pointerontop);
+ canvas.tooltipview.bringToFront(this.text);
+ canvas.tooltipview.show();
+
+ // Hide tooltip after a period of time
+ if (!this['_hideDel']) this._hideDel = new LzDelegate(this, "_hideTip");
+ LzTimer.resetTimer(this._hideDel, Math.max(this.minHideTime, this.text.length * this.hideTimePerChar));
+ </method>
- canvas.tooltipview.setX( tipx );
- canvas.tooltipview.setY( tipy );
- canvas.tooltipview.setPointerX( this._lastmousex, pointerontop );
- canvas.tooltipview.bringToFront( this.text );
- canvas.tooltipview.setVisible( true );
- ]]></method>
-
<!--- @keywords private -->
- <method name="hideTip">
- this._mousein = false;
- canvas.tooltipview.setVisible( false );
+ <method name="_hideTip">
+ if (this['_hideDel']) LzTimer.removeTimer(this._hideDel);
+
+ if (canvas.tooltipview.visible) canvas.tooltipview.hide();
</method>
</class>
-
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2006-2008 Laszlo Systems, Inc. All Rights Reserved. *
Modified: openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltipview.lzx
===================================================================
--- openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltipview.lzx 2008-08-08 01:04:05 UTC (rev 10634)
+++ openlaszlo/branches/pagan-deities/lps/components/incubator/tooltip/tooltipview.lzx 2008-08-08 02:37:03 UTC (rev 10635)
@@ -3,65 +3,87 @@
@subtopic Tooltip
-->
<library>
-
<resource name="tooltip_ptr_rsc" >
- <frame src="resources/tooltip_pointer_up.png" />
- <frame src="resources/tooltip_pointer_dn.png" />
+ <frame src="resources/tooltip_pointer_up.png"/>
+ <frame src="resources/tooltip_pointer_dn.png"/>
</resource>
-<!--- used by tooltip class
- @access private-->
-<view name="tooltipview" options="ignorelayout" id="tp"
- bgcolor="0x252525"
- width="${t.width + 6}" height="17"
- visible="false">
- <attribute name="text" value="" type="html" setter="this.setText(text)" />
+<!--- Used by tooltip class
+ @keywords private -->
+<view name="tooltipview" options="ignorelayout" id="tp"
+ bgcolor="0x252525" width="${t.width + 6}" height="17" visible="false"
+>
+ <!--// ATTRIBUTES ///////////////////////////////////////////////////////-->
+ <!--- @keywords private -->
+ <attribute name="text" value="" type="html" setter="this.setText(text)"/>
+
+ <!--// VIEWS ///////////////////////////////////////////////////////-->
<!-- shadow left -->
<view bgcolor="black" opacity=".3"
- x="${parent.width}" y="2"
- width="2" height="15" />
+ x="${parent.width}" y="2" width="2" height="15"
+ />
<!-- shadow bottom -->
<view bgcolor="black" opacity=".3"
- x="2" y="${parent.height}"
- width="100%" height="2" />
-
+ x="2" y="${parent.height}" width="100%" height="2"
+ />
+
<!-- interior color -->
- <view bgcolor="0xFAFECD" x="1" y="1"
- width="${parent.width - 2}"
- height="${parent.height - 2}" />
-
+ <view bgcolor="0xFAFECD"
+ x="1" y="1" width="${parent.width - 2}" height="${parent.height - 2}"
+ />
+
<!-- the arrow that points to the control -->
- <view name="pointer" resource="tooltip_ptr_rsc" />
-
+ <view name="pointer" resource="tooltip_ptr_rsc"/>
+
<!-- tooltip text -->
- <text x="3" name="t" fgcolor="0x1D1D1D" fontsize="10" resize="true">test</text>
+ <text x="3" name="t" fgcolor="0x1D1D1D" fontsize="10" resize="true"/>
- <!--- sets the text of the tooltip -->
+
+ <!--// ANIMATORS ////////////////////////////////////////////////////////-->
+ <animator name="hideAnim" attribute="opacity" start="false" duration="250"
+ from="1" to="0" onstop="parent.setAttribute('visible', false)"
+ />
+
+
+ <!--// METHODS //////////////////////////////////////////////////////////-->
+ <!--- @keywords private -->
<method name="setText" args="new_text">
- if ( !isinited ) return;
+ if (!isinited) return;
this.t.setText(new_text);
</method>
- <method name="setPointerX" args="mx, isontop ">
- var nx = Math.min( mx - x, width - 12)
- this.pointer.setX( nx );
-
- if ( isontop ) {
- this.pointer.setAttribute( 'frame', 1 );
- this.pointer.setY( 1 - this.pointer.height);
+ <!--- @keywords private -->
+ <method name="setPointerX" args="mx, isontop">
+ var nx = Math.min(mx - x, width - 12)
+ this.pointer.setX(nx);
+
+ if (isontop) {
+ this.pointer.setAttribute('frame', 1);
+ this.pointer.setY(1 - this.pointer.height);
} else {
- this.pointer.setAttribute( 'frame', 2 );
- this.pointer.setY( height - 1);
+ this.pointer.setAttribute('frame', 2);
+ this.pointer.setY(height - 1);
}
</method>
-
+
+ <!--- Shows the tooltip.
+ @keywords private -->
+ <method name="show">
+ this.setAttribute('opacity', 1);
+ this.setAttribute('visible', true);
+ </method>
+
+ <!--- Hides the tooltip.
+ @keywords private -->
+ <method name="hide">
+ this.hideAnim.doStart();
+ </method>
</view>
-
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
-* Copyright 2006-2007 Laszlo Systems, Inc. All Rights Reserved. *
+* Copyright 2006-2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@ -->
More information about the Laszlo-checkins
mailing list