@qooxdoo/framework
Version:
The JS Framework for Coders
183 lines (153 loc) • 4.4 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2009 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Fabian Jakobs (fjakobs)
************************************************************************ */
/**
* The HoverButton is an {@link qx.ui.basic.Atom}, which fires repeatedly
* execute events while the pointer is over the widget.
*
* The rate at which the execute event is fired accelerates is the pointer keeps
* inside of the widget. The initial delay and the interval time can be set using
* the properties {@link #firstInterval} and {@link #interval}. The
* {@link #execute} events will be fired in a shorter amount of time if the pointer
* remains over the widget, until the min {@link #minTimer} is reached.
* The {@link #timerDecrease} property sets the amount of milliseconds which will
* decreased after every firing.
*
* *Example*
*
* Here is a little example of how to use the widget.
*
* <pre class='javascript'>
* var button = new qx.ui.form.HoverButton("Hello World");
*
* button.addListener("execute", function(e) {
* alert("Button is hovered");
* }, this);
*
* this.getRoot.add(button);
* </pre>
*
* This example creates a button with the label "Hello World" and attaches an
* event listener to the {@link #execute} event.
*
* *External Documentation*
*
* <a href='http://manual.qooxdoo.org/${qxversion}/pages/widget/hoverbutton.html' target='_blank'>
* Documentation of this widget in the qooxdoo manual.</a>
*/
qx.Class.define("qx.ui.form.HoverButton",
{
extend : qx.ui.basic.Atom,
include : [qx.ui.core.MExecutable],
implement : [qx.ui.form.IExecutable],
/**
* @param label {String} Label to use
* @param icon {String?null} Icon to use
*/
construct : function(label, icon)
{
this.base(arguments, label, icon);
this.addListener("pointerover", this._onPointerOver, this);
this.addListener("pointerout", this._onPointerOut, this);
this.__timer = new qx.event.AcceleratingTimer();
this.__timer.addListener("interval", this._onInterval, this);
},
properties :
{
// overridden
appearance :
{
refine : true,
init : "hover-button"
},
/**
* Interval used after the first run of the timer. Usually a smaller value
* than the "firstInterval" property value to get a faster reaction.
*/
interval :
{
check : "Integer",
init : 80
},
/**
* Interval used for the first run of the timer. Usually a greater value
* than the "interval" property value to a little delayed reaction at the first
* time.
*/
firstInterval :
{
check : "Integer",
init : 200
},
/** This configures the minimum value for the timer interval. */
minTimer :
{
check : "Integer",
init : 20
},
/** Decrease of the timer on each interval (for the next interval) until minTimer reached. */
timerDecrease :
{
check : "Integer",
init : 2
}
},
members :
{
__timer : null,
/**
* Start timer on pointer over
*
* @param e {qx.event.type.Pointer} The pointer event
*/
_onPointerOver : function(e)
{
if (!this.isEnabled() || e.getTarget() !== this) {
return;
}
this.__timer.set({
interval: this.getInterval(),
firstInterval: this.getFirstInterval(),
minimum: this.getMinTimer(),
decrease: this.getTimerDecrease()
}).start();
this.addState("hovered");
},
/**
* Stop timer on pointer out
*
* @param e {qx.event.type.Pointer} The pointer event
*/
_onPointerOut : function(e)
{
this.__timer.stop();
this.removeState("hovered");
if (!this.isEnabled() || e.getTarget() !== this) {
return;
}
},
/**
* Fire execute event on timer interval event
*/
_onInterval : function()
{
if (this.isEnabled())
{
this.execute();
} else {
this.__timer.stop();
}
}
},
destruct : function() {
this._disposeObjects("__timer");
}
});