Add jskick Todo Mvc example

examples/jskick/index.html

@@ -0,0 +1,46 @@
+<section class="todoapp" kick-app>
+			<header class="header">
+				<h1>todos</h1>
+				<input class="new-todo" @="current" ^#enter="add" placeholder="What needs to be done?" autofocuss>
+			</header>
+			<section class="main" +="hasTodos">
+				<input id="toggle-all" class="toggle-all" ^change="markCompleted" @x="allCompleted" type="checkbox">
+				<label for="toggle-all">Mark all as complete</label>
+				<ul class="todo-list">
+					<li *todo="filteredTodos" .completed="todo.completed" .editing="todo.editing">
+						<div class="view">
+							<input class="toggle" @x="todo.completed" type="checkbox" ^@="filter(todo)">
+							<label :="todo.title" ^^="editItem(todo)"></label>
+							<button class="destroy" ^="remove(todo)"></button>
+						</div>
+						<input class="edit" @="todo.title"
+             valueUpdate='afterkeydown'
+             ^#enter="saveEditing(todo)" ^#escape="cancelEditing(todo)" selectAndFocus="editing" ^blur="saveEditing(todo)">
+					</li>
+				</ul>
+			</section>
+			<footer class="footer" +="showFooter">
+				<span class="todo-count">
+					<strong :="remainingCount">0</strong>
+					<span :="getLabel(remainingCount, todos)"></span> left
+				</span>
+				<ul class="filters">
+					<li>
+						<a .selected="showMode('all')" ^="setMode('All', mode)" href="#/all">All</a>
+					</li>
+					<li>
+						<a .selected="showMode('active', mode)" ^="setMode('active')" href="#/active">Active</a>
+					</li>
+					<li>
+						<a .selected="showMode('completed', mode)"
+            ^="setMode('completed')"  href="#/completed">Completed</a>
+					</li>
+				</ul>
+				<button class="clear-completed" +="completedCount" ^="removeCompleted(completedCount)">Clear completed</button>
+			</footer>
+		</section>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>Written by <a href="https://github.com/radkick/jskick-todomvc">Ritesh Pahwa</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>

examples/jskick/index.js

@@ -0,0 +1,130 @@
+// Import stylesheets
+import "todomvc-common/base.css";
+import "todomvc-app-css/index.css";
+import "./style.css";
+import kick from "jskick";
+
+var vm = {
+  current: "",
+  todos: [],
+  filteredTodos: [],
+  hasTodos: false,
+  allCompleted: false,
+  remainingCount: 0,
+  completedCount: 0,
+  showFooter: false,
+  mode: "all",
+  showMode(mode) {
+    return mode === vm.mode;
+  },
+  setMode(mode) {
+    vm.mode = mode;
+    vm.filter();
+    return false;
+  },
+  count() {
+    vm.filter();
+    return vm.remainingCount;
+  },
+  add() {
+    if (vm.current.length) {
+      vm.todos.push({
+        title: vm.current,
+        completed: false
+      });
+      vm.current = "";
+      vm.filter();
+      vm.hasTodos = vm.todos.length > 0;
+    }
+  },
+  editItem(todo) {
+    vm.oldTitle = todo.title;
+    todo.editing = true;
+  },
+  saveEditing(todo) {
+    todo.editing = false;
+  },
+  cancelEditing(todo) {
+    todo.title = vm.oldTitle;
+    todo.editing = false;
+  },
+  remove(todo) {
+    let idx = vm.todos.indexOf(todo);
+    if (idx > -1) {
+      vm.todos.splice(idx, 1);
+    }
+    vm.hasTodos = vm.todos.length > 0;
+    vm.filter();
+  },
+  filter(todo) {
+    vm.filteredTodos = vm.todos.filter(x => {
+      switch (vm.mode) {
+        case "active":
+          return !x.completed;
+        case "completed":
+          return x.completed;
+        default:
+          return true;
+      }
+    });
+    vm.completedCount = vm.todos.filter(x => x.completed).length;
+    vm.remainingCount = vm.todos.length - vm.completedCount;
+
+    vm.showFooter = vm.completedCount > 0 || vm.remainingCount > 0;
+  },
+  removeCompleted() {
+    vm.todos = vm.todos.filter(x => !x.completed);
+    vm.filter();
+  },
+  markCompleted() {
+    if (vm.allCompleted) {
+      vm.todos.forEach(x => {
+        x.completed = true;
+      });
+      vm.filter();
+      vm.allCompleted = false;
+    }
+  },
+  getLabel(count) {
+    return count === 1 ? "item" : "items";
+  }
+};
+
+kick.keyUpBinder = function(key) {
+  kick.binders["^#" + key.toLowerCase()] = {
+    bind: function(el) {
+      var view = this;
+      view.keyEvHandler =
+        view.keyEvHandler ||
+        (ev => {
+          if (ev.key === key) {
+            let processedArgs = view.parseFormatterArguments(
+              view.fnArgs,
+              0,
+              null,
+              view.view.models
+            );
+            let handler = view.observer.value();
+            handler && handler.apply(view, processedArgs);
+          }
+        });
+      if (!view.keyEv) {
+        view.keyEv = el.addEventListener("keyup", event =>
+          view.keyEvHandler(event)
+        );
+      }
+    },
+    unbind: function(el) {
+      this.keyEv && el.removeEventListener("keyup", this.keyEv);
+    },
+    function: true
+  };
+};
+
+const ENTER_KEY = "Enter";
+const ESCAPE_KEY = "Escape";
+kick.keyUpBinder(ENTER_KEY);
+kick.keyUpBinder(ESCAPE_KEY);
+
+// you may say '[kick-app] or '#kickApp' or 'body' or ...
+kick.bind("", vm);

examples/jskick/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "js-r5mnzv",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "jskick": "^0.9.92",
+    "director": "^1.2.8",
+    "jquery": "^3.3.1",
+    "todomvc-app-css": "^2.1.2",
+    "todomvc-common": "^1.0.5"
+  }
+}

examples/jskick/readme.md

@@ -0,0 +1,35 @@
+# jskick TodoMVC Example
+
+> jskick helps you simplify dynamic JavaScript UIs using the Model-View-ViewModel (MVVM) pattern.
+
+> _[jskick - jskick.dev](http://jskick.dev)_
+
+Run/modify example of jskick ToDo MVC at [Stackblitz](https://stackblitz.com/edit/jskick-todo?file=index.html)
+
+## Learning jskick
+
+The [jskick website](http://jskick.dev) is a great resource for getting started.
+
+Here are some links you may find helpful:
+
+* [Github](https://github.com/RADKick/jskick)
+* [Documentation](http://jskick.dev/docs/) Coming soon
+* [Tutorials](http://jskick.dev/learn) Coming soon
+* [Live examples](http://jskick.dev/examples) Coming soon
+
+Articles and guides from the community:
+
+* [Getting Started with jskick]()
+* [Beginners Guide to jskick]()
+
+Get help from other jskick users:
+
+* [jskick on StackOverflow](http://stackoverflow.com/questions/tagged/jskick)
+
+
+_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
+
+
+## Credit
+
+This TodoMVC application was originally created by [Ritesh](https://github.com/radkick/jskick-todomvc)

examples/jskick/style.css

@@ -0,0 +1,3 @@
+h1, h2 {
+  font-family: Lato;
+}