lettuce
Version:
Lettuce JS, Mini Mobile Framework for Romantic with DSL.
210 lines (193 loc) • 6.2 kB
JavaScript
/*
* MelonJS Game Engine
* Copyright (C) 2011 - 2013, Olivier BIOT
* http://www.melonjs.org
*
*/
(function () {
/**
* GUI Object<br>
* A very basic object to manage GUI elements <br>
* The object simply register on the "pointerdown" <br>
* or "touchstart" event and call the onClick function"
* @class
* @extends me.Sprite
* @memberOf me
* @constructor
* @param {Number} x the x coordinate of the GUI Object
* @param {Number} y the y coordinate of the GUI Object
* @param {me.ObjectSettings} settings Object settings
* @example
*
* // create a basic GUI Object
* var myButton = me.GUI_Object.extend(
* {
* init:function (x, y)
* {
* var settings = {}
* settings.image = "button";
* settings.framewidth = 100;
* settings.frameheight = 50;
* // super constructor
* this._super(me.GUI_Object, "init", [x, y, settings]);
* // define the object z order
* this.z = 4;
* },
*
* // output something in the console
* // when the object is clicked
* onClick:function (event)
* {
* console.log("clicked!");
* // don't propagate the event
* return false;
* }
* });
*
* // add the object at pos (10,10)
* me.game.world.addChild(new myButton(10,10));
*
*/
me.GUI_Object = me.Sprite.extend({
/** @scope me.GUI_Object.prototype */
/**
* @ignore
*/
init : function (x, y, settings) {
/**
* object can be clicked or not
* @public
* @type boolean
* @name me.GUI_Object#isClickable
*/
this.isClickable = true;
/**
* Tap and hold threshold timeout in ms (default 250)
* @type {number}
* @name me.GUI_Object#holdThreshold
*/
this.holdThreshold = 250;
/**
* object can be tap and hold
* @public
* @type boolean
* @name me.GUI_Object#isHoldable
*/
this.isHoldable = false;
// object has been updated (clicked,etc..)
this.holdTimeout = null;
this.updated = false;
this.released = true;
// call the parent constructor
this._super(me.Sprite, "init", [x, y,
((typeof settings.image === "string") ? me.loader.getImage(settings.image) : settings.image),
settings.framewidth,
settings.frameheight]);
// GUI items use screen coordinates
this.floating = true;
// register on mouse event
me.input.registerPointerEvent("pointerdown", this, this.clicked.bind(this));
me.input.registerPointerEvent("pointerup", this, this.release.bind(this));
},
/**
* return true if the object has been clicked
* @ignore
*/
update : function () {
if (this.updated) {
// clear the flag
if (!this.released) {
this.updated = false;
}
return true;
}
return false;
},
/**
* function callback for the pointerdown event
* @ignore
*/
clicked : function (event) {
if (this.isClickable) {
this.updated = true;
if (this.isHoldable) {
if (this.holdTimeout !== null) {
me.timer.clearTimeout(this.holdTimeout);
}
this.holdTimeout = me.timer.setTimeout(this.hold.bind(this), this.holdThreshold, false);
this.released = false;
}
return this.onClick(event);
}
},
/**
* function called when the object is clicked <br>
* to be extended <br>
* return false if we need to stop propagating the event
* @name onClick
* @memberOf me.GUI_Object
* @public
* @function
* @param {Event} event the event object
*/
onClick : function () {
return false;
},
/**
* function callback for the pointerup event
* @ignore
*/
release : function (event) {
this.released = true;
me.timer.clearTimeout(this.holdTimeout);
return this.onRelease(event);
},
/**
* function called when the object is clicked <br>
* to be extended <br>
* return false if we need to stop propagating the event
* @name onClick
* @memberOf me.GUI_Object
* @public
* @function
* @param {Event} event the event object
*/
onRelease : function () {
return false;
},
/**
* function callback for the tap and hold timer event
* @ignore
*/
hold : function () {
me.timer.clearTimeout(this.holdTimeout);
if (!this.released) {
this.onHold();
}
},
/**
* function called when the object is clicked and holded<br>
* to be extended <br>
* @name onHold
* @memberOf me.GUI_Object
* @public
* @function
*/
onHold : function () {
},
/**
* OnDestroy notification function<br>
* Called by engine before deleting the object<br>
* be sure to call the parent function if overwritten
* @name onDestroyEvent
* @memberOf me.GUI_Object
* @public
* @function
*/
onDestroyEvent : function () {
me.input.releasePointerEvent("pointerdown", this);
me.input.releasePointerEvent("pointerup", this);
me.timer.clearTimeout(this.holdTimeout);
}
});
})();