Skip to content

T
todomvc
Commit 0839ee5f authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

YUI app - convert to tabs

parent 8f87c1bb
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 389 deletions
architecture-examples/yui/js/app.js
View file @ 0839ee5f
YUI.add('todo-app', function (Y) {
"use strict";
// Dependencies from MVC namespace.
var TodoList = Y.TodoMVC.TodoList,
TodoView = Y.TodoMVC.TodoView,
TodoApp;
// -- Main Application --------------
TodoApp = Y.Base.create('todoApp', Y.App, [], {
// Set container to bind to the existing '#todoapp' element
containerTemplate: '#todoapp',
// Compile statistics template with Handlebars.
template: Y.Handlebars.compile(Y.one('#stats-template').getHTML()),
// DOM events for creating new Todos and clearing out old ones.
events: {
'#new-todo': {
keypress: 'enterCreate'
},
'#clear-completed': {
click: 'clearCompleted'
},
'#toggle-all': {
click: 'completeAll'
}
},
// Initialize our TodoList, and bind any events that occur
// when new Todos are added, changed, or removed within it.
// Also, fetch any Todos that are found within localStorage.
initializer: function () {
this.set('todoList', new TodoList());
var list = this.get('todoList');
Y.Handlebars.registerHelper('pluralize', function (context, word) {
return (context === 1) ? word : word + 's';
});
list.after(['add', 'remove', 'reset', 'todo:completedChange'],
this.render, this);
list.load();
// Keep our filters on refresh by immediately dispatching route.
this.once('ready', function (e) {
if (this.hasRoute(this.getPath())) {
this.dispatch();
}
});
},
// Render our application with the statistics from our TodoList,
// and various other stylistic elements.
render: function () {
var todoList = this.get('todoList'),
completed = todoList.completed().size(),
remaining = todoList.remaining().size(),
container = this.get('container'),
main = this.get('main'),
footer = this.get('footer');
// If we have Todos in our TodoList, show them with statistics.
if (todoList.size()) {
main.show();
footer.show();
footer.setHTML(this.template({
completed: completed,
remaining: remaining
}));
// Highlights for filters at the bottom of our Todo application.
footer.one('#filters li a').removeClass('selected');
footer.all('#filters li a')
.filter('[href="#/' + (this.get('filter') || '') + '"]')
.addClass('selected');
} else {
main.hide();
footer.hide();
}
// Set the checkbox only if all Todos have been completed.
this.get('allCheckbox').set('checked', !remaining);
this.addViews();
},
// Add Todo views to the DOM simultaneously, triggered when
// the application initially loads, or we switch filters.
addViews: function () {
var fragment = Y.one(Y.config.doc.createDocumentFragment()),
todoList = this.get('todoList'),
models;
// An Array of models is passed through when the 'reset'
// event is triggered through syncing through load().
switch (this.get('filter')) {
case 'active':
models = todoList.remaining();
break;
case 'completed':
models = todoList.completed();
break;
default:
models = todoList;
break;
}
// Iterate through the (filtered) ModelList.
models.each(function (model) {
var view = new TodoView({model: model});
fragment.append(view.render().get('container'));
});
this.get('container').one('#todo-list').setContent(fragment);
},
// Create and save a new Todo from the inputted value when the
// Enter key is pressed down.
enterCreate: function (e) {
var ENTER_KEY = 13,
todoList = this.get('todoList'),
inputNode = this.get('inputNode'),
value = Y.Escape.html(Y.Lang.trim(inputNode.get('value')));
if (e.keyCode !== ENTER_KEY || !value) {
return;
}
todoList.create({
title: value
});
inputNode.set('value', '');
},
// Clear all completed Todos from the TodoList. This removes the models
// from the list, as well as deletes them from localStorage.
clearCompleted: function (e) {
var todoList = this.get('todoList'),
completed = todoList.completed();
todoList.remove(completed);
completed.each(function (todo) {
todo.clear();
});
},
// Complete all non-complete Todos, or reset them all if they are
// all already complete.
completeAll: function () {
var todoList = this.get('todoList'),
allCheckbox = this.get('allCheckbox'),
completed = allCheckbox.get('checked');
Y.Array.each(todoList.toArray(), function (todo) {
todo.save({completed: completed});
});
},
// Set the filter for our application from the route that is passed
// in (see below).
handleFilter: function (req) {
this.set('filter', req.params.filter);
this.get('todoList').load();
}
}, {
ATTRS: {
// Significant DOM elements that relate to our application that
// we would like to keep as attributes.
container: {
valueFn: function () {
return Y.one('#todoapp');
}
},
inputNode: {
valueFn: function () {
return Y.one('#new-todo');
}
},
allCheckbox: {
valueFn: function () {
return Y.one('#toggle-all');
}
},
main: {
valueFn: function () {
return Y.one('#main');
}
},
footer: {
valueFn: function () {
return Y.one('#footer');
}
},
// This can be set to fall back on server-side routing when
// HTML5 pushState is not available. For this application,
// we are only using hash-based URLs though.
serverRouting: {
value: false
},
// Our initial filter for the application.
filter: {
value: null
},
// Routing for the application, to determine the filter.
// The callback takes a request object, Express-style.
routes: {
value: [
{path: '/:filter', callback: 'handleFilter'}
]
}
}
});
// Namespace this application under our custom Y.MVC namespace.
Y.namespace('TodoMVC').TodoApp = TodoApp;
"use strict";
// Dependencies from MVC namespace.
var TodoList = Y.TodoMVC.TodoList,
TodoView = Y.TodoMVC.TodoView,
TodoApp;
// -- Main Application --------------
TodoApp = Y.Base.create('todoApp', Y.App, [], {
// Set container to bind to the existing '#todoapp' element
containerTemplate: '#todoapp',
// Compile statistics template with Handlebars.
template: Y.Handlebars.compile(Y.one('#stats-template').getHTML()),
// DOM events for creating new Todos and clearing out old ones.
events: {
'#new-todo': {
keypress: 'enterCreate'
},
'#clear-completed': {
click: 'clearCompleted'
},
'#toggle-all': {
click: 'completeAll'
}
},
// Initialize our TodoList, and bind any events that occur
// when new Todos are added, changed, or removed within it.
// Also, fetch any Todos that are found within localStorage.
initializer: function () {
this.set('todoList', new TodoList());
var list = this.get('todoList');
Y.Handlebars.registerHelper('pluralize', function (context, word) {
return (context === 1) ? word : word + 's';
});
list.after(['add', 'remove', 'reset', 'todo:completedChange'],
this.render, this);
list.load();
// Keep our filters on refresh by immediately dispatching route.
this.once('ready', function (e) {
if (this.hasRoute(this.getPath())) {
this.dispatch();
}
});
},
// Render our application with the statistics from our TodoList,
// and various other stylistic elements.
render: function () {
var todoList = this.get('todoList'),
completed = todoList.completed().size(),
remaining = todoList.remaining().size(),
container = this.get('container'),
main = this.get('main'),
footer = this.get('footer');
// If we have Todos in our TodoList, show them with statistics.
if (todoList.size()) {
main.show();
footer.show();
footer.setHTML(this.template({
completed: completed,
remaining: remaining
}));
// Highlights for filters at the bottom of our Todo application.
footer.one('#filters li a').removeClass('selected');
footer.all('#filters li a')
.filter('[href="#/' + (this.get('filter') || '') + '"]')
.addClass('selected');
} else {
main.hide();
footer.hide();
}
// Set the checkbox only if all Todos have been completed.
this.get('allCheckbox').set('checked', !remaining);
this.addViews();
},
// Add Todo views to the DOM simultaneously, triggered when
// the application initially loads, or we switch filters.
addViews: function () {
var fragment = Y.one(Y.config.doc.createDocumentFragment()),
todoList = this.get('todoList'),
models;
// An Array of models is passed through when the 'reset'
// event is triggered through syncing through load().
switch (this.get('filter')) {
case 'active':
models = todoList.remaining();
break;
case 'completed':
models = todoList.completed();
break;
default:
models = todoList;
break;
}
// Iterate through the (filtered) ModelList.
models.each(function (model) {
var view = new TodoView({model: model});
fragment.append(view.render().get('container'));
});
this.get('container').one('#todo-list').setContent(fragment);
},
// Create and save a new Todo from the inputted value when the
// Enter key is pressed down.
enterCreate: function (e) {
var ENTER_KEY = 13,
todoList = this.get('todoList'),
inputNode = this.get('inputNode'),
value = Y.Escape.html(Y.Lang.trim(inputNode.get('value')));
if (e.keyCode !== ENTER_KEY || !value) {
return;
}
todoList.create({
title: value
});
inputNode.set('value', '');
},
// Clear all completed Todos from the TodoList. This removes the models
// from the list, as well as deletes them from localStorage.
clearCompleted: function (e) {
var todoList = this.get('todoList'),
completed = todoList.completed();
todoList.remove(completed);
completed.each(function (todo) {
todo.clear();
});
},
// Complete all non-complete Todos, or reset them all if they are
// all already complete.
completeAll: function () {
var todoList = this.get('todoList'),
allCheckbox = this.get('allCheckbox'),
completed = allCheckbox.get('checked');
Y.Array.each(todoList.toArray(), function (todo) {
todo.save({completed: completed});
});
},
// Set the filter for our application from the route that is passed
// in (see below).
handleFilter: function (req) {
this.set('filter', req.params.filter);
this.get('todoList').load();
}
}, {
ATTRS: {
// Significant DOM elements that relate to our application that
// we would like to keep as attributes.
container: {
valueFn: function () {
return Y.one('#todoapp');
}
},
inputNode: {
valueFn: function () {
return Y.one('#new-todo');
}
},
allCheckbox: {
valueFn: function () {
return Y.one('#toggle-all');
}
},
main: {
valueFn: function () {
return Y.one('#main');
}
},
footer: {
valueFn: function () {
return Y.one('#footer');
}
},
// This can be set to fall back on server-side routing when
// HTML5 pushState is not available. For this application,
// we are only using hash-based URLs though.
serverRouting: {
value: false
},
// Our initial filter for the application.
filter: {
value: null
},
// Routing for the application, to determine the filter.
// The callback takes a request object, Express-style.
routes: {
value: [
{path: '/:filter', callback: 'handleFilter'}
]
}
}
});
// Namespace this application under our custom Y.MVC namespace.
Y.namespace('TodoMVC').TodoApp = TodoApp;
}, '@VERSION@', {
requires: [
'app',
'todo-list',
'todo-view',
'node',
'event-focus'
]
requires: [
'app',
'todo-list',
'todo-view',
'node',
'event-focus'
]
});
architecture-examples/yui/js/models/todo.js
View file @ 0839ee5f
YUI.add('todo', function (Y) {
"use strict";
// -- Todo Model -------------
var Todo = Y.Base.create('todo', Y.Model, [Y.ModelSync.Local], {
// Set up the root localStorage key we save our Model data in.
root: 'todos-yui',
"use strict";
// -- Todo Model -------------
var Todo = Y.Base.create('todo', Y.Model, [Y.ModelSync.Local], {
// Set up the root localStorage key we save our Model data in.
root: 'todos-yui',
// Toggle the completed state of the Todo.
toggle: function () {
this.save({completed: !this.get('completed')});
},
// Toggle the completed state of the Todo.
toggle: function () {
this.save({completed: !this.get('completed')});
},
// Destroy this Todo and remove it from localStorage.
clear: function () {
this.destroy({remove: true});
}
}, {
// Destroy this Todo and remove it from localStorage.
clear: function () {
this.destroy({remove: true});
}
}, {
// Default attributes.
ATTRS: {
title: {
value: 'empty todo ...'
},
completed: {
value: false
}
}
});
// Default attributes.
ATTRS: {
title: {
value: 'empty todo ...'
},
completed: {
value: false
}
}
});
// Set this Model under our custom Y.MVC namespace.
Y.namespace('TodoMVC').Todo = Todo;
// Set this Model under our custom Y.MVC namespace.
Y.namespace('TodoMVC').Todo = Todo;
}, '@VERSION@', {
requires: [
'gallery-model-sync-local',
'model'
]
requires: [
'gallery-model-sync-local',
'model'
]
});
architecture-examples/yui/js/models/todolist.js
View file @ 0839ee5f
YUI.add('todo-list', function (Y) {
"use strict";
"use strict";
// Dependencies from Y.MVC.
var Todo = Y.TodoMVC.Todo,
TodoList;
// Dependencies from Y.MVC.
var Todo = Y.TodoMVC.Todo,
TodoList;
// -- TodoList Model list -----
TodoList = Y.Base.create('todoList', Y.ModelList, [Y.ModelSync.Local], {
// -- TodoList Model list -----
TodoList = Y.Base.create('todoList', Y.ModelList, [Y.ModelSync.Local], {
// The related Model for our Model List.
model: Todo,
// The related Model for our Model List.
model: Todo,
// The root used for our localStorage key.
root: 'todos-yui',
// The root used for our localStorage key.
root: 'todos-yui',
// Return a ModelList of our completed Models.
completed: function () {
return this.filter({ asList: true }, function (todo) {
return todo.get('completed');
});
},
// Return a ModelList of our completed Models.
completed: function () {
return this.filter({ asList: true }, function (todo) {
return todo.get('completed');
});
},
// Return an ModelList of our un-completed Models.
remaining: function () {
return this.filter({ asList: true }, function (todo) {
return !todo.get('completed');
});
}
// Return an ModelList of our un-completed Models.
remaining: function () {
return this.filter({ asList: true }, function (todo) {
return !todo.get('completed');
});
}
});
});
// Set this Model List under our custom Y.MVC namespace.
Y.namespace('TodoMVC').TodoList = TodoList;
// Set this Model List under our custom Y.MVC namespace.
Y.namespace('TodoMVC').TodoList = TodoList;
}, '@VERSION@', {
requires: [
'gallery-model-sync-local',
'model-list',
'todo'
]
requires: [
'gallery-model-sync-local',
'model-list',
'todo'
]
});
architecture-examples/yui/js/views/todoview.js
View file @ 0839ee5f
YUI.add('todo-view', function (Y) {
"use strict";
// -- Todo View -------------------
var TodoView = Y.Base.create('todoView', Y.View, [], {
// The container element that the View is rendered under.
containerTemplate: '<li>',
// Compile our template using Handlebars.
template: Y.Handlebars.compile(Y.one('#item-template').getHTML()),
// Bind DOM events for handling changes to a specific Todo,
// for completion and editing.
events: {
'.toggle': {
click: 'toggleComplete'
},
'label': {
dblclick: 'edit'
},
'.edit': {
blur: 'close',
keypress: 'enterUpdate'
},
'.destroy': {
click: 'clear'
}
},
// Initialize this view by setting event handlers when the Model
// is updated or destroyed.
initializer: function () {
var model = this.get('model');
model.after('change', this.render, this);
},
// Render this view in our <li> container, and fill it with the
// data in our Model.
render: function () {
var container = this.get('container'),
model = this.get('model');
container.setHTML(this.template(model.toJSON()));
container.toggleClass('completed', model.get('completed'));
this.set('inputNode', container.one('.edit'));
return this;
},
// Toggle the linked Todo's completion status.
toggleComplete: function () {
this.get('model').toggle();
},
// Turn on editing mode for the Todo by exposing the input field.
edit: function () {
this.get('container').addClass('editing');
this.get('inputNode').focus();
},
// Get the value from our input field while hiding it, and
// save it to our Todo when focus is lost from the field.
close: function (e) {
var value = this.get('inputNode').get('value'),
editedValue = Y.Escape.html(Y.Lang.trim(value));
this.get('container').removeClass('editing');
if (editedValue) {
this.get('model').save({title: editedValue});
} else {
this.clear();
}
},
// Also allow updating the Todo's text through the enter key.
enterUpdate: function (e) {
var ENTER_KEY = 13;
if (e.keyCode === ENTER_KEY) {
this.close();
}
},
// Destroy the model when the delete button is clicked.
clear: function (e) {
this.get('model').clear();
}
});
// Set this View under our custom Y.TodoMVC namespace.
Y.namespace('TodoMVC').TodoView = TodoView;
"use strict";
// -- Todo View -------------------
var TodoView = Y.Base.create('todoView', Y.View, [], {
// The container element that the View is rendered under.
containerTemplate: '<li>',
// Compile our template using Handlebars.
template: Y.Handlebars.compile(Y.one('#item-template').getHTML()),
// Bind DOM events for handling changes to a specific Todo,
// for completion and editing.
events: {
'.toggle': {
click: 'toggleComplete'
},
'label': {
dblclick: 'edit'
},
'.edit': {
blur: 'close',
keypress: 'enterUpdate'
},
'.destroy': {
click: 'clear'
}
},
// Initialize this view by setting event handlers when the Model
// is updated or destroyed.
initializer: function () {
var model = this.get('model');
model.after('change', this.render, this);
},
// Render this view in our <li> container, and fill it with the
// data in our Model.
render: function () {
var container = this.get('container'),
model = this.get('model');
container.setHTML(this.template(model.toJSON()));
container.toggleClass('completed', model.get('completed'));
this.set('inputNode', container.one('.edit'));
return this;
},
// Toggle the linked Todo's completion status.
toggleComplete: function () {
this.get('model').toggle();
},
// Turn on editing mode for the Todo by exposing the input field.
edit: function () {
this.get('container').addClass('editing');
this.get('inputNode').focus();
},
// Get the value from our input field while hiding it, and
// save it to our Todo when focus is lost from the field.
close: function (e) {
var value = this.get('inputNode').get('value'),
editedValue = Y.Escape.html(Y.Lang.trim(value));
this.get('container').removeClass('editing');
if (editedValue) {
this.get('model').save({title: editedValue});
} else {
this.clear();
}
},
// Also allow updating the Todo's text through the enter key.
enterUpdate: function (e) {
var ENTER_KEY = 13;
if (e.keyCode === ENTER_KEY) {
this.close();
}
},
// Destroy the model when the delete button is clicked.
clear: function (e) {
this.get('model').clear();
}
});
// Set this View under our custom Y.TodoMVC namespace.
Y.namespace('TodoMVC').TodoView = TodoView;
}, '@VERSION@', {
requires: [
'view',
'handlebars'
]
requires: [
'view',
'handlebars'
]
});
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