conditional event handling (#1894)

apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/answer.gjs

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+
+export default class Incrementer extends Component {
+  @tracked clicks = 0;
+  @tracked enableIncrement = true;
+
+  handleClick = () => this.clicks++;
+  toggle = () => this.enableIncrement = !this.enableIncrement;
+
+  <template>
+    <button {{ (if this.enableIncrement (modifier on 'click' this.handleClick)) }}>
+      Click me!
+    </button>
+
+    <button {{on 'click' this.toggle}}>
+      Toggle Clicking
+    </button>
+
+    <br>
+    Increment Enabled: {{this.enableIncrement}}<br>
+    Clicked: {{this.clicks}}
+  </template>
+}

apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prompt.gjs

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+
+export default class Incrementer extends Component {
+  @tracked clicks = 0;
+  @tracked enableIncrement = true;
+
+  handleClick = () => this.clicks++;
+  toggle = () => this.enableIncrement = !this.enableIncrement;
+
+  <template>
+    <button {{on 'click' this.handleClick}}>
+      Click me!
+    </button>
+
+    <button {{on 'click' this.toggle}}>
+      Toggle Clicking
+    </button>
+
+    <br>
+    Increment Enabled: {{this.enableIncrement}}<br>
+    Clicked: {{this.clicks}}
+  </template>
+}

apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prose.md

@@ -0,0 +1,22 @@
+Events can be conditional by combining `if` syntax in _modifier space_.
+
+An important thing to keep in mind when writing conditional modifiers is the wrapping parenthesis:
+
+```hbs
+<button {{ (if condition (modifier on 'click' handleClick)) }}>
+  Click me!
+</button>
+```
+rather than 
+```hbs
+<button {{if condition (modifier on 'click' handleClick)}}>
+  runtime error! 'if' is not a modifier
+</button>
+```
+
+
+This exercise has set up two buttons: one to increment a value when clicked, and one to enable incrementing of that value.
+
+<p class="call-to-play">
+Adjust the code so that the toggle clicking button toggles the ability to increment the "Clicked" count.
+</p>