Implement Model-Driven-Views spec for Dart

tools/dom/templates/html/impl/impl_Element.darttemplate

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of $LIBRARYNAME;
 
 class _ChildrenElementList extends ListBase<Element> {
   // Raw Element.
   final Element _element;
   final HtmlCollection _childElements;
@@ skipping 604 matching lines @@
     } else if (JS('bool', '!!#.mozMatchesSelector', this)) {
       return JS('bool', '#.mozMatchesSelector(#)', this, selectors);
     } else if (JS('bool', '!!#.msMatchesSelector', this)) {
       return JS('bool', '#.msMatchesSelector(#)', this, selectors);
     }
     throw new UnsupportedError("Not supported on this platform");
   }
 $else
 $endif
 
+  Map<String, _Binding> _attributeBindings;

[blois, 2013/05/01 17:00:42]

I believe that you want the @Creates('Null') on every field you add to a native
class, otherwise the JS compiler thinks that the types may be able to be
instantiated.

[Jennifer Messerly, 2013/05/02 02:58:33]

Done. Are statics okay? (_instanceCreated)

also: holy verbosity batman! it adds 3 lines per field because of the ifdef.
It's not going to scale very well if we do more of these polyfills.

+
+  // TODO(jmesserly): I'm concerned about adding these to every element.
+  // Conceptually all of these belong on TemplateElement. They are here to
+  // support browsers that don't have <template> yet.
+  // However even in the polyfill they're restricted to certain tags
+  // (see [isTemplate]). So we can probably convert it to a (public) mixin, and
+  // only mix it in to the elements that need it.

[blois, 2013/05/01 17:00:42]

Once we have element subclassing, can we have a TemplateElement interface and an
Element subclass which implements it?

Could they be on TemplateElement and UnknownElement in the meantime?

[Jennifer Messerly, 2013/05/02 02:58:33]

yeah we could have a mixin:

class TemplateMixin {
  ... template stuff ...
}

class UnknownElement with TemplateMixin ... { ... }
class TemplateElement with TemplateMixin ... { ... }
...
It's also all of the table elements and OptionElement :|

+$if DART2JS
+  @Creates('Null')
+$endif
+  var _model;
+
+  _TemplateIterator _templateIterator;
+
+  Element _templateInstanceRef;
+
+  // Note: only used if `this is! TemplateElement`
+  DocumentFragment _templateContent;
+
+  bool _templateIsDecorated;
+
+  // TODO(jmesserly): should path be optional, and default to empty path?
+  // It is used that way in at least one path in JS TemplateElement tests
+  // (see "BindImperative" test in original JS code).
+  @Experimental
+  void bind(String name, model, String path) {
+    if (_bindTemplate(name, model, path)) return;
+
+    if (_attributeBindings == null) {
+      _attributeBindings = new Map<String, _Binding>();
+    }
+
+    attributes.remove(name);
+
+    _ChangeHandler changed;
+    if (name.endsWith('?')) {
+      name = name.substring(0, name.length - 1);
+
+      changed = (value) {
+        if (_templateBooleanConversion(value)) {
+          attributes[name] = '';
+        } else {
+          attributes.remove(name);
+        }
+      };
+    } else {
+      changed = (value) {
+        // TODO(jmesserly): escape value if needed to protect against XSS.
+        attributes[name] = value == null ? '' : '$value';
+      };
+    }
+
+    unbind(name);
+
+    _attributeBindings[name] = new _Binding(model, path, changed);
+  }
+
+  @Experimental
+  void unbind(String name) {
+    if (_unbindTemplate(name)) return;
+    if (_attributeBindings != null) {
+      var binding = _attributeBindings.remove(name);
+      if (binding != null) binding.dispose();
+    }
+  }
+
+  @Experimental
+  void unbindAll() {
+    _unbindAllTemplate();
+
+    if (_attributeBindings != null) {
+      for (var binding in _attributeBindings.values) {
+        binding.dispose();
+      }
+      _attributeBindings = null;
+      super.unbindAll();
+    }
+  }
+
+  // TODO(jmesserly): unlike the JS polyfill, we can't mixin
+  // HTMLTemplateElement at runtime into things that are semantically template
+  // elements. So instead we implement it here with a runtime check.
+  // If the bind succeeds, we return true, otherwise we return false and let
+  // the normal Element.bind logic kick in.
+  bool _bindTemplate(String name, model, String path) {
+    if (isTemplate) {
+      switch (name) {
+        case 'bind':
+        case 'repeat':
+        case 'if':
+          _ensureTemplate();
+          if (_templateIterator == null) {
+            _templateIterator = new _TemplateIterator(this);
+          }
+          _templateIterator.inputs.bind(name, model, path);
+          return true;
+      }
+    }
+    return false;
+  }
+
+  bool _unbindTemplate(String name) {
+    if (isTemplate) {
+      switch (name) {
+        case 'bind':
+        case 'repeat':
+        case 'if':
+          _ensureTemplate();
+          if (_templateIterator != null) {
+            _templateIterator.inputs.unbind(name);
+          }
+          return true;
+      }
+    }
+    return false;
+  }
+
+  void _unbindAllTemplate() {
+    if (isTemplate) {
+      unbind('bind');
+      unbind('repeat');
+      unbind('if');
+    }
+  }
+
+  /**
+   * Gets the template this node refers to.
+   * This is only supported if [isTemplate] is true.
+   */
+  @Experimental
+  Element get ref {
+    _ensureTemplate();
+
+    Element ref = null;
+    var refId = attributes['ref'];
+    if (refId != null) {
+      ref = document.getElementById(refId);
+    }
+
+    return ref != null ? ref : _templateInstanceRef;
+  }
+
+  /**
+   * Gets the content of this template.
+   * This is only supported if [isTemplate] is true.
+   */
+  @Experimental
+  DocumentFragment get content {
+    _ensureTemplate();
+    return _templateContent;
+  }
+
+  /**
+   * Creates an instance of the template.
+   * This is only supported if [isTemplate] is true.
+   */
+  @Experimental
+  DocumentFragment createInstance() {
+    _ensureTemplate();
+
+    var template = ref;
+    if (template == null) template = this;
+
+    var instance = _createDeepCloneAndDecorateTemplates(template.content,
+        attributes['syntax']);
+
+    if (TemplateElement._instanceCreated != null) {
+      TemplateElement._instanceCreated.add(instance);
+    }
+    return instance;
+  }
+
+  /**
+   * The data model which is inherited through the tree.
+   * This is only supported if [isTemplate] is true.
+   *
+   * Setting this will destructive propagate the value to all descendant nodes,
+   * and reinstantiate all of the nodes expanded by this template.
+   *
+   * Currently this does not support propagation through Shadow DOMs.
+   */
+  @Experimental
+  get model => _model;
+
+  @Experimental
+  void set model(value) {
+    _ensureTemplate();
+
+    _model = value;
+    _addBindings(this, model);
+  }
+
+  // TODO(jmesserly): const set would be better
+  static const _TABLE_TAGS = const {
+    'caption': null,
+    'col': null,
+    'colgroup': null,
+    'tbody': null,
+    'td': null,
+    'tfoot': null,
+    'th': null,
+    'thead': null,
+    'tr': null,
+  };
+
+  bool get _isAttributeTemplate => attributes.containsKey('template') &&
+      (localName == 'option' || _TABLE_TAGS.containsKey(localName));
+
+  /**
+   * Returns true if this node is a template.
+   *
+   * A node is a template if [tagName] is TEMPLATE, or the node has the
+   * 'template' attribute and this tag supports attribute form for backwards
+   * compatibility with existing HTML parsers. The nodes that can use attribute
+   * form are table elments (THEAD, TBODY, TFOOT, TH, TR, TD, CAPTION, COLGROUP
+   * and COL) and OPTION.
+   */
+  // TODO(jmesserly): this is not a public MDV API, but it seems like a useful
+  // place to document which tags our polyfill considers to be templates.
+  // Otherwise I'd be repeating it in several other places.
+  // See if we can replace this with a TemplateMixin.
+  @Experimental
+  bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
+
+  void _ensureTemplate() {
+    if (!isTemplate) {
+      throw new UnsupportedError('$this is not a template.');
+    }
+    TemplateElement.decorate(this);
+  }
+
 $!MEMBERS
 }
 
+
 final _START_TAG_REGEXP = new RegExp('<(\\w+)');
 class _ElementFactoryProvider {
   static const _CUSTOM_PARENT_TAG_MAP = const {
     'body' : 'html',
     'head' : 'html',
     'caption' : 'table',
     'td': 'tr',
     'th': 'tr',
     'colgroup': 'table',
     'col' : 'colgroup',
     'tr' : 'tbody',
     'tbody' : 'table',
     'tfoot' : 'table',
     'thead' : 'table',
     'track' : 'audio',
   };
 
-  // TODO(jmesserly): const set would be better
-  static const _TABLE_TAGS = const {
-    'caption': null,
-    'col': null,
-    'colgroup': null,
-    'tbody': null,
-    'td': null,
-    'tfoot': null,
-    'th': null,
-    'thead': null,
-    'tr': null,
-  };
-
   @DomName('Document.createElement')
   static Element createElement_html(String html) {
     // TODO(jacobr): this method can be made more robust and performant.
     // 1) Cache the dummy parent elements required to use innerHTML rather than
     //    creating them every call.
     // 2) Verify that the html does not contain leading or trailing text nodes.
     // 3) Verify that the html does not contain both <head> and <body> tags.
     // 4) Detatch the created element from its dummy parent.
     String parentTag = 'div';
     String tag;
     final match = _START_TAG_REGEXP.firstMatch(html);
     if (match != null) {
       tag = match.group(1).toLowerCase();
-      if (Device.isIE && _TABLE_TAGS.containsKey(tag)) {
+      if (Device.isIE && Element._TABLE_TAGS.containsKey(tag)) {
         return _createTableForIE(html, tag);
       }
       parentTag = _CUSTOM_PARENT_TAG_MAP[tag];
       if (parentTag == null) parentTag = 'div';
     }
 
     final temp = new Element.tag(parentTag);
     temp.innerHtml = html;
 
     Element element;
@@ skipping 92 matching lines @@
   const ScrollAlignment._internal(this._value);
   toString() => 'ScrollAlignment.$_value';
 
   /// Attempt to align the element to the top of the scrollable area.
   static const TOP = const ScrollAlignment._internal('TOP');
   /// Attempt to center the element in the scrollable area.
   static const CENTER = const ScrollAlignment._internal('CENTER');
   /// Attempt to align the element to the bottom of the scrollable area.
   static const BOTTOM = const ScrollAlignment._internal('BOTTOM');
 }