Support activity-toggle in otherwise non-toggle buttons
Change-Id: I263c1bad69bc7af3089b802e0cea9a3cc22835fe
diff --git a/dev/js/spec/buttongroupSpec.js b/dev/js/spec/buttongroupSpec.js
index 29fb4f5..9f20042 100644
--- a/dev/js/spec/buttongroupSpec.js
+++ b/dev/js/spec/buttongroupSpec.js
@@ -252,6 +252,36 @@
expect(e.children[1].getAttribute("title")).toBe("Haha");
});
+ it('should support active state on regular buttons', function () {
+ var group = buttonGroupClass.create();
+ let active = stateClass.create();
+ let count = 0;
+
+ group.add('Meta', {'active': active}, function () {
+ count++;
+ });
+
+ let e = group.element();
+ let button = e.firstChild;
+ let check = button.firstChild;
+
+ expect(check.classList.contains("check")).toBeTruthy();
+ expect(check.classList.contains("button-icon")).toBeTruthy();
+ expect(active.get()).toBeFalsy();
+ expect(check.classList.contains("checked")).toBeFalsy();
+ expect(count).toEqual(0);
+
+ // Clicking the check toggles active state, but does not trigger callback.
+ check.click();
+ expect(active.get()).toBeTruthy();
+ expect(check.classList.contains("checked")).toBeTruthy();
+ expect(count).toEqual(0);
+
+ // Clicking the button still triggers the callback.
+ button.click();
+ expect(count).toEqual(1);
+ });
+
it('should allow adoption', function () {
const el = document.createElement('div');
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index c6a772e..da12078 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -96,6 +96,19 @@
b['state'] = data['state'];
};
+ if (data['active'] !== undefined) {
+ let active = data['active'];
+
+ let check = _addCheck(b,active);
+ check.addEventListener('click', function (e) {
+ // Do not bubble
+ e.halt();
+ // Toggle state
+ active.roll();
+ });
+ };
+
+
if (data['desc'] !== undefined) {
desc = data['desc'];
};
@@ -103,7 +116,7 @@
b.setAttribute('title', desc);
b.addE('span').addT(title);
-
+
let that = this;
b.addEventListener('click', function (e) {
@@ -174,22 +187,8 @@
};
b.setAttribute('title',desc);
-
- // Set check marker
- const check = b.addE('span');
- check.classList.add("check", "button-icon");
- check.addE('span');
- // Associate this object to state
- // Add setState method to object
- check.setState = function (value) {
- if (value) {
- this.classList.add("checked");
- } else {
- this.classList.remove("checked");
- }
- };
- state.associate(check);
+ _addCheck(b, state);
b.addE('span').addT(title);
@@ -229,3 +228,23 @@
}
}
});
+
+function _addCheck(b,state) {
+
+ // Set check marker
+ const check = b.addE('span');
+ check.classList.add("check", "button-icon");
+ check.addE('span');
+
+ // Associate this object to state
+ // Add setState method to object
+ check.setState = function (value) {
+ if (value) {
+ this.classList.add("checked");
+ } else {
+ this.classList.remove("checked");
+ }
+ };
+ state.associate(check);
+ return check;
+};