Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(151)

Side by Side Diff: tools/dom/templates/html/impl/impl_HTMLTemplateElement.darttemplate

Issue 17552019: Reorganize mdv and observe packages (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: tests passing Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file 1 // Copyright (c) 2012, 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 // WARNING: Do not edit - generated code. 5 // WARNING: Do not edit - generated code.
6 6
7 part of $LIBRARYNAME; 7 part of $LIBRARYNAME;
8 8
9
10 /**
11 * Model-Driven Views (MDV)'s native features enables a wide-range of use cases,
12 * but (by design) don't attempt to implement a wide array of specialized
13 * behaviors.
14 *
15 * Enabling these features in MDV is a matter of implementing and registering an
16 * MDV Custom Syntax. A Custom Syntax is an object which contains one or more
17 * delegation functions which implement specialized behavior. This object is
18 * registered with MDV via [TemplateElement.syntax]:
19 *
20 *
21 * HTML:
22 * <template bind syntax="MySyntax">
23 * {{ What!Ever('crazy')->thing^^^I+Want(data) }}
24 * </template>
25 *
26 * Dart:
27 * class MySyntax extends CustomBindingSyntax {
28 * getBinding(model, path, name, node) {
29 * // The magic happens here!
30 * }
31 * }
32 *
33 * ...
34 *
35 * TemplateElement.syntax['MySyntax'] = new MySyntax();
36 *
37 * See <https://github.com/polymer-project/mdv/blob/master/docs/syntax.md> for
38 * more information about Custom Syntax.
39 */
40 // TODO(jmesserly): if this is just one method, a function type would make it
41 // more Dart-friendly.
42 @Experimental
43 abstract class CustomBindingSyntax {
44 /**
45 * This syntax method allows for a custom interpretation of the contents of
46 * mustaches (`{{` ... `}}`).
47 *
48 * When a template is inserting an instance, it will invoke this method for
49 * each mustache which is encountered. The function is invoked with four
50 * arguments:
51 *
52 * - [model]: The data context for which this instance is being created.
53 * - [path]: The text contents (trimmed of outer whitespace) of the mustache.
54 * - [name]: The context in which the mustache occurs. Within element
55 * attributes, this will be the name of the attribute. Within text,
56 * this will be 'text'.
57 * - [node]: A reference to the node to which this binding will be created.
58 *
59 * If the method wishes to handle binding, it is required to return an object
60 * which has at least a `value` property that can be observed. If it does,
61 * then MDV will call [Node.bind on the node:
62 *
63 * node.bind(name, retval, 'value');
64 *
65 * If the 'getBinding' does not wish to override the binding, it should return
66 * null.
67 */
68 // TODO(jmesserly): I had to remove type annotations from "name" and "node"
69 // Normally they are String and Node respectively. But sometimes it will pass
70 // (int name, CompoundBinding node). That seems very confusing; we may want
71 // to change this API.
72 getBinding(model, String path, name, node) => null;
73
74 /**
75 * This syntax method allows a syntax to provide an alterate model than the
76 * one the template would otherwise use when producing an instance.
77 *
78 * When a template is about to create an instance, it will invoke this method
79 * The function is invoked with two arguments:
80 *
81 * - [template]: The template element which is about to create and insert an
82 * instance.
83 * - [model]: The data context for which this instance is being created.
84 *
85 * The template element will always use the return value of `getInstanceModel`
86 * as the model for the new instance. If the syntax does not wish to override
87 * the value, it should simply return the `model` value it was passed.
88 */
89 getInstanceModel(Element template, model) => model;
90
91 /**
92 * This syntax method allows a syntax to provide an alterate expansion of
93 * the [template] contents. When the template wants to create an instance,
94 * it will call this method with the template element.
95 *
96 * By default this will call `template.createInstance()`.
97 */
98 getInstanceFragment(Element template) => template.createInstance();
99 }
100
101
9 @Experimental 102 @Experimental
10 $(ANNOTATIONS)class $CLASSNAME$EXTENDS$IMPLEMENTS$NATIVESPEC { 103 $(ANNOTATIONS)class $CLASSNAME$EXTENDS$IMPLEMENTS$NATIVESPEC {
11 $!MEMBERS 104 $!MEMBERS
12 105
13 // For real TemplateElement use the actual DOM .content field instead of 106 // For real TemplateElement use the actual DOM .content field instead of
14 // our polyfilled expando. 107 // our polyfilled expando.
15 @Experimental 108 @Experimental
16 DocumentFragment get content => $dom_content; 109 DocumentFragment get content => $dom_content;
17 110
18 static StreamController<DocumentFragment> _instanceCreated;
19
20 /**
21 * *Warning*: This is an implementation helper for Model-Driven Views and
22 * should not be used in your code.
23 *
24 * This event is fired whenever a template is instantiated via
25 * [createInstance].
26 */
27 // TODO(rafaelw): This is a hack, and is neccesary for the polyfill
28 // because custom elements are not upgraded during clone()
29 @Experimental
30 static Stream<DocumentFragment> get instanceCreated {
31 if (_instanceCreated == null) {
32 _instanceCreated = new StreamController<DocumentFragment>(sync: true);
33 }
34 return _instanceCreated.stream;
35 }
36
37 /** 111 /**
38 * Ensures proper API and content model for template elements. 112 * Ensures proper API and content model for template elements.
39 * 113 *
40 * [instanceRef] can be used to set the [Element.ref] property of [template], 114 * [instanceRef] can be used to set the [Element.ref] property of [template],
41 * and use the ref's content will be used as source when createInstance() is 115 * and use the ref's content will be used as source when createInstance() is
42 * invoked. 116 * invoked.
43 * 117 *
44 * Returns true if this template was just decorated, or false if it was 118 * Returns true if this template was just decorated, or false if it was
45 * already decorated. 119 * already decorated.
46 */ 120 */
47 @Experimental 121 @Experimental
48 static bool decorate(Element template, [Element instanceRef]) { 122 static bool decorate(Element template, [Element instanceRef]) {
49 // == true check because it starts as a null field. 123 // == true check because it starts as a null field.
50 if (template._templateIsDecorated == true) return false; 124 if (template._templateIsDecorated == true) return false;
51 125
52 template._templateIsDecorated = true; 126 template._templateIsDecorated = true;
53 127
54 _injectStylesheet(); 128 _injectStylesheet();
55 129
56 // Create content 130 // Create content
57 if (template is! TemplateElement) { 131 if (template is! TemplateElement) {
58 var doc = _Bindings._getTemplateContentsOwner(template.document); 132 var doc = _getTemplateContentsOwner(template.document);
59 template._templateContent = doc.createDocumentFragment(); 133 template._templateContent = doc.createDocumentFragment();
60 } 134 }
61 135
62 if (instanceRef != null) { 136 if (instanceRef != null) {
63 template._templateInstanceRef = instanceRef; 137 template._templateInstanceRef = instanceRef;
64 return true; // content is empty. 138 return true; // content is empty.
65 } 139 }
66 140
67 if (template is TemplateElement) { 141 if (template is TemplateElement) {
68 bootstrap(template.content); 142 bootstrap(template.content);
69 } else { 143 } else {
70 _Bindings._liftNonNativeChildrenIntoContent(template); 144 _liftNonNativeChildrenIntoContent(template);
71 } 145 }
72 146
73 return true; 147 return true;
74 } 148 }
75 149
150 // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html# dfn-template-contents-owner
151 static Document _getTemplateContentsOwner(HtmlDocument doc) {
152 if (doc.window == null) {
153 return doc;
154 }
155 var d = doc._templateContentsOwner;
156 if (d == null) {
157 // TODO(arv): This should either be a Document or HTMLDocument depending
158 // on doc.
159 d = doc.implementation.createHtmlDocument('');
160 while (d.$dom_lastChild != null) {
161 d.$dom_lastChild.remove();
162 }
163 doc._templateContentsOwner = d;
164 }
165 return d;
166 }
167
168 static Element _cloneAndSeperateAttributeTemplate(Element templateElement) {
169 var clone = templateElement.clone(false);
170 var attributes = templateElement.attributes;
171 for (var name in attributes.keys.toList()) {
172 switch (name) {
173 case 'template':
174 case 'repeat':
175 case 'bind':
176 case 'ref':
177 clone.attributes.remove(name);
178 break;
179 default:
180 attributes.remove(name);
181 break;
182 }
183 }
184
185 return clone;
186 }
187
188 static void _liftNonNativeChildrenIntoContent(Element templateElement) {
189 var content = templateElement.content;
190
191 if (!templateElement._isAttributeTemplate) {
192 var child;
193 while ((child = templateElement.$dom_firstChild) != null) {
194 content.append(child);
195 }
196 return;
197 }
198
199 // For attribute templates we copy the whole thing into the content and
200 // we move the non template attributes into the content.
201 //
202 // <tr foo template>
203 //
204 // becomes
205 //
206 // <tr template>
207 // + #document-fragment
208 // + <tr foo>
209 //
210 var newRoot = _cloneAndSeperateAttributeTemplate(templateElement);
211 var child;
212 while ((child = templateElement.$dom_firstChild) != null) {
213 newRoot.append(child);
214 }
215 content.append(newRoot);
216 }
217
76 /** 218 /**
77 * This used to decorate recursively all templates from a given node. 219 * This used to decorate recursively all templates from a given node.
78 * 220 *
79 * By default [decorate] will be called on templates lazily when certain 221 * By default [decorate] will be called on templates lazily when certain
80 * properties such as [model] are accessed, but it can be run eagerly to 222 * properties such as [model] are accessed, but it can be run eagerly to
81 * decorate an entire tree recursively. 223 * decorate an entire tree recursively.
82 */ 224 */
83 // TODO(rafaelw): Review whether this is the right public API. 225 // TODO(rafaelw): Review whether this is the right public API.
84 @Experimental 226 @Experimental
85 static void bootstrap(Node content) { 227 static void bootstrap(Node content) {
86 _Bindings._bootstrapTemplatesRecursivelyFrom(content); 228 void _bootstrap(template) {
229 if (!TemplateElement.decorate(template)) {
230 bootstrap(template.content);
231 }
232 }
233
234 // Need to do this first as the contents may get lifted if |node| is
235 // template.
236 // TODO(jmesserly): content is DocumentFragment or Element
237 var descendents = (content as dynamic).queryAll(_allTemplatesSelectors);
238 if (content is Element && (content as Element).isTemplate) {
239 _bootstrap(content);
240 }
241
242 descendents.forEach(_bootstrap);
87 } 243 }
88 244
89 /** 245 static final String _allTemplatesSelectors = 'template, option[template], ' +
90 * Binds all mustaches recursively starting from the [root] node. 246 Element._TABLE_TAGS.keys.map((k) => "$k[template]").join(", ");
91 *
92 * Note: this is not an official Model-Driven-Views API; it is intended to
93 * support binding the [ShadowRoot]'s content to a model.
94 */
95 // TODO(jmesserly): this is needed to avoid two <template> nodes when using
96 // bindings in a custom element's template. See also:
97 // https://github.com/polymer-project/polymer/blob/master/src/bindMDV.js#L68
98 // Called from:
99 // https://github.com/polymer-project/polymer/blob/master/src/register.js#L99
100 @Experimental
101 static void bindModel(Node root, model, [CustomBindingSyntax syntax]) {
102 _Bindings._addBindings(root, model, syntax);
103 }
104 247
105 static bool _initStyles; 248 static bool _initStyles;
106 249
107 static void _injectStylesheet() { 250 static void _injectStylesheet() {
108 if (_initStyles == true) return; 251 if (_initStyles == true) return;
109 _initStyles = true; 252 _initStyles = true;
110 253
111 var style = new StyleElement(); 254 var style = new StyleElement();
112 style.text = r''' 255 style.text = r'''
113 template, 256 template,
(...skipping 12 matching lines...) Expand all
126 document.head.append(style); 269 document.head.append(style);
127 } 270 }
128 271
129 /** 272 /**
130 * A mapping of names to Custom Syntax objects. See [CustomBindingSyntax] for 273 * A mapping of names to Custom Syntax objects. See [CustomBindingSyntax] for
131 * more information. 274 * more information.
132 */ 275 */
133 @Experimental 276 @Experimental
134 static Map<String, CustomBindingSyntax> syntax = {}; 277 static Map<String, CustomBindingSyntax> syntax = {};
135 } 278 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698