Needed to wrap tet nodes with span so they would be hidden properly.

Trakkasure · Aug 12, 2015 · a6dd31f · a6dd31f
1 parent 8a50eaa
commit a6dd31f
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 34 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -3,48 +3,85 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>Bindref Component Demo</title>
+    <title>DOM-ELSE Component Demo</title>
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="../dom-else.html">
   </head>
   <body>
-<dom-module id="x-textcontent">
-  <template>
-    <template id="domIf" is="dom-if" if>
-      <div>1</div>
-      <div>2</div>
-      <div>3</div>
-      Stuff
-      <div>4</div>
-      <template is="dom-else" id="else">
-        <div>e1</div>
-        <div>e2</div>
-        More stuff
-        <div>e3</div>
-      </template>
-    </template>
-  </template>
-    <script>
-       window.addEventListener('WebComponentsReady',function() {
-            t = document.querySelector('#t');
-        });
-       function clicked() {
-           t.$.domIf.if=!t.$.domIf.if;
-       }
-    </script>
-  <script>
-  Polymer({
-    is: 'x-textcontent'
-  });
-  </script>
-</dom-module>
-
       <h1>DOM-ELSE demo</h1>
 
-        <button onclick="clicked()">Toggle</button>
+    <div>
+      <button onclick="clicked(1)">Toggle 1</button>
+      <template id="domIf1" is="dom-if" if>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        Stuff
+        <div>4</div>
+        <template is="dom-else" id="else1">
+          <div>e1</div>
+          <div>e2</div>
+          More stuff
+          <div>e3</div>
+        </template>
+      </template>
+    </div>
+    <div>
+      <button onclick="clicked(4)">Toggle 4</button>
+      <template id="domIf4" is="dom-if" if>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        Stuff
+        <div>4</div>
+        <button onclick="clicked(5)">Toggle 5</button>
+        <template id="domIf5" is="dom-if">
+          <div>Embedded If</div>
+          <div>Maybe this will work</div>
+          Not wrapped in a span.
+          <div>Third line</div>
+          <template is="dom-else" id="else4">
+            <div>e1</div>
+            <div>e2</div>
+            More stuff
+            <div>e3</div>
+          </template>
+        </template>
+      </template>
+    </div>
 
-        <x-textcontent id="t"></x-textcontent>
+    <div>
+      <button onclick="clicked(2)">Toggle 2</button>
+      <template id="domIf2" is="dom-if" if>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        Stuff
+        <div>4</div>
+        <template is="dom-else" id="else2">
+          <button onclick="clicked(3)">Toggle 3</button>
+          <template id="domIf3" is="dom-if" if>
+            <div>Embedded If</div>
+            <div>Maybe this will work</div>
+            Not wrapped in a span.
+            <div>Third line</div>
+            <template is="dom-else" id="else3">
+              <div>e1</div>
+              <div>e2</div>
+              More stuff
+              <div>e3</div>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
 
+    <script>
+       function clicked(n) {
+           var t = document.querySelector('#domIf'+n);
+           t.if=!t.if;
+       }
+    </script>
 
   </body>
 </html>
diff --git a/dom-else.html b/dom-else.html
@@ -103,6 +103,7 @@
     _render: function() {
       if (this._else) {
         if (!this.ctor) {
+          this._wrapTextNodes(this._content || this.content);
           this.templatize(this);
         }
         this._ensureInstance();
@@ -118,6 +119,16 @@
         this._lastIf = this._else;
       }
     },
+    _wrapTextNodes: function (root) {
+      for (var n = root.firstChild.nextSibling; n; n = n.nextSibling) {
+        if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) {
+          var s = document.createElement('span');
+          root.insertBefore(s, n);
+          s.appendChild(n);
+          n = s;
+        }
+      }
+    },
 
     _toggleIf: function() {
         this.set('if',this._parent._template.get('if'));