From 2028e71db52f30f1d33f88d2f5ce5f976834e447 Mon Sep 17 00:00:00 2001 From: Andrei Alexandru Date: Tue, 24 Apr 2018 12:10:01 +0300 Subject: [PATCH 01/10] cosmoz-tab collapse animation iron-collapse removed; --- bower.json | 2 -- cosmoz-tab.html | 21 ++++++++------ cosmoz-tab.js | 15 +++------- cosmoz-tabbable-behavior.html | 4 +-- cosmoz-tabbed-behavior.html | 52 ++++++++++++++++++++++++++++++++++- 5 files changed, 69 insertions(+), 25 deletions(-) diff --git a/bower.json b/bower.json index f5f423e..76652fa 100644 --- a/bower.json +++ b/bower.json @@ -8,7 +8,6 @@ "cosmoz-page-router": "Neovici/cosmoz-page-router#^1.0.0", "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2", "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2", - "iron-collapse": "PolymerElements/iron-collapse#1 - 2", "paper-tabs": "PolymerElements/paper-tabs#1 - 2", "paper-badge": "PolymerElements/paper-badge#1 - 2", "iron-selector": "PolymerElements/iron-selector#1 - 2", @@ -37,7 +36,6 @@ "cosmoz-page-router": "Neovici/cosmoz-page-router#^1.0.0", "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.6", "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.7", - "iron-collapse": "PolymerElements/iron-collapse#^1.3.0", "paper-tabs": "PolymerElements/paper-tabs#^1.8.0", "paper-badge": "PolymerElements/paper-badge#^1.1.4", "iron-selector": "PolymerElements/iron-selector#^1.5.3", diff --git a/cosmoz-tab.html b/cosmoz-tab.html index 44f6ddf..6089a47 100644 --- a/cosmoz-tab.html +++ b/cosmoz-tab.html @@ -1,7 +1,6 @@ - @@ -37,7 +36,6 @@ } :host(:not([accordion])), - :host(:not([accordion])) #collapse, :host(:not([accordion])) #content { @apply --layout-vertical; @apply --layout-flex-auto; @@ -125,8 +123,15 @@ @apply --layout-wrap; } - :host([has-cards][accordion]) #content { - display: block; + :host(:not([has-cards])[accordion]) #content { + transition-duration: var(--cosmoz-tab-collapse-transition-duration, 300ms); + overflow: hidden; + transform: translate3d(0,0,0); + backface-visibility: hidden; + } + + :host(:not([has-cards])[accordion]:not([is-selected]):not([animating]) ) #content { + display: none; } paper-badge { @@ -146,11 +151,9 @@

[[ heading ]]

- -
- -
- +
+ +
diff --git a/cosmoz-tab.js b/cosmoz-tab.js index b348348..458cb07 100644 --- a/cosmoz-tab.js +++ b/cosmoz-tab.js @@ -78,6 +78,10 @@ return this.disabled || this.hidden; }, + get animated() { + return this.accordion && !this.hasCards; + }, + _onResize() { // HACK(pasleq): Can't explain why, but under Chrome 62, we've experienced disappearing content // the tab content is scolled. This hack seems to fix this issue. @@ -96,17 +100,6 @@ return items && items.length > 0; }, - /** - * Computes opened property of the included `iron-collapse`. - * - * @param {Boolean} accordion The accordion property - * @param {Boolean} hasCards The hasCards property - * @param {Boolean} isSelected The isSelected property - * @returns {Boolean} True if `hasCards` or `isSelected` - */ - _computeOpened(accordion, hasCards = this.hasCards, isSelected = this.isSelected) { - return !accordion || hasCards || isSelected; - }, /** * Observes changes to a property and fires a bubbling diff --git a/cosmoz-tabbable-behavior.html b/cosmoz-tabbable-behavior.html index 7685760..6cc646b 100644 --- a/cosmoz-tabbable-behavior.html +++ b/cosmoz-tabbable-behavior.html @@ -199,10 +199,10 @@ multiChanged(multi, old) { this._selection.multi = multi; - - if (multi === true && old === false && this.selected !== null && this.selected !== undefined) { + if (multi === true && old === false && this.selected != null) { this.set('selectedValues', [this._normalizeValue(this.selected)]); } else if (multi === false && old === true && this.selectedValues[0] !== undefined) { + this._selectMulti([this.selectedValues[0]]); this.selected = this.selectedValues[0]; } this._updateSelected(); diff --git a/cosmoz-tabbed-behavior.html b/cosmoz-tabbed-behavior.html index 31e8b01..a202c71 100644 --- a/cosmoz-tabbed-behavior.html +++ b/cosmoz-tabbed-behavior.html @@ -38,7 +38,8 @@ type: Boolean, value: false, reflectToAttribute: true, - notify: true + notify: true, + observer: '_animatedSelectedChanged' }, /** @@ -94,6 +95,55 @@ value: '', notify: true }, + + animating: { + type: Boolean, + reflectToAttribute: true, + value: false + } + }, + + created() { + this._onSelectedTransitionEnd = this._onSelectedTransitionEnd.bind(this); + }, + + get animated() { + return this.accordion; + }, + + _animatedSelectedChanged(isSelected) { + if (!this.animated) { + return; + } + const el = this.$.content, + style = el.style; + + style.transitionDuration = 0; + this.animating = true; + + let height = el.getBoundingClientRect()['height'], + from = isSelected ? '0px' : height + 'px', + to = !isSelected ? '0px' : height + 'px'; + + el.style.maxHeight = from; + + window.requestAnimationFrame(() => { + el.addEventListener('transitionend', this._onSelectedTransitionEnd); + style.transitionDuration = ''; + style.maxHeight = to; + }, 8); + }, + + /** + * Listener for `transitionend` event. + * + * @returns {void} + */ + _onSelectedTransitionEnd() { + const el = this.$.content; + this.animating = false; + el.removeEventListener('transitionend', this._onSelectedTransitionEnd); + el.style.maxHeight = ''; }, /** From 9c9f0cdf103053d33a5525c522089a0aaafe1655 Mon Sep 17 00:00:00 2001 From: Andrei Alexandru Date: Tue, 24 Apr 2018 12:15:28 +0300 Subject: [PATCH 02/10] cosmoz-tab-card updated iron-collapse removed; --- cosmoz-tab-card.html | 18 ++++++++++++------ cosmoz-tab-card.js | 13 +------------ 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/cosmoz-tab-card.html b/cosmoz-tab-card.html index c073ef4..96188a1 100644 --- a/cosmoz-tab-card.html +++ b/cosmoz-tab-card.html @@ -1,5 +1,4 @@ - @@ -62,6 +61,14 @@ } :host([accordion]) #content { + transition-duration: var(--cosmoz-tab-card-transition-duration, 300ms); + overflow: hidden; + transform: translate3d(0,0,0); + backface-visibility: hidden; + } + + :host([accordion]:not([is-selected]):not([animating])) #content { + display: none; @apply --cosmoz-tab-card-content-accordion; } @@ -117,11 +124,10 @@

[[ heading ]]

- -
- -
- + +
+ +
diff --git a/cosmoz-tab-card.js b/cosmoz-tab-card.js index 3be7b25..e486ac3 100644 --- a/cosmoz-tab-card.js +++ b/cosmoz-tab-card.js @@ -25,17 +25,6 @@ */ _computeElevation: function (accordion) { return accordion ? 0 : 1; - }, - - /** - * Computes opened property of the included `iron-collapse`. - * - * @param {Boolean} accordion The accordion property - * @param {Boolean} isSelected The isSelected property - * @returns {Boolean} True if not `accordion` or if `isSelected` - */ - _computeOpened: function (accordion, isSelected) { - return !accordion || isSelected; - }, + } }); }()); From 3a2c71b76b7c8b7e10b1925b64cfab424da7304b Mon Sep 17 00:00:00 2001 From: Andrei Alexandru Date: Tue, 24 Apr 2018 15:20:14 +0300 Subject: [PATCH 03/10] css , js fixes --- cosmoz-tab.html | 2 +- cosmoz-tabbed-behavior.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cosmoz-tab.html b/cosmoz-tab.html index 6089a47..4826414 100644 --- a/cosmoz-tab.html +++ b/cosmoz-tab.html @@ -130,7 +130,7 @@ backface-visibility: hidden; } - :host(:not([has-cards])[accordion]:not([is-selected]):not([animating]) ) #content { + :host(:not([has-cards])[accordion]:not([is-selected]):not([animating])) #content { display: none; } diff --git a/cosmoz-tabbed-behavior.html b/cosmoz-tabbed-behavior.html index a202c71..3b3487a 100644 --- a/cosmoz-tabbed-behavior.html +++ b/cosmoz-tabbed-behavior.html @@ -131,7 +131,7 @@ el.addEventListener('transitionend', this._onSelectedTransitionEnd); style.transitionDuration = ''; style.maxHeight = to; - }, 8); + }); }, /** From 59e640d2f1921c73bd538e86409980f159176440 Mon Sep 17 00:00:00 2001 From: Andrei Alexandru Date: Tue, 24 Apr 2018 15:22:06 +0300 Subject: [PATCH 04/10] accordion tests updated accordion tests implemented with getComputedStyle, getPropertyValue --- test/accordion.html | 24 ++++++++++++++---------- test/cards.html | 29 ++++++++++++++++------------- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/test/accordion.html b/test/accordion.html index 442f02c..7d3d55e 100644 --- a/test/accordion.html +++ b/test/accordion.html @@ -53,22 +53,26 @@ }, 90); }); - test('in accordion mode unselected items are closed', function (done) { - Polymer.Base.async(function () { - var item = tabs.items[0]; - assert.isNotNull(item.$.collapse); - assert.isFalse(item.$.collapse.opened); + test('in accordion mode unselected items are closed', done => { + Polymer.Base.async(() => { + const item = tabs.items[0], + el = item.$.content, + style = getComputedStyle(el); + + assert.equal(style.getPropertyValue('display'), 'none'); done(); }, 90); }); - test('in accordion mode selected items are opened', function (done) { - Polymer.Base.async(function () { + test('in accordion mode selected items are opened', done => { + Polymer.Base.async(() => { assert.lengthOf(tabs.selectedItems, 2); - tabs.selectedItems.forEach(function (item) { - assert.isNotNull(item.$.collapse); - assert.isTrue(item.$.collapse.opened); + tabs.selectedItems.forEach(item => { + const el = item.$.content, + style = getComputedStyle(el); + + assert.equal(style.getPropertyValue('display'), 'block'); }); done(); diff --git a/test/cards.html b/test/cards.html index cb81097..55e6e0b 100644 --- a/test/cards.html +++ b/test/cards.html @@ -83,13 +83,14 @@ }, 90); }); - test('cards are opened', function (done) { - var tab = tabs.items[0]; - - Polymer.Base.async(function () { - - tab.items.forEach(function (item) { - assert.isTrue(item.$.collapse.opened); + test('cards are opened', done => { + const tab = tabs.items[0]; + + Polymer.Base.async(() => { + tab.items.forEach(item => { + const el = item.$.content, + style = getComputedStyle(el); + assert.equal(style.getPropertyValue('display'), 'block'); }); done(); @@ -143,13 +144,15 @@ }, 90); }); - test('in accordion mode selected cards are opened', function (done) { - Polymer.Base.async(function () { - var tab = tabs.items[0]; + test('in accordion mode selected cards are opened', done => { + Polymer.Base.async(() => { + const tab = tabs.items[0]; assert.lengthOf(tab.selectedItems, 1); - tab.selectedItems.forEach(function (item) { - assert.isTrue(item.$.collapse.opened); + tab.selectedItems.forEach(item => { + const el = item.$.content, + style = getComputedStyle(el); + assert.equal(style.getPropertyValue('display'), 'block'); }); done(); }, 90); @@ -164,7 +167,7 @@ assert.lengthOf(unselected, 2); unselected.forEach(function (item) { - assert.isFalse(item.$.collapse.opened); + assert.equal(item.$.content.style.display, ''); }); done(); }, 90); From f5e1cef74a0b1b5bb7a6356338e26fabd3f52b86 Mon Sep 17 00:00:00 2001 From: Andrei Alexandru Date: Tue, 24 Apr 2018 15:50:32 +0300 Subject: [PATCH 05/10] accordion es6 updates --- test/accordion.html | 55 +++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/test/accordion.html b/test/accordion.html index 7d3d55e..edea8c8 100644 --- a/test/accordion.html +++ b/test/accordion.html @@ -25,27 +25,28 @@