x-tag · pinguxx · Feb 10, 2017 · Feb 10, 2017
diff --git a/README.md b/README.md
@@ -1,32 +1,20 @@
 # About
 
-This repo is an X-Tag custom web-component stub that can be used as a starting point when building new elements.  It provides that basic tools and grunt tasks to get started.
+Page transitioning component for single-page apps that uses native body overflow for composited scroll rendering
 
-# Yo Generator
-
-If you're creating a new component, checkout our Yeoman Generator.
-
-```
-https://github.com/x-tag/yo-x-tag-generator
+Define pages in your html
+```html
+<x-page id="one" transition-enter="slide-right" transition-exit="slide-down" active>...</x-page>
+<x-page id="two" transition-enter="slide-up">...</x-page>
 ```
 
-# Dev Setup
+Add transitions for each page
 
-```
-Fork this repo, rename it, then clone it.
+You can also se an active property for the default one
 
-$ npm install	// install bower tasks
-$ bower install	// install components
-$ grunt build   // build the dependencies
+To change pages you can do 
 
 ```
-
-# Links
-
-[X-Tags Docs](http://x-tags.org/docs)
-
-[Guide for creating X-Tag Components](https://github.com/x-tag/core/wiki/Creating-X-Tag-Components)
-
-[Using X-Tag components in your applications](https://github.com/x-tag/core/wiki/Using-our-Web-Components-in-Your-Application)
-
-
+var page = document.getElementById('two');
+page.show();
+```
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "x-page",
   "description": "",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "keywords": [
     "web-components",
     "x-tag"

diff --git a/demo/index.html b/demo/index.html
@@ -5,85 +5,72 @@
   <meta charset="utf-8" />
   <title>X-Page Demo - X-Tag</title>
 
-  <link rel="stylesheet" type="text/css" href="x-tag-components.css"/>
-  <link rel="stylesheet" type="text/css" href="../src/main.css"/>
+  <link rel="stylesheet" type="text/css" href="x-tag-components.css" />
+  <link rel="stylesheet" type="text/css" href="../src/main.css" />
 
   <script type="text/javascript" src="x-tag-components.js"></script>
   <script type="text/javascript" src="../src/main.js"></script>
 
-  <style>
-    button {
-      position: fixed;
-      top: 5em;
-      left: 5em;
-      z-index: 10;
-    }
-
-    header,
-    footer {
-      background: lightblue;
-    }
-
-    section {
-      width: 50%;
-      height: 3000px;
-      margin: 0 auto;
-      background: url(lorem.jpg);
-    }
-
-    /*section div {
-      position: fixed;
-      top: 40%;
-      left: 40%;
-      height: 10em;
-      width: 10em;
-      background: purple;
-    }*/
-
-    x-page:nth-child(even) header,
-    x-page:nth-child(even) footer {
-      background: gold;
-    }
-
-  </style>
 </head>
-
 <body>
 
-  <button onclick="active = document.querySelector('[active]'); active.active = false; (active.nextElementSibling || this.nextElementSibling).active = true;">Switch Scenes</button>
+  <button id="switchScene">Switch Scenes</button>
 
-	<x-page active>
+  <x-page active>
     <header>Scene 1 Header</header>
-    <section><div></div></section>
+    <section>
+      <div></div>
+    </section>
     <footer>Scene 1 Footer</footer>
   </x-page>
 
   <x-page page-transition="slide-left">
     <header>Scene 2 Header</header>
-    <section><div></div></section>
+    <section>
+      <div></div>
+    </section>
     <footer>Scene 2 Footer</footer>
   </x-page>
 
   <x-page page-transition="slide-right">
-    <header>Scene 2 Header</header>
-    <section><div></div></section>
-    <footer>Scene 2 Footer</footer>
-  </x-page>
-
-  <x-page>
     <header>Scene 3 Header</header>
-    <section><div></div></section>
+    <section>
+      <div></div>
+    </section>
     <footer>Scene 3 Footer</footer>
   </x-page>
 
   <x-page>
     <header>Scene 4 Header</header>
-    <section><div></div></section>
+    <section>
+      <div></div>
+    </section>
     <footer>Scene 4 Footer</footer>
   </x-page>
 
+  <x-page>
+    <header>Scene 5 Header</header>
+    <section>
+      <div></div>
+    </section>
+    <footer>Scene 5 Footer</footer>
+  </x-page>
 
+  <script>
+(function () {
+	document.getElementById('switchScene').addEventListener('click', function () {
+		var active = document.querySelector('[active]'),
+			next; 
+		active.active = false; 
+		next = (active.nextElementSibling || this.nextElementSibling);
+		if (next.tagName !== 'X-PAGE') {
+			next = document.querySelector('x-page');
+		}
+		next.active = true;
+	}, false);
+}())
+</script>
 
-</body>
 
+</body>
 </html>
diff --git a/index.html b/index.html
@@ -56,7 +56,7 @@
 
 <body>
 
-  <x-page id="one" transition-enter="slide-right" transition-exit="slide-down" selected>
+  <x-page id="one" transition-enter="slide-right" transition-exit="slide-down" active>
     <header>Header ONE</header>
     <section>
       <ul>
@@ -168,7 +168,10 @@
   xtag.addEvents(document, {
     'tap:delegate(header)': function(){
       var next = this.parentNode.nextElementSibling;
-      (next.nodeName == 'X-PAGE' ? next : this.parentNode.parentNode.firstElementChild).show();
+      if (next.nodeName !== 'X-PAGE') {
+        next = this.parentNode.parentNode.firstElementChild;
+      }
+      next.show();
     }
   })
 </script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "x-page",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "dependencies": {},
   "devDependencies": {
     "bower": "~1.7.9",

diff --git a/src/main.css b/src/main.css
@@ -140,3 +140,31 @@ x-page[active]:not([transition="inactive"]) > * {
     transition-duration: 0.3s;
   }
 }
+
+button {
+    position: fixed;
+    top: 5em;
+    left: 5em;
+    z-index: 10;
+  }
+
+  header,
+  footer {
+    background: lightblue;
+  }
+
+  section {
+    width: 50%;
+    height: 3000px;
+    margin: 0 auto;
+  }
+
+  x-page:nth-child(even) header,
+  x-page:nth-child(even) footer {
+    background: gold;
+  }
+
+  x-page:last-of-type header,
+  x-page:last-of-type footer {
+    background-color: gray;
+  }
diff --git a/src/main.js b/src/main.js
@@ -23,13 +23,12 @@
     },
     methods: {
       show: function(deactivate){
-        this.selected = true;
-        if (deactivate) xtag.query(document, 'x-page').forEach(function(node){
+        this.active = true;
+        xtag.query(document, 'x-page').forEach(function(node){
           node.active = node == this;
         }, this);
       },
       hide: function(){
-        this.selected = false;
         this.active = false;
       }
     }