x-tag · pinguxx · Apr 26, 2016 · Apr 26, 2016 · Apr 26, 2016 · Apr 26, 2016
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.10",
+  "version": "0.1.23",
   "keywords": [
     "web-components",
     "x-tag"

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <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" />
+
+  <script type="text/javascript" src="x-tag-components.js"></script>
+  <script type="text/javascript" src="../src/main.js"></script>
+
+</head>
+<body>
+
+  <button id="switchScene">Switch Scenes</button>
+
+  <x-page active>
+    <header>Scene 1 Header</header>
+    <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>
+    <footer>Scene 2 Footer</footer>
+  </x-page>
+
+  <x-page page-transition="slide-right">
+    <header>Scene 3 Header</header>
+    <section>
+      <div></div>
+    </section>
+    <footer>Scene 3 Footer</footer>
+  </x-page>
+
+  <x-page>
+    <header>Scene 4 Header</header>
+    <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>
+</html>
diff --git a/demo/x-tag-components.js b/demo/x-tag-components.js
@@ -2513,7 +2513,7 @@ window.CustomElements.addModule(function(scope) {
   head.insertBefore(style, head.firstChild);
 })(window.WebComponents);
 /*!
- * PEP v0.4.0 | https://github.com/jquery/PEP
+ * PEP v0.4.1 | https://github.com/jquery/PEP
  * Copyright jQuery Foundation and other contributors | http://jquery.org/license
  */
 (function (global, factory) {
@@ -2748,6 +2748,13 @@ window.CustomElements.addModule(function(scope) {
     0
   ];
 
+  var BOUNDARY_EVENTS = {
+    'pointerover': 1,
+    'pointerout': 1,
+    'pointerenter': 1,
+    'pointerleave': 1
+  };
+
   var HAS_SVG_INSTANCE = (typeof SVGElementInstance !== 'undefined');
 
   /**
@@ -2962,10 +2969,13 @@ window.CustomElements.addModule(function(scope) {
       return eventCopy;
     },
     getTarget: function(inEvent) {
-
-      // if pointer capture is set, route all events for the specified pointerId
-      // to the capture target
-      return this.captureInfo[inEvent.pointerId] || inEvent._target;
+      var capture = this.captureInfo[inEvent.pointerId];
+      if (!capture) {
+        return inEvent._target;
+      }
+      if (inEvent._target === capture || !(inEvent.type in BOUNDARY_EVENTS)) {
+        return capture;
+      }
     },
     setCapture: function(inPointerId, inTarget) {
       if (this.captureInfo[inPointerId]) {
@@ -3373,6 +3383,11 @@ window.CustomElements.addModule(function(scope) {
           inEvent.buttons = e.buttons;
         }
         mouse__pointermap.set(this.POINTER_ID, inEvent);
+
+        // Support: Firefox <=44 only
+        // FF Ubuntu includes the lifted button in the `buttons` property on
+        // mouseup.
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1223366
         if (e.buttons === 0 || e.buttons === BUTTON_TO_BUTTONS[e.button]) {
           this.cleanupMouse();
           _dispatcher.up(e);
@@ -3898,7 +3913,7 @@ window.CustomElements.addModule(function(scope) {
     };
   }
 
-  function capture__applyPolyfill() {
+  function _capture__applyPolyfill() {
     if (window.Element && !Element.prototype.setPointerCapture) {
       Object.defineProperties(Element.prototype, {
         'setPointerCapture': {
@@ -3913,7 +3928,7 @@ window.CustomElements.addModule(function(scope) {
 
   applyAttributeStyles();
   platform_events__applyPolyfill();
-  capture__applyPolyfill();
+  _capture__applyPolyfill();
 
   var pointerevents = {
     dispatcher: _dispatcher,
@@ -3961,17 +3976,13 @@ window.CustomElements.addModule(function(scope) {
         * prefix.js: addresses prefixed APIs present in global and non-Element contexts
     */
     prefix = (function () {
-      var styles = win.getComputedStyle(doc.documentElement, ''),
-          pre = (Array.prototype.slice
-            .call(styles)
-            .join('')
-            .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
-          )[1];
+      var keys = Object.keys(window).join();
+      var pre = ((keys.match(/,(ms)/) || keys.match(/,(moz)/) || keys.match(/,(O)/)) || [null, 'webkit'])[1].toLowerCase();
       return {
         dom: pre == 'ms' ? 'MS' : pre,
         lowercase: pre,
         css: '-' + pre + '-',
-        js: pre == 'ms' ? pre : pre[0].toUpperCase() + pre.substr(1)
+        js: pre == 'ms' ? pre : pre.charAt(0).toUpperCase() + pre.substring(1)
       };
     })(),
     matchSelector = Element.prototype.matches || Element.prototype.matchesSelector || Element.prototype[prefix.lowercase + 'MatchesSelector'];
@@ -4245,17 +4256,19 @@ window.CustomElements.addModule(function(scope) {
       var basePrototype = options.prototype;
       delete options.prototype;
       var tag = xtag.tags[_name].compiled = applyMixins(xtag.merge({}, xtag.defaultOptions, options));
+      var proto = tag.prototype;
+      var lifecycle = tag.lifecycle;
 
       for (var z in tag.events) tag.events[z] = xtag.parseEvent(z, tag.events[z]);
-      for (z in tag.lifecycle) tag.lifecycle[z.split(':')[0]] = xtag.applyPseudos(z, tag.lifecycle[z], tag.pseudos, tag.lifecycle[z]);
-      for (z in tag.methods) tag.prototype[z.split(':')[0]] = { value: xtag.applyPseudos(z, tag.methods[z], tag.pseudos, tag.methods[z]), enumerable: true };
+      for (z in lifecycle) lifecycle[z.split(':')[0]] = xtag.applyPseudos(z, lifecycle[z], tag.pseudos, lifecycle[z]);
+      for (z in tag.methods) proto[z.split(':')[0]] = { value: xtag.applyPseudos(z, tag.methods[z], tag.pseudos, tag.methods[z]), enumerable: true };
       for (z in tag.accessors) parseAccessor(tag, z);
 
       if (tag.shadow) tag.shadow = tag.shadow.nodeName ? tag.shadow : xtag.createFragment(tag.shadow);
       if (tag.content) tag.content = tag.content.nodeName ? tag.content.innerHTML : parseMultiline(tag.content);
-      var created = tag.lifecycle.created;
-      var finalized = tag.lifecycle.finalized;
-      tag.prototype.createdCallback = {
+      var created = lifecycle.created;
+      var finalized = lifecycle.finalized;
+      proto.createdCallback = {
         enumerable: true,
         value: function(){
           var element = this;
@@ -4280,26 +4293,26 @@ window.CustomElements.addModule(function(scope) {
         }
       };
 
-      var inserted = tag.lifecycle.inserted,
-          removed = tag.lifecycle.removed;
+      var inserted = lifecycle.inserted;
+      var removed = lifecycle.removed;
       if (inserted || removed) {
-        tag.prototype.attachedCallback = { value: function(){
+        proto.attachedCallback = { value: function(){
           if (removed) this.xtag.__parentNode__ = this.parentNode;
           if (inserted) return inserted.apply(this, arguments);
         }, enumerable: true };
       }
       if (removed) {
-        tag.prototype.detachedCallback = { value: function(){
+        proto.detachedCallback = { value: function(){
           var args = toArray(arguments);
           args.unshift(this.xtag.__parentNode__);
           var output = removed.apply(this, args);
           delete this.xtag.__parentNode__;
           return output;
         }, enumerable: true };
       }
-      if (tag.lifecycle.attributeChanged) tag.prototype.attributeChangedCallback = { value: tag.lifecycle.attributeChanged, enumerable: true };
+      if (lifecycle.attributeChanged) proto.attributeChangedCallback = { value: lifecycle.attributeChanged, enumerable: true };
 
-      tag.prototype.setAttribute = {
+      proto.setAttribute = {
         writable: true,
         enumerable: true,
         value: function (name, value){
@@ -4318,7 +4331,7 @@ window.CustomElements.addModule(function(scope) {
         }
       };
 
-      tag.prototype.removeAttribute = {
+      proto.removeAttribute = {
         writable: true,
         enumerable: true,
         value: function (name){
@@ -4333,20 +4346,28 @@ window.CustomElements.addModule(function(scope) {
         }
       };
 
-      var elementProto = basePrototype ?
-            basePrototype :
-            tag['extends'] ?
-            Object.create(doc.createElement(tag['extends']).constructor).prototype :
-            win.HTMLElement.prototype;
+      var definition = {};
+      var instance = basePrototype instanceof win.HTMLElement;
+      var extended = tag['extends'] && (definition['extends'] = tag['extends']);
+
+      if (basePrototype) Object.getOwnPropertyNames(basePrototype).forEach(function(z){
+        var prop = proto[z];
+        var desc = instance ? Object.getOwnPropertyDescriptor(basePrototype, z) : basePrototype[z];
+        if (prop) {
+          for (var y in desc) {
+            if (typeof desc[y] == 'function' && prop[y]) prop[y] = xtag.wrap(desc[y], prop[y]);
+            else prop[y] = desc[y];
+          }
+        }
+        proto[z] = prop || desc;
+      });
 
-      var definition = {
-        'prototype': Object.create(elementProto, tag.prototype)
-      };
-      if (tag['extends']) {
-        definition['extends'] = tag['extends'];
-      }
-      var reg = doc.registerElement(_name, definition);
-      return reg;
+      definition['prototype'] = Object.create(
+        extended ? Object.create(doc.createElement(extended).constructor).prototype : win.HTMLElement.prototype,
+        proto
+      );
+
+      return doc.registerElement(_name, definition);
     },
 
     /* Exposed Variables */
@@ -4401,16 +4422,21 @@ window.CustomElements.addModule(function(scope) {
         condition: touchFilter
       },
       tapmove: {
-        attach: ['pointerdown', 'pointerup'],
+        attach: ['pointerdown'],
         condition: function(event, custom){
           if (event.type == 'pointerdown') {
-            if (!custom.moveListener) custom.moveListener = xtag.addEvent(this, 'pointermove', custom.listener);
+            var listener = custom.listener.bind(this);
+            if (!custom.tapmoveListeners) custom.tapmoveListeners = xtag.addEvents(document, {
+              pointermove: listener,
+              pointerup: listener,
+              pointercancel: listener
+            });
           }
-          else if (event.type == 'pointerup') {
-            xtag.removeEvent(this, custom.moveListener);
-            custom.moveListener = null;
+          else if (event.type == 'pointerup' || event.type == 'pointercancel') {
+            xtag.removeEvents(document, custom.tapmoveListeners);
+            custom.tapmoveListeners = null;
           }
-          else return true;
+          return true;
         }
       },
       taphold: {
@@ -4832,7 +4858,7 @@ window.CustomElements.addModule(function(scope) {
     if (node.getAttribute('transition') != name){
 
       var transitions = node.__transitions__ || (node.__transitions__ = {}),
-          options = transitions[name] = obj || {};
+          options = transitions[name] = obj || transitions[name] || {};
 
       if (!loading) node.setAttribute('transitioning', name);