zigotica · October 4, 2016 10:09 · Oct 4, 2016 · Oct 4, 2016 · Oct 4, 2016 · Oct 3, 2016
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,3 +1,17 @@
+
+<!--
+<h2> A basic text component </h2>
+<div class="basic-text">
+{{text-component value=inputValue oninput=(action (mut inputValue)) onchange=(action (mut changeValue))}}<br>
+
+<p>
+InputValue: {{inputValue}}
+</p>
+<p>
+ChangeValue: {{changeValue}}
+</p>
+</div>
+-->
 <h2> A repeatable text field </h2>
 
 {{repeatable-field

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,20 +1,3 @@
-<h1>Welcome to {{appName}}</h1>
-<br>
-<br>
-
-<!--
-<h2> A basic text component </h2>
-<div class="basic-text">
-{{text-component value=inputValue oninput=(action (mut inputValue)) onchange=(action (mut changeValue))}}<br>
-
-<p>
-InputValue: {{inputValue}}
-</p>
-<p>
-ChangeValue: {{changeValue}}
-</p>
-</div>
--->
 <h2> A repeatable text field </h2>
 
 {{repeatable-field

diff --git a/components.close-button.js b/components.close-button.js
@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+	tagName: 'button',
+  click() {
+    let action = this.get('action');
+
+    if (typeof action === 'function') {
+    	action();
+    }
+  }
+});
diff --git a/helpers.arr.js b/helpers.arr.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function arr(params=[]/*, hash*/) {
+  return params.slice(0);
+}
+
+export default Ember.Helper.helper(arr);
diff --git a/templates.components.close-button.hbs b/templates.components.close-button.hbs
@@ -0,0 +1 @@
+X
diff --git a/templates.components.repeatable-field.hbs b/templates.components.repeatable-field.hbs
@@ -4,10 +4,8 @@
     oninput=(action "onInput" idx)
     onchange=(action "onChange" idx)
     required=(is-main-field idx)
+    afterComponents=(if (is-deletable comp.value idx) (arr (component "close-button" action=(action "removeRepetition" idx))) (arr))
    }} ({{comp.value}})
-   {{#if (is-deletable comp.value idx)}}
-   	<button {{action "removeRepetition" idx}}>X</button>
-   {{/if}}
 {{/each}}
 
 <h3> Values </h3>

diff --git a/templates.components.text-component.hbs b/templates.components.text-component.hbs
@@ -2,3 +2,10 @@
        oninput={{action "onInput" value="target.value"}}
        onchange={{action "onChange" value="target.value"}}
        required={{required}}>
+
+{{#if afterComponents}}
+|
+{{/if}}
+{{#each afterComponents as |comp|}}
+	{{component comp}}
+{{/each}}
diff --git a/components.repeatable-field.js b/components.repeatable-field.js
@@ -37,9 +37,6 @@ export default Ember.Component.extend({
       this.get('onchange')(this.get('components'), idx, value);
 
       this.addElementIfNeeded();
-      if (idx === 0 && Ember.isEmpty(value)) {
-        this.set('components', Ember.A([Ember.Object.create({value: '' })]));
-      }
     }
   }
 });
diff --git a/components.repeatable-field.js b/components.repeatable-field.js
@@ -37,6 +37,9 @@ export default Ember.Component.extend({
       this.get('onchange')(this.get('components'), idx, value);
 
       this.addElementIfNeeded();
+      if (idx === 0 && Ember.isEmpty(value)) {
+        this.set('components', Ember.A([Ember.Object.create({value: '' })]));
+      }
     }
   }
 });
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -2,6 +2,7 @@
 <br>
 <br>
 
+<!--
 <h2> A basic text component </h2>
 <div class="basic-text">
 {{text-component value=inputValue oninput=(action (mut inputValue)) onchange=(action (mut changeValue))}}<br>
@@ -13,7 +14,7 @@ InputValue: {{inputValue}}
 ChangeValue: {{changeValue}}
 </p>
 </div>
-
+-->
 <h2> A repeatable text field </h2>
 
 {{repeatable-field

diff --git a/components.repeatable-field.js b/components.repeatable-field.js
@@ -4,7 +4,7 @@ export default Ember.Component.extend({
   init() {
     this._super(...arguments);
 
-    this.set('components', Ember.A(['']));
+    this.set('components', Ember.A([Ember.Object.create({value: ''})]));
   },
 
   didReceiveAttrs() {
@@ -15,20 +15,25 @@ export default Ember.Component.extend({
   },
 
   addElementIfNeeded() {
-    console.log(this.get('components.length'), this.get('maxRepeats'), this.get('components.lastObject'));
+    console.log(this.get('components.length'), this.get('maxRepeats'), this.get('components.lastObject.value'));
     if (this.get('components.length') < this.get('maxRepeats') &&
-        Ember.isPresent(this.get('components.lastObject'))) {
-      this.get('components').pushObject('');
+        Ember.isPresent(this.get('components.lastObject.value'))) {
+      this.get('components').pushObject(Ember.Object.create({value:''}));
     }
   },
 
   actions: {
+    removeRepetition(idx) {
+      this.get('components').removeAt(idx, 1);
+      this.addElementIfNeeded();
+    },
   	onInput(idx, value) {
 
     },
     onChange(idx, value) {
       this.get('components')
-          .replace(idx, 1, [value]);
+          .objectAt(idx)
+      		.set('value', value);
       this.get('onchange')(this.get('components'), idx, value);
 
       this.addElementIfNeeded();

diff --git a/helpers.is-deletable.js b/helpers.is-deletable.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function isDeletable([value, idx]/*, hash*/) {
+  return Ember.isPresent(value) && idx > 0;
+}
+
+export default Ember.Helper.helper(isDeletable);
diff --git a/helpers.is-extra-field.js b/helpers.is-extra-field.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function isExtraField([idx]/*, hash*/) {
+  return idx > 0;
+}
+
+export default Ember.Helper.helper(isExtraField);
diff --git a/helpers.is-main-field.js b/helpers.is-main-field.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function isMainField([idx]/*, hash*/) {
+  return idx === 0;
+}
+
+export default Ember.Helper.helper(isMainField);
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,9 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+input:required {
+  border-color: red;
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -16,12 +16,6 @@ ChangeValue: {{changeValue}}
 
 <h2> A repeatable text field </h2>
 
-<h3> Config </h3>
-<p>
-Min repeats: {{text-component onchange=(action (mut minRepeats))}}<br>
-
-</p>
-
 {{repeatable-field
 	field=(component "text-component")
   max-repeats=maxRepeats

diff --git a/templates.components.repeatable-field.hbs b/templates.components.repeatable-field.hbs
@@ -1,14 +1,19 @@
 <h3> Some fieldsets </h3>
 {{#each components as |comp idx|}}
-  {{component field value=(readonly comp)
+  {{component field value=(readonly comp.value)
     oninput=(action "onInput" idx)
-    onchange=(action "onChange" idx)}} ({{comp}})
+    onchange=(action "onChange" idx)
+    required=(is-main-field idx)
+   }} ({{comp.value}})
+   {{#if (is-deletable comp.value idx)}}
+   	<button {{action "removeRepetition" idx}}>X</button>
+   {{/if}}
 {{/each}}
 
 <h3> Values </h3>
 
 <ol>
 {{#each components as |comp idx|}}
-  <li>{{comp}}</li>
+  <li>{{comp.value}}</li>
 {{/each}}
 </ol>
diff --git a/templates.components.text-component.hbs b/templates.components.text-component.hbs
@@ -1,3 +1,4 @@
 <input value={{value}}
        oninput={{action "onInput" value="target.value"}}
-       onchange={{action "onChange" value="target.value"}}>
+       onchange={{action "onChange" value="target.value"}}
+       required={{required}}>
diff --git a/twiddle.json b/twiddle.json
@@ -9,10 +9,8 @@
   },
   "dependencies": {
     "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
-    "ember": "2.8.0",
-    "ember-data": "2.8.0",
-    "ember-template-compiler": "2.8.0",
-    "ember-testing": "2.8.0"
+    "ember": "2.9.0-beta.4",
+    "ember-template-compiler": "2.9.0-beta.4"
   },
   "addons": {}
 }
diff --git a/components.repeatable-field.js b/components.repeatable-field.js
@@ -0,0 +1,37 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  init() {
+    this._super(...arguments);
+
+    this.set('components', Ember.A(['']));
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.set('maxRepeats', Math.max(1, parseInt(this.get('max-repeats'), 10)) || 5);
+
+    this.set('minRepeats', Math.max(1, parseInt(this.get('min-repeats'), 10)) || 2);
+  },
+
+  addElementIfNeeded() {
+    console.log(this.get('components.length'), this.get('maxRepeats'), this.get('components.lastObject'));
+    if (this.get('components.length') < this.get('maxRepeats') &&
+        Ember.isPresent(this.get('components.lastObject'))) {
+      this.get('components').pushObject('');
+    }
+  },
+
+  actions: {
+  	onInput(idx, value) {
+
+    },
+    onChange(idx, value) {
+      this.get('components')
+          .replace(idx, 1, [value]);
+      this.get('onchange')(this.get('components'), idx, value);
+
+      this.addElementIfNeeded();
+    }
+  }
+});
diff --git a/components.text-component.js b/components.text-component.js
@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  init() {
+    this._super(...arguments);
+    this.set('value', '');
+  },
+  actions: {
+    onInput(value) {
+      this.get('oninput')(value);
+    },
+    onChange(value) {
+      this.get('onchange')(value);
+    }
+  }
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle',
+  actions: {
+    repeatableFieldChanged() { }
+  }
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,36 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+
+<h2> A basic text component </h2>
+<div class="basic-text">
+{{text-component value=inputValue oninput=(action (mut inputValue)) onchange=(action (mut changeValue))}}<br>
+
+<p>
+InputValue: {{inputValue}}
+</p>
+<p>
+ChangeValue: {{changeValue}}
+</p>
+</div>
+
+<h2> A repeatable text field </h2>
+
+<h3> Config </h3>
+<p>
+Min repeats: {{text-component onchange=(action (mut minRepeats))}}<br>
+
+</p>
+
+{{repeatable-field
+	field=(component "text-component")
+  max-repeats=maxRepeats
+  min-repeats=minRepeats
+  onchange=(action "repeatableFieldChanged")}}
+<div>
+
+</div>
+
+
+<br>
+<br>
diff --git a/templates.components.repeatable-field.hbs b/templates.components.repeatable-field.hbs
@@ -0,0 +1,14 @@
+<h3> Some fieldsets </h3>
+{{#each components as |comp idx|}}
+  {{component field value=(readonly comp)
+    oninput=(action "onInput" idx)
+    onchange=(action "onChange" idx)}} ({{comp}})
+{{/each}}
+
+<h3> Values </h3>
+
+<ol>
+{{#each components as |comp idx|}}
+  <li>{{comp}}</li>
+{{/each}}
+</ol>
diff --git a/templates.components.text-component.hbs b/templates.components.text-component.hbs
@@ -0,0 +1,3 @@
+<input value={{value}}
+       oninput={{action "onInput" value="target.value"}}
+       onchange={{action "onChange" value="target.value"}}>
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,18 @@
+{
+  "version": "0.10.5",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.8.0",
+    "ember-data": "2.8.0",
+    "ember-template-compiler": "2.8.0",
+    "ember-testing": "2.8.0"
+  },
+  "addons": {}
+}
No results found