OLD | NEW |
1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 #import('dart:html'); | 5 #import('dart:html'); |
6 | 6 |
7 // Utility functions: | 7 // Utility functions: |
8 String safeHTML(String value) { | 8 String safeHTML(String value) { |
9 // TODO(terry): TBD | 9 // TODO(terry): TBD |
10 return value; | 10 return value; |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
53 | 53 |
54 FriendList(List<Friend> friends) { | 54 FriendList(List<Friend> friends) { |
55 _fragment = new Element.tag('div'); | 55 _fragment = new Element.tag('div'); |
56 Element e0 = new Element.html('<div>Friends:</div>'); | 56 Element e0 = new Element.html('<div>Friends:</div>'); |
57 _fragment.elements.add(e0); | 57 _fragment.elements.add(e0); |
58 Element e0_0 = new Element.html('<ul></ul>'); // Node before #each | 58 Element e0_0 = new Element.html('<ul></ul>'); // Node before #each |
59 e0.elements.add(e0_0); | 59 e0.elements.add(e0_0); |
60 each_0(friends, e0_0); | 60 each_0(friends, e0_0); |
61 } | 61 } |
62 | 62 |
63 Element get root() => _fragment.nodes.first; | 63 Element get root => _fragment.nodes.first; |
64 | 64 |
65 String toString(){ | 65 String toString(){ |
66 return _fragment.innerHTML; | 66 return _fragment.innerHTML; |
67 } | 67 } |
68 } | 68 } |
69 | 69 |
70 | 70 |
71 /* More template control: | 71 /* More template control: |
72 ====================== | 72 ====================== |
73 | 73 |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
124 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.w
orkCircle}'); | 124 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.w
orkCircle}'); |
125 } | 125 } |
126 | 126 |
127 FriendEntry(Friend friend) { | 127 FriendEntry(Friend friend) { |
128 _fragment = new Element.tag('div'); | 128 _fragment = new Element.tag('div'); |
129 Element e0 = new Element.html('<li></li>'); // Node before #with | 129 Element e0 = new Element.html('<li></li>'); // Node before #with |
130 _fragment.elements.add(e0); | 130 _fragment.elements.add(e0); |
131 with_0(friend, e0); | 131 with_0(friend, e0); |
132 } | 132 } |
133 | 133 |
134 Element get root() => _fragment.nodes.first; | 134 Element get root => _fragment.nodes.first; |
135 | 135 |
136 String toString(){ | 136 String toString(){ |
137 return _fragment.innerHTML; | 137 return _fragment.innerHTML; |
138 } | 138 } |
139 } | 139 } |
140 | 140 |
141 | 141 |
142 /* Template with events: | 142 /* Template with events: |
143 ===================== | 143 ===================== |
144 | 144 |
145 template HTML FriendEntryEvents(Friend friend) { | 145 template HTML FriendEntryEvents(Friend friend) { |
146 <li> | 146 <li> |
147 ${#with friend} | 147 ${#with friend} |
148 <span var=friendElem style="cursor: pointer;">${name}</span> | 148 <span var=friendElem style="cursor: pointer;">${name}</span> |
149 ${#if (age < 18)} | 149 ${#if (age < 18)} |
150 <span class=”left-space”>child</span> | 150 <span class=”left-space”>child</span> |
151 ${#else} | 151 ${#else} |
152 <span class=”left-space”>adult</span> | 152 <span class=”left-space”>adult</span> |
153 ${/if} | 153 ${/if} |
154 <span class=”left-space”>circles = ${friendCircle + familyCircle + workCi
rcle}</span> | 154 <span class=”left-space”>circles = ${friendCircle + familyCircle + workCi
rcle}</span> |
155 ${/friend} | 155 ${/friend} |
156 </li> | 156 </li> |
157 } | 157 } |
158 */ | 158 */ |
159 class FriendEntryEvents /*extends Template*/ { | 159 class FriendEntryEvents /*extends Template*/ { |
160 Element _fragment; | 160 Element _fragment; |
161 var _friendElem; | 161 var _friendElem; |
162 | 162 |
163 get friendElem() => _friendElem; | 163 get friendElem => _friendElem; |
164 | 164 |
165 // ${#with friend} | 165 // ${#with friend} |
166 with_0(Friend item, Element parent) { | 166 with_0(Friend item, Element parent) { |
167 _friendElem = new Element.html('<span style="cursor: pointer;"></span>'); /
/ Node before injection | 167 _friendElem = new Element.html('<span style="cursor: pointer;"></span>'); /
/ Node before injection |
168 _friendElem.innerHTML = inject_0(item); | 168 _friendElem.innerHTML = inject_0(item); |
169 parent.elements.add(_friendElem); | 169 parent.elements.add(_friendElem); |
170 | 170 |
171 // ${#if expression} | 171 // ${#if expression} |
172 if (if_0(item)) { | 172 if (if_0(item)) { |
173 var e1 = new Element.html('<span class="left-space">child</span>'); | 173 var e1 = new Element.html('<span class="left-space">child</span>'); |
(...skipping 24 matching lines...) Expand all Loading... |
198 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.wo
rkCircle}'); | 198 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.wo
rkCircle}'); |
199 } | 199 } |
200 | 200 |
201 FriendEntryEvents(Friend friend) { | 201 FriendEntryEvents(Friend friend) { |
202 _fragment = new Element.tag('div'); | 202 _fragment = new Element.tag('div'); |
203 Element e0 = new Element.html('<li></li>'); // Node before #with | 203 Element e0 = new Element.html('<li></li>'); // Node before #with |
204 _fragment.elements.add(e0); | 204 _fragment.elements.add(e0); |
205 with_0(friend, e0); | 205 with_0(friend, e0); |
206 } | 206 } |
207 | 207 |
208 Element get root() => _fragment.nodes.first; | 208 Element get root => _fragment.nodes.first; |
209 | 209 |
210 String toString(){ | 210 String toString(){ |
211 return _fragment.innerHTML; | 211 return _fragment.innerHTML; |
212 } | 212 } |
213 } | 213 } |
214 | 214 |
215 | 215 |
216 void main() { | 216 void main() { |
217 // Setup style sheet for page. | 217 // Setup style sheet for page. |
218 document.head.elements.add(new Element.html('<style>.left-space { margin-left:
10px; }</style>')); | 218 document.head.elements.add(new Element.html('<style>.left-space { margin-left:
10px; }</style>')); |
(...skipping 15 matching lines...) Expand all Loading... |
234 document.body.elements.add(clickableFriend.root); | 234 document.body.elements.add(clickableFriend.root); |
235 clickableFriend.friendElem.on.click.add((e) { | 235 clickableFriend.friendElem.on.click.add((e) { |
236 var elemStyle = e.srcElement.style; | 236 var elemStyle = e.srcElement.style; |
237 String toggleColor = elemStyle.getPropertyValue("background-color") == "red"
? "white" : "red"; | 237 String toggleColor = elemStyle.getPropertyValue("background-color") == "red"
? "white" : "red"; |
238 elemStyle.setProperty("background-color", "${toggleColor}"); | 238 elemStyle.setProperty("background-color", "${toggleColor}"); |
239 }); | 239 }); |
240 | 240 |
241 // Calling template inside of a template: | 241 // Calling template inside of a template: |
242 // document.body.elements.add(new Templates(friends).root); | 242 // document.body.elements.add(new Templates(friends).root); |
243 } | 243 } |
OLD | NEW |