change(components): disable shadow dom

Disable shadow DOM:
- it causes some issues when compiled to JS
- it does not play nicely with Bootstrap
- most likely will be off in production because of performance issues with the shadow_dom polyfill

README.md

@@ -37,20 +37,19 @@ If you have any data in your local storage the application may not work as expec
 
 ## To do
 
-* Transclusion
 * Validations
 * Application state management
 * Shadow DOM
 * Use factory, value, CreationStrategy, and Visibility
 
 ## Index
 
-* Working with Shadow DOM => `toggle.html` and `toggle_component.dart`
-* Building a component => `agenda.html`, `agenda_item.html`, , `agenda_component.dart`, `agenda_component_input.dart`
+* Building components => `agenda.html`, `agenda_item.html`, `agenda_component.dart`, `agenda_component_input.dart`
+* Building decorators => `toggle.dart`, `agenda_item_text_input.dart`
 * Setting up route (including default) => `app_route_initializer.dart`
 * Nested routes and nested views => `list.html`, and `app_route_initializer.dart`
 * Using RouteProvider => `show_call_ctrl.dart`
-* Using filters => `agenda.html` and `list.html`
+* Using formatters => `agenda.html` and `list.html`
 * Registering components, controllers, and other injectables => talk_to_me.dart
 * Creating services => `parse_agenda_item.dart`, `storage.dart`
 * Using the Http service => `users_repository.dart`

lib/components/agenda_component.dart

@@ -4,7 +4,7 @@ part of talk_to_me;
     selector: 'agenda',
     templateUrl: 'lib:components/agenda.html',
     publishAs: 'ctrl',
-    applyAuthorStyles: true
+    useShadowDom: false
 )
 class AgendaComponent {
   @NgOneWayOneTime("checkable")

lib/components/agenda_item_component.dart

@@ -3,7 +3,7 @@ part of talk_to_me;
 @Component(
     selector: 'agenda-item',
     templateUrl: 'lib:components/agenda_item.html',
-    applyAuthorStyles: true,
+    useShadowDom: false,
     publishAs: 'ctrl'
 )
 class AgendaItemComponent {

lib/components/call_component.dart

@@ -4,7 +4,7 @@ part of talk_to_me;
     selector: 'call',
     templateUrl: 'lib:components/call.html',
     publishAs: 'ctrl',
-    applyAuthorStyles: true
+    useShadowDom: false
 )
 class CallComponent implements AttachAware {
   Object videoSrc;

lib/components/global_alert_component.dart

@@ -4,7 +4,7 @@ part of talk_to_me;
     selector: 'global-alert',
     templateUrl: 'lib:components/global_alert.html',
     publishAs: 'ctrl',
-    applyAuthorStyles: true
+    useShadowDom: false
 )
 class GlobalAlertComponent {
   String message;

lib/decorators/toggle.dart

@@ -0,0 +1,30 @@
+part of talk_to_me;
+
+@Decorator(selector: 'toggle')
+class Toggle implements AttachAware {
+  @NgTwoWay("toggle-property")
+  bool open = false;
+
+  html.Element el;
+  Scope scope;
+
+  Toggle(this.el, this.scope);
+
+  void attach() {
+    final whenOpen = el.querySelector("when-open");
+    final whenClosed = el.querySelector("when-closed");
+
+    whenOpen.hidden = true;
+    whenClosed.hidden = true;
+
+    scope.watch("ctrl.open", (newValue, _) {
+      if(newValue) {
+        whenOpen.hidden = false;
+        whenClosed.hidden = true;
+      } else {
+        whenOpen.hidden = true;
+        whenClosed.hidden = false;
+      }
+    });
+  }
+}

lib/talk_to_me.dart

@@ -21,8 +21,8 @@ part 'talk_to_me_route_initializer.dart';
 part 'global_http_interceptors.dart';
 
 part 'decorators/agenda_item_text_input.dart';
+part 'decorators/toggle.dart';
 
-part 'components/toggle_component.dart';
 part 'components/call_component.dart';
 part 'components/agenda_component.dart';
 part 'components/agenda_item_component.dart';
@@ -46,7 +46,7 @@ class TalkToMeApp extends Module {
     type(AgendaItemComponent);
     type(AgendaComponent);
     type(CallComponent);
-    type(ToggleComponent);
+    type(Toggle);
 
     type(CallSerializer);
     type(CallStorage);

test/unit/agenda_item_component_test.dart

@@ -20,7 +20,7 @@ compileComponent(String html, Map scope, callback){
 
       digest();
 
-      callback(el.shadowRoot);
+      callback(el);
     });
   });
 }

web/app.html

@@ -24,7 +24,6 @@ <h1><a href="#">Talk to Me!</a></h1>
   </div>
 </div>
 
-<script src="packages/shadow_dom/shadow_dom.debug.js"></script>
 <script type="application/dart" src="talk_to_me_main.dart"></script>
 <script src="packages/browser/dart.js"></script>
 </body>