From b59a98f7cefa72db4c4e572975c3e9411a621fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Mon, 6 May 2013 20:56:58 -0700 Subject: [PATCH] Add jQuery style aliases to Callback and use #on() in the examples rather than #attach(). --- examples/Paperjs.org/InteractiveTiger.html | 2 +- src/core/Callback.js | 8 ++++++++ src/item/Item.js | 12 ++++++------ src/tool/Tool.js | 4 ++-- src/ui/View.js | 10 +++++----- 5 files changed, 22 insertions(+), 14 deletions(-) diff --git a/examples/Paperjs.org/InteractiveTiger.html b/examples/Paperjs.org/InteractiveTiger.html index 0de28c1c..5da0690f 100644 --- a/examples/Paperjs.org/InteractiveTiger.html +++ b/examples/Paperjs.org/InteractiveTiger.html @@ -15,7 +15,7 @@ var items = project.activeLayer.firstChild.children; var mouseIsDown = false; for (var i = 0; i < items.length; i++) { - items[i].attach({ + items[i].on({ mousedown: function(event) { mouseIsDown = true; }, diff --git a/src/core/Callback.js b/src/core/Callback.js index 899955df..f517d9c3 100644 --- a/src/core/Callback.js +++ b/src/core/Callback.js @@ -13,6 +13,7 @@ /** * @name Callback * @namespace + * @private */ var Callback = { attach: function(type, func) { @@ -82,7 +83,14 @@ var Callback = { return !!(this._handlers && this._handlers[type]); }, + // Install jQuery-style aliases to our event handler methods + on: '#attach', + off: '#detach', + trigger: '#fire', + statics: { + // Override inject() so that sub-classes automatically add the accessors + // for the event handler functions (e.g. #onMouseDown) for each property inject: function(/* src, ... */) { for (var i = 0, l = arguments.length; i < l; i++) { var src = arguments[i], diff --git a/src/item/Item.js b/src/item/Item.js index 6b6ffdb3..a0585cbe 100644 --- a/src/item/Item.js +++ b/src/item/Item.js @@ -2660,7 +2660,7 @@ var Item = this.Item = Base.extend(Callback, { * * Attach an event handler to the item. * - * @name Item#attach + * @name Item#on * @function * @param {String('mousedown', 'mouseup', 'mousedrag', 'click', * 'doubleclick', 'mousemove', 'mouseenter', 'mouseleave')} type the event @@ -2680,19 +2680,19 @@ var Item = this.Item = Base.extend(Callback, { * }); * * // When the mouse enters the item, set its fill color to red: - * path.attach('mouseenter', function() { + * path.on('mouseenter', function() { * this.fillColor = 'red'; * }); * * // When the mouse leaves the item, set its fill color to black: - * path.attach('mouseleave', function() { + * path.on('mouseleave', function() { * this.fillColor = 'black'; * }); */ /** * Attach one or more event handlers to the item. * - * @name Item#attach^2 + * @name Item#on^2 * @function * @param {Object} param An object literal containing one or more of the * following properties: {@code mousedown, mouseup, mousedrag, click, @@ -2710,7 +2710,7 @@ var Item = this.Item = Base.extend(Callback, { * path.fillColor = 'black'; * * // When the mouse enters the item, set its fill color to red: - * path.attach({ + * path.on({ * mouseenter: function(event) { * this.fillColor = 'red'; * }, @@ -2742,7 +2742,7 @@ var Item = this.Item = Base.extend(Callback, { * }); * * // Attach the handers inside the object literal to the path: - * path.attach(pathHandlers); + * path.on(pathHandlers); * } */ diff --git a/src/tool/Tool.js b/src/tool/Tool.js index 0c6f29d9..fbdc2dfb 100644 --- a/src/tool/Tool.js +++ b/src/tool/Tool.js @@ -414,7 +414,7 @@ var Tool = this.Tool = PaperScopeItem.extend(/** @lends Tool# */{ * * Attach an event handler to the tool. * - * @name Tool#attach + * @name Tool#on * @function * @param {String('mousedown', 'mouseup', 'mousedrag', 'mousemove', * 'keydown', 'keyup')} type the event type @@ -424,7 +424,7 @@ var Tool = this.Tool = PaperScopeItem.extend(/** @lends Tool# */{ /** * Attach one or more event handlers to the tool. * - * @name Tool#attach^2 + * @name Tool#on^2 * @function * @param {Object} param An object literal containing one or more of the * following properties: {@code mousedown, mouseup, mousedrag, mousemove, diff --git a/src/ui/View.js b/src/ui/View.js index 80ee4b61..b8ab1645 100644 --- a/src/ui/View.js +++ b/src/ui/View.js @@ -455,7 +455,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{ * * Attach an event handler to the view. * - * @name View#attach + * @name View#on * @function * @param {String('frame', 'resize')} type the event type * @param {Function} function The function to be called when the event @@ -472,12 +472,12 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{ * path.rotate(3); * }; * - * view.attach('frame', frameHandler); + * view.on('frame', frameHandler); */ /** * Attach one or more event handlers to the view. * - * @name View#attach^2 + * @name View#on^2 * @function * @param {Object} param An object literal containing one or more of the * following properties: {@code frame, resize}. @@ -491,7 +491,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{ * path.rotate(3); * }; * - * view.attach({ + * view.on({ * frame: frameHandler * }); */ @@ -515,7 +515,7 @@ var View = this.View = Base.extend(Callback, /** @lends View# */{ * path.rotate(3); * }; * - * view.attach({ + * view.on({ * frame: frameHandler * }); *