| OLD | NEW |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2013, 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 library polymer.polymer_element; | 5 library polymer.polymer_element; |
| 6 | 6 |
| 7 import 'dart:async'; | 7 import 'dart:async'; |
| 8 import 'dart:html'; | 8 import 'dart:html'; |
| 9 import 'dart:mirrors'; | 9 import 'dart:mirrors'; |
| 10 | 10 |
| 11 import 'package:custom_element/custom_element.dart'; | 11 import 'package:custom_element/custom_element.dart'; |
| 12 import 'package:mdv/mdv.dart' as mdv; | 12 import 'package:fancy_syntax/syntax.dart' show FancySyntax; |
| 13 import 'package:mdv/mdv.dart' show NodeBinding; |
| 13 import 'package:observe/observe.dart'; | 14 import 'package:observe/observe.dart'; |
| 15 import 'package:observe/src/microtask.dart'; |
| 14 | 16 |
| 15 import 'observe.dart'; | 17 import 'observe.dart'; |
| 16 import 'src/utils_observe.dart' show toCamelCase, toHyphenedName; | 18 import 'src/utils_observe.dart' show toCamelCase, toHyphenedName; |
| 17 | 19 |
| 18 /** | 20 /** |
| 19 * Registers a [PolymerElement]. This is similar to [registerCustomElement] | 21 * Registers a [PolymerElement]. This is similar to [registerCustomElement] |
| 20 * but it is designed to work with the `<element>` element and adds additional | 22 * but it is designed to work with the `<element>` element and adds additional |
| 21 * features. | 23 * features. |
| 22 */ | 24 */ |
| 23 void registerPolymerElement(String localName, PolymerElement create()) { | 25 void registerPolymerElement(String localName, PolymerElement create()) { |
| (...skipping 19 matching lines...) Expand all Loading... |
| 43 */ | 45 */ |
| 44 // TODO(jmesserly): fix the dash-separated-words issue. Polymer uses lowercase. | 46 // TODO(jmesserly): fix the dash-separated-words issue. Polymer uses lowercase. |
| 45 abstract class PolymerElement extends CustomElement with _EventsMixin { | 47 abstract class PolymerElement extends CustomElement with _EventsMixin { |
| 46 // This is a partial port of: | 48 // This is a partial port of: |
| 47 // https://github.com/Polymer/polymer/blob/stable/src/attrs.js | 49 // https://github.com/Polymer/polymer/blob/stable/src/attrs.js |
| 48 // https://github.com/Polymer/polymer/blob/stable/src/bindProperties.js | 50 // https://github.com/Polymer/polymer/blob/stable/src/bindProperties.js |
| 49 // https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js | 51 // https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js |
| 50 // https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js | 52 // https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js |
| 51 // TODO(jmesserly): we still need to port more of the functionality | 53 // TODO(jmesserly): we still need to port more of the functionality |
| 52 | 54 |
| 55 /// The one syntax to rule them all. |
| 56 static BindingDelegate _fancySyntax = new FancySyntax(); |
| 57 |
| 53 // TODO(sigmund): delete. The next line is only added to avoid warnings from | 58 // TODO(sigmund): delete. The next line is only added to avoid warnings from |
| 54 // the analyzer (see http://dartbug.com/11672) | 59 // the analyzer (see http://dartbug.com/11672) |
| 55 Element get host => super.host; | 60 Element get host => super.host; |
| 56 | 61 |
| 57 bool get applyAuthorStyles => false; | 62 bool get applyAuthorStyles => false; |
| 58 bool get resetStyleInheritance => false; | 63 bool get resetStyleInheritance => false; |
| 59 | 64 |
| 60 /** | 65 /** |
| 61 * The declaration of this polymer-element, used to extract template contents | 66 * The declaration of this polymer-element, used to extract template contents |
| 62 * and other information. | 67 * and other information. |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 114 void created() { | 119 void created() { |
| 115 // TODO(jmesserly): this breaks until we get some kind of type conversion. | 120 // TODO(jmesserly): this breaks until we get some kind of type conversion. |
| 116 // _publishedAttrs.forEach((name, propObserver) { | 121 // _publishedAttrs.forEach((name, propObserver) { |
| 117 // var value = attributes[name]; | 122 // var value = attributes[name]; |
| 118 // if (value != null) propObserver.value = value; | 123 // if (value != null) propObserver.value = value; |
| 119 // }); | 124 // }); |
| 120 _initShadowRoot(); | 125 _initShadowRoot(); |
| 121 _addHostListeners(); | 126 _addHostListeners(); |
| 122 } | 127 } |
| 123 | 128 |
| 129 /** |
| 130 * Creates the document fragment to use for each instance of the custom |
| 131 * element, given the `<template>` node. By default this is equivalent to: |
| 132 * |
| 133 * template.createInstance(this, fancySyntax); |
| 134 * |
| 135 * Where fancySyntax is a singleton `FancySyntax` instance from the |
| 136 * [fancy_syntax](https://pub.dartlang.org/packages/fancy_syntax) package. |
| 137 * |
| 138 * You can override this method to change the instantiation behavior of the |
| 139 * template, for example to use a different data-binding syntax. |
| 140 */ |
| 141 DocumentFragment instanceTemplate(Element template) => |
| 142 template.createInstance(this, _fancySyntax); |
| 143 |
| 124 void _initShadowRoot() { | 144 void _initShadowRoot() { |
| 125 for (var localName in _localNames) { | 145 for (var localName in _localNames) { |
| 126 var declaration = getDeclaration(localName); | 146 var declaration = getDeclaration(localName); |
| 127 var root = createShadowRoot(localName); | 147 var root = createShadowRoot(localName); |
| 128 _addInstanceListeners(root, localName); | 148 _addInstanceListeners(root, localName); |
| 129 | 149 |
| 130 root.applyAuthorStyles = applyAuthorStyles; | 150 root.applyAuthorStyles = applyAuthorStyles; |
| 131 root.resetStyleInheritance = resetStyleInheritance; | 151 root.resetStyleInheritance = resetStyleInheritance; |
| 132 | 152 |
| 133 var templateNode = declaration.children.firstWhere( | 153 var templateNode = declaration.children.firstWhere( |
| 134 (n) => n.localName == 'template', orElse: () => null); | 154 (n) => n.localName == 'template', orElse: () => null); |
| 135 if (templateNode == null) return; | 155 if (templateNode == null) return; |
| 136 | 156 |
| 137 root.nodes.add(cloneTemplate(templateNode.content)); | 157 // Create the contents of the element's ShadowRoot, and add them. |
| 138 // TODO(sigmund): use fancy-syntax as the default. | 158 root.nodes.add(instanceTemplate(templateNode)); |
| 139 // TODO(sigmund,jmesserly): mdv.bindModel should be async internally | |
| 140 Timer.run(() => mdv.bindModel(root, this)); | |
| 141 } | 159 } |
| 142 } | 160 } |
| 143 | 161 |
| 144 void bind(String name, model, String path) { | 162 NodeBinding createBinding(String name, model, String path) { |
| 145 var propObserver = _publishedAttrs[name]; | 163 var propObserver = _publishedAttrs[name]; |
| 146 if (propObserver != null) { | 164 if (propObserver != null) { |
| 147 unbind(name); | 165 return new _PolymerBinding(this, name, model, path, propObserver); |
| 148 | |
| 149 _bindings[name] = new PathObserver(model, path).bindSync((value) { | |
| 150 propObserver.value = value; | |
| 151 }); | |
| 152 return; | |
| 153 } | 166 } |
| 154 return super.bind(name, model, path); | 167 return super.createBinding(name, model, path); |
| 155 } | |
| 156 | |
| 157 void unbind(String name) { | |
| 158 if (_bindings != null) { | |
| 159 var binding = _bindings.remove(name); | |
| 160 if (binding != null) { | |
| 161 binding.cancel(); | |
| 162 return; | |
| 163 } | |
| 164 } | |
| 165 return super.unbind(name); | |
| 166 } | |
| 167 | |
| 168 void unbindAll() { | |
| 169 for (var binding in _bindings.values) binding.cancel(); | |
| 170 _bindings.clear(); | |
| 171 return super.unbindAll(); | |
| 172 } | 168 } |
| 173 } | 169 } |
| 174 | 170 |
| 171 class _PolymerBinding extends NodeBinding { |
| 172 final PathObserver _publishedAttr; |
| 173 |
| 174 _PolymerBinding(node, property, model, path, PathObserver this._publishedAttr) |
| 175 : super(node, property, model, path); |
| 176 |
| 177 void boundValueChanged(newValue) { |
| 178 _publishedAttr.value = newValue; |
| 179 } |
| 180 } |
| 181 |
| 175 /** | 182 /** |
| 176 * Polymer features to handle the syntactic sugar on-* to declare to | 183 * Polymer features to handle the syntactic sugar on-* to declare to |
| 177 * automatically map event handlers to instance methods of the [PolymerElement]. | 184 * automatically map event handlers to instance methods of the [PolymerElement]. |
| 178 * This mixin is a port of: | 185 * This mixin is a port of: |
| 179 * https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js | 186 * https://github.com/Polymer/polymer/blob/7936ff8/src/declaration/events.js |
| 180 * https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js | 187 * https://github.com/Polymer/polymer/blob/7936ff8/src/instance/events.js |
| 181 */ | 188 */ |
| 182 abstract class _EventsMixin { | 189 abstract class _EventsMixin { |
| 183 // TODO(sigmund): implement the Dart equivalent of 'inheritDelegates' | 190 // TODO(sigmund): implement the Dart equivalent of 'inheritDelegates' |
| 184 // Notes about differences in the implementation below: | 191 // Notes about differences in the implementation below: |
| (...skipping 162 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 347 // dartbug.com/11108). | 354 // dartbug.com/11108). |
| 348 var methodDecl = reflectClass(receiver.runtimeType).methods[method]; | 355 var methodDecl = reflectClass(receiver.runtimeType).methods[method]; |
| 349 if (methodDecl != null) { | 356 if (methodDecl != null) { |
| 350 // This will either truncate the argument list or extend it with extra | 357 // This will either truncate the argument list or extend it with extra |
| 351 // null arguments, so it will match the signature. | 358 // null arguments, so it will match the signature. |
| 352 // TODO(sigmund): consider accepting optional arguments when we can tell | 359 // TODO(sigmund): consider accepting optional arguments when we can tell |
| 353 // them appart from named arguments (see http://dartbug.com/11334) | 360 // them appart from named arguments (see http://dartbug.com/11334) |
| 354 args.length = methodDecl.parameters.where((p) => !p.isOptional).length; | 361 args.length = methodDecl.parameters.where((p) => !p.isOptional).length; |
| 355 } | 362 } |
| 356 reflect(receiver).invoke(method, args); | 363 reflect(receiver).invoke(method, args); |
| 364 performMicrotaskCheckpoint(); |
| 357 } | 365 } |
| 358 | 366 |
| 359 bool _instanceEventListener(String eventName, Event event) { | 367 bool _instanceEventListener(String eventName, Event event) { |
| 360 if (event.bubbles) { | 368 if (event.bubbles) { |
| 361 if (event.path == null || !ShadowRoot.supported) { | 369 if (event.path == null || !ShadowRoot.supported) { |
| 362 return _listenLocalNoEventPath(eventName, event); | 370 return _listenLocalNoEventPath(eventName, event); |
| 363 } else { | 371 } else { |
| 364 return _listenLocal(eventName, event); | 372 return _listenLocal(eventName, event); |
| 365 } | 373 } |
| 366 } | 374 } |
| (...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 508 'onKeyMessage': MediaElement.keyMessageEvent, | 516 'onKeyMessage': MediaElement.keyMessageEvent, |
| 509 'onNeedKey': MediaElement.needKeyEvent, | 517 'onNeedKey': MediaElement.needKeyEvent, |
| 510 'onWebGlContextLost': CanvasElement.webGlContextLostEvent, | 518 'onWebGlContextLost': CanvasElement.webGlContextLostEvent, |
| 511 'onWebGlContextRestored': CanvasElement.webGlContextRestoredEvent, | 519 'onWebGlContextRestored': CanvasElement.webGlContextRestoredEvent, |
| 512 'onPointerLockChange': Document.pointerLockChangeEvent, | 520 'onPointerLockChange': Document.pointerLockChangeEvent, |
| 513 'onPointerLockError': Document.pointerLockErrorEvent, | 521 'onPointerLockError': Document.pointerLockErrorEvent, |
| 514 'onReadyStateChange': Document.readyStateChangeEvent, | 522 'onReadyStateChange': Document.readyStateChangeEvent, |
| 515 'onSelectionChange': Document.selectionChangeEvent, | 523 'onSelectionChange': Document.selectionChangeEvent, |
| 516 'onSecurityPolicyViolation': Document.securityPolicyViolationEvent, | 524 'onSecurityPolicyViolation': Document.securityPolicyViolationEvent, |
| 517 }; | 525 }; |
| OLD | NEW |