Skip to content

T
todomvc
Commit 7c70864f authored by addyosmani's avatar addyosmani
Browse files
Options

patching issue with KnockoutJS not correctly observing values added when using Opera

parent 5120ff3b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 838 additions and 669 deletions
todo-example/backbone/css/todos.css
View file @ 7c70864f
...@@ -31,13 +31,13 @@ a img { ...@@ -31,13 +31,13 @@ a img {
html { html {
background: #eeeeee; background: #eeeeee;
} }
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.4em; line-height: 1.4em;
background: #eeeeee; background: #eeeeee;
color: #333333; color: #333333;
} }
#todoapp { #todoapp {
width: 480px; width: 480px;
...@@ -49,18 +49,18 @@ html { ...@@ -49,18 +49,18 @@ html {
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
} }
#todoapp h1 { #todoapp h1 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding: 20px 0 30px 0; padding: 20px 0 30px 0;
line-height: 1; line-height: 1;
} }
#create-todo { #create-todo {
position: relative; position: relative;
} }
#create-todo input { #create-todo input {
width: 466px; width: 466px;
font-size: 24px; font-size: 24px;
font-family: inherit; font-family: inherit;
...@@ -73,46 +73,46 @@ html { ...@@ -73,46 +73,46 @@ html {
-webkit-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;
-o-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; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
} }
#create-todo span { #create-todo span {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
width: 170px; width: 170px;
left: 50%; left: 50%;
margin-left: -85px; margin-left: -85px;
} }
#todo-list { #todo-list {
margin-top: 10px; margin-top: 10px;
} }
#todo-list li { #todo-list li {
padding: 12px 20px 11px 0; padding: 12px 20px 11px 0;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
line-height: 1.1em; line-height: 1.1em;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
#todo-list li:after { #todo-list li:after {
content: "\0020"; content: "\0020";
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
#todo-list li.editing { #todo-list li.editing {
padding: 0; padding: 0;
border-bottom: 0; border-bottom: 0;
} }
#todo-list .editing .display, #todo-list .editing .display,
#todo-list .edit { #todo-list .edit {
display: none; display: none;
} }
#todo-list .editing .edit { #todo-list .editing .edit {
display: block; display: block;
} }
#todo-list .editing input { #todo-list .editing input {
width: 444px; width: 444px;
font-size: 24px; font-size: 24px;
font-family: inherit; font-family: inherit;
...@@ -126,18 +126,18 @@ html { ...@@ -126,18 +126,18 @@ html {
-webkit-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;
-o-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; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
} }
#todo-list .check { #todo-list .check {
position: relative; position: relative;
top: 9px; top: 9px;
margin: 0 10px 0 7px; margin: 0 10px 0 7px;
float: left; float: left;
} }
#todo-list .done .todo-content { #todo-list .done .todo-content {
text-decoration: line-through; text-decoration: line-through;
color: #777777; color: #777777;
} }
#todo-list .todo-destroy { #todo-list .todo-destroy {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 14px; top: 14px;
...@@ -146,47 +146,47 @@ html { ...@@ -146,47 +146,47 @@ html {
width: 20px; width: 20px;
height: 20px; height: 20px;
background: url(destroy.png) no-repeat 0 0; background: url(destroy.png) no-repeat 0 0;
} }
#todo-list li:hover .todo-destroy { #todo-list li:hover .todo-destroy {
display: block; display: block;
} }
#todo-list .todo-destroy:hover { #todo-list .todo-destroy:hover {
background-position: 0 -20px; background-position: 0 -20px;
} }
#todo-stats { #todo-stats {
*zoom: 1; *zoom: 1;
margin-top: 10px; margin-top: 10px;
color: #777777; color: #777777;
} }
#todo-stats:after { #todo-stats:after {
content: "\0020"; content: "\0020";
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
#todo-stats .todo-count { #todo-stats .todo-count {
float: left; float: left;
} }
#todo-stats .todo-count .number { #todo-stats .todo-count .number {
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
#todo-stats .todo-clear { #todo-stats .todo-clear {
float: right; float: right;
} }
#todo-stats .todo-clear a { #todo-stats .todo-clear a {
color: #777777; color: #777777;
font-size: 12px; font-size: 12px;
} }
#todo-stats .todo-clear a:visited { #todo-stats .todo-clear a:visited {
color: #777777; color: #777777;
} }
#todo-stats .todo-clear a:hover { #todo-stats .todo-clear a:hover {
color: #336699; color: #336699;
} }
#instructions { #instructions {
width: 520px; width: 520px;
...@@ -195,9 +195,9 @@ html { ...@@ -195,9 +195,9 @@ html {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center; text-align: center;
} }
#instructions a { #instructions a {
color: #336699; color: #336699;
} }
#credits { #credits {
width: 520px; width: 520px;
...@@ -206,14 +206,14 @@ html { ...@@ -206,14 +206,14 @@ html {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center; text-align: center;
} }
#credits a { #credits a {
color: #888; color: #888;
} }
/* /*
* François 'cahnory' Germain * François 'cahnory' Germain
*/ */
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left { .ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
color:#ffffff; color:#ffffff;
cursor:normal; cursor:normal;
......
todo-example/knockoutjs/css/todos.css
View file @ 7c70864f
...@@ -31,13 +31,13 @@ a img { ...@@ -31,13 +31,13 @@ a img {
html { html {
background: #eeeeee; background: #eeeeee;
} }
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.4em; line-height: 1.4em;
background: #eeeeee; background: #eeeeee;
color: #333333; color: #333333;
} }
#todoapp { #todoapp {
width: 480px; width: 480px;
...@@ -49,18 +49,18 @@ html { ...@@ -49,18 +49,18 @@ html {
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
} }
#todoapp h1 { #todoapp h1 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding: 20px 0 30px 0; padding: 20px 0 30px 0;
line-height: 1; line-height: 1;
} }
#create-todo { #create-todo {
position: relative; position: relative;
} }
#create-todo input { #create-todo input {
width: 466px; width: 466px;
font-size: 24px; font-size: 24px;
font-family: inherit; font-family: inherit;
...@@ -73,48 +73,48 @@ html { ...@@ -73,48 +73,48 @@ html {
-webkit-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;
-o-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; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
} }
#create-todo input::-webkit-input-placeholder { #create-todo input::-webkit-input-placeholder {
font-style: italic; font-style: italic;
} }
#create-todo span { #create-todo span {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
width: 170px; width: 170px;
left: 50%; left: 50%;
margin-left: -85px; margin-left: -85px;
} }
#todo-list { #todo-list {
margin-top: 10px; margin-top: 10px;
} }
#todo-list li { #todo-list li {
padding: 12px 20px 11px 0; padding: 12px 20px 11px 0;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
line-height: 1.1em; line-height: 1.1em;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
#todo-list li:after { #todo-list li:after {
content: "\0020"; content: "\0020";
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
#todo-list li.editing { #todo-list li.editing {
padding: 0; padding: 0;
border-bottom: 0; border-bottom: 0;
} }
#todo-list .editing .display, #todo-list .editing .display,
#todo-list .edit { #todo-list .edit {
display: none; display: none;
} }
#todo-list .editing .edit { #todo-list .editing .edit {
display: block; display: block;
} }
#todo-list .editing input { #todo-list .editing input {
width: 444px; width: 444px;
font-size: 24px; font-size: 24px;
font-family: inherit; font-family: inherit;
...@@ -128,18 +128,18 @@ html { ...@@ -128,18 +128,18 @@ html {
-webkit-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;
-o-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; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
} }
#todo-list .check { #todo-list .check {
position: relative; position: relative;
top: 9px; top: 9px;
margin: 0 10px 0 7px; margin: 0 10px 0 7px;
float: left; float: left;
} }
#todo-list .done .todo-content { #todo-list .done .todo-content {
text-decoration: line-through; text-decoration: line-through;
color: #777777; color: #777777;
} }
#todo-list .todo-destroy { #todo-list .todo-destroy {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 14px; top: 14px;
...@@ -148,47 +148,47 @@ html { ...@@ -148,47 +148,47 @@ html {
width: 20px; width: 20px;
height: 20px; height: 20px;
background: url(destroy.png) no-repeat 0 0; background: url(destroy.png) no-repeat 0 0;
} }
#todo-list li:hover .todo-destroy { #todo-list li:hover .todo-destroy {
display: block; display: block;
} }
#todo-list .todo-destroy:hover { #todo-list .todo-destroy:hover {
background-position: 0 -20px; background-position: 0 -20px;
} }
#todo-stats { #todo-stats {
*zoom: 1; *zoom: 1;
margin-top: 10px; margin-top: 10px;
color: #777777; color: #777777;
} }
#todo-stats:after { #todo-stats:after {
content: "\0020"; content: "\0020";
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
#todo-stats .todo-count { #todo-stats .todo-count {
float: left; float: left;
} }
#todo-stats .todo-count .number { #todo-stats .todo-count .number {
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
#todo-stats .todo-clear { #todo-stats .todo-clear {
float: right; float: right;
} }
#todo-stats .todo-clear a { #todo-stats .todo-clear a {
color: #777777; color: #777777;
font-size: 12px; font-size: 12px;
} }
#todo-stats .todo-clear a:visited { #todo-stats .todo-clear a:visited {
color: #777777; color: #777777;
} }
#todo-stats .todo-clear a:hover { #todo-stats .todo-clear a:hover {
color: #336699; color: #336699;
} }
#instructions { #instructions {
width: 520px; width: 520px;
...@@ -197,9 +197,9 @@ html { ...@@ -197,9 +197,9 @@ html {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center; text-align: center;
} }
#instructions a { #instructions a {
color: #336699; color: #336699;
} }
#credits { #credits {
width: 520px; width: 520px;
...@@ -208,14 +208,14 @@ html { ...@@ -208,14 +208,14 @@ html {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center; text-align: center;
} }
#credits a { #credits a {
color: #888; color: #888;
} }
/* /*
* François 'cahnory' Germain * François 'cahnory' Germain
*/ */
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left { .ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
color:#ffffff; color:#ffffff;
cursor:normal; cursor:normal;
...@@ -309,3 +309,87 @@ html { ...@@ -309,3 +309,87 @@ html {
-khtml-transform:rotate(180deg); -khtml-transform:rotate(180deg);
-webkit-transform:rotate(180deg); -webkit-transform:rotate(180deg);
} }
/* new additions - cleanup required*/
/* line 109 */
#todoapp #todo-stats {
*zoom: 1;
margin-top: 10px;
color: #555555;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-o-border-bottom-left-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 36px;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp #todo-stats:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* line 118 */
#todoapp #todo-stats .todo-count {
float: left;
}
/* line 120 */
#todoapp #todo-stats .todo-count .number {
font-weight: bold;
color: #555555;
}
/* line 123 */
#todoapp #todo-stats .todo-clear {
float: right;
}
/* line 125 */
#todoapp #todo-stats .todo-clear a {
display: block;
line-height: 20px;
text-decoration: none;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
padding: 0 10px 1px;
-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;
-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;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a: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;
-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;
}
/* line 139 */
#todoapp #todo-stats .todo-clear a:active {
position: relative;
top: 1px;
}
todo-example/knockoutjs/index.html
View file @ 7c70864f
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css" /> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.js" type="text/javascript"></script> <script src="js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script> <script src="js/jquery.tmpl.js" type="text/javascript"></script>
<script src="js/knockout-1.2.1.debug.js" type="text/javascript"></script> <script src="js/knockout-1.2.1.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="todoapp"> <div id="todoapp">
...@@ -77,10 +77,18 @@ ...@@ -77,10 +77,18 @@
current: ko.observable(), current: ko.observable(),
add: function (event) { add: function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
var newTodo = new Todo(this.current());
var todoContent = "";
/*includes fix for Opera*/
(viewModel.current() == undefined) ? todoContent = $('#new-todo').val() : todoContent = viewModel.current();
var newTodo = new Todo(todoContent);
this.todos.push(newTodo); this.todos.push(newTodo);
this.current(""); this.current("");
} }
}, },
remove: function (event) { remove: function (event) {
...@@ -92,6 +100,7 @@ ...@@ -92,6 +100,7 @@
} }
}; };
viewModel.remaining = ko.dependentObservable(function () { viewModel.remaining = ko.dependentObservable(function () {
return this.todos().filter(function (el) { return this.todos().filter(function (el) {
return el.done() === false; return el.done() === false;
......
todo-example/knockoutjs/js/knockout-1.2.1.js 0 → 100644
View file @ 7c70864f
This diff is collapsed.
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