Ember example app is now working.

Vmlweb · Jan 6, 2017 · 51a7d94 · 51a7d94
1 parent 27998e9
commit 51a7d94
Show file tree

Hide file tree

Showing 33 changed files with 400 additions and 191 deletions.
diff --git a/builds/.gitignore → build/.gitignore b/builds/.gitignore → build/.gitignore
diff --git a/client/about.hbs b/client/about.hbs
diff --git a/client/app/test.css b/client/app/test.css
diff --git a/client/app/test2.css b/client/app/test2.css
diff --git a/client/components/todo-input.js b/client/components/todo-input.js
@@ -0,0 +1,28 @@
+import Ember from 'ember'
+
+const ENTER_KEY = 13
+const ESC_KEY = 27
+
+export default Ember.Component.extend({
+  tagName: 'input',
+  attributeBindings: ['placeholder', 'type', 'value'],
+  type: 'text',
+
+  didInsertElement() {
+    this.$().focus()
+  },
+
+  keyUp(e) {
+    switch(e.keyCode) {
+      case ENTER_KEY:
+        this.sendAction('onEnter', this.get('value'))
+        this.set('value', '')
+        break
+      case ESC_KEY:
+        this.sendAction('onCancel')
+        break
+      default:
+        this.set('value', e.target.value)
+    }
+  }
+})
diff --git a/client/components/todo-item.js b/client/components/todo-item.js
@@ -0,0 +1,27 @@
+import Ember from 'ember'
+
+export default Ember.Component.extend({
+  tagName: 'li',
+  classNameBindings: ['isEditing:editing', 'isCompleted:completed '],
+  isCompleted: Ember.computed.oneWay('data.isCompleted'),
+
+  actions: {
+    updateTodo() {
+      this.send('cancelEditing')
+      this.sendAction('onChange', this.get('data'))
+    },
+
+    editTodo() {
+      this.set('isEditing', true)
+    },
+
+    cancelEditing() {
+      this.set('isEditing', false)
+    },
+
+    removeTodo() {
+      this.sendAction('onDestroy', this.get('data.id'))
+    }
+  }
+
+})
diff --git a/client/controllers/application.js b/client/controllers/application.js
@@ -0,0 +1,9 @@
+export default Ember.Controller.extend({
+
+  actions: {
+    createTodo(title) {
+      this.target.send('createTodo', title.trim());
+    }
+  }
+
+})
diff --git a/client/controllers/todos/index.js b/client/controllers/todos/index.js
@@ -0,0 +1,35 @@
+export default Ember.Controller.extend({
+
+  canToggle: Ember.computed('model.length', function() {
+    var anyTodos = this.get('model.length');
+    var isEditing = this.get('model').isAny('isEditing');
+
+    return anyTodos && !isEditing;
+  }),
+
+  actions: {
+    updateTodo(todo) {
+      this.target.send('updateTodo', todo);
+    },
+
+    removeTodo(todoId) {
+      this.target.send('removeTodo', todoId);
+    },
+
+    clearCompleted() {
+      this.target.send('clearCompleted');
+    },
+
+    toggleSelect() {
+      var model = this.get('model')
+      var isAllCompleted = model.reduce((result, todo) => result && todo.isCompleted, true)
+
+      this.get('model')
+        .forEach((todo) => {
+          todo.isCompleted = !isAllCompleted
+          this.target.send('updateTodo', todo);
+        })
+    }
+  }
+
+})
diff --git a/client/errors/404.html b/client/errors/404.html
diff --git a/client/errors/500.html b/client/errors/500.html
diff --git a/client/favicon.png b/client/favicon.png
diff --git a/client/helpers/or.js b/client/helpers/or.js
@@ -0,0 +1,3 @@
+export default Ember.Helper.helper(function(params) {
+  return params[0] || params[1];
+})
diff --git a/client/helpers/pluralize.js b/client/helpers/pluralize.js
@@ -0,0 +1,8 @@
+export default Ember.Helper.helper(function(params) {
+  var singular = params[0]
+  var count = params[1]
+  // This is just an example, this code is definitely not
+  // production ready, just avoiding more dependencies
+  // (e.g: ember-inflector)
+  return count === 1 ? singular : `${singular}s`
+})
diff --git a/client/images/nan.jpg → client/images/nan.jpeg b/client/images/nan.jpg → client/images/nan.jpeg
diff --git a/client/index.ejs b/client/index.ejs
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+		<title><%= htmlWebpackPlugin.options.title %></title>
+		<% for (key in htmlWebpackPlugin.options.css) { %>
+			<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.css[key] %>">
+		<% } %>
+	</head>
+	<body>
+		<div id="ember-app"></div>
+		<% for (key in htmlWebpackPlugin.options.libraries) { %>
+			<script type="text/javascript" src="libs/<%= htmlWebpackPlugin.options.libraries[key] %>"></script>
+		<% } %>
+		<% for (key in htmlWebpackPlugin.options.js) { %>
+			<script type="text/javascript" src="<%= htmlWebpackPlugin.options.js[key] %>"></script>
+		<% } %>
+	</body>
+</html>
diff --git a/client/index.hbs b/client/index.hbs
diff --git a/client/index.html b/client/index.html
diff --git a/client/index.js b/client/index.js
@@ -1,101 +1,11 @@
+import Ember from 'ember'
+import Router from './router'
 
-let App = Ember.Application.create();
-
-export default App;
-
-
-import test from './test.js'
-
-App.Router.map(test);
-
-App.IndexController = Em.Controller.extend({
-  refreshRate:20,
-  starCount:200
-});
-
-App.StarFieldComponent = Em.Component.extend({
-  tagName:'canvas',
-  width: 400,
-  height: 300,
-  starCount:100,
-  refresh:30,
-  attributeBindings:['width', 'height'],
-  stars:null,
-  on:false,
-
-  build: function(){
-    var canvas = this.$()[0],
-        ctx = canvas.getContext('2d'),
-        stars = [],
-        height = this.get('height'),
-        width = this.get('width');
-
-    for (var i = 0, len = this.get('starCount'); i < len; i++){
-      stars.push([Math.random() * width, Math.random() * height, Math.random() * 2, 0.5 + Math.random() / 2]);
-    }
-
-    this.set('stars', stars);
-    this.set('ctx', ctx);
-    this.set('on', true);
-  }.on('didInsertElement').observes('starCount', 'width', 'height'),
-
-  kill: function(){
-    this.set('on', false);
-  }.on('willDestroyElement'),
-
-  clear: function () {
-    var ctx = this.get('ctx'),
-        height = this.get('height'),
-        width = this.get('width');
-    ctx.fillStyle = 'black';
-    ctx.clearRect(0, 0, width, height);
-    ctx.beginPath();
-    ctx.rect(0, 0, width, height);
-    ctx.closePath();
-    ctx.fill();
-  },
-  drawStars: function () {
-    var stars = this.get('stars'),
-        starCount = stars.length,
-        ctx = this.get('ctx');
-    for (var i = 0; i < starCount; i++) {
-        ctx.fillStyle = 'rgba(255, 255, 0, ' + stars[i][3] + ')';
-        ctx.beginPath();
-        ctx.arc(stars[i][0], stars[i][1], stars[i][2], 0, Math.PI * 2, true);
-        ctx.closePath();
-        ctx.fill();
-    }
-  },
-  moveStars :function (e) {
-    var stars = this.get('stars'),
-        starCount = stars.length,
-        height = this.get('height'),
-        width = this.get('width');
-    for (var i = 0; i < starCount; i++) {
-        if (stars[i][1] - stars[i][2] > height) {
-            stars[i][0] = Math.random() * width;
-            stars[i][2] = Math.random() * 2;
-            stars[i][1] = 0 - stars[i][2];
-            stars[i][3] = 0 + Math.random() / 2;
-        } else {
-            stars[i][1] += e;
-        }
-    }
-  },
-  gaze: function(){
-    if(this.get('on')){
-      this.loop();
-    }
-  }.observes('on'),
-  loop: function () {
-    if(!this.get('on')){
-      return;
-    }
-    var refreshRate = this.get('refresh');
-    this.clear();
-    this.moveStars(3);
-    this.drawStars();
-    Em.run.later(this, this.loop, refreshRate);
+window.App = Ember.Application.create({
+  rootElement: '#ember-app',
+  ready() {
+    document.getElementById('ember-app').innerHTML = '';
   }
+})
 
-});
+App.Router = Router
diff --git a/client/router.js b/client/router.js
@@ -0,0 +1,8 @@
+import Ember from 'ember'
+
+export default Ember.Router.map(function() {
+  this.resource('todos', {path: '/'}, function () {
+    this.route('active');
+    this.route('completed');
+  });
+})
diff --git a/client/routes/todos/active.js b/client/routes/todos/active.js
@@ -0,0 +1,14 @@
+import Ember from 'ember'
+import TodoIndexRoute from 'app/routes/todos/index'
+
+export default TodoIndexRoute.extend({
+  templateName: 'todos/index',
+  controllerName: 'todos-index',
+
+  model() {
+    return this
+      .todosList()
+      .filter((todo) => !todo.isCompleted)
+  }
+
+})
diff --git a/client/routes/todos/completed.js b/client/routes/todos/completed.js
@@ -0,0 +1,12 @@
+import Ember from 'ember'
+import TodoIndexRoute from 'app/routes/todos/index'
+
+export default TodoIndexRoute.extend({
+  templateName: 'todos/index',
+  controllerName: 'todos-index',
+
+  model() {
+    return this.completedTodos()
+  }
+
+})