mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
move emby-webcomponents to components and reflect paths
This commit is contained in:
vitorsemeano
parent
e91cbf8438
commit
6ddc62857d
275 changed files with 20 additions and 20 deletions
105
src/components/emby-progressring/emby-progressring.css
Normal file
105
src/components/emby-progressring/emby-progressring.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
.progressring {
|
||||
position: relative;
|
||||
width: 2.6em;
|
||||
height: 2.6em;
|
||||
float: left;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progressring-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: .25em solid rgba(0, 0, 0, 1);
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, .9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progressring-text {
|
||||
text-align: center;
|
||||
color: #ddd;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.spiner-holder-one {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 51%;
|
||||
height: 51%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.spiner-holder-two {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progressring-spiner {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border-radius: 50%;
|
||||
border-width: .25em;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.animate-0-25-a {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-0-25-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-25-50-a {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-25-50-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-50-75-a {
|
||||
transform: rotate(270deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-50-75-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-75-100-a {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-75-100-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
105
src/components/emby-progressring/emby-progressring.js
Normal file
105
src/components/emby-progressring/emby-progressring.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
|
||||
'use strict';
|
||||
|
||||
var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
EmbyProgressRing.createdCallback = function () {
|
||||
|
||||
this.classList.add('progressring');
|
||||
var instance = this;
|
||||
|
||||
require(['text!./emby-progressring.template.html'], function (template) {
|
||||
instance.innerHTML = template;
|
||||
|
||||
//if (window.MutationObserver) {
|
||||
// // create an observer instance
|
||||
// var observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
|
||||
// instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
|
||||
// });
|
||||
// });
|
||||
|
||||
// // configuration of the observer:
|
||||
// var config = { attributes: true, childList: false, characterData: false };
|
||||
|
||||
// // pass in the target node, as well as the observer options
|
||||
// observer.observe(instance, config);
|
||||
|
||||
// instance.observer = observer;
|
||||
//}
|
||||
|
||||
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
|
||||
});
|
||||
};
|
||||
|
||||
EmbyProgressRing.setProgress = function (progress) {
|
||||
|
||||
progress = Math.floor(progress);
|
||||
|
||||
var angle;
|
||||
|
||||
if (progress < 25) {
|
||||
angle = -90 + (progress / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
}
|
||||
else if (progress >= 25 && progress < 50) {
|
||||
|
||||
angle = -90 + ((progress - 25) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
}
|
||||
else if (progress >= 50 && progress < 75) {
|
||||
angle = -90 + ((progress - 50) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'none';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
}
|
||||
else if (progress >= 75 && progress <= 100) {
|
||||
angle = -90 + ((progress - 75) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'none';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'none';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
}
|
||||
|
||||
this.querySelector('.progressring-text').innerHTML = progress + '%';
|
||||
};
|
||||
|
||||
EmbyProgressRing.attachedCallback = function () {
|
||||
|
||||
};
|
||||
|
||||
EmbyProgressRing.detachedCallback = function () {
|
||||
|
||||
|
||||
var observer = this.observer;
|
||||
|
||||
if (observer) {
|
||||
// later, you can stop observing
|
||||
observer.disconnect();
|
||||
|
||||
this.observer = null;
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('emby-progressring', {
|
||||
prototype: EmbyProgressRing,
|
||||
extends: 'div'
|
||||
});
|
||||
|
||||
return EmbyProgressRing;
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="progressring-bg">
|
||||
<div class="progressring-text"></div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-0-25-a">
|
||||
<div class="spiner-holder-two animate-0-25-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-25-50-a">
|
||||
<div class="spiner-holder-two animate-25-50-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-50-75-a">
|
||||
<div class="spiner-holder-two animate-50-75-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-75-100-a">
|
||||
<div class="spiner-holder-two animate-75-100-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue