feat(settings): add a settings panel
This commit is contained in:
Halyul
@@ -1,15 +1,3 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
var RATIO = 0.618;
|
||||
var fps = 60;
|
||||
var viewport = Object.assign({}, window.settings.viewport);
|
||||
|
||||
if (params.has("fps")) {
|
||||
var tmp = parseInt(params.get("fps"));
|
||||
if (!isNaN(tmp)) {
|
||||
fps = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
function supportsWebGL() {
|
||||
try {
|
||||
let canvas = document.createElement("canvas");
|
||||
@@ -18,14 +6,6 @@ function supportsWebGL() {
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateScale(width, height) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
let scaleX = windowWidth / width;
|
||||
let scaleY = windowHeight / height;
|
||||
return { x: scaleX, y: scaleY };
|
||||
};
|
||||
|
||||
if (!supportsWebGL()) {
|
||||
@@ -34,14 +14,22 @@ if (!supportsWebGL()) {
|
||||
e.classList.add("fallback");
|
||||
e.parentElement.classList.add("widget-wrapper");
|
||||
|
||||
function calculateScale(width, height) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
let scaleX = windowWidth / width;
|
||||
let scaleY = windowHeight / height;
|
||||
return { x: scaleX, y: scaleY };
|
||||
}
|
||||
|
||||
function fallback() {
|
||||
const scale = calculateScale(window.settings.fallbackImage.width, window.settings.fallbackImage.height);
|
||||
const scale = calculateScale(window.operatorSettings.fallbackImage.width, window.operatorSettings.fallbackImage.height);
|
||||
if (scale.x > scale.y) {
|
||||
e.style.width = window.settings.fallbackImage.width * scale.y + "px";
|
||||
e.style.height = window.settings.fallbackImage.height * scale.y + "px";
|
||||
e.style.width = window.operatorSettings.fallbackImage.width * scale.y + "px";
|
||||
e.style.height = window.operatorSettings.fallbackImage.height * scale.y + "px";
|
||||
} else if (scale.x < scale.y) {
|
||||
e.style.width = window.settings.fallbackImage.width * scale.x + "px";
|
||||
e.style.height = window.settings.fallbackImage.height * scale.x + "px";
|
||||
e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px";
|
||||
e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,105 +37,84 @@ if (!supportsWebGL()) {
|
||||
fallback();
|
||||
} else {
|
||||
var e = document.getElementById("container");
|
||||
var resetTime = window.performance.now();
|
||||
|
||||
var spinePlayer = new spine.SpinePlayer(e, {
|
||||
jsonUrl: window.settings.jsonUrl,
|
||||
skelUrl: window.settings.skelUrl,
|
||||
atlasUrl: window.settings.atlasUrl,
|
||||
animation: window.settings.animation,
|
||||
rawDataURIs: window.operator,
|
||||
jsonUrl: window.operatorSettings.jsonUrl,
|
||||
skelUrl: window.operatorSettings.skelUrl,
|
||||
atlasUrl: window.operatorSettings.atlasUrl,
|
||||
animation: window.operatorSettings.animation,
|
||||
rawDataURIs: window.operatorAssets,
|
||||
premultipliedAlpha: true,
|
||||
alpha: true,
|
||||
backgroundColor: "#00000000",
|
||||
fps: fps,
|
||||
viewport: window.settings.viewport,
|
||||
viewport: window.operatorSettings.viewport,
|
||||
showControls: false,
|
||||
defaultMix: window.settings.defaultMix,
|
||||
success: window.settings.success,
|
||||
fps: window.operatorSettings.fps,
|
||||
defaultMix: window.operatorSettings.defaultMix,
|
||||
success: window.operatorSettings.success,
|
||||
});
|
||||
var settings = new Settings({
|
||||
logo: document.getElementById("logo"),
|
||||
spinePlayer: spinePlayer,
|
||||
operatorSettings: window.operatorSettings
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function resizeLogo() {
|
||||
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
|
||||
}
|
||||
window.addEventListener('resize', resizeLogo, true);
|
||||
resizeLogo()
|
||||
|
||||
window.addEventListener("contextmenu", e => e.preventDefault());
|
||||
document.addEventListener("gesturestart", e => e.preventDefault());
|
||||
settings.setup()
|
||||
|
||||
// wallpaper engine
|
||||
window.wallpaperPropertyListener = {
|
||||
applyGeneralProperties: function (properties) {
|
||||
if (properties.fps) {
|
||||
spinePlayer.setFps(properties.fps);
|
||||
settings.setFPS(properties.fps);
|
||||
}
|
||||
},
|
||||
applyUserProperties: function (properties) {
|
||||
if (properties.logo) {
|
||||
if (!properties.logo.value) {
|
||||
document.getElementById("logo").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("logo").style.display = "inherit";
|
||||
}
|
||||
settings.displayLogo(properties.logo.value)
|
||||
}
|
||||
if (properties.logoratio) {
|
||||
if (properties.logoratio.value) {
|
||||
RATIO = properties.logoratio.value / 100;
|
||||
resizeLogo();
|
||||
settings.resizeLogo(properties.logoratio.value)
|
||||
}
|
||||
}
|
||||
if (properties.logoopacity) {
|
||||
if (properties.logoopacity.value) {
|
||||
var opacity= properties.logoopacity.value / 100;
|
||||
document.getElementById('logo').style.opacity = opacity;
|
||||
settings.opacityLogo(properties.logoopacity.value)
|
||||
}
|
||||
}
|
||||
if (properties.logoimage) {
|
||||
var logoImage;
|
||||
const e = document.getElementById('logo');
|
||||
if (properties.logoimage.value) {
|
||||
logoImage = 'file:///' + properties.logoimage.value;
|
||||
e.style.filter = "invert(0)";
|
||||
var logoImage = 'file:///' + properties.logoimage.value;
|
||||
settings.setLogo(logoImage, true);
|
||||
} else {
|
||||
logoImage = "./operator/operator_logo.png"
|
||||
e.style.filter = "invert(1)";
|
||||
settings.resetLogo();
|
||||
}
|
||||
e.src = logoImage;
|
||||
resizeLogo();
|
||||
}
|
||||
if (properties.background) {
|
||||
var background;
|
||||
if (properties.background.value) {
|
||||
background = 'file:///' + properties.background.value;
|
||||
var background = 'file:///' + properties.background.value;
|
||||
settings.setBackground(background);
|
||||
} else {
|
||||
background = "./operator/operator_bg.png"
|
||||
settings.resetBackground();
|
||||
}
|
||||
document.body.style.backgroundImage = `url(${background})`
|
||||
}
|
||||
if (properties.position) {
|
||||
if (!properties.position.value) {
|
||||
spinePlayer.updateViewport(window.settings.viewport)
|
||||
settings.positionReset();
|
||||
}
|
||||
}
|
||||
if (properties.paddingleft) {
|
||||
viewport.padLeft = `${properties.paddingleft.value}%`
|
||||
spinePlayer.updateViewport(viewport)
|
||||
settings.positionPadding("padLeft", properties.paddingleft.value)
|
||||
}
|
||||
if (properties.paddingright) {
|
||||
viewport.padRight = `${properties.paddingright.value}%`
|
||||
spinePlayer.updateViewport(viewport)
|
||||
settings.positionPadding("padRight", properties.paddingright.value)
|
||||
}
|
||||
if (properties.paddingtop) {
|
||||
viewport.padTop = `${properties.paddingtop.value}%`
|
||||
spinePlayer.updateViewport(viewport)
|
||||
settings.positionPadding("padTop", properties.paddingtop.value)
|
||||
}
|
||||
if (properties.paddingbottom) {
|
||||
viewport.padBottom = `${properties.paddingbottom.value}%`
|
||||
spinePlayer.updateViewport(viewport)
|
||||
settings.positionPadding("padBottom", properties.paddingbottom.value)
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user