From b04788fa315d0428ba6136c92a1e828a0d05b20d Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Thu, 12 Jan 2012 12:39:27 +0100 Subject: [PATCH 1/4] Update jQuery example to the new template Uses the app.css from the template without modifications --- todo-example/jquery/css/app.css | 102 ++++++++++++++++++++------------ todo-example/jquery/index.html | 38 ++++++------ todo-example/jquery/js/app.js | 36 +++++++---- 3 files changed, 109 insertions(+), 67 deletions(-) diff --git a/todo-example/jquery/css/app.css b/todo-example/jquery/css/app.css index 2d01441e54..be27e23d3e 100755 --- a/todo-example/jquery/css/app.css +++ b/todo-example/jquery/css/app.css @@ -5,31 +5,31 @@ body { } body { - font-family: "Helvetica Neue", helvetica, arial, sans-serif; - font-size: 14px; + font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.4em; background: #eeeeee; color: #333333; + width: 520px; + margin: 0 auto; + -webkit-font-smoothing: antialiased; } #todoapp { - width: 480px; - margin: 0 auto 40px auto; - background: white; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + background: #fff; + padding: 20px; + margin-bottom: 40px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; + -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; + -ms-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; - -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } -#todoapp { - padding: 20px; -} - #todoapp h1 { font-size: 36px; font-weight: bold; @@ -46,8 +46,9 @@ body { outline: none; padding: 6px; border: 1px solid #999999; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; } @@ -56,67 +57,93 @@ body { font-style: italic; } -#todoapp .items { +#main { + display: none; +} + +#todo-list { margin: 10px 0; padding: 0; list-style: none; } -#todoapp .item { - padding: 15px 20px 15px 0; +#todo-list li { + padding: 18px 20px 18px 0; position: relative; font-size: 24px; border-bottom: 1px solid #cccccc; } -#todoapp .item.done span { +#todo-list li:last-child { + border-bottom: none; +} + +#todo-list li.done span { color: #777777; text-decoration: line-through; } -#todoapp .item .destroy { +#todo-list li .destroy { + display: none; position: absolute; - right: 10px; top: 16px; - display: none; + right: 10px; cursor: pointer; width: 20px; height: 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center; } -#todoapp .item:hover .destroy { +#todo-list li:hover .destroy { display: block; } -#todoapp .item .edit { - display: none; +#todo-list li.editing { + border-bottom: none; + margin-top: -1px; + padding: 0; +} + +#todo-list li.editing:last-child { + margin-bottom: -1px; } -#todoapp .item.editing .edit { +#todo-list li.editing .edit { display: block; + width: 444px; + padding: 13px 15px 14px 20px; + margin: 0; } -#todoapp .item.editing .view { +#todo-list li.editing .view { + display: none; +} + +#todo-list li .view span { + word-break: break-word; +} + +#todo-list li .edit { display: none; } #todoapp footer { display: none; - margin: 20px -20px -20px -20px; + margin: 0 -20px -20px -20px; overflow: hidden; color: #555555; background: #f4fce8; border-top: 1px solid #ededed; padding: 0 20px; - line-height: 36px; + line-height: 37px; + -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; + -ms-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; - -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } -#todoapp .clear { +#clear-completed { display: none; float: right; line-height: 20px; @@ -127,36 +154,38 @@ body { margin-top: 8px; margin-bottom: 8px; padding: 0 10px 1px; - -moz-border-radius: 12px; + cursor: pointer; -webkit-border-radius: 12px; + -moz-border-radius: 12px; + -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; + -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; - cursor: pointer; } -#todoapp .clear:hover { +#clear-completed:hover { background: rgba(0, 0, 0, 0.15); - -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; + -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; + -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; } -#todoapp .clear:active { +#clear-completed:active { position: relative; top: 1px; } -#todoapp .count span { +#todo-count span { font-weight: bold; } #instructions { - width: 520px; margin: 10px auto; color: #777777; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; @@ -168,7 +197,6 @@ body { } #credits { - width: 520px; margin: 30px auto; color: #999; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; diff --git a/todo-example/jquery/index.html b/todo-example/jquery/index.html index 607a47f20b..6b3241d291 100755 --- a/todo-example/jquery/index.html +++ b/todo-example/jquery/index.html @@ -2,23 +2,23 @@ - jQuery + jQuery - TodoMVC - - - -
-

Todos

-
- -
- +
+

Todos

+ +
+
+ + +
    +
    @@ -29,17 +29,19 @@

    Todos

    + + + + \ No newline at end of file diff --git a/todo-example/jquery/js/app.js b/todo-example/jquery/js/app.js index 37dce67aef..65e3732d8a 100755 --- a/todo-example/jquery/js/app.js +++ b/todo-example/jquery/js/app.js @@ -26,10 +26,11 @@ jQuery(function($) { cacheElements: function() { this.template = Handlebars.compile( $('#todo-template').html() ); this.$todoApp = $('#todoapp'); - this.$todoList = this.$todoApp.find('.items'); - this.$footer = this.$todoApp.find('footer'); - this.$count = this.$footer.find('.count'); - this.$clearBtn = this.$footer.find('.clear'); + this.$main = $('#main'); + this.$todoList = $('#todo-list'); + this.$footer = $('footer'); + this.$count = $('#todo-count'); + this.$clearBtn = $('#clear-completed'); }, store: function( data ) { if ( arguments.length ) { @@ -42,16 +43,18 @@ jQuery(function($) { bindEvents: function() { var app = this.$todoApp, list = this.$todoList; - app.on( 'click', '.clear', this.destroyDone ); - app.on( 'submit', 'form', this.create ); + app.on( 'click', '#clear-completed', this.destroyDone ); + app.on( 'keyup', '#new-todo', this.create ); + app.on( 'change', '#toggle-all', this.toggleAll ); list.on( 'change', '.toggle', this.toggle ); list.on( 'dblclick', '.view', this.edit ); - list.on( 'keypress', '.edit input', this.blurOnEnter ); - list.on( 'blur', '.edit input', this.update ); + list.on( 'keypress', '.edit', this.blurOnEnter ); + list.on( 'blur', '.edit', this.update ); list.on( 'click', '.destroy', this.destroy ); }, render: function() { this.$todoList.html( this.template( this.todos ) ); + this.$main.toggle( !!this.todos.length ); this.renderFooter(); this.store( this.todos ); }, @@ -68,6 +71,13 @@ jQuery(function($) { // Toggle clear button and update title this.$clearBtn.text( clearTitle ).toggle( !!completedTodos ); }, + toggleAll: function() { + var isChecked = !!$(this).attr('checked'); + $.each( App.todos, function( i, val ) { + val.done = isChecked; + }); + App.render(); + }, activeTodoCount: function() { var count = 0; $.each( this.todos, function( i, val ) { @@ -89,7 +99,7 @@ jQuery(function($) { }, // Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array. getTodo: function( elem, callback ) { - var id = $( elem ).closest('.item').data('id'); + var id = $( elem ).closest('li').data('id'); $.each( this.todos, function( i, val ) { if ( val.id === id ) { callback.apply( App, arguments ); @@ -98,8 +108,10 @@ jQuery(function($) { }); }, create: function(e) { - e.preventDefault(); - var $input = $(this).find('input'), + if ( e.which !== 13 ) { + return; + } + var $input = $(this), inputVal = $input.val(); if ( !inputVal ) { return; @@ -119,7 +131,7 @@ jQuery(function($) { App.render(); }, edit: function() { - $(this).closest('.item').addClass('editing').find('.edit input').focus(); + $(this).closest('li').addClass('editing').find('.edit').focus(); }, blurOnEnter: function(e) { if ( e.keyCode === 13 ) { From 7307a8a59304e8b99d2601cd878f66355b9277aa Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Sat, 14 Jan 2012 19:26:03 +0100 Subject: [PATCH 2/4] Switch from to