move emby-webcomponents to components and reflect paths

This commit is contained in:
vitorsemeano 2019-02-23 18:05:42 +00:00
parent e91cbf8438
commit 6ddc62857d
275 changed files with 20 additions and 20 deletions

View 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;
}

View 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'
});
});