style inside template

meteorwebcomponents · Apr 7, 2017 · e2c272e · e2c272e
1 parent acba4db
commit e2c272e
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 97 deletions.
diff --git a/.versions b/.versions
@@ -1,23 +1,23 @@
-babel-compiler@6.13.0
-babel-runtime@0.1.12
+babel-compiler@6.14.1
+babel-runtime@1.0.1
 blaze-tools@1.0.10
 caching-compiler@1.1.9
 caching-html-compiler@1.0.7
 deps@1.0.12
-ecmascript@0.5.9
+ecmascript@0.6.3
 ecmascript-runtime@0.3.15
 html-tools@1.0.11
 htmljs@1.0.11
-meteor@1.6.0
-minifier-js@1.2.14
-modules@0.7.7
-modules-runtime@0.7.7
-mwc:layout@1.1.22
+meteor@1.6.1
+minifier-js@1.2.18
+modules@0.7.9
+modules-runtime@0.7.9
+mwc:layout@1.1.23
 mwc:synthesis@1.3.7
 mwc:synthesis-compiler@1.3.5
 promise@0.8.8
 random@1.0.10
 spacebars-compiler@1.0.13
 templating-tools@1.0.5
-tracker@1.0.14
+tracker@1.1.2
 underscore@1.0.10
diff --git a/bower.json b/bower.json
@@ -11,5 +11,5 @@
         "type": "git",
         "url": "https://github.com/meteorwebcomponents/layout.git"
     },
-    "version": "1.1.21"
+    "version": "1.1.23"
 }
diff --git a/mwc-layout.html b/mwc-layout.html
@@ -1,111 +1,112 @@
 <dom-module id="mwc-layout">
 
+  <template>
     <style>
-    :host {
-        display: none!important;
-    }
-    
+:host {
+  display: none!important;
+}
+
     :host([active]) {
-        display: block!important;
+      display: block!important;
     }
     </style>
 
-    <template>
-        <content class="mwc-layout" select="*"></content>
-    </template>
-
-    <script>
-    // HTMLImports.whenReady(function() {
-    Polymer({
-
-        activeChange: function(newValue, oldValue) {
-            if (newValue === false && oldValue === true) {
-                var region = Object.keys(this.opt);
-
-                for (var A = 0; A < region.length; A++) {
-                    var element = this.querySelectorAll('*[region="' + region[A] + '"]');
-
-                    for (Z = 0; Z < element.length; Z++) {
-                        element[Z].innerHTML = "";
-                    }
-                }
-            }
-        },
-
-        is: "mwc-layout",
-
-        properties: {
-            active: {
-                notify: true,
-                observer: "activeChange",
-                reflectToAttribute: true,
-                type: Boolean,
-                value: false
-            },
-            opt: {
-                type: Object
-            }
-        },
-
-        render: function(opt) {
-            var region = Object.keys(opt);
-
-            for (var A = 0; A < region.length; A++) {
-                if (typeof(opt[region[A]]) === "object") {
-                    var element = this.querySelectorAll('*[region="' + region[A] + '"]');
-
-                    for (Z = 0; Z < element.length; Z++) {
-                        element[Z].innerHTML = "";
-
-                        Polymer.dom(element[Z]).appendChild(opt[region[A]]);
-                    }
-                } else {
-                    if (document.createElement(opt[region[A]]).constructor !== HTMLElement) {
-                        var element = this.querySelectorAll('*[region="' + region[A] + '"]');
-
-                        for (Z = 0; Z < element.length; Z++) {
-                            element[Z].innerHTML = "";
-
-                            Polymer.dom(element[Z]).appendChild(document.createElement(opt[region[A]]));
-                        }
-                    } else {
-                        console.log(opt[region[A]] + " not registered");
-                    }
-                }
-            }
-
-            this.opt = opt;
+
+    <content class="mwc-layout" select="*"></content>
+  </template>
+
+  <script>
+// HTMLImports.whenReady(function() {
+Polymer({
+
+  activeChange: function(newValue, oldValue) {
+    if (newValue === false && oldValue === true) {
+      var region = Object.keys(this.opt);
+
+      for (var A = 0; A < region.length; A++) {
+        var element = this.querySelectorAll('*[region="' + region[A] + '"]');
+
+        for (Z = 0; Z < element.length; Z++) {
+          element[Z].innerHTML = "";
+        }
+      }
+    }
+  },
+
+  is: "mwc-layout",
+
+  properties: {
+    active: {
+      notify: true,
+      observer: "activeChange",
+      reflectToAttribute: true,
+      type: Boolean,
+      value: false
+    },
+    opt: {
+      type: Object
+    }
+  },
+
+  render: function(opt) {
+    var region = Object.keys(opt);
+
+    for (var A = 0; A < region.length; A++) {
+      if (typeof(opt[region[A]]) === "object") {
+        var element = this.querySelectorAll('*[region="' + region[A] + '"]');
+
+        for (Z = 0; Z < element.length; Z++) {
+          element[Z].innerHTML = "";
+
+          Polymer.dom(element[Z]).appendChild(opt[region[A]]);
+        }
+      } else {
+        if (document.createElement(opt[region[A]]).constructor !== HTMLElement) {
+          var element = this.querySelectorAll('*[region="' + region[A] + '"]');
+
+          for (Z = 0; Z < element.length; Z++) {
+            element[Z].innerHTML = "";
+
+            Polymer.dom(element[Z]).appendChild(document.createElement(opt[region[A]]));
+          }
+        } else {
+          console.log(opt[region[A]] + " not registered");
         }
+      }
+    }
 
-    });
-    // });
-    </script>
+    this.opt = opt;
+  }
+
+});
+// });
+  </script>
 
 </dom-module>
 
 <script>
 var PolymerLayout = function() {
-    this.currentLayout = null;
+  this.currentLayout = null;
 };
 
 // layout[String]
 // opt[Object] one-level deep
 // forceRender[Boolean]
 
 PolymerLayout.prototype.render = function(layout, opt, forceRender) {
-    if (document.querySelector('mwc-layout[id="' + layout + '"]')) {
-        if (this.currentLayout != layout || forceRender) {
-            if (this.currentLayout) {
-                document.querySelector('mwc-layout[id="' + this.currentLayout + '"]').active = false
-            }
+  if (document.querySelector('mwc-layout[id="' + layout + '"]')) {
+    if (this.currentLayout != layout || forceRender) {
+      if (this.currentLayout) {
+        document.querySelector('mwc-layout[id="' + this.currentLayout + '"]').active = false
+      }
 
-            document.querySelector('mwc-layout[id="' + layout + '"]').render(Object.prototype.toString.call(opt) == "[object Object]" ? opt : {});
+      document.querySelector('mwc-layout[id="' + layout + '"]').render(Object.prototype.toString.call(opt) == "[object Object]" ? opt : {});
 
-            document.querySelector('mwc-layout[id="' + layout + '"]').active = true;
+      document.querySelector('mwc-layout[id="' + layout + '"]').active = true;
 
-            this.currentLayout = layout;
-        }
+      this.currentLayout = layout;
     }
+  }
 };
 
 mwcLayout = new PolymerLayout();

diff --git a/mwc_layout.html b/mwc_layout.html
@@ -1,16 +1,17 @@
 <dom-module id="mwc-layout">
 
-  <style>
+  <template>
+    <style>
 :host {
   display: none!important;
 }
 
     :host([active]) {
       display: block!important;
     }
-  </style>
+    </style>
+
 
-  <template>
     <content class="mwc-layout" select="*"></content>
   </template>
 

diff --git a/package.js b/package.js
@@ -3,7 +3,7 @@ Package.describe({
   git: "https://github.com/meteorwebcomponents/layout.git",
   name: "mwc:layout",
   summary: "Polymer Layout renderer",
-  version: "1.1.22"
+  version: "1.1.23"
 });
 
 Package.onUse(function(api) {