Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

YUI app - convert to tabs

  • Loading branch information...
commit 0839ee5fbab818aacfe9230312df2a35d3f966a3 1 parent 8f87c1b
@sindresorhus sindresorhus authored
View
464 architecture-examples/yui/js/app.js
@@ -1,235 +1,235 @@
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'
+ ]
});
View
60 architecture-examples/yui/js/models/todo.js
@@ -1,38 +1,38 @@
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'
+ ]
});
View
60 architecture-examples/yui/js/models/todolist.js
@@ -1,42 +1,42 @@
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'
+ ]
});
View
194 architecture-examples/yui/js/views/todoview.js
@@ -1,100 +1,100 @@
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'
+ ]
});
Please sign in to comment.
Something went wrong with that request. Please try again.