move emby-webcomponents to components and reflect paths
This commit is contained in:
parent
e91cbf8438
commit
6ddc62857d
275 changed files with 20 additions and 20 deletions
44
src/components/emby-collapse/emby-collapse.css
Normal file
44
src/components/emby-collapse/emby-collapse.css
Normal file
|
@ -0,0 +1,44 @@
|
|||
.emby-collapse {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.collapseContent {
|
||||
border-width: 0;
|
||||
padding: 1.25em 1.25em;
|
||||
height: 0;
|
||||
transition-property: height;
|
||||
transition-duration: 300ms;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.emby-collapsible-button {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
border-width: 0 0 .1em 0;
|
||||
border-style: solid;
|
||||
padding-left: .1em;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emby-collapse-expandIcon {
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms ease-out;
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.emby-collapse-expandIconExpanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.emby-collapsible-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
100
src/components/emby-collapse/emby-collapse.js
Normal file
100
src/components/emby-collapse/emby-collapse.js
Normal file
|
@ -0,0 +1,100 @@
|
|||
define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
function slideDownToShow(button, elem) {
|
||||
|
||||
elem.classList.remove('hide');
|
||||
elem.classList.add('expanded');
|
||||
elem.style.height = 'auto';
|
||||
var height = elem.offsetHeight + 'px';
|
||||
elem.style.height = '0';
|
||||
|
||||
// trigger reflow
|
||||
var newHeight = elem.offsetHeight;
|
||||
elem.style.height = height;
|
||||
|
||||
setTimeout(function () {
|
||||
if (elem.classList.contains('expanded')) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
elem.style.height = 'auto';
|
||||
}, 300);
|
||||
|
||||
var icon = button.querySelector('i');
|
||||
//icon.innerHTML = 'expand_less';
|
||||
icon.classList.add('emby-collapse-expandIconExpanded');
|
||||
}
|
||||
|
||||
function slideUpToHide(button, elem) {
|
||||
|
||||
elem.style.height = elem.offsetHeight + 'px';
|
||||
// trigger reflow
|
||||
var newHeight = elem.offsetHeight;
|
||||
|
||||
elem.classList.remove('expanded');
|
||||
elem.style.height = '0';
|
||||
|
||||
setTimeout(function () {
|
||||
if (elem.classList.contains('expanded')) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
}, 300);
|
||||
|
||||
var icon = button.querySelector('i');
|
||||
//icon.innerHTML = 'expand_more';
|
||||
icon.classList.remove('emby-collapse-expandIconExpanded');
|
||||
}
|
||||
|
||||
function onButtonClick(e) {
|
||||
|
||||
var button = this;
|
||||
var collapseContent = button.parentNode.querySelector('.collapseContent');
|
||||
|
||||
if (collapseContent.expanded) {
|
||||
collapseContent.expanded = false;
|
||||
slideUpToHide(button, collapseContent);
|
||||
} else {
|
||||
collapseContent.expanded = true;
|
||||
slideDownToShow(button, collapseContent);
|
||||
}
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-collapse')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-collapse');
|
||||
|
||||
var collapseContent = this.querySelector('.collapseContent');
|
||||
if (collapseContent) {
|
||||
collapseContent.classList.add('hide');
|
||||
}
|
||||
|
||||
var title = this.getAttribute('title');
|
||||
|
||||
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><i class="md-icon emby-collapse-expandIcon">expand_more</i></button>';
|
||||
|
||||
this.insertAdjacentHTML('afterbegin', html);
|
||||
|
||||
var button = this.querySelector('.emby-collapsible-button');
|
||||
|
||||
button.addEventListener('click', onButtonClick);
|
||||
|
||||
if (this.getAttribute('data-expanded') === 'true') {
|
||||
onButtonClick.call(button);
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('emby-collapse', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue