From ad07d1e4a5535f823ef1b98ec7a2e67282752ee2 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 26 Apr 2016 15:14:42 -0700 Subject: [PATCH 01/16] updating CSS --- src/main.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/main.css b/src/main.css index f139875..63a00d7 100644 --- a/src/main.css +++ b/src/main.css @@ -113,8 +113,7 @@ x-page[transition="enter"][transition-reverse][transition-exit="scale"], x-page[transitioning="enter"]:not([transition-enter]), x-page[transitioning="enter"][transition-reverse]:not([transition-exit]) { opacity: 1 !important; - transform: none !important; - will-change: auto; + transform: translate(0%, 0%) scale(1) rotate(0deg) !important; } @media (max-device-width: 1024px) { From a1991c315eb41cf721836fad8498c236a7ea10c6 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 26 Apr 2016 15:17:12 -0700 Subject: [PATCH 02/16] updating CSS --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 4f41787..a152c98 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.10", + "version": "0.1.11", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index 6bd75f6..e16bfe9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.10", + "version": "0.1.11", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", From 8ed4c8d9c49a748d2f0604d32f85b7197746a190 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 26 Apr 2016 15:45:46 -0700 Subject: [PATCH 03/16] updating CSS --- bower.json | 2 +- package.json | 2 +- src/main.css | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index a152c98..56fda2a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.11", + "version": "0.1.12", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index e16bfe9..3c758ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.11", + "version": "0.1.12", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 63a00d7..949372a 100644 --- a/src/main.css +++ b/src/main.css @@ -103,7 +103,6 @@ x-page[transitioning] { x-page[transition="enter"]:not([transitioning]) { overflow-y: visible !important; - transform: none !important; } x-page[transition="enter"], From c5d9de6388b6ea987220ebef1519b3a5a9be3f74 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 26 Apr 2016 16:15:55 -0700 Subject: [PATCH 04/16] updating CSS --- bower.json | 2 +- package.json | 2 +- src/main.css | 25 ++++++++----------------- src/main.js | 11 ----------- 4 files changed, 10 insertions(+), 30 deletions(-) diff --git a/bower.json b/bower.json index 56fda2a..31fa68a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.12", + "version": "0.1.13", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index 3c758ac..124f9fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.12", + "version": "0.1.13", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 949372a..05a67a5 100644 --- a/src/main.css +++ b/src/main.css @@ -1,16 +1,11 @@ -body { - overflow-x: hidden; - overflow-y: scroll; -} - x-page { display: none; position: absolute; top: 0; left: 0; right: 0; - height: 100vh; + height: 100%; z-index: 0; box-sizing: border-box; will-change: opacity, transform, -webkit-transform; @@ -34,16 +29,20 @@ x-page > footer { } x-page > section { - height: 100vh; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; overflow: auto; } x-page > section:not(:first-child) { - padding-top: 3.25em; + top: 3.25em; } x-page > section:not(:last-child) { - padding-bottom: 3.25em; + bottom: 3.25em; } x-page[transitioning="enter"][transition-enter="slide-left"], @@ -97,14 +96,6 @@ x-page[transition="enter"] { display: block; } -x-page[transitioning] { - overflow: hidden; -} - -x-page[transition="enter"]:not([transitioning]) { - overflow-y: visible !important; -} - x-page[transition="enter"], x-page[transition="enter"][transitioning], x-page[transition="enter"][transition-enter="scale"], diff --git a/src/main.js b/src/main.js index f9efee1..1ce76ce 100644 --- a/src/main.js +++ b/src/main.js @@ -2,18 +2,7 @@ var selected; - function clearStatusBar(){ - console.log(document.height <= window.outerHeight, document.height, window.outerHeight); - if (document.height <= window.outerHeight) document.body.style.height = window.outerHeight + 1 + 'px'; - window.scrollTo(0, 1); - } - - setTimeout(clearStatusBar, 50); - xtag.register('x-page', { - events: { - tapstart: clearStatusBar - }, accessors: { selected: { attribute: { From 7739887e02d7fb823c1ce88b8f9330fb9523caac Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 26 Apr 2016 16:33:04 -0700 Subject: [PATCH 05/16] updating CSS --- bower.json | 2 +- package.json | 2 +- src/main.css | 8 -------- 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/bower.json b/bower.json index 31fa68a..9a8d82e 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.13", + "version": "0.1.14", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index 124f9fc..922cb93 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.13", + "version": "0.1.14", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 05a67a5..9449f68 100644 --- a/src/main.css +++ b/src/main.css @@ -37,14 +37,6 @@ x-page > section { overflow: auto; } -x-page > section:not(:first-child) { - top: 3.25em; -} - -x-page > section:not(:last-child) { - bottom: 3.25em; -} - x-page[transitioning="enter"][transition-enter="slide-left"], x-page[transitioning="exit"][transition-exit="slide-left"], x-page[transitioning="enter"][transition-reverse][transition-exit="slide-right"], From 2b98d2b468e31a43a636b20195508e9ab64fc782 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Wed, 27 Apr 2016 10:47:08 -0700 Subject: [PATCH 06/16] adding webkit prefixes --- bower.json | 2 +- package.json | 2 +- src/main.css | 9 +++++++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 9a8d82e..f9fbfa1 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.14", + "version": "0.1.15", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index 922cb93..1b25812 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.14", + "version": "0.1.15", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 9449f68..ea58250 100644 --- a/src/main.css +++ b/src/main.css @@ -9,6 +9,7 @@ x-page { z-index: 0; box-sizing: border-box; will-change: opacity, transform, -webkit-transform; + -webkit-transition: transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; } @@ -17,6 +18,7 @@ x-page > footer { position: absolute; width: 100%; height: 3.25em; + line-height: 3.25em; z-index: 3; } @@ -41,6 +43,7 @@ x-page[transitioning="enter"][transition-enter="slide-left"], x-page[transitioning="exit"][transition-exit="slide-left"], x-page[transitioning="enter"][transition-reverse][transition-exit="slide-right"], x-page[transitioning="exit"][transition-reverse][transition-enter="slide-left"] { + -webkit-transform: translate(100%, 0%); transform: translate(100%, 0%); } @@ -48,6 +51,7 @@ x-page[transitioning="enter"][transition-enter="slide-right"], x-page[transitioning="exit"][transition-exit="slide-right"], x-page[transitioning="enter"][transition-reverse][transition-exit="slide-left"], x-page[transitioning="exit"][transition-reverse][transition-enter="slide-right"] { + -webkit-transform: translate(-100%, 0%); transform: translate(-100%, 0%); } @@ -56,12 +60,14 @@ x-page[transitioning="exit"][transition-exit="slide-down"], x-page[transitioning="enter"][transition-reverse][transition-exit="slide-up"], x-page[transitioning="exit"][transition-reverse][transition-enter="slide-down"] { transform: translate(0%, 100%); + -webkit-transform: translate(0%, 100%); } x-page[transitioning="enter"][transition-enter="slide-up"], x-page[transitioning="exit"][transition-exit="slide-up"], x-page[transitioning="enter"][transition-reverse][transition-exit="slide-down"], x-page[transitioning="exit"][transition-reverse][transition-enter="slide-up"] { + -webkit-transform: translate(0%, -100%); transform: translate(0%, -100%); } @@ -80,6 +86,7 @@ x-page[transitioning="exit"][transition-exit="scale"], x-page[transitioning="enter"][transition-reverse][transition-exit="scale"], x-page[transitioning="exit"][transition-reverse][transition-enter="scale"] { opacity: 0; + -webkit-transform: translate(0%, 0%) scale(0.5); transform: translate(0%, 0%) scale(0.5); } @@ -95,11 +102,13 @@ x-page[transition="enter"][transition-reverse][transition-exit="scale"], x-page[transitioning="enter"]:not([transition-enter]), x-page[transitioning="enter"][transition-reverse]:not([transition-exit]) { opacity: 1 !important; + -webkit-transform: translate(0%, 0%) scale(1) rotate(0deg) !important; transform: translate(0%, 0%) scale(1) rotate(0deg) !important; } @media (max-device-width: 1024px) { x-page { + -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } } From 148f6122ca08a76efcd4ac0276ef1e205d86b1e3 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Mon, 18 Jul 2016 23:45:23 -0700 Subject: [PATCH 07/16] changing to fixed layout compatible transitions --- bower.json | 2 +- demo/index.html | 72 ++++++++++++++++++++ index.html | 178 ++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/main.css | 141 ++++++++++++++++++++++---------------- src/main.js | 24 +++---- 6 files changed, 343 insertions(+), 76 deletions(-) create mode 100644 demo/index.html create mode 100644 index.html diff --git a/bower.json b/bower.json index f9fbfa1..1049afc 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.15", + "version": "0.1.16", "keywords": [ "web-components", "x-tag" diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..97b5052 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,72 @@ + + + + + + Scene Demo - X-Tag + + + + + + + + + + + + + + + +
Scene 1 Header
+
+
Scene 1 Footer
+ + + +
Scene 2 Header
+
+
Scene 2 Footer
+ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..bfc5083 --- /dev/null +++ b/index.html @@ -0,0 +1,178 @@ + + + + + + + + + + Stub Demo - X-Tag + + + + + + + + + + + + + +
Header ONE
+
+
    +
  • ONE
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+
Footer ONE
+ + + +
Header TWO
+
+
    +
  • TWO
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+
Footer TWO
+ + + +
Header THREE
+
+
    +
  • THREE
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+
Footer THREE
+ + + +
Header FOUR
+
+
    +
  • FOUR
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+
Footer FOUR
+ + + + + + + diff --git a/package.json b/package.json index 1b25812..9115bf7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.15", + "version": "0.1.16", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index ea58250..22fea63 100644 --- a/src/main.css +++ b/src/main.css @@ -1,25 +1,36 @@ x-page { - display: none; + display: block; + visibility: hidden; position: absolute; top: 0; left: 0; right: 0; - height: 100%; - z-index: 0; + min-height: 100%; + box-sizing: border-box; + contain: layout style; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} + +x-page > * { + position: absolute; + contain: layout style; box-sizing: border-box; will-change: opacity, transform, -webkit-transform; - -webkit-transition: transform 0.5s ease, opacity 0.5s ease; - transition: transform 0.5s ease, opacity 0.5s ease; + -webkit-transition: opacity ease, -webkit-transform ease; + transition: opacity ease, transform ease; + -webkit-transition-duration: inherit; + transition-duration: inherit; } x-page > header, x-page > footer { - position: absolute; + position: fixed; width: 100%; - height: 3.25em; - line-height: 3.25em; - z-index: 3; + height: 3.5em; + line-height: 3.5em; + z-index: 1; } x-page > header { @@ -32,82 +43,94 @@ x-page > footer { x-page > section { position: absolute; - top: 0; left: 0; right: 0; - bottom: 0; - overflow: auto; + width: 100%; + overflow: visible; } -x-page[transitioning="enter"][transition-enter="slide-left"], -x-page[transitioning="exit"][transition-exit="slide-left"], -x-page[transitioning="enter"][transition-reverse][transition-exit="slide-right"], -x-page[transitioning="exit"][transition-reverse][transition-enter="slide-left"] { - -webkit-transform: translate(100%, 0%); - transform: translate(100%, 0%); +x-page > section, +x-page > [page-content] { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +x-page > header ~ section { + padding-top: 3.5em; +} + +x-page > section:not(:last-child) { + padding-bottom: 3.5em; +} + +x-page > section:not([page-transition]), +x-page > [page-transition~="fade"] { + opacity: 0; +} + +x-page > header:not([page-transition]), +x-page > [page-transition~="slide-down"] { + top: 0; + transform: translate(0%, -100%); + -webkit-transform: translate(0%, -100%); } -x-page[transitioning="enter"][transition-enter="slide-right"], -x-page[transitioning="exit"][transition-exit="slide-right"], -x-page[transitioning="enter"][transition-reverse][transition-exit="slide-left"], -x-page[transitioning="exit"][transition-reverse][transition-enter="slide-right"] { +x-page > footer:not([page-transition]), +x-page > [page-transition~="slide-up"] { + bottom: 0; + -webkit-transform: translate(0%, 100%); + transform: translate(0%, 100%); +} + +x-page > [page-transition~="slide-right"] { + left: 0; -webkit-transform: translate(-100%, 0%); transform: translate(-100%, 0%); } -x-page[transitioning="enter"][transition-enter="slide-down"], -x-page[transitioning="exit"][transition-exit="slide-down"], -x-page[transitioning="enter"][transition-reverse][transition-exit="slide-up"], -x-page[transitioning="exit"][transition-reverse][transition-enter="slide-down"] { - transform: translate(0%, 100%); - -webkit-transform: translate(0%, 100%); +x-page > [page-transition~="slide-left"] { + right: 0; + -webkit-transform: translate(100%, 0%); + transform: translate(100%, 0%); } -x-page[transitioning="enter"][transition-enter="slide-up"], -x-page[transitioning="exit"][transition-exit="slide-up"], -x-page[transitioning="enter"][transition-reverse][transition-exit="slide-down"], -x-page[transitioning="exit"][transition-reverse][transition-enter="slide-up"] { - -webkit-transform: translate(0%, -100%); - transform: translate(0%, -100%); +x-page[selected] > header, +x-page[selected] > footer { + z-index: 2; } -x-page[selected], -x-page[transitioning="enter"][transition-enter^="slide"], -x-page[transitioning="exit"][transition-exit^="slide"] { +x-page[selected] > section { z-index: 1; } -x-page[transitioning="exit"][transition-reverse][transition-enter^="slide"] { - z-index: 2; +x-page:not([active]) > section, +x-page:not([active]) > [page-content] { + position: fixed; } -x-page[transitioning="enter"][transition-enter="scale"], -x-page[transitioning="exit"][transition-exit="scale"], -x-page[transitioning="enter"][transition-reverse][transition-exit="scale"], -x-page[transitioning="exit"][transition-reverse][transition-enter="scale"] { - opacity: 0; - -webkit-transform: translate(0%, 0%) scale(0.5); - transform: translate(0%, 0%) scale(0.5); +x-page:not([active]) > [page-transition~="slide"], { + z-index: 3; +} +x-page:not([active]) > header:not([page-transition]), +x-page:not([active]) > footer:not([page-transition]) { + z-index: 4; } -x-page[transitioning], -x-page[transition="enter"] { - display: block; +x-page[active] { + visibility: visible; } -x-page[transition="enter"], -x-page[transition="enter"][transitioning], -x-page[transition="enter"][transition-enter="scale"], -x-page[transition="enter"][transition-reverse][transition-exit="scale"], -x-page[transitioning="enter"]:not([transition-enter]), -x-page[transitioning="enter"][transition-reverse]:not([transition-exit]) { - opacity: 1 !important; - -webkit-transform: translate(0%, 0%) scale(1) rotate(0deg) !important; - transform: translate(0%, 0%) scale(1) rotate(0deg) !important; +x-page[active] > header, +x-page[active] > footer, +x-page[active] > section, +x-page[active] > [page-transition] { + opacity: 1; + -webkit-transform: translate(0%, 0%) scale(1) rotate(0deg); + transform: translate(0%, 0%) scale(1) rotate(0deg); } @media (max-device-width: 1024px) { - x-page { + x-page > * { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } diff --git a/src/main.js b/src/main.js index 1ce76ce..fcb3586 100644 --- a/src/main.js +++ b/src/main.js @@ -4,17 +4,15 @@ xtag.register('x-page', { accessors: { + active: { + attribute: { boolean: true }, + }, selected: { attribute: { boolean: true }, set: function(val, old){ if (val) selected = this; - xtag.transition(this, val ? 'enter' : 'exit', { - after: function(){ - xtag.fireEvent(this, this.selected ? 'show' : 'hide'); - } - }); if (val && val != old && this.parentNode) xtag.query(document, 'x-page').forEach(function(node){ if (node != this) node.selected = false; }, this); @@ -22,17 +20,13 @@ } }, methods: { - show: function(reverse){ - var last = selected; - if (reverse) { - this.setAttribute('transition-reverse', ''); - if (last) last.setAttribute('transition-reverse', ''); - } - else { - this.removeAttribute('transition-reverse'); - if (last) last.removeAttribute('transition-reverse'); - } + show: function(){ this.selected = true; + this.active = true; + }, + hide: function(){ + this.selected = false; + this.active = false; } } }); From fd9793a974246cfaab4a6f9e56a1431dc39b343e Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 19 Jul 2016 00:06:57 -0700 Subject: [PATCH 08/16] changing to fixed layout compatible transitions --- bower.json | 2 +- demo/index.html | 12 ++++++------ package.json | 2 +- src/main.css | 27 ++++++++++++++------------- 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/bower.json b/bower.json index 1049afc..a0043fd 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.16", + "version": "0.1.17", "keywords": [ "web-components", "x-tag" diff --git a/demo/index.html b/demo/index.html index 97b5052..3505143 100644 --- a/demo/index.html +++ b/demo/index.html @@ -56,15 +56,15 @@ -
Scene 1 Header
-
-
Scene 1 Footer
+
Scene 1 Header
+
+
Scene 1 Footer
 -
Scene 2 Header
-
-
Scene 2 Footer
+
Scene 2 Header
+
+
Scene 2 Footer
 diff --git a/package.json b/package.json index 9115bf7..03b44a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.16", + "version": "0.1.17", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 22fea63..0abf1da 100644 --- a/src/main.css +++ b/src/main.css @@ -63,25 +63,25 @@ x-page > section:not(:last-child) { padding-bottom: 3.5em; } -x-page > section:not([page-transition]), x-page > [page-transition~="fade"] { opacity: 0; } -x-page > header:not([page-transition]), x-page > [page-transition~="slide-down"] { top: 0; transform: translate(0%, -100%); -webkit-transform: translate(0%, -100%); } -x-page > footer:not([page-transition]), x-page > [page-transition~="slide-up"] { bottom: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); } +x-page > header:not([page-transition]), +x-page > footer:not([page-transition]), +x-page > section:not([page-transition]), x-page > [page-transition~="slide-right"] { left: 0; -webkit-transform: translate(-100%, 0%); @@ -94,13 +94,22 @@ x-page > [page-transition~="slide-left"] { transform: translate(100%, 0%); } +x-page[selected] > section { + z-index: 1; +} + x-page[selected] > header, x-page[selected] > footer { z-index: 2; } -x-page[selected] > section { - z-index: 1; +x-page:not([selected]):not([active]) > section { + z-index: 3; +} + +x-page:not([selected]):not([active]) > header, +x-page:not([selected]):not([active]) > footer { + z-index: 4; } x-page:not([active]) > section, @@ -108,14 +117,6 @@ x-page:not([active]) > [page-content] { position: fixed; } -x-page:not([active]) > [page-transition~="slide"], { - z-index: 3; -} -x-page:not([active]) > header:not([page-transition]), -x-page:not([active]) > footer:not([page-transition]) { - z-index: 4; -} - x-page[active] { visibility: visible; } From a56270aa3149547140b5e4558d7ad6995e024699 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 19 Jul 2016 00:12:47 -0700 Subject: [PATCH 09/16] changing to fixed layout compatible transitions --- src/main.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/main.css b/src/main.css index 0abf1da..4bb2ff9 100644 --- a/src/main.css +++ b/src/main.css @@ -27,7 +27,8 @@ x-page > * { x-page > header, x-page > footer { position: fixed; - width: 100%; + left: 0; + right: 0; height: 3.5em; line-height: 3.5em; z-index: 1; From e1f6c19e33d53b67a027ccdfda11976aa0f1952e Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 19 Jul 2016 00:12:54 -0700 Subject: [PATCH 10/16] changing to fixed layout compatible transitions --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index a0043fd..8c771ec 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.17", + "version": "0.1.18", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index 03b44a8..fa35f0a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.17", + "version": "0.1.18", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", From f16b40acaec37fe759253433c12b0156ac8e3bd2 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 19 Jul 2016 08:59:01 -0700 Subject: [PATCH 11/16] changing to fixed layout compatible transitions --- bower.json | 2 +- demo/index.html | 20 ++++++++++---------- package.json | 2 +- src/main.css | 12 ++++-------- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/bower.json b/bower.json index 8c771ec..5e82ae1 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.18", + "version": "0.1.19", "keywords": [ "web-components", "x-tag" diff --git a/demo/index.html b/demo/index.html index 3505143..2df2b54 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ - Scene Demo - X-Tag + X-Page Demo - X-Tag @@ -26,25 +26,25 @@ background: limegreen; } - #scene2 section { + #p2 section { height: 1500px; } - #scene1 header, - #scene1 footer { + #p1 header, + #p1 footer { background: lightblue; } - #scene1 section { + #p1 section { background: yellow; } - #scene2 header, - #scene2 footer { + #p2 header, + #p2 footer { background: gold; } - #scene2 section { + #p2 section { background: pink; } @@ -55,13 +55,13 @@ - +
Scene 1 Header
Scene 1 Footer
 - +
Scene 2 Header
Scene 2 Footer
diff --git a/package.json b/package.json index fa35f0a..45c9d3d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.18", + "version": "0.1.19", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 4bb2ff9..01dacd5 100644 --- a/src/main.css +++ b/src/main.css @@ -95,22 +95,18 @@ x-page > [page-transition~="slide-left"] { transform: translate(100%, 0%); } -x-page[selected] > section { - z-index: 1; -} - x-page[selected] > header, x-page[selected] > footer { - z-index: 2; + z-index: 1; } -x-page:not([selected]):not([active]) > section { - z-index: 3; +x-page:not([selected]):not([active]) > * { + z-index: 2; } x-page:not([selected]):not([active]) > header, x-page:not([selected]):not([active]) > footer { - z-index: 4; + z-index: 3; } x-page:not([active]) > section, From 0a859b6984c5c2ed4177f4a32c8abcd78236f97d Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Tue, 19 Jul 2016 17:05:39 -0700 Subject: [PATCH 12/16] changing to fixed layout compatible transitions --- bower.json | 2 +- demo/index.html | 25 +++++++++++++++++++++---- package.json | 2 +- src/main.css | 31 ++++++++++++++++++++----------- 4 files changed, 43 insertions(+), 17 deletions(-) diff --git a/bower.json b/bower.json index 5e82ae1..5ac004c 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.19", + "version": "0.1.20", "keywords": [ "web-components", "x-tag" diff --git a/demo/index.html b/demo/index.html index 2df2b54..2c58ca5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -26,12 +26,23 @@ background: limegreen; } + /*section div { + position: fixed; + top: 40%; + left: 40%; + height: 10em; + width: 10em; + background: purple; + }*/ + #p2 section { height: 1500px; } #p1 header, - #p1 footer { + #p1 footer, + #p3 header, + #p3 footer { background: lightblue; } @@ -53,20 +64,26 @@ - +
Scene 1 Header
-
+
Scene 1 Footer
Scene 2 Header
-
+
Scene 2 Footer
 + +
Scene 2 Header
+
+
Scene 2 Footer
+ + diff --git a/package.json b/package.json index 45c9d3d..c443b4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.19", + "version": "0.1.20", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 01dacd5..15f836c 100644 --- a/src/main.css +++ b/src/main.css @@ -17,7 +17,6 @@ x-page > * { position: absolute; contain: layout style; box-sizing: border-box; - will-change: opacity, transform, -webkit-transform; -webkit-transition: opacity ease, -webkit-transform ease; transition: opacity ease, transform ease; -webkit-transition-duration: inherit; @@ -68,33 +67,43 @@ x-page > [page-transition~="fade"] { opacity: 0; } +x-page > [page-transition~="slide-up"] { + transform: translate(0%, 100vh); + -webkit-transform: translate(0%, 100vh); +} + x-page > [page-transition~="slide-down"] { + transform: translate(0%, -100vh); + -webkit-transform: translate(0%, -100vh); +} + +x-page > [page-transition~="slide-top"] { top: 0; transform: translate(0%, -100%); -webkit-transform: translate(0%, -100%); } -x-page > [page-transition~="slide-up"] { +x-page > [page-transition~="slide-bottom"] { bottom: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); } +x-page > [page-transition~="slide-right"] { + right: 0; + -webkit-transform: translate(100%, 0%); + transform: translate(100%, 0%); +} + x-page > header:not([page-transition]), x-page > footer:not([page-transition]), x-page > section:not([page-transition]), -x-page > [page-transition~="slide-right"] { +x-page > [page-transition~="slide-left"] { left: 0; -webkit-transform: translate(-100%, 0%); transform: translate(-100%, 0%); } -x-page > [page-transition~="slide-left"] { - right: 0; - -webkit-transform: translate(100%, 0%); - transform: translate(100%, 0%); -} - x-page[selected] > header, x-page[selected] > footer { z-index: 1; @@ -123,8 +132,8 @@ x-page[active] > footer, x-page[active] > section, x-page[active] > [page-transition] { opacity: 1; - -webkit-transform: translate(0%, 0%) scale(1) rotate(0deg); - transform: translate(0%, 0%) scale(1) rotate(0deg); + -webkit-transform: none; + transform: none; } @media (max-device-width: 1024px) { From 5033be8712d90a00ef460f3e8c25b81dec461a54 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Fri, 22 Jul 2016 06:49:22 -0700 Subject: [PATCH 13/16] finally nailed it --- bower.json | 2 +- demo/index.html | 56 +++++++++---------- demo/x-tag-components.js | 118 ++++++++++++++++++++++++--------------- package.json | 2 +- src/main.css | 74 ++++++++++++------------ src/main.js | 19 ++++--- 6 files changed, 150 insertions(+), 121 deletions(-) diff --git a/bower.json b/bower.json index 5ac004c..0230eb1 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.20", + "version": "0.1.21", "keywords": [ "web-components", "x-tag" diff --git a/demo/index.html b/demo/index.html index 2c58ca5..901cb77 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,11 +19,16 @@ z-index: 10; } + header, + footer { + background: lightblue; + } + section { width: 50%; height: 3000px; margin: 0 auto; - background: limegreen; + background: url(lorem.jpg); } /*section div { @@ -35,30 +40,11 @@ background: purple; }*/ - #p2 section { - height: 1500px; - } - - #p1 header, - #p1 footer, - #p3 header, - #p3 footer { - background: lightblue; - } - - #p1 section { - background: yellow; - } - - #p2 header, - #p2 footer { + x-page:nth-child(even) header, + x-page:nth-child(even) footer { background: gold; } - #p2 section { - background: pink; - } - @@ -66,24 +52,38 @@ - +
Scene 1 Header
Scene 1 Footer
 - +
Scene 2 Header
Scene 2 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
+ + + + diff --git a/demo/x-tag-components.js b/demo/x-tag-components.js index 128bd31..55836d2 100644 --- 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,16 +4293,16 @@ 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); @@ -4297,9 +4310,9 @@ window.CustomElements.addModule(function(scope) { 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); diff --git a/package.json b/package.json index c443b4e..bdc534f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.20", + "version": "0.1.21", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.css b/src/main.css index 15f836c..e466ad8 100644 --- a/src/main.css +++ b/src/main.css @@ -1,20 +1,28 @@ +body:not([allow-scroll-x]) { + overflow-x: hidden; +} + x-page { display: block; visibility: hidden; - position: absolute; + position: fixed; top: 0; left: 0; right: 0; min-height: 100%; box-sizing: border-box; contain: layout style; + -webkit-transition: opacity ease; + transition: opacity ease; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } -x-page > * { - position: absolute; +x-page > header, +x-page > footer, +x-page > section { + position: fixed; contain: layout style; box-sizing: border-box; -webkit-transition: opacity ease, -webkit-transform ease; @@ -25,7 +33,6 @@ x-page > * { x-page > header, x-page > footer { - position: fixed; left: 0; right: 0; height: 3.5em; @@ -47,10 +54,6 @@ x-page > section { right: 0; width: 100%; overflow: visible; -} - -x-page > section, -x-page > [page-content] { -webkit-backface-visibility: hidden; backface-visibility: hidden; } @@ -63,49 +66,46 @@ x-page > section:not(:last-child) { padding-bottom: 3.5em; } -x-page > [page-transition~="fade"] { +x-page:not([page-transition]) > section, +x-page[page-transition~="fade"] { opacity: 0; } -x-page > [page-transition~="slide-up"] { +x-page[page-transition~="slide-up"] > * { transform: translate(0%, 100vh); -webkit-transform: translate(0%, 100vh); } -x-page > [page-transition~="slide-down"] { +x-page[page-transition~="slide-down"] > * { transform: translate(0%, -100vh); -webkit-transform: translate(0%, -100vh); } -x-page > [page-transition~="slide-top"] { +x-page[page-transition~="slide-left"] > * { + left: 0; + -webkit-transform: translate(-100%, 0%); + transform: translate(-100%, 0%); +} + +x-page[page-transition~="slide-right"] > * { + right: 0; + -webkit-transform: translate(100%, 0%); + transform: translate(100%, 0%); +} + +x-page:not([page-transition]) > header { top: 0; transform: translate(0%, -100%); -webkit-transform: translate(0%, -100%); } -x-page > [page-transition~="slide-bottom"] { +x-page:not([page-transition]) > footer { bottom: 0; -webkit-transform: translate(0%, 100%); transform: translate(0%, 100%); } -x-page > [page-transition~="slide-right"] { - right: 0; - -webkit-transform: translate(100%, 0%); - transform: translate(100%, 0%); -} - -x-page > header:not([page-transition]), -x-page > footer:not([page-transition]), -x-page > section:not([page-transition]), -x-page > [page-transition~="slide-left"] { - left: 0; - -webkit-transform: translate(-100%, 0%); - transform: translate(-100%, 0%); -} - -x-page[selected] > header, -x-page[selected] > footer { +x-page[selected] { z-index: 1; } @@ -118,19 +118,17 @@ x-page:not([selected]):not([active]) > footer { z-index: 3; } -x-page:not([active]) > section, -x-page:not([active]) > [page-content] { - position: fixed; +x-page[active] { + position: absolute; } -x-page[active] { +x-page[active], +x-page[transitioning="inactive"] { visibility: visible; } -x-page[active] > header, -x-page[active] > footer, -x-page[active] > section, -x-page[active] > [page-transition] { +x-page[active]:not([transition="inactive"]), +x-page[active]:not([transition="inactive"]) > * { opacity: 1; -webkit-transform: none; transform: none; diff --git a/src/main.js b/src/main.js index fcb3586..f5acccc 100644 --- a/src/main.js +++ b/src/main.js @@ -1,27 +1,32 @@ (function(){ - var selected; - xtag.register('x-page', { accessors: { active: { attribute: { boolean: true }, + set: function(val, old){ + if (val !== old) xtag.transition(this, val ? 'active' : 'inactive'); + } }, selected: { attribute: { boolean: true }, set: function(val, old){ - if (val) selected = this; - if (val && val != old && this.parentNode) xtag.query(document, 'x-page').forEach(function(node){ - if (node != this) node.selected = false; - }, this); + if (val && val != old && this.parentNode) { + xtag.query(document, 'x-page').forEach(function(node){ + if (node != this) node.selected = false; + }, this); + } } } }, methods: { - show: function(){ + show: function(deactivate){ this.selected = true; + if (deactivate) xtag.query(document, 'x-page').forEach(function(node){ + node.active = false; + }); this.active = true; }, hide: function(){ From c2b2f1433fe98463ad58a8f90a662da1d9e7cd19 Mon Sep 17 00:00:00 2001 From: Daniel Buchner Date: Fri, 22 Jul 2016 07:06:42 -0700 Subject: [PATCH 14/16] remove duplicative active state setter --- bower.json | 2 +- package.json | 2 +- src/main.js | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/bower.json b/bower.json index 0230eb1..b82387f 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "x-page", "description": "", - "version": "0.1.21", + "version": "0.1.22", "keywords": [ "web-components", "x-tag" diff --git a/package.json b/package.json index bdc534f..e4f49e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "x-page", - "version": "0.1.21", + "version": "0.1.22", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", diff --git a/src/main.js b/src/main.js index f5acccc..69b679b 100644 --- a/src/main.js +++ b/src/main.js @@ -25,9 +25,8 @@ show: function(deactivate){ this.selected = true; if (deactivate) xtag.query(document, 'x-page').forEach(function(node){ - node.active = false; - }); - this.active = true; + node.active = node == this; + }, this); }, hide: function(){ this.selected = false; From 74996611bbc70be9c4d776686ee4918f2e419b1c Mon Sep 17 00:00:00 2001 From: Ivan Date: Thu, 9 Feb 2017 20:27:36 -0600 Subject: [PATCH 15/16] 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 16/16] 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",