From 2def7d441a8ee358040f9ab1bc731f5bdfa7bb60 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 16 Sep 2013 11:47:07 -0500
Subject: [PATCH] Tab bar test with detach/attach DOM elements

---
 hacking/tabs.html | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/hacking/tabs.html b/hacking/tabs.html
index 4b96e16203..90a687101d 100644
--- a/hacking/tabs.html
+++ b/hacking/tabs.html
@@ -72,9 +72,49 @@
       var tab3 = document.getElementById('tab3');
       var tab4 = document.getElementById('tab4');
 
+      var controller = function(opts) {
+        this.el = opts.el;
+      }
+      controller.prototype = {
+        detach: function() {
+          //this.el.style.display = 'none';
+          var parentNode = this.el.parentNode;
+          if(!parentNode) {
+            return;
+          }
+          var next = this.el.nextSibling;
+          this._lastNodeSpot = next;
+          this._lastNodeParent = parentNode;
+          parentNode.removeChild(this.el);
+        },
+        attach: function() {
+          //this.el.style.display = 'block';
+          if(this._lastNodeSpot) {
+            this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
+          }
+        }
+      };
+
+      var c1 = new controller({
+        el: tab1
+      });
+      c1.title = 'Mice';
+      var c2 = new controller({
+        el: tab2
+      });
+      c2.title = 'Dogs';
+      var c3 = new controller({
+        el: tab3
+      });
+      c3.title = 'Cats';
+      var c4 = new controller({
+        el: tab4
+      });
+      c4.title = 'Cats';
+
       var c = new TabBarController({
         tabBar: new TabBar({ el: tab }),
-        controllers: [ { el: tab1 }, { el: tab2 }, { el: tab3 }, { el: tab4 }]
+        controllers: [ c1, c2, c3, c4 ]
       });
     </script>
   </body>