milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix indentation issues

Browse source
This commit is contained in:
Bill Thornton 2023-04-19 01:56:05 -04:00
parent 52c8cffc82
commit f2726653ae
120 changed files with 30271 additions and 30631 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/elements/emby-progressring/emby-progressring.js
View file

@ -4,98 +4,95 @@ import template from './emby-progressring.template.html';
import { getCurrentDateTimeLocale } from '../../scripts/globalize';
import { toPercent } from '../../utils/number.ts';
/* eslint-disable indent */
const EmbyProgressRing = Object.create(HTMLDivElement.prototype);
const EmbyProgressRing = Object.create(HTMLDivElement.prototype);
EmbyProgressRing.createdCallback = function () {
this.classList.add('progressring');
this.setAttribute('dir', 'ltr');
const instance = this;
EmbyProgressRing.createdCallback = function () {
this.classList.add('progressring');
this.setAttribute('dir', 'ltr');
const instance = this;
instance.innerHTML = template;
instance.innerHTML = template;
if (window.MutationObserver) {
// create an observer instance
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function () {
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
});
if (window.MutationObserver) {
// create an observer instance
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function () {
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
});
});
// configuration of the observer:
const config = { attributes: true, childList: false, characterData: false };
// configuration of the observer:
const config = { attributes: true, childList: false, characterData: false };
// pass in the target node, as well as the observer options
observer.observe(instance, config);
// pass in the target node, as well as the observer options
observer.observe(instance, config);
instance.observer = observer;
}
instance.observer = observer;
}
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
};
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
};
EmbyProgressRing.setProgress = function (progress) {
progress = Math.floor(progress);
EmbyProgressRing.setProgress = function (progress) {
progress = Math.floor(progress);
let angle;
let angle;
if (progress < 25) {
angle = -90 + (progress / 100) * 360;
if (progress < 25) {
angle = -90 + (progress / 100) * 360;
this.querySelector('.animate-0-25-b').style.transform = 'rotate(' + angle + 'deg)';
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-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-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-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-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-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('.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 = toPercent(progress / 100, getCurrentDateTimeLocale());
};
this.querySelector('.progressring-text').innerHTML = toPercent(progress / 100, getCurrentDateTimeLocale());
};
EmbyProgressRing.attachedCallback = function () {
// no-op
};
EmbyProgressRing.attachedCallback = function () {
// no-op
};
EmbyProgressRing.detachedCallback = function () {
const observer = this.observer;
EmbyProgressRing.detachedCallback = function () {
const observer = this.observer;
if (observer) {
// later, you can stop observing
observer.disconnect();
if (observer) {
// later, you can stop observing
observer.disconnect();
this.observer = null;
}
};
this.observer = null;
}
};
document.registerElement('emby-progressring', {
prototype: EmbyProgressRing,
extends: 'div'
});
document.registerElement('emby-progressring', {
prototype: EmbyProgressRing,
extends: 'div'
});
export default EmbyProgressRing;
export default EmbyProgressRing;
/* eslint-enable indent */