| OLD | NEW |
|---|
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 <html lang="en"><head><style>template { display: none; }</style> | 2 <html lang="en"><head><style>template { display: none; }</style> |
| 3 <!-- | 3 <!-- |
| 4 This test runs the TodoMVC app, adds a few todos, marks some as done | 4 This test runs the TodoMVC app, adds a few todos, marks some as done |
| 5 programatically, and clicks on a checkbox to mark others via the UI. | 5 programatically, and clicks on a checkbox to mark others via the UI. |
| 6 --> | 6 --> |
| 7 <meta charset="utf-8"> | 7 <meta charset="utf-8"> |
| 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 9 | 9 |
| 10 <link rel="stylesheet" href="../web/base.css"> | 10 <link rel="stylesheet" href="../web/base.css"> |
| 11 <script src="../../packages/polymer/testing/testing.js"></script> | 11 <script src="../../packages/polymer/testing/testing.js"></script> |
| 12 <title>Dart • TodoMVC</title> | 12 <title>Dart • TodoMVC</title> |
| 13 <link rel="stylesheet" type="text/css" href="todomvc_markdone_test.html.css"><st
yle>template, | 13 <link rel="stylesheet" type="text/css" href="todomvc_markdone_test.html.css"><st
yle>template, |
| 14 thead[template], | 14 thead[template], |
| 15 tbody[template], | 15 tbody[template], |
| 16 tfoot[template], | 16 tfoot[template], |
| 17 th[template], | 17 th[template], |
| 18 tr[template], | 18 tr[template], |
| 19 td[template], | 19 td[template], |
| 20 caption[template], | 20 caption[template], |
| 21 colgroup[template], | 21 colgroup[template], |
| 22 col[template], | 22 col[template], |
| 23 option[template] { | 23 option[template] { |
| 24 display: none; | 24 display: none; |
| 25 }</style></head><body> | 25 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> |
| 26 <span is="todo-app"><shadow-root> <section id="todoapp"> | 26 <template> |
| 27 |
| 28 <div class="todo-row_todo-item"> |
| 29 <input class="todo-row_toggle" type="checkbox" checked="{{todo.done}}"> |
| 30 <div is="editable-label" id="label" value="{{todo.task}}"></div> |
| 31 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 32 </div> |
| 33 </template> |
| 34 |
| 35 </polymer-element> |
| 36 <polymer-element name="todo-app"> |
| 37 <template> |
| 38 <section id="todoapp"> |
| 27 <header id="header"> | 39 <header id="header"> |
| 28 <h1 class="title">todos</h1> | 40 <h1 class="title">todos</h1> |
| 29 <form on-submit="addTodo"> | 41 <form on-submit="addTodo"> |
| 42 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 43 </form> |
| 44 </header> |
| 45 <section id="main"> |
| 46 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| 47 <label for="toggle-all"></label> |
| 48 <ul id="todo-list"> |
| 49 <template repeat="{{app.visibleTodos}}"> |
| 50 <li is="todo-row" todo="{{}}"></li> |
| 51 </template> |
| 52 </ul> |
| 53 </section> |
| 54 <template bind="" if="{{app.hasTodos}}"> |
| 55 <footer id="footer"> |
| 56 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 57 <ul is="router-options" id="filters"> |
| 58 <li> <a href="#/">All</a> </li> |
| 59 <li> <a href="#/active">Active</a> </li> |
| 60 <li> <a href="#/completed">Completed</a> </li> |
| 61 </ul> |
| 62 <template bind="" if="{{app.hasCompleteTodos}}"> |
| 63 <button id="clear-completed" on-click="clear"> |
| 64 Clear completed ({{app.doneCount}}) |
| 65 </button> |
| 66 </template> |
| 67 </footer> |
| 68 </template> |
| 69 </section> |
| 70 <footer id="info"> |
| 71 <p>Double-click to edit a todo.</p> |
| 72 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> |
| 73 <p> |
| 74 Learn more about |
| 75 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 76 or |
| 77 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 78 </p> |
| 79 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 80 </footer> |
| 81 </template> |
| 82 |
| 83 </polymer-element> |
| 84 <polymer-element name="router-options" extends="ul"> |
| 85 <template><content></content></template> |
| 86 |
| 87 </polymer-element> |
| 88 <polymer-element name="editable-label" extends="div" attributes="value"> |
| 89 <template> |
| 90 <template bind="" if="{{notEditing}}"> |
| 91 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 92 </template> |
| 93 <template bind="" if="{{editing}}"> |
| 94 <form on-submit="update"> |
| 95 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 96 </form> |
| 97 </template> |
| 98 </template> |
| 99 |
| 100 </polymer-element> |
| 101 |
| 102 <span is="todo-app"><shadow-root> |
| 103 <section id="todoapp"> |
| 104 <header id="header"> |
| 105 <h1 class="title">todos</h1> |
| 106 <form on-submit="addTodo"> |
| 30 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 107 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 31 </form> | 108 </form> |
| 32 </header> | 109 </header> |
| 33 <section id="main"> | 110 <section id="main"> |
| 34 <input id="toggle-all" type="checkbox"> | 111 <input id="toggle-all" type="checkbox"> |
| 35 <label for="toggle-all"></label> | 112 <label for="toggle-all"></label> |
| 36 <ul id="todo-list"> | 113 <ul id="todo-list"> |
| 37 <template repeat="{{app.visibleTodos}}"> | 114 <template repeat="{{app.visibleTodos}}"> |
| 38 <li is="todo-row" todo="{{}}"></li> | 115 <li is="todo-row" todo="{{}}"></li> |
| 39 </template> | 116 </template> |
| 40 <li is="todo-row" todo="{{}}"><shadow-root> | 117 <li is="todo-row" todo="{{}}"><shadow-root> |
| 118 |
| 41 <div class="todo-row_todo-item"> | 119 <div class="todo-row_todo-item"> |
| 42 <input class="todo-row_toggle" type="checkbox"> | 120 <input class="todo-row_toggle" type="checkbox"> |
| 43 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 121 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 122 <template bind="" if="{{notEditing}}"> |
| 44 <label class="edit-label" on-double-click="edit">{{value}}</label> | 123 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 45 </template> | 124 </template> |
| 46 <label class="edit-label" on-double-click="edit">one (unchecked)</label> | 125 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
| 47 | 126 |
| 48 <template bind="" if="{{editing}}"> | 127 <template bind="" if="{{editing}}"> |
| 49 <form on-submit="update"> | 128 <form on-submit="update"> |
| 50 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 129 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 51 </form> | 130 </form> |
| 52 </template> | 131 </template> |
| 53 </shadow-root></div> | 132 </shadow-root></div> |
| 54 <button class="todo-row_destroy" on-click="removeTodo"></button> | 133 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 55 </div> | 134 </div> |
| 56 </shadow-root></li> | 135 </shadow-root></li> |
| 57 | 136 |
| 58 <li is="todo-row" todo="{{}}"><shadow-root> | 137 <li is="todo-row" todo="{{}}"><shadow-root> |
| 138 |
| 59 <div class="todo-row_todo-item"> | 139 <div class="todo-row_todo-item"> |
| 60 <input class="todo-row_toggle" type="checkbox"> | 140 <input class="todo-row_toggle" type="checkbox"> |
| 61 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 141 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 142 <template bind="" if="{{notEditing}}"> |
| 62 <label class="edit-label" on-double-click="edit">{{value}}</label> | 143 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 63 </template> | 144 </template> |
| 64 <label class="edit-label" on-double-click="edit">two (unchecked)</label> | 145 <label class="edit-label" on-double-click="edit">two (unchecked)</label> |
| 65 | 146 |
| 66 <template bind="" if="{{editing}}"> | 147 <template bind="" if="{{editing}}"> |
| 67 <form on-submit="update"> | 148 <form on-submit="update"> |
| 68 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 149 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 69 </form> | 150 </form> |
| 70 </template> | 151 </template> |
| 71 </shadow-root></div> | 152 </shadow-root></div> |
| 72 <button class="todo-row_destroy" on-click="removeTodo"></button> | 153 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 73 </div> | 154 </div> |
| 74 </shadow-root></li> | 155 </shadow-root></li> |
| 75 | 156 |
| 76 <li is="todo-row" todo="{{}}"><shadow-root> | 157 <li is="todo-row" todo="{{}}"><shadow-root> |
| 158 |
| 77 <div class="todo-row_todo-item todo-row_completed"> | 159 <div class="todo-row_todo-item todo-row_completed"> |
| 78 <input class="todo-row_toggle" type="checkbox"> | 160 <input class="todo-row_toggle" type="checkbox"> |
| 79 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 161 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 162 <template bind="" if="{{notEditing}}"> |
| 80 <label class="edit-label" on-double-click="edit">{{value}}</label> | 163 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 81 </template> | 164 </template> |
| 82 <label class="edit-label" on-double-click="edit">three (checked)</label> | 165 <label class="edit-label" on-double-click="edit">three (checked)</label> |
| 83 | 166 |
| 84 <template bind="" if="{{editing}}"> | 167 <template bind="" if="{{editing}}"> |
| 85 <form on-submit="update"> | 168 <form on-submit="update"> |
| 86 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 169 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 87 </form> | 170 </form> |
| 88 </template> | 171 </template> |
| 89 </shadow-root></div> | 172 </shadow-root></div> |
| 90 <button class="todo-row_destroy" on-click="removeTodo"></button> | 173 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 91 </div> | 174 </div> |
| 92 </shadow-root></li> | 175 </shadow-root></li> |
| 93 | 176 |
| 94 <li is="todo-row" todo="{{}}"><shadow-root> | 177 <li is="todo-row" todo="{{}}"><shadow-root> |
| 178 |
| 95 <div class="todo-row_todo-item todo-row_completed"> | 179 <div class="todo-row_todo-item todo-row_completed"> |
| 96 <input class="todo-row_toggle" type="checkbox"> | 180 <input class="todo-row_toggle" type="checkbox"> |
| 97 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root>
<template bind="" if="{{notEditing}}"> | 181 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 182 <template bind="" if="{{notEditing}}"> |
| 98 <label class="edit-label" on-double-click="edit">{{value}}</label> | 183 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 99 </template> | 184 </template> |
| 100 <label class="edit-label" on-double-click="edit">four (checked)</label> | 185 <label class="edit-label" on-double-click="edit">four (checked)</label> |
| 101 | 186 |
| 102 <template bind="" if="{{editing}}"> | 187 <template bind="" if="{{editing}}"> |
| 103 <form on-submit="update"> | 188 <form on-submit="update"> |
| 104 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 189 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 105 </form> | 190 </form> |
| 106 </template> | 191 </template> |
| 107 </shadow-root></div> | 192 </shadow-root></div> |
| 108 <button class="todo-row_destroy" on-click="removeTodo"></button> | 193 <button class="todo-row_destroy" on-click="removeTodo"></button> |
| 109 </div> | 194 </div> |
| 110 </shadow-root></li> | 195 </shadow-root></li> |
| 111 | 196 |
| 112 </ul> | 197 </ul> |
| 113 </section> | 198 </section> |
| 114 <template bind="" if="{{app.hasTodos}}"> | 199 <template bind="" if="{{app.hasTodos}}"> |
| 115 <footer id="footer"> | 200 <footer id="footer"> |
| 116 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | 201 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 117 <ul is="router-options" id="filters"> | 202 <ul is="router-options" id="filters"> |
| 118 <li> <a href="#/">All</a> </li> | 203 <li> <a href="#/">All</a> </li> |
| 119 <li> <a href="#/active">Active</a> </li> | 204 <li> <a href="#/active">Active</a> </li> |
| 120 <li> <a href="#/completed">Completed</a> </li> | 205 <li> <a href="#/completed">Completed</a> </li> |
| 121 </ul> | 206 </ul> |
| (...skipping 29 matching lines...) Expand all Loading... |
| 151 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 236 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 152 </p> | 237 </p> |
| 153 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 238 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 154 </footer> | 239 </footer> |
| 155 </shadow-root></span> | 240 </shadow-root></span> |
| 156 | 241 |
| 157 | 242 |
| 158 | 243 |
| 159 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 244 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
| 160 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart">
</script></body></html> | 245 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart">
</script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 19497002:
Reducing the amount of code we generate in the compiler: We still continue (Closed)
Base URL: git@github.com:dart-lang/web-ui.git@master