1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
This commit is contained in:
Luke Pulverenti 2017-01-27 18:07:14 -05:00
parent 82bcca376f
commit 8a6884abef
494 changed files with 256 additions and 120180 deletions

View file

@ -1,45 +1 @@
.emby-collapse {
margin: .5em 0;
}
.collapseContent {
border-width: 0;
padding: 1.25em 1.25em;
height: 0;
transition-property: height;
transition-duration: 300ms;
overflow: hidden;
background: #222;
}
.emby-collapsible-button {
margin: 0;
display: flex;
align-items: center;
text-transform: none;
width: 100%;
text-align: left;
border: 0;
text-transform: none;
border-bottom: 1px solid #333;
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;
}
.emby-collapse{margin:.5em 0}.collapseContent{border-width:0;padding:1.25em;height:0;-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;overflow:hidden;background:#222}.emby-collapsible-button{margin:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;width:100%;text-align:left;border:0;text-transform:none;border-bottom:1px solid #333;padding-left:.1em;background:0 0;-webkit-box-shadow:none;box-shadow:none}.emby-collapse-expandIcon{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:-webkit-transform 180ms ease-out;-o-transition:transform 180ms ease-out;transition:transform 180ms ease-out;position:absolute;right:.5em;font-size:1.5em}.emby-collapse-expandIconExpanded{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.emby-collapsible-title{margin:0;padding:0}

View file

@ -1,100 +1 @@
define(['browser', 'css!./emby-collapse', 'registerElement'], 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'
});
});
define(["browser","css!./emby-collapse","registerElement"],function(browser){"use strict";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";elem.offsetHeight;elem.style.height=height,setTimeout(function(){elem.classList.contains("expanded")?elem.classList.remove("hide"):elem.classList.add("hide"),elem.style.height="auto"},300);var icon=button.querySelector("i");icon.classList.add("emby-collapse-expandIconExpanded")}function slideUpToHide(button,elem){elem.style.height=elem.offsetHeight+"px";elem.offsetHeight;elem.classList.remove("expanded"),elem.style.height="0",setTimeout(function(){elem.classList.contains("expanded")?elem.classList.remove("hide"):elem.classList.add("hide")},300);var icon=button.querySelector("i");icon.classList.remove("emby-collapse-expandIconExpanded")}function onButtonClick(e){var button=this,collapseContent=button.parentNode.querySelector(".collapseContent");collapseContent.expanded?(collapseContent.expanded=!1,slideUpToHide(button,collapseContent)):(collapseContent.expanded=!0,slideDownToShow(button,collapseContent))}var EmbyButtonPrototype=Object.create(HTMLDivElement.prototype);EmbyButtonPrototype.attachedCallback=function(){if(!this.classList.contains("emby-collapse")){this.classList.add("emby-collapse");var collapseContent=this.querySelector(".collapseContent");collapseContent&&collapseContent.classList.add("hide");var title=this.getAttribute("title"),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),"true"===this.getAttribute("data-expanded")&&onButtonClick.call(button)}},document.registerElement("emby-collapse",{prototype:EmbyButtonPrototype,extends:"div"})});