mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
minify
This commit is contained in:
parent
82bcca376f
commit
8a6884abef
494 changed files with 256 additions and 120180 deletions
|
@ -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}
|
|
@ -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"})});
|
Loading…
Add table
Add a link
Reference in a new issue