Skip to content

Commit

Permalink
Merge pull request #47 from plumelo/feature/NEOV-205-replace-iron-col…
Browse files Browse the repository at this point in the history 
…lapse

Iron-collapse removed, div with id content css transition.

fixes #46
  • Loading branch information
@nomego
nomego authored May 17, 2018
2 parents 059d411 + 07d3acb commit 86ce740
Show file tree
Hide file tree
Showing 11 changed files with 1,015 additions and 533 deletions.
2 changes: 0 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
"iron-selector": "PolymerElements/iron-selector#1 - 2",
"paper-material": "PolymerElements/paper-material#1 - 2",
Expand Down Expand Up @@ -36,7 +35,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",
"iron-selector": "PolymerElements/iron-selector#^1.5.3",
"paper-material": "PolymerElements/paper-material#^1.0.7",
Expand Down
18 changes: 12 additions & 6 deletions cosmoz-tab-card.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../iron-collapse/iron-collapse.html" />
<link rel="import" href="../iron-icon/iron-icon.html" />
<link rel="import" href="../iron-icons/iron-icons.html" />
<link rel="import" href="../paper-icon-button/paper-icon-button.html" />
Expand Down Expand Up @@ -62,6 +61,14 @@
}

:host([accordion]) #content {
transition-duration: var(--cosmoz-tab-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;
}

Expand Down Expand Up @@ -117,11 +124,10 @@ <h1 class="heading">[[ heading ]]</h1>
<slot name="card-actions"></slot>
<paper-icon-button class="button" hidden$="[[ !accordion ]]" icon$="{{ _computeOpenedIcon(isSelected) }}"></paper-icon-button>
</div>
<iron-collapse id="collapse" no-animation="[[ !accordion ]]" opened="[[ _computeOpened(accordion, isSelected) ]]">
<div id="content">
<slot></slot>
</div>
</iron-collapse>

<div id="content">
<slot></slot>
</div>
</paper-material>
</template>
<script type="text/javascript" src="cosmoz-tab-card.js"></script>
Expand Down
13 changes: 1 addition & 12 deletions cosmoz-tab-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
}
});
}());
21 changes: 12 additions & 9 deletions cosmoz-tab.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
Expand Down Expand Up @@ -37,7 +36,6 @@
}

:host(:not([accordion])),
:host(:not([accordion])) #collapse,
:host(:not([accordion])) #content {
@apply --layout-vertical;
@apply --layout-flex-auto;
Expand Down Expand Up @@ -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-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-icon-button {
Expand All @@ -145,11 +150,9 @@ <h1 class="heading">[[ heading ]]</h1>
<paper-icon-button icon="[[ _computeOpenedIcon(isSelected) ]]"></paper-icon-button>
</div>

<iron-collapse id="collapse" no-animation="[[ !accordion ]]" opened="[[ _computeOpened(accordion, hasCards, isSelected) ]]">
<div id="content">
<slot></slot>
</div>
</iron-collapse>
<div id="content">
<slot></slot>
</div>

</template>
<script type="text/javascript" src="cosmoz-tab.js"></script>
Expand Down
15 changes: 4 additions & 11 deletions cosmoz-tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions cosmoz-tabbable-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
52 changes: 51 additions & 1 deletion cosmoz-tabbed-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
notify: true,
observer: '_animatedSelectedChanged'
},

/**
Expand Down Expand Up @@ -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;
});
},

/**
* Listener for `transitionend` event.
*
* @returns {void}
*/
_onSelectedTransitionEnd() {
const el = this.$.content;
this.animating = false;
el.removeEventListener('transitionend', this._onSelectedTransitionEnd);
el.style.maxHeight = '';
},

/**
Expand Down
92 changes: 55 additions & 37 deletions test/accordion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,62 +25,80 @@
</test-fixture>

<script type="text/javascript">
suite('basic', function () {
var tabs;
suite('basic', () => {
let tabs;

setup(function (done) {
setup(done => {
tabs = fixture('basic');
tabs.addEventListener('iron-items-changed', function onIronItemsChanged() {
const onIronItemsChanged = () => {
tabs.removeEventListener('iron-items-changed', onIronItemsChanged);
done();
});
};
tabs.addEventListener('iron-items-changed', onIronItemsChanged);
});

test('in accordion mode multi is true', function (done) {
Polymer.Base.async(function () {
test('in accordion mode multi is true', done => {
Polymer.Base.async(() => {
assert.isTrue(tabs.accordion);
assert.isTrue(tabs.multi);
done();
}, 90);
});

test('in accordion mode multiple items can be selected', function (done) {
Polymer.Base.async(function () {
test('in accordion mode multiple items can be selected', done => {
Polymer.Base.async(() => {
assert.lengthOf(tabs.selectedItems, 2);
assert.include(tabs.selectedItems, tabs.items[1]);
assert.include(tabs.selectedItems, tabs.items[2]);
done();
}, 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();
}, 90);
});

test('accordion property is forwarded to children', function (done) {
Polymer.Base.async(function () {
test('in accordion mode selectedItem remains selected', done => {
Polymer.Base.async(() => {
MockInteractions.tap(tabs.items[1].$.header);
assert.equal(tabs.selectedItems.length, 1);

MockInteractions.tap(tabs.items[2].$.header);
assert.equal(tabs.selectedItems.length, 1);
assert.equal(tabs.selectedItems[0], tabs.items[2]);
done();

}, 90);
});

test('accordion property is forwarded to children', done => {
Polymer.Base.async(() => {
assert.isArray(tabs.items);
assert.lengthOf(tabs.items, 3);

tabs.items.forEach(function (item) {
tabs.items.forEach(item => {
assert.equal(item.is, 'cosmoz-tab');
assert.isTrue(item.accordion);
});
Expand All @@ -89,20 +107,20 @@
}, 60);
});

test('in accordion mode it does not contain a paper-tabs element', function (done) {
Polymer.Base.async(function () {
var paperTabs = tabs.$$('paper-tabs');
test('in accordion mode it does not contain a paper-tabs element', done => {
Polymer.Base.async(() => {
const paperTabs = tabs.$$('paper-tabs');
assert.isNull(paperTabs);
done();
}, 90);
});

test('in accordion mode cosmoz-tab #header is visible', function (done) {
Polymer.Base.async(function () {
test('in accordion mode cosmoz-tab #header is visible', done => {
Polymer.Base.async(() => {

tabs.items.forEach(function (item) {
tabs.items.forEach(item => {
assert.isNotNull(item.$.header);
var style = window.getComputedStyle(item.$.header),
const style = window.getComputedStyle(item.$.header),
display = style.getPropertyValue('display');
assert.notEqual(display, 'none');
});
Expand All @@ -111,30 +129,30 @@
}, 90);
});

test('in accordion mode tapping the header of a unselected item selects it', function (done) {
Polymer.Base.async(function () {
var item = tabs.items[0];
test('in accordion mode tapping the header of a unselected item selects it', done => {
Polymer.Base.async(() => {
const item = tabs.items[0];
assert.isNotNull(item.$.header);
assert.notInclude(tabs.selectedItems, item);

MockInteractions.tap(item.$.header);

Polymer.Base.async(function () {
Polymer.Base.async(() => {
assert.include(tabs.selectedItems, item);
done();
}, 90);
}, 90);
});

test('in accordion mode tapping the header of a selected item unselects it', function (done) {
Polymer.Base.async(function () {
var item = tabs.items[1];
test('in accordion mode tapping the header of a selected item unselects it', done => {
Polymer.Base.async(() => {
const item = tabs.items[1];
assert.isNotNull(item.$.header);
assert.include(tabs.selectedItems, item);

MockInteractions.tap(item.$.header);

Polymer.Base.async(function () {
Polymer.Base.async(() => {
assert.notInclude(tabs.selectedItems, item);
done();
}, 90);
Expand Down
Loading

0 comments on commit 86ce740

Please sign in to comment.