From 47ff7795c77e3733c7cf12be9907366657481bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Th=C3=A9ron?= Date: Mon, 7 Nov 2016 10:19:41 +0100 Subject: [PATCH 1/3] Adds an action to the checkbox on click --- addon/components/md-check.js | 17 ++++++++++++++++- addon/templates/components/md-checkbox.hbs | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/addon/components/md-check.js b/addon/components/md-check.js index e35f11a5..872a9487 100644 --- a/addon/components/md-check.js +++ b/addon/components/md-check.js @@ -7,5 +7,20 @@ const { computed: { alias } } = Ember; export default SelectableItem.extend({ layout, text: alias('name'), - classNames: ['materialize-checkbox'] + classNames: ['materialize-checkbox'], + click: null, + actions: { + clickAction(){ + let clickAction = this.get('click'); + let isSelected = this.get('isSelected'); + + if(typeof clickAction === "function") + { + clickAction(isSelected); + } + else if(typeof clickAction === "string"){ + this.sendAction(clickAction, isSelected); + } + } + } }); diff --git a/addon/templates/components/md-checkbox.hbs b/addon/templates/components/md-checkbox.hbs index 8e8b3720..cddb0f1e 100644 --- a/addon/templates/components/md-checkbox.hbs +++ b/addon/templates/components/md-checkbox.hbs @@ -1,2 +1,2 @@ {{input type="checkbox" class="materialize-selectable-item-input" checked=isSelected disabled=disabled}} - + From 13f694e3f0d5241ac529d5c5694b6669e429b396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Th=C3=A9ron?= Date: Mon, 7 Nov 2016 11:09:14 +0100 Subject: [PATCH 2/3] Makes the click action work on selectable-items and adds a snippet for a checkbox --- addon/components/md-check.js | 17 +------------ addon/components/selectable-item.js | 24 +++++++++++++++++++ addon/templates/components/md-checkbox.hbs | 2 +- tests/dummy/app/controllers/forms.js | 9 ++++++- tests/dummy/app/templates/forms.hbs | 2 ++ .../templates/snippets/input-check-action.hbs | 1 + 6 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 tests/dummy/app/templates/snippets/input-check-action.hbs diff --git a/addon/components/md-check.js b/addon/components/md-check.js index 872a9487..e35f11a5 100644 --- a/addon/components/md-check.js +++ b/addon/components/md-check.js @@ -7,20 +7,5 @@ const { computed: { alias } } = Ember; export default SelectableItem.extend({ layout, text: alias('name'), - classNames: ['materialize-checkbox'], - click: null, - actions: { - clickAction(){ - let clickAction = this.get('click'); - let isSelected = this.get('isSelected'); - - if(typeof clickAction === "function") - { - clickAction(isSelected); - } - else if(typeof clickAction === "string"){ - this.sendAction(clickAction, isSelected); - } - } - } + classNames: ['materialize-checkbox'] }); diff --git a/addon/components/selectable-item.js b/addon/components/selectable-item.js index 3fbe61bc..94de4a03 100644 --- a/addon/components/selectable-item.js +++ b/addon/components/selectable-item.js @@ -28,6 +28,10 @@ export default Component.extend(ChildComponentSupport, { group.setValueSelection(this.get('value'), val); } this.sendAction('action', { checked: !!val }); + + //Because the click() event is fired twice (on checkboxes at least), need to reset this var to its default + //so the click action can be fired again on the next click + this.set('clickActionWasSent', false); return !!val; } }), @@ -45,6 +49,26 @@ export default Component.extend(ChildComponentSupport, { this._super(...arguments); this._setupLabel(); }, + onClick: null, + //For some reason, click is called twice, requiring a variable to avoid sending the action twice + clickActionWasSent: false, + click(){ + this._super(...arguments); + let clickAction = this.get('onClick'); + let isSelected = !this.get('isSelected'); + + if(!this.get('clickActionWasSent')) + { + if(typeof clickAction === "function") + { + clickAction(isSelected); + } + else if(typeof clickAction === "string"){ + this.sendAction('onClick', isSelected); + } + this.set('clickActionWasSent', true); + } + }, group: computed(function() { return this.nearestWithProperty('__materializeSelectableItemGroup'); diff --git a/addon/templates/components/md-checkbox.hbs b/addon/templates/components/md-checkbox.hbs index cddb0f1e..8e8b3720 100644 --- a/addon/templates/components/md-checkbox.hbs +++ b/addon/templates/components/md-checkbox.hbs @@ -1,2 +1,2 @@ {{input type="checkbox" class="materialize-selectable-item-input" checked=isSelected disabled=disabled}} - + diff --git a/tests/dummy/app/controllers/forms.js b/tests/dummy/app/controllers/forms.js index 1e55a7dd..4ce3ee5f 100644 --- a/tests/dummy/app/controllers/forms.js +++ b/tests/dummy/app/controllers/forms.js @@ -65,6 +65,7 @@ export default Controller.extend({ checkValueTwo: true, checkboxIsSelected: false, + checkboxWithActionIsSelected: false, radioIsSelected: false, radioSelection: 2, otherRadioSelection: 'green', @@ -108,5 +109,11 @@ export default Controller.extend({ switchesSelectionsString: asJSON('switchesSelections'), checkboxChoicesString: asJSON('checkboxChoices'), - checkboxSelectionsString: asJSON('checkboxSelections') + checkboxSelectionsString: asJSON('checkboxSelections'), + + actions: { + checkboxClickAction(isChecked){ + window.alert('Are you checked? '+(isChecked === true ? "Yes, of course." : "Nope, hombre.")); + } + } }); \ No newline at end of file diff --git a/tests/dummy/app/templates/forms.hbs b/tests/dummy/app/templates/forms.hbs index 17955b6b..29c54c13 100644 --- a/tests/dummy/app/templates/forms.hbs +++ b/tests/dummy/app/templates/forms.hbs @@ -110,6 +110,8 @@ {{/options-panel}}
Checkbox
{{example-snippet snippet='input-check-basic' class='checkbox-example' checkboxIsSelected=checkboxIsSelected}} +
Checkbox with action
+ {{example-snippet snippet='input-check-action' class='checkbox-example' checkboxIsSelected=checkboxWithActionIsSelected}}
diff --git a/tests/dummy/app/templates/snippets/input-check-action.hbs b/tests/dummy/app/templates/snippets/input-check-action.hbs new file mode 100644 index 00000000..e3dfa9e5 --- /dev/null +++ b/tests/dummy/app/templates/snippets/input-check-action.hbs @@ -0,0 +1 @@ +{{md-check name="A checkbox with an action" checked=checkboxWithActionIsSelected onClick="checkboxClickAction"}} \ No newline at end of file From ca45660ed5a4cbd598402dd7bddbd0ddbdad2906 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Th=C3=A9ron?= Date: Mon, 7 Nov 2016 11:30:32 +0100 Subject: [PATCH 3/3] Reformats code for standard compliance --- addon/components/selectable-item.js | 19 +++++++++---------- tests/dummy/app/controllers/forms.js | 5 +++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/addon/components/selectable-item.js b/addon/components/selectable-item.js index 94de4a03..ec3434b4 100644 --- a/addon/components/selectable-item.js +++ b/addon/components/selectable-item.js @@ -29,8 +29,8 @@ export default Component.extend(ChildComponentSupport, { } this.sendAction('action', { checked: !!val }); - //Because the click() event is fired twice (on checkboxes at least), need to reset this var to its default - //so the click action can be fired again on the next click + // Because the click() event is fired twice (on checkboxes at least), need to reset this var to its default + // so the click action can be fired again on the next click this.set('clickActionWasSent', false); return !!val; } @@ -49,21 +49,20 @@ export default Component.extend(ChildComponentSupport, { this._super(...arguments); this._setupLabel(); }, + onClick: null, - //For some reason, click is called twice, requiring a variable to avoid sending the action twice + // For some reason, click is called twice, requiring a variable to avoid sending the action twice clickActionWasSent: false, - click(){ + + click() { this._super(...arguments); let clickAction = this.get('onClick'); let isSelected = !this.get('isSelected'); - if(!this.get('clickActionWasSent')) - { - if(typeof clickAction === "function") - { + if (!this.get('clickActionWasSent')) { + if (typeof clickAction === 'function') { clickAction(isSelected); - } - else if(typeof clickAction === "string"){ + } else if (typeof clickAction === 'string') { this.sendAction('onClick', isSelected); } this.set('clickActionWasSent', true); diff --git a/tests/dummy/app/controllers/forms.js b/tests/dummy/app/controllers/forms.js index 4ce3ee5f..887ebe3c 100644 --- a/tests/dummy/app/controllers/forms.js +++ b/tests/dummy/app/controllers/forms.js @@ -112,8 +112,9 @@ export default Controller.extend({ checkboxSelectionsString: asJSON('checkboxSelections'), actions: { - checkboxClickAction(isChecked){ - window.alert('Are you checked? '+(isChecked === true ? "Yes, of course." : "Nope, hombre.")); + checkboxClickAction(isChecked) { + let stateText = isChecked === true ? `Yes, of course.` : `Nope, hombre.`; + window.alert(`Are you checked? ` + stateText); } } }); \ No newline at end of file