Skip to content

T
todomvc
Commit 2d0cb3bc authored by TasteBot's avatar TasteBot
Browse files
Options

update the build files for gh-pages [ci skip]

parent 13b7a35c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4322 additions and 5590 deletions
examples/knockback/.gitignore
View file @ 2d0cb3bc
node_modules/knockback/* node_modules/backbone/*
!node_modules/knockback/knockback.js !node_modules/backbone/backbone.js
!node_modules/knockback/node_modules
node_modules/knockback/node_modules/backbone/*
!node_modules/knockback/node_modules/backbone/backbone.js
node_modules/knockback/node_modules/underscore/* node_modules/backbone.localStorage/*
!node_modules/knockback/node_modules/underscore/underscore.js !node_modules/backbone.localStorage/backbone.localStorage.js
node_modules/knockback/node_modules/knockout/*
!node_modules/knockback/node_modules/knockout/build
node_modules/knockback/node_modules/knockout/build/*
!node_modules/knockback/node_modules/knockout/build/output
node_modules/knockback/node_modules/knockout/build/output/*
!node_modules/knockback/node_modules/knockout/build/output/knockout-latest.debug.js
node_modules/jquery/* node_modules/jquery/*
!node_modules/jquery/dist !node_modules/jquery/dist
node_modules/jquery/dist/* node_modules/jquery/dist/*
!node_modules/jquery/dist/jquery.js !node_modules/jquery/dist/jquery.js
node_modules/knockback/*
!node_modules/knockback/knockback.js
node_modules/knockout/*
!node_modules/knockout/build
node_modules/knockout/build/*
!node_modules/knockout/build/output
node_modules/knockout/build/output/*
!node_modules/knockout/build/output/knockout-latest.debug.js
node_modules/todomvc-app-css/* node_modules/todomvc-app-css/*
!node_modules/todomvc-app-css/index.css !node_modules/todomvc-app-css/index.css
node_modules/todomvc-common/* node_modules/todomvc-common/*
!node_modules/todomvc-common/base.css !node_modules/todomvc-common/base.css
!node_modules/todomvc-common/base.js !node_modules/todomvc-common/base.js
node_modules/underscore/*
!node_modules/underscore/underscore.js
examples/knockback/Cakefile deleted 100644 → 0
View file @ 13b7a35c
{print} = require 'util'
{spawn} = require 'child_process'
task 'build', 'Build js/ from src/', ->
coffee = spawn 'coffee', ['-c', '-o', 'js', 'src']
coffee.stderr.on 'data', (data) ->
message = data.toString()
if message.search('is now called') < 0
process.stderr.write message
coffee.stdout.on 'data', (data) ->
print data.toString()
coffee.on 'exit', (code) ->
callback?() if code is 0
task 'watch', 'Watch src/ for changes', ->
coffee = spawn 'coffee', ['-w', '-c', '-o', 'js', 'src']
coffee.stderr.on 'data', (data) ->
process.stderr.write data.toString()
coffee.stdout.on 'data', (data) ->
print data.toString()
\ No newline at end of file
examples/knockback/index.html
View file @ 2d0cb3bc
...@@ -7,42 +7,45 @@ ...@@ -7,42 +7,45 @@
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head> </head>
<body> <body>
<section id="todoapp" kb-inject="AppViewModel"> <section class="todoapp" kb-inject="AppViewModel">
<header id="header"> <header class="header">
<h1>todos</h1> <h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: title, valueUpdate: 'afterkeydown', event: {keyup: onAddTodo}" placeholder="What needs to be done?" autofocus> <input class="new-todo" type="text" data-bind="value: title, valueUpdate: 'afterkeydown', event: {keyup: onAddTodo}" placeholder="What needs to be done?" autofocus>
</header> </header>
<section id="main" data-bind="block: tasks_exist"> <section class="main" data-bind="visible: todoStats().tasksExist">
<input id="toggle-all" type="checkbox" data-bind="checked: all_completed"> <input class="toggle-all" type="checkbox" data-bind="checked: toggleCompleted">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: todos"> <ul class="todo-list" data-bind="foreach: todos">
<li data-bind="css: {completed: completed, editing: editing}"> <li data-bind="css: {completed: completed, editing: editing}">
<div class="view" data-bind="event: {dblclick: onCheckEditBegin}"> <div class="view" data-bind="event: {dblclick: onCheckEditBegin}">
<input class="toggle" type="checkbox" data-bind="checked: completed" checked> <input class="toggle" type="checkbox" data-bind="checked: completed" checked>
<label data-bind="text: title"></label> <label data-bind="text: title"></label>
<button class="destroy" data-bind="click: onDestroyTodo"></button> <button class="destroy" data-bind="click: onDestroy"></button>
</div> </div>
<input class="edit" type="text" data-bind="value: title, selectAndFocus: editing, event: {blur: onCheckEditEnd, keyup: onCheckEditEnd}"> <input class="edit" type="text" data-bind="value: editTitle, event: {blur: onCheckEditEnd, keyup: onCheckEditEnd}">
</li> </li>
</ul> </ul>
</section> </section>
<footer id="footer" data-bind="block: tasks_exist"> <footer class="footer" data-bind="visible: todoStats().tasksExist">
<span id="todo-count" data-bind="html: loc.remaining_message"></span> <span class="todo-count">
<ul id="filters"> <strong data-bind="text: todoStats().remainingCount">0</strong>
<span data-bind="text: getLabel(todoStats().remainingCount)"></span> left
</span>
<ul class="filters">
<li> <li>
<a href="#/" data-bind="css: {selected: list_filter_mode()==''}">All</a> <a href="#/" data-bind="css: {selected: filterMode()==''}">All</a>
</li> </li>
<li> <li>
<a href="#/active" data-bind="css: {selected: list_filter_mode()=='active'}">Active</a> <a href="#/active" data-bind="css: {selected: filterMode()=='active'}">Active</a>
</li> </li>
<li> <li>
<a href="#/completed" data-bind="css: {selected: list_filter_mode()=='completed'}">Completed</a> <a href="#/completed" data-bind="css: {selected: filterMode()=='completed'}">Completed</a>
</li> </li>
</ul> </ul>
<button id="clear-completed" data-bind="text: loc.clear_message, block: loc.clear_message, click: onDestroyCompleted"></button> <button class="clear-completed" data-bind="visible: todoStats().completedCount, click: onClearCompleted">Clear completed</button>
</footer> </footer>
</section> </section>
<footer id="info"> <footer class="info">
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/kmalakoff">Kevin Malakoff</a>. <br/> <p>Created by <a href="https://github.com/kmalakoff">Kevin Malakoff</a>. <br/>
Please try out the <a href="http://kmalakoff.github.com/knockback-todos-app/">enhanced version</a> <br/> Please try out the <a href="http://kmalakoff.github.com/knockback-todos-app/">enhanced version</a> <br/>
...@@ -54,16 +57,15 @@ ...@@ -54,16 +57,15 @@
<!-- App Dependencies --> <!-- App Dependencies -->
<script src="node_modules/todomvc-common/base.js"></script> <script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/knockback/node_modules/underscore/underscore.js"></script> <script src="node_modules/underscore/underscore.js"></script>
<script src="node_modules/knockback/node_modules/backbone/backbone.js"></script> <script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/knockback/node_modules/knockout/build/output/knockout-latest.debug.js"></script> <script src="node_modules/knockout/build/output/knockout-latest.debug.js"></script>
<script src="node_modules/knockback/knockback.js"></script> <script src="node_modules/knockback/knockback.js"></script>
<script src="node_modules/backbone.localStorage/backbone.localStorage.js"></script> <script src="node_modules/backbone.localstorage/backbone.localStorage.js"></script>
<!-- App and Components --> <!-- App and Components -->
<script src="js/lib/knockout-extended-bindings.js"></script>
<script src="js/models/todo.js"></script> <script src="js/models/todo.js"></script>
<script src="js/models/todo_collection.js"></script> <script src="js/collections/todos.js"></script>
<script src="js/viewmodels/todo.js"></script> <script src="js/viewmodels/todo.js"></script>
<script src="js/viewmodels/app.js"></script> <script src="js/viewmodels/app.js"></script>
</body> </body>
......
examples/knockback/js/collections/todos.js 0 → 100644
View file @ 2d0cb3bc
/*global Backbone */
var app = app || {};
(function () {
'use strict';
// Todo Collection
// ---------------
// The collection of todos is backed by *localStorage* instead of a remote server.
app.Todos = Backbone.Collection.extend({
// Reference to this collection's model.
model: app.Todo,
// Save all of the todo items under the `"todos"` namespace.
localStorage: new Backbone.LocalStorage('todos-knockback')
});
})();
examples/knockback/js/lib/knockout-extended-bindings.js deleted 100644 → 0
View file @ 13b7a35c
// Generated by CoffeeScript 1.8.0
(function() {
ko.bindingHandlers.dblclick = {
init: function(element, value_accessor) {
return $(element).dblclick(ko.utils.unwrapObservable(value_accessor()));
}
};
ko.bindingHandlers.block = {
update: function(element, value_accessor) {
return element.style.display = ko.utils.unwrapObservable(value_accessor()) ? 'block' : 'none';
}
};
ko.bindingHandlers.selectAndFocus = {
init: function(element, value_accessor, all_bindings_accessor) {
ko.bindingHandlers.hasfocus.init(element, value_accessor, all_bindings_accessor);
return ko.utils.registerEventHandler(element, 'focus', function() {
return element.select();
});
},
update: function(element, value_accessor) {
ko.utils.unwrapObservable(value_accessor());
return _.defer(function() {
return ko.bindingHandlers.hasfocus.update(element, value_accessor);
});
}
};
}).call(this);
examples/knockback/js/models/todo.js
View file @ 2d0cb3bc
// Generated by CoffeeScript 1.8.0 /*global Backbone */
(function() { var app = app || {};
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.Todo = (function(_super) { (function () {
__extends(Todo, _super); 'use strict';
function Todo() { // Todo Model
return Todo.__super__.constructor.apply(this, arguments); // ----------
}
Todo.prototype.completed = function(completed) { // Our basic **Todo** model has `title` and `completed` attributes.
if (arguments.length === 0) { app.Todo = Backbone.Model.extend({
return !!this.get('completed'); // Default attributes for the todo
} defaults: {
return this.save({ title: '',
completed: completed ? new Date() : null completed: false
}); }
}; });
})();
return Todo;
})(Backbone.Model);
}).call(this);
examples/knockback/js/models/todo_collection.js deleted 100644 → 0
View file @ 13b7a35c
// Generated by CoffeeScript 1.8.0
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.TodoCollection = (function(_super) {
__extends(TodoCollection, _super);
function TodoCollection() {
return TodoCollection.__super__.constructor.apply(this, arguments);
}
TodoCollection.prototype.localStorage = new Store('todos-knockback');
TodoCollection.prototype.model = Todo;
TodoCollection.prototype.completedCount = function() {
return this.models.reduce((function(prev, cur) {
return prev + (cur.completed() ? 1 : 0);
}), 0);
};
TodoCollection.prototype.remainingCount = function() {
return this.models.length - this.completedCount();
};
TodoCollection.prototype.completeAll = function(completed) {
return this.each(function(todo) {
return todo.completed(completed);
});
};
TodoCollection.prototype.destroyCompleted = function() {
var completed_tasks, model, _i, _len;
completed_tasks = this.filter(function(todo) {
return todo.completed();
});
for (_i = 0, _len = completed_tasks.length; _i < _len; _i++) {
model = completed_tasks[_i];
model.destroy();
}
};
return TodoCollection;
})(Backbone.Collection);
}).call(this);
examples/knockback/js/viewmodels/app.js
View file @ 2d0cb3bc
// Generated by CoffeeScript 1.8.0 /*global Knockback */
(function() { var app = app || {};
var ENTER_KEY;
ENTER_KEY = 13; (function () {
'use strict';
window.AppViewModel = function() { var ENTER_KEY = 13;
var filter_fn, router;
this.collections = {
todos: new TodoCollection()
};
this.collections.todos.fetch();
this.list_filter_mode = ko.observable('');
filter_fn = ko.computed((function(_this) {
return function() {
switch (_this.list_filter_mode()) {
case 'active':
return function(model) {
return !model.completed();
};
case 'completed':
return function(model) {
return model.completed();
};
default:
return function() {
return true;
};
}
};
})(this));
this.todos = kb.collectionObservable(this.collections.todos, {
view_model: TodoViewModel,
filters: filter_fn
});
this.todos_changed = kb.triggeredObservable(this.collections.todos, 'change add remove');
this.tasks_exist = ko.computed((function(_this) {
return function() {
_this.todos_changed();
return !!_this.collections.todos.length;
};
})(this));
this.title = ko.observable('');
this.onAddTodo = (function(_this) {
return function(view_model, event) {
if (!$.trim(_this.title()) || (event.keyCode !== ENTER_KEY)) {
return true;
}
_this.collections.todos.create({
title: $.trim(_this.title())
});
return _this.title('');
};
})(this);
this.remaining_count = ko.computed((function(_this) {
return function() {
_this.todos_changed();
return _this.collections.todos.remainingCount();
};
})(this));
this.completed_count = ko.computed((function(_this) {
return function() {
_this.todos_changed();
return _this.collections.todos.completedCount();
};
})(this));
this.all_completed = ko.computed({
read: (function(_this) {
return function() {
return !_this.remaining_count();
};
})(this),
write: (function(_this) {
return function(completed) {
return _this.collections.todos.completeAll(completed);
};
})(this)
});
this.onDestroyCompleted = (function(_this) {
return function() {
return _this.collections.todos.destroyCompleted();
};
})(this);
this.loc = {
remaining_message: ko.computed((function(_this) {
return function() {
return "<strong>" + (_this.remaining_count()) + "</strong> " + (_this.remaining_count() === 1 ? 'item' : 'items') + " left";
};
})(this)),
clear_message: ko.computed((function(_this) {
return function() {
var count;
if ((count = _this.completed_count())) {
return "Clear completed";
} else {
return '';
}
};
})(this))
};
router = new Backbone.Router;
router.route('', null, (function(_this) {
return function() {
return _this.list_filter_mode('');
};
})(this));
router.route('active', null, (function(_this) {
return function() {
return _this.list_filter_mode('active');
};
})(this));
router.route('completed', null, (function(_this) {
return function() {
return _this.list_filter_mode('completed');
};
})(this));
Backbone.history.start();
};
}).call(this); // Application View Model
// ---------------
// The application View Model is created and bound from the HTML using kb-inject.
window.AppViewModel = kb.ViewModel.extend({
constructor: function () {
var self = this;
kb.ViewModel.prototype.constructor.call(this);
// New todo title.
this.title = ko.observable('');
// The function used for filtering is dynamically selected based on the filterMode.
this.filterMode = ko.observable('');
var filterFn = ko.computed(function () {
switch (self.filterMode()) {
case 'active':
return (function (model) { return !model.get('completed'); });
case 'completed':
return (function (model) { return model.get('completed'); });
};
return (function () { return true; });
});
// A collectionObservable can be used to hold the instance of the collection.
this.todos = kb.collectionObservable(new app.Todos(), app.TodoViewModel, {filters: filterFn});
// Note: collectionObservables do not track nested model attribute changes by design to avoid
// list redrawing when models change so changes need to be manually tracked and triggered.
this.todoAttributesTrigger = kb.triggeredObservable(this.todos.collection(), 'change add remove');
this.todoStats = ko.computed(function () {
self.todoAttributesTrigger(); // manual dependency on model attribute changes
return {
tasksExist: !!self.todos.collection().length,
completedCount: self.todos.collection().where({completed: true}).length,
remainingCount: self.todos.collection().where({completed: false}).length
};
});
// When the checkbox state is written to the observable, all of the models are updated
this.toggleCompleted = ko.computed({
read: function () { return !self.todoStats().remainingCount; },
write: function (value) { self.todos.collection().each(function (model) { model.save({completed: value}); }); }
});
// Fetch the todos and the collectionObservable will update once the models are loaded
this.todos.collection().fetch();
// Use a Backbone router to update the filter mode
new Backbone.Router().route('*filter', null, function (filter) { self.filterMode(filter || ''); });
Backbone.history.start();
},
// Create a new model in the underlying collection and the observable will automatically synchronize
onAddTodo: function (self, e) {
if (e.keyCode === ENTER_KEY && $.trim(self.title())) {
self.todos.collection().create({title: $.trim(self.title())});
self.title('');
}
},
// Operate on the underlying collection instead of the observable given the observable could be filtered
onClearCompleted: function (self) { _.invoke(self.todos.collection().where({completed: true}), 'destroy'); },
// Helper function to keep expressions out of markup
getLabel: function (count) { return ko.utils.unwrapObservable(count) === 1 ? 'item' : 'items'; }
});
})();
examples/knockback/js/viewmodels/todo.js
View file @ 2d0cb3bc
// Generated by CoffeeScript 1.8.0 /*global Knockback */
(function() { var app = app || {};
window.TodoViewModel = function(model) {
var ENTER_KEY, ESCAPE_KEY; (function () {
ENTER_KEY = 13; 'use strict';
ESCAPE_KEY = 27;
this.editing = ko.observable(false); var ENTER_KEY = 13;
this.completed = kb.observable(model, { var ESC_KEY = 27;
key: 'completed',
read: (function() { // Todo View Model
return model.completed(); // ---------------
}),
write: (function(completed) { app.TodoViewModel = kb.ViewModel.extend({
return model.completed(completed); constructor: function (model, options) {
}) // 'keys' option ensures two-way observables are created only for the title and completed attributes.
}, this); // 'requires' option allows observables to be created for any attributes in addition to ensuring title and completed.
this.title = kb.observable(model, { // 'excludes' option blocks observables being created for specific attributes.
key: 'title', kb.ViewModel.prototype.constructor.call(this, model, {keys: ['title', 'completed']}, options);
write: ((function(_this) {
return function(title) { // Use editTitle to delay updating model attributes until changes are accepted.
if ($.trim(title)) { this.editTitle = ko.observable();
model.save({ this.editing = ko.observable(false);
title: $.trim(title)
}); // Subscribe to changes in completed so that they can be saved automatically
} else { this.completed.subscribe(function (completed) { this.model().save({completed: completed}); }.bind(this));
_.defer(function() { },
return model.destroy();
}); onDestroy: function (self) { self.model().destroy(); },
}
return _this.editing(false); // Start editing if not already editing.
}; onCheckEditBegin: function (self) {
})(this)) if (!self.editing()) {
}, this); self.editTitle(self.title());
this.onDestroyTodo = (function(_this) { self.editing(true);
return function() { $('.todo-input').focus(); // give the input focus
return model.destroy(); }
}; },
})(this);
this.onCheckEditBegin = (function(_this) { // Stop editing if already editing.
return function() { onCheckEditEnd: function (self, event) {
if (!_this.editing()) { if (self.editing()) {
_this.editing(true); if (event.keyCode === ESC_KEY) {
return $('.todo-input').focus(); self.editing(false);
} }
};
})(this); if ((event.keyCode === ENTER_KEY) || (event.type === 'blur')) {
this.onCheckEditEnd = (function(_this) { self.editing(false);
return function(view_model, event) {
if (event.keyCode === ESCAPE_KEY) { // Save the editTitle in the model's title or delete the model if blank
_this.editing(false); var title = self.editTitle();
} $.trim(title) ? self.model().save({title: $.trim(title)}) : self.model().destroy();
if ((event.keyCode === ENTER_KEY) || (event.type === 'blur')) { }
$('.todo-input').blur(); }
return _this.editing(false); }
} });
}; })();
})(this);
};
}).call(this);
examples/knockback/node_modules/jquery/dist/jquery.js
View file @ 2d0cb3bc
/*! /*!
* jQuery JavaScript Library v2.1.3 * jQuery JavaScript Library v2.1.4
* http://jquery.com/ * http://jquery.com/
* *
* Includes Sizzle.js * Includes Sizzle.js
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
* Released under the MIT license * Released under the MIT license
* http://jquery.org/license * http://jquery.org/license
* *
* Date: 2014-12-18T15:11Z * Date: 2015-04-28T16:01Z
*/ */
(function( global, factory ) { (function( global, factory ) {
...@@ -67,7 +67,7 @@ var ...@@ -67,7 +67,7 @@ var
// Use the correct document accordingly with window argument (sandbox) // Use the correct document accordingly with window argument (sandbox)
document = window.document, document = window.document,
version = "2.1.3", version = "2.1.4",
// Define a local copy of jQuery // Define a local copy of jQuery
jQuery = function( selector, context ) { jQuery = function( selector, context ) {
...@@ -531,7 +531,12 @@ jQuery.each("Boolean Number String Function Array Date RegExp Object Error".spli ...@@ -531,7 +531,12 @@ jQuery.each("Boolean Number String Function Array Date RegExp Object Error".spli
}); });
function isArraylike( obj ) { function isArraylike( obj ) {
var length = obj.length,
// Support: iOS 8.2 (not reproducible in simulator)
// `in` check used to prevent JIT error (gh-2145)
// hasOwn isn't used here due to false negatives
// regarding Nodelist length in IE
var length = "length" in obj && obj.length,
type = jQuery.type( obj ); type = jQuery.type( obj );
if ( type === "function" || jQuery.isWindow( obj ) ) { if ( type === "function" || jQuery.isWindow( obj ) ) {
......
examples/knockback/node_modules/todomvc-app-css/index.css
View file @ 2d0cb3bc
...@@ -44,7 +44,7 @@ input[type="checkbox"] { ...@@ -44,7 +44,7 @@ input[type="checkbox"] {
display: none; display: none;
} }
#todoapp { .todoapp {
background: #fff; background: #fff;
margin: 130px 0 40px 0; margin: 130px 0 40px 0;
position: relative; position: relative;
...@@ -52,25 +52,25 @@ input[type="checkbox"] { ...@@ -52,25 +52,25 @@ input[type="checkbox"] {
0 25px 50px 0 rgba(0, 0, 0, 0.1); 0 25px 50px 0 rgba(0, 0, 0, 0.1);
} }
#todoapp input::-webkit-input-placeholder { .todoapp input::-webkit-input-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp input::-moz-placeholder { .todoapp input::-moz-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp input::input-placeholder { .todoapp input::input-placeholder {
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
color: #e6e6e6; color: #e6e6e6;
} }
#todoapp h1 { .todoapp h1 {
position: absolute; position: absolute;
top: -155px; top: -155px;
width: 100%; width: 100%;
...@@ -83,7 +83,7 @@ input[type="checkbox"] { ...@@ -83,7 +83,7 @@ input[type="checkbox"] {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
#new-todo, .new-todo,
.edit { .edit {
position: relative; position: relative;
margin: 0; margin: 0;
...@@ -104,14 +104,14 @@ input[type="checkbox"] { ...@@ -104,14 +104,14 @@ input[type="checkbox"] {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
#new-todo { .new-todo {
padding: 16px 16px 16px 60px; padding: 16px 16px 16px 60px;
border: none; border: none;
background: rgba(0, 0, 0, 0.003); background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
} }
#main { .main {
position: relative; position: relative;
z-index: 2; z-index: 2;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
...@@ -121,7 +121,7 @@ label[for='toggle-all'] { ...@@ -121,7 +121,7 @@ label[for='toggle-all'] {
display: none; display: none;
} }
#toggle-all { .toggle-all {
position: absolute; position: absolute;
top: -55px; top: -55px;
left: -12px; left: -12px;
...@@ -131,50 +131,50 @@ label[for='toggle-all'] { ...@@ -131,50 +131,50 @@ label[for='toggle-all'] {
border: none; /* Mobile Safari */ border: none; /* Mobile Safari */
} }
#toggle-all:before { .toggle-all:before {
content: '❯'; content: '❯';
font-size: 22px; font-size: 22px;
color: #e6e6e6; color: #e6e6e6;
padding: 10px 27px 10px 27px; padding: 10px 27px 10px 27px;
} }
#toggle-all:checked:before { .toggle-all:checked:before {
color: #737373; color: #737373;
} }
#todo-list { .todo-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#todo-list li { .todo-list li {
position: relative; position: relative;
font-size: 24px; font-size: 24px;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
} }
#todo-list li:last-child { .todo-list li:last-child {
border-bottom: none; border-bottom: none;
} }
#todo-list li.editing { .todo-list li.editing {
border-bottom: none; border-bottom: none;
padding: 0; padding: 0;
} }
#todo-list li.editing .edit { .todo-list li.editing .edit {
display: block; display: block;
width: 506px; width: 506px;
padding: 13px 17px 12px 17px; padding: 13px 17px 12px 17px;
margin: 0 0 0 43px; margin: 0 0 0 43px;
} }
#todo-list li.editing .view { .todo-list li.editing .view {
display: none; display: none;
} }
#todo-list li .toggle { .todo-list li .toggle {
text-align: center; text-align: center;
width: 40px; width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */ /* auto, since non-WebKit browsers doesn't support input styling */
...@@ -188,15 +188,15 @@ label[for='toggle-all'] { ...@@ -188,15 +188,15 @@ label[for='toggle-all'] {
appearance: none; appearance: none;
} }
#todo-list li .toggle:after { .todo-list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>'); content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
} }
#todo-list li .toggle:checked:after { .todo-list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>'); content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
} }
#todo-list li label { .todo-list li label {
white-space: pre; white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px 60px 15px 15px; padding: 15px 60px 15px 15px;
...@@ -206,12 +206,12 @@ label[for='toggle-all'] { ...@@ -206,12 +206,12 @@ label[for='toggle-all'] {
transition: color 0.4s; transition: color 0.4s;
} }
#todo-list li.completed label { .todo-list li.completed label {
color: #d9d9d9; color: #d9d9d9;
text-decoration: line-through; text-decoration: line-through;
} }
#todo-list li .destroy { .todo-list li .destroy {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -226,27 +226,27 @@ label[for='toggle-all'] { ...@@ -226,27 +226,27 @@ label[for='toggle-all'] {
transition: color 0.2s ease-out; transition: color 0.2s ease-out;
} }
#todo-list li .destroy:hover { .todo-list li .destroy:hover {
color: #af5b5e; color: #af5b5e;
} }
#todo-list li .destroy:after { .todo-list li .destroy:after {
content: '×'; content: '×';
} }
#todo-list li:hover .destroy { .todo-list li:hover .destroy {
display: block; display: block;
} }
#todo-list li .edit { .todo-list li .edit {
display: none; display: none;
} }
#todo-list li.editing:last-child { .todo-list li.editing:last-child {
margin-bottom: -1px; margin-bottom: -1px;
} }
#footer { .footer {
color: #777; color: #777;
padding: 10px 15px; padding: 10px 15px;
height: 20px; height: 20px;
...@@ -254,7 +254,7 @@ label[for='toggle-all'] { ...@@ -254,7 +254,7 @@ label[for='toggle-all'] {
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
} }
#footer:before { .footer:before {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -269,16 +269,16 @@ label[for='toggle-all'] { ...@@ -269,16 +269,16 @@ label[for='toggle-all'] {
0 17px 2px -6px rgba(0, 0, 0, 0.2); 0 17px 2px -6px rgba(0, 0, 0, 0.2);
} }
#todo-count { .todo-count {
float: left; float: left;
text-align: left; text-align: left;
} }
#todo-count strong { .todo-count strong {
font-weight: 300; font-weight: 300;
} }
#filters { .filters {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
...@@ -287,11 +287,11 @@ label[for='toggle-all'] { ...@@ -287,11 +287,11 @@ label[for='toggle-all'] {
left: 0; left: 0;
} }
#filters li { .filters li {
display: inline; display: inline;
} }
#filters li a { .filters li a {
color: inherit; color: inherit;
margin: 3px; margin: 3px;
padding: 3px 7px; padding: 3px 7px;
...@@ -300,17 +300,17 @@ label[for='toggle-all'] { ...@@ -300,17 +300,17 @@ label[for='toggle-all'] {
border-radius: 3px; border-radius: 3px;
} }
#filters li a.selected, .filters li a.selected,
#filters li a:hover { .filters li a:hover {
border-color: rgba(175, 47, 47, 0.1); border-color: rgba(175, 47, 47, 0.1);
} }
#filters li a.selected { .filters li a.selected {
border-color: rgba(175, 47, 47, 0.2); border-color: rgba(175, 47, 47, 0.2);
} }
#clear-completed, .clear-completed,
html #clear-completed:active { html .clear-completed:active {
float: right; float: right;
position: relative; position: relative;
line-height: 20px; line-height: 20px;
...@@ -319,11 +319,11 @@ html #clear-completed:active { ...@@ -319,11 +319,11 @@ html #clear-completed:active {
position: relative; position: relative;
} }
#clear-completed:hover { .clear-completed:hover {
text-decoration: underline; text-decoration: underline;
} }
#info { .info {
margin: 65px auto 0; margin: 65px auto 0;
color: #bfbfbf; color: #bfbfbf;
font-size: 10px; font-size: 10px;
...@@ -331,17 +331,17 @@ html #clear-completed:active { ...@@ -331,17 +331,17 @@ html #clear-completed:active {
text-align: center; text-align: center;
} }
#info p { .info p {
line-height: 1; line-height: 1;
} }
#info a { .info a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
} }
#info a:hover { .info a:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -350,16 +350,16 @@ html #clear-completed:active { ...@@ -350,16 +350,16 @@ html #clear-completed:active {
Can't use it globally since it destroys checkboxes in Firefox Can't use it globally since it destroys checkboxes in Firefox
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, .toggle-all,
#todo-list li .toggle { .todo-list li .toggle {
background: none; background: none;
} }
#todo-list li .toggle { .todo-list li .toggle {
height: 40px; height: 40px;
} }
#toggle-all { .toggle-all {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
...@@ -368,11 +368,11 @@ html #clear-completed:active { ...@@ -368,11 +368,11 @@ html #clear-completed:active {
} }
@media (max-width: 430px) { @media (max-width: 430px) {
#footer { .footer {
height: 50px; height: 50px;
} }
#filters { .filters {
bottom: 10px; bottom: 10px;
} }
} }
examples/knockback/node_modules/todomvc-common/base.js
View file @ 2d0cb3bc
...@@ -114,7 +114,12 @@ ...@@ -114,7 +114,12 @@
})({}); })({});
if (location.hostname === 'todomvc.com') { if (location.hostname === 'todomvc.com') {
window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script')); (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31081062-1', 'auto');
ga('send', 'pageview');
} }
/* jshint ignore:end */ /* jshint ignore:end */
...@@ -228,7 +233,7 @@ ...@@ -228,7 +233,7 @@
xhr.onload = function (e) { xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText); var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) { if (parsedResponse instanceof Array) {
var count = parsedResponse.length var count = parsedResponse.length;
if (count !== 0) { if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues'; issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline'; document.getElementById('issue-count').style.display = 'inline';
......
examples/knockback/package.json
View file @ 2d0cb3bc
{ {
"private": true, "private": true,
"dependencies": { "dependencies": {
"backbone.localStorage": "^1.1.3", "backbone": "^1.2.3",
"jquery": "^2.0.0", "backbone.localstorage": "^1.1.16",
"knockback": "^0.20.5", "jquery": "^2.1.4",
"todomvc-app-css": "^1.0.0", "knockback": "^1.0.0",
"todomvc-common": "^1.0.1" "knockout": "^3.3.0",
"todomvc-app-css": "^2.0.1",
"todomvc-common": "^1.0.2",
"underscore": "^1.8.3"
} }
} }
examples/knockback/readme.md
View file @ 2d0cb3bc
...@@ -18,22 +18,3 @@ Here are some links you may find helpful: ...@@ -18,22 +18,3 @@ Here are some links you may find helpful:
* [Knockback.js on Twitter](http://twitter.com/knockbackjs) * [Knockback.js on Twitter](http://twitter.com/knockbackjs)
_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)._ _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)._
## Running
This app is written in [CoffeeScript](http://coffeescript.org/). If you wish to make changes, follow these steps to re-compile the code.
To install CoffeeScript globally:
npm install -g coffee-script
To compile once:
# from examples/knockback
cake build
To compile on save
# from examples/knockback
cake watch
examples/knockback/src/lib/knockout-extended-bindings.coffee deleted 100644 → 0
View file @ 13b7a35c
# Add custom handlers to Knockout.js - adapted from Knockout.js Todos app: https://github.com/ashish01/knockoutjs-todos
ko.bindingHandlers.dblclick =
init: (element, value_accessor) -> $(element).dblclick(ko.utils.unwrapObservable(value_accessor()))
ko.bindingHandlers.block =
update: (element, value_accessor) -> element.style.display = if ko.utils.unwrapObservable(value_accessor()) then 'block' else 'none'
ko.bindingHandlers.selectAndFocus =
init: (element, value_accessor, all_bindings_accessor) ->
ko.bindingHandlers.hasfocus.init(element, value_accessor, all_bindings_accessor)
ko.utils.registerEventHandler(element, 'focus', -> element.select())
update: (element, value_accessor) ->
ko.utils.unwrapObservable(value_accessor()) # create dependency
_.defer -> ko.bindingHandlers.hasfocus.update(element, value_accessor)
\ No newline at end of file
examples/knockback/src/models/todo.coffee deleted 100644 → 0
View file @ 13b7a35c
class window.Todo extends Backbone.Model
completed: (completed) ->
return !!@get('completed') if arguments.length is 0 # getter
@save({completed: if completed then new Date() else null}) # setter
\ No newline at end of file
examples/knockback/src/models/todo_collection.coffee deleted 100644 → 0
View file @ 13b7a35c
class window.TodoCollection extends Backbone.Collection
localStorage: new Store('todos-knockback') # Save all of the todos under the "todos-knockback" namespace.
model: Todo
completedCount: -> @models.reduce(((prev,cur)-> return prev + if cur.completed() then 1 else 0), 0)
remainingCount: -> @models.length - @completedCount()
completeAll: (completed) -> @each((todo) -> todo.completed(completed))
destroyCompleted: ->
completed_tasks = @filter((todo) -> return todo.completed())
model.destroy() for model in completed_tasks
return
\ No newline at end of file
examples/knockback/src/viewmodels/app.coffee deleted 100644 → 0
View file @ 13b7a35c
ENTER_KEY = 13
window.AppViewModel = ->
#############################
# Shared
#############################
# collections
@collections =
todos: new TodoCollection()
@collections.todos.fetch()
# shared observables
@list_filter_mode = ko.observable('')
filter_fn = ko.computed =>
switch @list_filter_mode()
when 'active' then return (model) -> return not model.completed()
when 'completed' then return (model) -> return model.completed()
else return -> return true
@todos = kb.collectionObservable(@collections.todos, {view_model: TodoViewModel, filters: filter_fn})
@todos_changed = kb.triggeredObservable(@collections.todos, 'change add remove')
@tasks_exist = ko.computed(=> @todos_changed(); return !!@collections.todos.length)
#############################
# Header Section
#############################
@title = ko.observable('')
@onAddTodo = (view_model, event) =>
return true if not $.trim(@title()) or (event.keyCode != ENTER_KEY)
# Create task and reset UI
@collections.todos.create({title: $.trim(@title())})
@title('')
#############################
# Main Section
#############################
@remaining_count = ko.computed => @todos_changed(); return @collections.todos.remainingCount()
@completed_count = ko.computed => @todos_changed(); return @collections.todos.completedCount()
@all_completed = ko.computed
read: => return not @remaining_count()
write: (completed) => @collections.todos.completeAll(completed)
#############################
# Footer Section
#############################
@onDestroyCompleted = => @collections.todos.destroyCompleted()
#############################
# Localization
#############################
@loc =
remaining_message: ko.computed(=> return "<strong>#{@remaining_count()}</strong> #{if @remaining_count() == 1 then 'item' else 'items'} left")
clear_message: ko.computed(=> return if (count = @completed_count()) then "Clear completed (#{count})" else '')
#############################
# Routing
#############################
router = new Backbone.Router
router.route('', null, => @list_filter_mode(''))
router.route('active', null, => @list_filter_mode('active'))
router.route('completed', null, => @list_filter_mode('completed'))
Backbone.history.start()
return
\ No newline at end of file
examples/knockback/src/viewmodels/todo.coffee deleted 100644 → 0
View file @ 13b7a35c
window.TodoViewModel = (model) ->
ENTER_KEY = 13
ESCAPE_KEY = 27
@editing = ko.observable(false)
@completed = kb.observable(model, {key: 'completed', read: (-> return model.completed()), write: ((completed) -> model.completed(completed)) }, @)
@title = kb.observable(model, {
key: 'title'
write: ((title) =>
if $.trim(title) then model.save(title: $.trim(title)) else _.defer(->model.destroy())
@editing(false)
)
}, @)
@onDestroyTodo = => model.destroy()
@onCheckEditBegin = =>
if not @editing()
@editing(true)
$('.todo-input').focus()
@onCheckEditEnd = (view_model, event) =>
if (event.keyCode == ESCAPE_KEY)
@editing(false)
if (event.keyCode == ENTER_KEY) or (event.type == 'blur')
$('.todo-input').blur()
@editing(false)
return
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7