Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add detail property to button #988

Merged
merged 1 commit into from

2 participants

@francoisfrisch
Collaborator

This allows the button to pass ad hoc values in the detail of it's
action event.

François Frisch Add detail property to button
This allows the button to pass ad hoc values in the detail of it's
action event.
5b46497
@aadsm aadsm merged commit 2f5a7c3 into montagejs:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 31, 2012
  1. Add detail property to button

    François Frisch authored
    This allows the button to pass ad hoc values in the detail of it's
    action event.
This page is out of date. Refresh to see the latest.
View
46 test/ui/button-spec.js
@@ -177,6 +177,52 @@ var testPage = TestPageLoader.queueTest("buttontest", function() {
});
+ describe("action event detail property", function() {
+ var detailButton = test.detailbutton,
+ testHandler;
+ beforeEach(function() {
+ testHandler = {
+ handler: function(event) {
+ testHandler.event = event;
+ },
+ event: null,
+ valueToBeBound: "aValue"
+ };
+ });
+ it("is undefined if not used", function() {
+ spyOn(testHandler, 'handler').andCallThrough();
+ detailButton.addEventListener("action", testHandler.handler, false);
+
+ testPage.clickOrTouch({target: detailButton.element});
+ expect(testHandler.handler).toHaveBeenCalled();
+ expect(testHandler.event.detail).not.toBeDefined();
+ });
+ it("is is populated if used in a binding", function() {
+ spyOn(testHandler, 'handler').andCallThrough();
+ detailButton.addEventListener("action", testHandler.handler, false);
+ Object.defineBinding(detailButton, "detail.prop", {
+ boundObject: testHandler,
+ boundObjectPropertyPath: "valueToBeBound"
+ });
+
+ testPage.clickOrTouch({target: detailButton.element});
+ expect(testHandler.handler).toHaveBeenCalled();
+ expect(testHandler.event.detail.prop).toEqual(testHandler.valueToBeBound);
+ //cleanup
+ Object.deleteBindings(detailButton);
+ });
+ it("is is populated if used programatically", function() {
+ spyOn(testHandler, 'handler').andCallThrough();
+ detailButton.addEventListener("action", testHandler.handler, false);
+ detailButton.detail.set("prop2", "anotherValue");
+
+ testPage.clickOrTouch({target: detailButton.element});
+ expect(testHandler.handler).toHaveBeenCalled();
+ expect(testHandler.event.detail.prop2).toEqual("anotherValue");
+ });
+ });
+
+
it("responds when child elements are clicked on", function(){
expect(click(test.buttonnested, test.buttonnested.element.firstChild)).toHaveBeenCalled();
});
View
10 test/ui/buttontest/buttontest.html
@@ -189,6 +189,13 @@
]
},
+ "detailbutton": {
+ "prototype": "montage/ui/button.reel",
+ "properties": {
+ "element": {"#": "detailbutton"}
+ }
+ },
+
"output": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
@@ -220,6 +227,7 @@
"toggleinput3": {"@": "toggleinput3"},
"scroll": {"@": "scroll"},
"scroll_button": {"@": "scroll_button"},
+ "detailbutton": {"@": "detailbutton"},
"output": {"@": "output"}
}
},
@@ -286,5 +294,7 @@
<input type="button" value="regular button" onclick="alert('hello');" />
<button id="loggingbutton">Logging button</button>
+ <button id="detailbutton">Detail button</button>
+
</body>
</html>
View
98 ui/native/button.reel/button.js
@@ -407,6 +407,37 @@ var Button = exports.Button = Montage.create(NativeControl, /** @lends module:"m
this._drawLabel(this.label);
}
+ },
+
+ _detail: {
+ value: null
+ },
+
+ /**
+ The data property of the action event.
+ example to toggle the complete class: "detail.selectedItem" : { "<-" : "@repetition.objectAtCurrentIteration"}
+ @type {Property}
+ @default null
+ */
+ detail: {
+ get: function() {
+ if (this._detail === null) {
+ this._detail = EventData.create();
+ }
+ return this._detail;
+ }
+ },
+
+ createActionEvent: {
+ value: function() {
+ var actionEvent = document.createEvent("CustomEvent"),
+ detail, eventDetail;
+ if(detail = this._detail) {
+ eventDetail = detail._data;
+ }
+ actionEvent.initCustomEvent("action", true, true, eventDetail);
+ return actionEvent;
+ }
}
});
@@ -491,4 +522,71 @@ Button.addAttributes( /** @lends module:"montage/ui/native/button.reel".Button#
@see label
*/
value: null
+
+});
+
+var EventData = Montage.create(Montage, {
+
+ didCreate: {
+ value: function() {
+ this._data = Object.create(null);
+ }
+ },
+
+ initWithReservedAndOptions: {
+ value: function(reserved, options) {
+ Map.call(this, reserved, options);
+ }
+ },
+
+ get: {
+ value: function (key) {
+ return this.undefinedGet(key);
+ }
+ },
+
+ set: {
+ value: function (key, value) {
+ this.undefinedSet(key, value);
+ }
+ },
+
+ _data: {
+ value: null
+ },
+
+ _defineProperty: {
+ value: function(key, value) {
+ value = typeof value !== "undefined" ? value : null;
+ Montage.defineProperty(this, key, {
+ get: function() {
+ return this._data[key];
+ },
+ set: function(value) {
+ this._data[key] = value;
+ }
+ });
+ this._data[key] = value;
+ }
+ },
+
+ undefinedGet: {
+ value: function(key) {
+ if (typeof this._data[key] === "undefined") {
+ this._defineProperty(key);
+ }
+ return this._data[key];
+ }
+ },
+
+ undefinedSet: {
+ value: function(key, value) {
+ if (typeof this._data[key] === "undefined") {
+ this._defineProperty(key, value);
+ } else {
+ this._data[key] = value;
+ }
+ }
+ }
+
});
Something went wrong with that request. Please try again.