From 74996611bbc70be9c4d776686ee4918f2e419b1c Mon Sep 17 00:00:00 2001 From: Ivan Date: Thu, 9 Feb 2017 20:27:36 -0600 Subject: [PATCH 1/2] fixing demos --- demo/index.html | 89 +++++++++++++++++++++---------------------------- index.html | 7 ++-- src/main.css | 28 ++++++++++++++++ src/main.js | 5 ++- 4 files changed, 73 insertions(+), 56 deletions(-) diff --git a/demo/index.html b/demo/index.html index 901cb77..238eea3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,85 +5,72 @@ X-Page Demo - X-Tag - - + + - - - + - +
Scene 1 Header
-
+
+
+
Scene 1 Footer
Scene 2 Header
-
+
+
+
Scene 2 Footer
 -
Scene 2 Header
-
-
Scene 2 Footer
- - -
Scene 3 Header
-
+
+
+
Scene 3 Footer
Scene 4 Header
-
+
+
+
Scene 4 Footer
 + +
Scene 5 Header
+
+
+
+
Scene 5 Footer
+ + - + diff --git a/index.html b/index.html index bfc5083..4dc2ac8 100644 --- a/index.html +++ b/index.html @@ -56,7 +56,7 @@ - +
Header ONE
    @@ -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(); } }) diff --git a/src/main.css b/src/main.css index e466ad8..e1b89c8 100644 --- 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 index 69b679b..978dbb6 100644 --- 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; } } From 20727cf4d2dab16e8714fbc407dbbb30a22dcf63 Mon Sep 17 00:00:00 2001 From: Ivan Date: Thu, 9 Feb 2017 20:36:26 -0600 Subject: [PATCH 2/2] updating package, bower and readme --- README.md | 34 +++++++++++----------------------- bower.json | 2 +- package.json | 2 +- 3 files changed, 13 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index da645df..56ed911 100644 --- 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 +... +... ``` -# 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(); +``` \ No newline at end of file diff --git a/bower.json b/bower.json index b82387f..a9b98f6 100644 --- 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/package.json b/package.json index e4f49e2..d287951 100644 --- 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",