From a7441a680accf0a7e80b51acd321f80cf98447da Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 10:56:21 +0800 Subject: [PATCH 01/11] add more type hints --- src/js/helper.js | 40 ++++++++++------- src/js/parser.js | 9 ++++ src/js/spotlight.js | 105 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 15 deletions(-) diff --git a/src/js/helper.js b/src/js/helper.js index 9ef0a6f..e83c1c8 100644 --- a/src/js/helper.js +++ b/src/js/helper.js @@ -1,6 +1,6 @@ /** - * @param node - * @param class_name + * @param {HTMLElement} node + * @param {string} class_name */ export function addClass(node, class_name){ @@ -9,8 +9,8 @@ export function addClass(node, class_name){ } /** - * @param node - * @param class_name + * @param {HTMLElement} node + * @param {string} class_name */ export function removeClass(node, class_name){ @@ -19,9 +19,9 @@ export function removeClass(node, class_name){ } /** - * @param node - * @param class_name - * @param {?=} state + * @param {HTMLElement} node + * @param {string} class_name + * @param {boolean=} state */ export function toggleClass(node, class_name, state){ @@ -30,8 +30,8 @@ export function toggleClass(node, class_name, state){ } /** - * @param node - * @param class_name + * @param {HTMLElement} node + * @param {string} class_name */ export function hasClass(node, class_name){ @@ -59,7 +59,7 @@ export function setStyle(node, style, value){ let tmp = 0; /** - * @param node + * @param {HTMLElement} node * @param {Function=} fn */ @@ -77,6 +77,11 @@ export function prepareStyle(node, fn){ fn && setStyle(node, "transition", ""); } +/** + * @param {HTMLElement} node + * @param {string} text + */ + export function setText(node, text){ node.firstChild.nodeValue = text; @@ -142,7 +147,7 @@ export function toggleListener(state, node, event, fn, mode){ } /** - * @param event + * @param {Event} event * @param {boolean=} prevent */ @@ -153,6 +158,11 @@ export function cancelEvent(event, prevent){ prevent && event.preventDefault(); } +/** + * @param {HTMLBodyElement} body + * @param {HTMLImageElement} image + */ + export function downloadImage(body, image){ const link = /** @type {HTMLAnchorElement} */ (createElement("a")); @@ -166,7 +176,7 @@ export function downloadImage(body, image){ /** * @param {!string} element - * @return {Element} + * @return {HTMLElement} */ export function createElement(element){ @@ -175,7 +185,7 @@ export function createElement(element){ } /** - * @param node + * @param {HTMLElement} node * @param {boolean=} state */ @@ -185,7 +195,7 @@ export function toggleDisplay(node, state){ } /** - * @param node + * @param {HTMLElement} node * @param {boolean=} state */ @@ -195,7 +205,7 @@ export function toggleVisibility(node, state){ } /** - * @param node + * @param {HTMLElement} node * @param {boolean=} state */ diff --git a/src/js/parser.js b/src/js/parser.js index f621a40..f515506 100644 --- a/src/js/parser.js +++ b/src/js/parser.js @@ -3,6 +3,15 @@ import { createElement } from "./helper.js"; const video_support = {}; const tpl_video = /** @type {HTMLVideoElement} */ (createElement("video")); +/** + * + * @param {HTMLAnchorElement} anchor + * @param {number} size + * @param {!Object} options + * @param {"node"|"video"|any} media + * @returns {string} + */ + export default function(anchor, size, options, media){ let src, diff; diff --git a/src/js/spotlight.js b/src/js/spotlight.js index 1c1dc44..a2638eb 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -34,20 +34,34 @@ const controls_dom = {}; const connection = navigator["connection"]; const dpr = window["devicePixelRatio"] || 1; +/** @type {number} */ let x; +/** @type {number} */ let y; +/** @type {number} */ let startX; +/** @type {number} */ let startY; +/** @type {number} */ let viewport_w; +/** @type {number} */ let viewport_h; +/** @type {number} */ let media_w; +/** @type {number} */ let media_h; +/** @type {number} */ let scale; +/** @type {boolean} */ let is_down; +/** @type {boolean} */ let dragged; +/** @type {boolean} */ let slidable; +/** @type {boolean} */ let toggle_autofit; +/** @type {boolean} */ let toggle_theme; let current_slide; @@ -76,24 +90,43 @@ let animation_fade; let animation_slide; let animation_custom; +/** @type {HTMLBodyElement} */ let body; +/** @type {HTMLDivElement=} */ let panel; +/** @type {HTMLDivElement[]} */ let panes; +/** @type {Image|HTMLVideoElement|HTMLElement} */ let media; +/** @type {HTMLImageElement} */ let media_next = createElement("img"); +/** @type {HTMLDivElement} */ let slider; +/** @type {HTMLDivElement} */ let header; +/** @type {HTMLDivElement} */ let footer; +/** @type {number} */ let footer_visible = 0; +/** @type {HTMLDivElement} */ let title; +/** @type {HTMLDivElement} */ let description; +/** @type {HTMLDivElement} */ let button; +/** @type {HTMLDivElement} */ let page_prev; +/** @type {HTMLDivElement} */ let page_next; +/** @type {HTMLDivElement=} */ let maximize; +/** @type {HTMLDivElement} */ let page; +/** @type {HTMLDivElement} */ let player; +/** @type {HTMLDivElement} */ let progress; +/** @type {HTMLDivElement} */ let spinner; let gallery; @@ -210,6 +243,12 @@ export function init(){ } } +/** + * @param {string} classname + * @param {Function} fn + * @returns {HTMLDivElement} + */ + export function addControl(classname, fn){ //console.log("addControl", classname, fn); @@ -223,6 +262,10 @@ export function addControl(classname, fn){ return controls_dom[classname] = div; } +/** + * @param {string} classname + */ + export function removeControl(classname){ //console.log("dispatch", classname); @@ -236,10 +279,15 @@ export function removeControl(classname){ } } +/** + * @param {Event} event + */ + function dispatch(event){ //console.log("dispatch"); + /** @type {HTMLDivElement=} */ const target = event.target.closest(".spotlight"); if(target){ @@ -288,6 +336,10 @@ export function show(gallery, group, index){ init_gallery(index); } +/** + * @param {number} index + */ + function init_gallery(index){ //console.log("init_gallery", index); @@ -485,6 +537,10 @@ function prepare_animation(prepare){ } } +/** + * @param {number} index + */ + function init_slide(index){ //console.log("init_slide", index); @@ -621,6 +677,10 @@ function toggle_spinner(options_spinner, is_on){ options_spinner && toggleClass(spinner, "spin", is_on); } +/** + * @returns {boolean} + */ + function has_fullscreen(){ //console.log("has_fullscreen"); @@ -744,6 +804,10 @@ function toggle_listener(install){ toggleListener(install, window, "popstate", history_listener); } +/** + * @param {PopStateEvent} event + */ + function history_listener(event) { //console.log("history_listener"); @@ -754,6 +818,10 @@ function history_listener(event) { } } +/** + * @param {KeyboardEvent} event + */ + function key_listener(event){ //console.log("key_listener"); @@ -804,6 +872,10 @@ function key_listener(event){ } } +/** + * @param {WheelEvent} event + */ + function wheel_listener(event){ //console.log("wheel_listener"); @@ -888,6 +960,10 @@ function autohide(){ } } +/** + * @param {number} cooldown + */ + function schedule(cooldown){ //console.log("schedule", cooldown); @@ -933,6 +1009,10 @@ export function menu(state){ } } +/** + * @param {TouchEvent|MouseEvent} e + */ + function start(e){ //console.log("start"); @@ -956,6 +1036,10 @@ function start(e){ toggleAnimation(panel); } +/** + * @param {TouchEvent|MouseEvent} e + */ + function end(e){ //console.log("end"); @@ -995,6 +1079,10 @@ function end(e){ } } +/** + * @param {TouchEvent|MouseEvent} e + */ + function move(e){ //console.log("move"); @@ -1296,6 +1384,10 @@ export function close(hashchange){ options_onclose && options_onclose(); } +/** + * @param {Image|HTMLVideoElement|HTMLElement} media + */ + function checkout(media){ //console.log("checkout"); @@ -1367,6 +1459,11 @@ export function next(e){ } } +/** + * @param {number} slide + * @returns {boolean=} + */ + export function goto(slide){ //console.log("goto", slide); @@ -1395,6 +1492,10 @@ export function goto(slide){ } } +/** + * @param {boolean} direction + */ + function prepare(direction){ //console.log("prepare", direction); @@ -1452,6 +1553,10 @@ function prepare(direction){ } } +/** + * @param {boolean} direction + */ + function setup_page(direction){ //console.log("setup_page", direction); From cee1eb76a5c8201a29bc1728d9918c688a2d4f96 Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 12:30:49 +0800 Subject: [PATCH 02/11] zoom where the cursor is located --- .gitignore | 3 +++ src/js/spotlight.js | 38 ++++++++++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2c0b06e --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +log/ +tmp/ \ No newline at end of file diff --git a/src/js/spotlight.js b/src/js/spotlight.js index a2638eb..094a81e 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -887,11 +887,11 @@ function wheel_listener(event){ if(delta < 0){ - zoom_out(); + zoom_out(event, event.clientX, event.clientY); } else{ - zoom_in(); + zoom_in(event, event.clientX, event.clientY); } } } @@ -1224,7 +1224,7 @@ export function autofit(init){ * @param {Event=} e */ -function zoom_in(e){ +function zoom_in(e, cx, cy){ //console.log("zoom_in"); @@ -1241,9 +1241,19 @@ function zoom_in(e){ // removeClass(media, options_fit); // } - x /= 0.65; - y /= 0.65; + if(cy){ + const half_w = window.innerWidth / 2, half_h = window.innerHeight / 2; + x = cx - (cx - x - half_w) / 0.65 - half_w; + y = cy - (cy - y - half_h) / 0.65 - half_h; + } + else{ + + x /= 0.65; + y /= 0.65; + } + + toggleAnimation(panel, true); update_panel(x, y); zoom(value); } @@ -1253,9 +1263,11 @@ function zoom_in(e){ /** * @param {Event=} e + * @param {number=} cx + * @param {number=} cy */ -function zoom_out(e){ +function zoom_out(e, cx, cy){ //console.log("zoom_out"); @@ -1276,10 +1288,20 @@ function zoom_out(e){ } else{ - x *= 0.65; - y *= 0.65; + if(cy){ + + const half_w = window.innerWidth / 2, half_h = window.innerHeight / 2; + x = cx - (cx - x - half_w) * 0.65 - half_w; + y = cy - (cy - y - half_h) * 0.65 - half_h; + } + else{ + + x *= 0.65; + y *= 0.65; + } } + toggleAnimation(panel, true); update_panel(x, y); zoom(value); } From 348e879e1e2aa3289d2164d94e84de3fac9f6a3a Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 12:31:18 +0800 Subject: [PATCH 03/11] fix closure-compiler runs --- task/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/task/build.js b/task/build.js index 0013982..f00c41f 100644 --- a/task/build.js +++ b/task/build.js @@ -91,7 +91,7 @@ exec((/^win/.test(process.platform) ? "\"node_modules/google-closure-compiler-windows/compiler.exe\"" : - "java -jar node_modules/google-closure-compiler-java/compiler.jar" + "npx google-closure-compiler" ) + parameter + (bundle ? " --js='tmp/**.js'" : "") + " --js='src/js/**.js' --js_output_file='" + (bundle ? "dist/spotlight.bundle.js" : "dist/js/spotlight.min.js") + "' && exit 0", function(){ From 760ee381a245bc174ed5f6e536633bd8da259cc3 Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 14:04:30 +0800 Subject: [PATCH 04/11] support pinch-&-zoom --- src/js/spotlight.js | 149 +++++++++++++++++++++++++++----------------- 1 file changed, 93 insertions(+), 56 deletions(-) diff --git a/src/js/spotlight.js b/src/js/spotlight.js index 094a81e..c5b56c7 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -52,6 +52,8 @@ let media_w; let media_h; /** @type {number} */ let scale; +/** @type {TouchList=} */ +let prev_touches; /** @type {boolean} */ let is_down; @@ -1023,6 +1025,7 @@ function start(e){ dragged = false; let touches = e.touches; + prev_touches = touches; if(touches && (touches = touches[0])){ @@ -1046,6 +1049,8 @@ function end(e){ cancelEvent(e); + prev_touches = null; + if(is_down){ if(!dragged){ @@ -1079,6 +1084,46 @@ function end(e){ } } +/** + * @param {TouchList} touches + * @returns {number} + */ + +function distance(touches){ + + return Math.sqrt( + Math.pow(touches[0].clientX - touches[1].clientX, 2) + + Math.pow(touches[0].clientY - touches[1].clientY, 2) + ); +} + +/** + * @param {TouchList} touches + */ +function center_of(touches){ + + return [ + (touches[0].clientX + touches[1].clientX) * 0.5, + (touches[0].clientY + touches[1].clientY) * 0.5, + ] +} + +/** + * @param {TouchList=} touches + */ + +function scale_touches(touches){ + if(touches && touches.length === 2 && prev_touches && prev_touches.length === 2){ + + const relative_scale = distance(touches) / distance(prev_touches); + const center = center_of(touches); + centered_zoom(relative_scale, center[0], center[1], false); + } + + prev_touches = touches; + return touches && touches[0]; +} + /** * @param {TouchEvent|MouseEvent} e */ @@ -1091,9 +1136,9 @@ function move(e){ if(is_down){ - let touches = e.touches; + let touches = scale_touches(e.touches); - if(touches && (touches = touches[0])){ + if(touches){ e = touches; } @@ -1221,92 +1266,84 @@ export function autofit(init){ } /** - * @param {Event=} e + * @param {number} relative + * @param {number=} cx + * @param {number=} cy + * @param {boolean=} animated */ -function zoom_in(e, cx, cy){ +function centered_zoom(relative, cx, cy, animated){ - //console.log("zoom_in"); + let value = scale * relative; + + disable_autoresizer(); + toggleAnimation(panel, animated); + toggleAnimation(media, animated); - let value = scale / 0.65; + if(value <= 1){ - if(value <= 50){ + x = y = 0; + update_panel(x, y); + zoom(1); - //console.log(toggle_autofit); + // if(options_fit){ + // + // addClass(media, options_fit); + // } - disable_autoresizer(); + return; + } + + if(value > 50){ // if(options_fit){ // // removeClass(media, options_fit); // } - if(cy){ + return; + } - const half_w = window.innerWidth / 2, half_h = window.innerHeight / 2; - x = cx - (cx - x - half_w) / 0.65 - half_w; - y = cy - (cy - y - half_h) / 0.65 - half_h; - } - else{ + if(cy){ - x /= 0.65; - y /= 0.65; - } + const half_w = viewport_w / 2, half_h = viewport_h / 2; + x = cx - (cx - x - half_w) * relative - half_w; + y = cy - (cy - y - half_h) * relative - half_h; + } + else{ - toggleAnimation(panel, true); - update_panel(x, y); - zoom(value); + x *= relative; + y *= relative; } - //e && autohide(); + update_panel(x, y); + zoom(value); } /** * @param {Event=} e - * @param {number=} cx - * @param {number=} cy */ -function zoom_out(e, cx, cy){ - - //console.log("zoom_out"); - - let value = scale * 0.65; - - disable_autoresizer(); - - if(value >= 1){ +function zoom_in(e, cx, cy){ - if(value === 1){ + //console.log("zoom_in"); - x = y = 0; + centered_zoom(1 / 0.65, cx, cy, true); - // if(options_fit){ - // - // addClass(media, options_fit); - // } - } - else{ +} - if(cy){ +/** + * @param {Event=} e + * @param {number=} cx + * @param {number=} cy + */ - const half_w = window.innerWidth / 2, half_h = window.innerHeight / 2; - x = cx - (cx - x - half_w) * 0.65 - half_w; - y = cy - (cy - y - half_h) * 0.65 - half_h; - } - else{ +function zoom_out(e, cx, cy){ - x *= 0.65; - y *= 0.65; - } - } + //console.log("zoom_out"); - toggleAnimation(panel, true); - update_panel(x, y); - zoom(value); - } + centered_zoom(0.65, cx, cy, true); - //e && autohide(); } /** From 490b94c3a258447bf062cb066acc3b6bbc38b395 Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 14:33:47 +0800 Subject: [PATCH 05/11] fix type hints according to closure compiler --- src/js/helper.js | 19 +++++++++++++------ src/js/parser.js | 4 ++-- src/js/spotlight.js | 46 ++++++++++++++++++++++++--------------------- 3 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src/js/helper.js b/src/js/helper.js index e83c1c8..d75f542 100644 --- a/src/js/helper.js +++ b/src/js/helper.js @@ -5,7 +5,7 @@ export function addClass(node, class_name){ - toggleClass(node, class_name, true); + node.classList.add(class_name); } /** @@ -15,18 +15,25 @@ export function addClass(node, class_name){ export function removeClass(node, class_name){ - toggleClass(node, class_name); + node.classList.remove(class_name); } /** * @param {HTMLElement} node * @param {string} class_name - * @param {boolean=} state + * @param state */ export function toggleClass(node, class_name, state){ - node.classList[state ? "add" : "remove"](class_name); + if(state){ + + addClass(node, class_name); + } + else{ + + removeClass(node, class_name); + } } /** @@ -160,7 +167,7 @@ export function cancelEvent(event, prevent){ /** * @param {HTMLBodyElement} body - * @param {HTMLImageElement} image + * @param {HTMLElement} image */ export function downloadImage(body, image){ @@ -181,7 +188,7 @@ export function downloadImage(body, image){ export function createElement(element){ - return document.createElement(element); + return /** @type {HTMLElement} */ (document.createElement(element)); } /** diff --git a/src/js/parser.js b/src/js/parser.js index f515506..9e53b3d 100644 --- a/src/js/parser.js +++ b/src/js/parser.js @@ -7,8 +7,8 @@ const tpl_video = /** @type {HTMLVideoElement} */ (createElement("video")); * * @param {HTMLAnchorElement} anchor * @param {number} size - * @param {!Object} options - * @param {"node"|"video"|any} media + * @param options + * @param {string} media * @returns {string} */ diff --git a/src/js/spotlight.js b/src/js/spotlight.js index c5b56c7..c0bae76 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -52,7 +52,7 @@ let media_w; let media_h; /** @type {number} */ let scale; -/** @type {TouchList=} */ +/** @type {TouchList|undefined} */ let prev_touches; /** @type {boolean} */ @@ -63,7 +63,7 @@ let dragged; let slidable; /** @type {boolean} */ let toggle_autofit; -/** @type {boolean} */ +/** @type {string} */ let toggle_theme; let current_slide; @@ -94,22 +94,21 @@ let animation_custom; /** @type {HTMLBodyElement} */ let body; -/** @type {HTMLDivElement=} */ +/** @type {HTMLDivElement?} */ let panel; -/** @type {HTMLDivElement[]} */ +/** @type {Array} */ let panes; /** @type {Image|HTMLVideoElement|HTMLElement} */ let media; -/** @type {HTMLImageElement} */ -let media_next = createElement("img"); +let media_next = /** @type {HTMLImageElement} */ (createElement("img")); /** @type {HTMLDivElement} */ let slider; /** @type {HTMLDivElement} */ let header; /** @type {HTMLDivElement} */ let footer; -/** @type {number} */ -let footer_visible = 0; +/** @type {boolean} */ +let footer_visible = false; /** @type {HTMLDivElement} */ let title; /** @type {HTMLDivElement} */ @@ -120,7 +119,7 @@ let button; let page_prev; /** @type {HTMLDivElement} */ let page_next; -/** @type {HTMLDivElement=} */ +/** @type {HTMLDivElement?} */ let maximize; /** @type {HTMLDivElement} */ let page; @@ -234,14 +233,14 @@ export function init(){ /** * @param {string} classname - * @returns {HTMLElement} + * @returns {HTMLDivElement} */ function getOneByClass(classname){ //console.log("getOneByClass", classname); - return controls_dom[classname] = getByClass("spl-" + classname, widget)[0]; + return controls_dom[classname] = /** @type {HTMLDivElement} */ (getByClass("spl-" + classname, widget)[0]); } } @@ -255,7 +254,7 @@ export function addControl(classname, fn){ //console.log("addControl", classname, fn); - const div = createElement("div"); + const div = /** @type {HTMLDivElement} */ (createElement("div")); div.className = "spl-" + classname; addListener(div, "click", fn); @@ -289,8 +288,8 @@ function dispatch(event){ //console.log("dispatch"); - /** @type {HTMLDivElement=} */ - const target = event.target.closest(".spotlight"); + const target = /** @type {HTMLDivElement?} */ (event.target.closest(".spotlight")); + if(target){ @@ -614,7 +613,7 @@ function init_slide(index){ if(typeof media === "string"){ - media = document.querySelector(media); + media = /** @type {HTMLElement} */ (document.querySelector(media)); } if(media){ @@ -1024,17 +1023,19 @@ function start(e){ is_down = true; dragged = false; + /** @type {TouchEvent|MouseEvent|Touch} */ + let touch = e; let touches = e.touches; prev_touches = touches; if(touches && (touches = touches[0])){ - e = touches; + touch = touches; } slidable = /* !toggle_autofit && */ (media_w * scale) <= viewport_w; - startX = e.pageX; - startY = e.pageY; + startX = touch.pageX; + startY = touch.pageY; toggleAnimation(panel); } @@ -1322,6 +1323,8 @@ function centered_zoom(relative, cx, cy, animated){ /** * @param {Event=} e + * @param {number=} cx + * @param {number=} cy */ function zoom_in(e, cx, cy){ @@ -1460,7 +1463,8 @@ function checkout(media){ const parent = media.parentNode; parent && parent.removeChild(media); - media = media.src = media.onerror = ""; + media.onerror = null; + media.src = ""; } } @@ -1520,7 +1524,7 @@ export function next(e){ /** * @param {number} slide - * @returns {boolean=} + * @returns {boolean|undefined} */ export function goto(slide){ @@ -1653,7 +1657,7 @@ function setup_page(direction){ } } - footer && toggleVisibility(footer, 0); + footer && toggleVisibility(footer, false); prepare(direction); update_slider(current_slide - 1); From 3a9cfc1ed5a05052e42c189c845010b6d54b4e89 Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 14:53:55 +0800 Subject: [PATCH 06/11] fix demo zooming animations --- index.html | 4 ++++ src/js/spotlight.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3449d14..5b226b0 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,10 @@ /* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */ .only-this-gallery.show .spl-pane > *{ clip-path: circle(100% at center); + } + .only-this-gallery.show .spl-pane, .only-this-gallery.show .spl-pane > *{ + /* setting custom transition duration might mess up zoom animations */ + /* one should set an identical transition duration for ".spl-pane" and ".spl-pane > *" */ transition: transform 0.35s ease, opacity 0.65s ease, clip-path 0.8s ease; diff --git a/src/js/spotlight.js b/src/js/spotlight.js index c0bae76..ea80d0e 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -1277,9 +1277,9 @@ function centered_zoom(relative, cx, cy, animated){ let value = scale * relative; - disable_autoresizer(); toggleAnimation(panel, animated); toggleAnimation(media, animated); + disable_autoresizer(); if(value <= 1){ From fdd6ec37c5fe3e22d055c9f84bd98480ba1c02ef Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 15:38:03 +0800 Subject: [PATCH 07/11] support sliding up to close gallery --- src/js/spotlight.js | 33 +++++++++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/src/js/spotlight.js b/src/js/spotlight.js index ea80d0e..03a12d6 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -62,6 +62,8 @@ let dragged; /** @type {boolean} */ let slidable; /** @type {boolean} */ +let is_sliding_up; +/** @type {boolean} */ let toggle_autofit; /** @type {string} */ let toggle_theme; @@ -1022,6 +1024,7 @@ function start(e){ is_down = true; dragged = false; + is_sliding_up = false; /** @type {TouchEvent|MouseEvent|Touch} */ let touch = e; @@ -1073,7 +1076,15 @@ function end(e){ (has_prev && prev()); } - x = 0; + if(is_sliding_up && y < -(viewport_h / 4)){ + + close(); + } + else{ + + x = 0; + y = 0; + } update_panel(); } @@ -1144,13 +1155,27 @@ function move(e){ e = touches; } - // handle x-axis in slide mode and in drag mode + if(!dragged){ - let diff = (media_w * scale - viewport_w) / 2; - x -= startX - (startX = e.pageX); + const dx = startX - e.pageX; + const dy = startY - e.pageY; + is_sliding_up = slidable && dy > Math.abs(dx) * 1.15; + } + + if(is_sliding_up){ + + // handle y-axis in y-slide mode + y -= startY - (startY = e.pageY); + } + else{ + + // handle x-axis in x-slide mode and in drag mode + x -= startX - (startX = e.pageX); + } if(!slidable){ + let diff = (media_w * scale - viewport_w) / 2; if(x > diff){ x = diff; From 2ba541bd4814025c09f86444e375ce1b9acc49b9 Mon Sep 17 00:00:00 2001 From: gudzpoz Date: Wed, 17 May 2023 15:43:31 +0800 Subject: [PATCH 08/11] update compiled bundles --- dist/css/spotlight.min.css | 2 +- dist/js/spotlight.min.js | 43 +++++++++++++++++++----------------- dist/spotlight.bundle.js | 45 ++++++++++++++++++++------------------ 3 files changed, 48 insertions(+), 42 deletions(-) diff --git a/dist/css/spotlight.min.css b/dist/css/spotlight.min.css index dcc4377..855fa75 100644 --- a/dist/css/spotlight.min.css +++ b/dist/css/spotlight.min.css @@ -1 +1 @@ -@keyframes pulsate{0%,to{opacity:1}50%{opacity:.2}}#spotlight{position:fixed;top:-1px;bottom:-1px;width:100%;z-index:99999;color:#fff;background-color:#000;opacity:0;overflow:hidden;-webkit-user-select:none;-ms-user-select:none;user-select:none;transition:opacity .2s ease-out;font-family:Arial,sans-serif;font-size:16px;font-weight:400;contain:strict;touch-action:none;pointer-events:none}#spotlight.show{opacity:1;transition:none;pointer-events:auto}#spotlight.white{color:#212529;background-color:#fff}#spotlight.white .spl-next,#spotlight.white .spl-page~*,#spotlight.white .spl-prev,#spotlight.white .spl-spinner{filter:invert(1)}#spotlight.white .spl-progress{background-color:rgba(0,0,0,.35)}#spotlight.white .spl-footer,#spotlight.white .spl-header{background-color:rgba(255,255,255,.65)}#spotlight.white .spl-button{background:#212529;color:#fff}.spl-footer,.spl-header{background-color:rgba(0,0,0,.45)}#spotlight .contain,#spotlight .cover{object-fit:cover;height:100%;width:100%}#spotlight .contain{object-fit:contain}#spotlight .autofit{object-fit:none;width:auto;height:auto;max-height:none;max-width:none;transition:none}.spl-scene,.spl-spinner,.spl-track{width:100%;height:100%;position:absolute}.spl-track{contain:strict}.spl-spinner{background-position:center;background-repeat:no-repeat;background-size:42px;opacity:0}.spl-spinner.spin{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2Utb3BhY2l0eT0iLjY1Ij48Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuMTUiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMTggMTgiIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvZz48L2c+PC9zdmc+);transition:opacity .2s linear .25s;opacity:1}.spl-spinner.error{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYsMUExNSwxNSwwLDEsMCwzMSwxNiwxNSwxNSwwLDAsMCwxNiwxWm0wLDJhMTMsMTMsMCwwLDEsOC40NSwzLjE0TDYuMTQsMjQuNDVBMTMsMTMsMCwwLDEsMTYsM1ptMCwyNmExMywxMywwLDAsMS04LjQ1LTMuMTRMMjUuODYsNy41NUExMywxMywwLDAsMSwxNiwyOVoiIGlkPSJiYW5fc2lnbl9jcm9zc2VkX2NpcmNsZSIvPjwvc3ZnPg==);background-size:128px;transition:none;opacity:.5}.spl-scene{transition:transform .65s cubic-bezier(.1,1,.1,1);contain:layout size;will-change:transform}.spl-pane>*{position:absolute;width:auto;height:auto;max-width:100%;max-height:100%;left:50%;top:50%;margin:0;padding:0;border:0;transform:translate(-50%,-50%) scale(1);transition:transform .65s cubic-bezier(.3,1,.3,1),opacity .65s ease;contain:layout style;will-change:transform,opacity;visibility:hidden}.spl-header,.spl-pane,.spl-progress{position:absolute;top:0}.spl-pane{width:100%;height:100%;transition:transform .65s cubic-bezier(.3,1,.3,1);contain:layout size;will-change:transform,contents}.spl-header{width:100%;height:50px;text-align:right;transform:translateY(-100px);transition:transform .35s ease;overflow:hidden;will-change:transform}#spotlight.menu .spl-footer,#spotlight.menu .spl-header,.spl-footer:hover,.spl-header:hover{transform:translateY(0)}.spl-header div{display:inline-block;vertical-align:middle;white-space:nowrap;width:50px;height:50px;opacity:.5}.spl-progress{width:100%;height:3px;background-color:rgba(255,255,255,.45);transform:translateX(-100%);transition:transform linear}.spl-footer,.spl-next,.spl-prev{position:absolute;transition:transform .35s ease;will-change:transform}.spl-footer{left:0;right:0;bottom:0;line-height:20px;padding:20px 20px 0;padding-bottom:env(safe-area-inset-bottom,0);text-align:left;font-size:15px;font-weight:400;transform:translateY(100%)}.spl-title{font-size:22px}.spl-button,.spl-description,.spl-title{margin-bottom:20px}.spl-button{display:inline-block;background:#fff;color:#000;border-radius:5px;padding:10px 20px;cursor:pointer}.spl-next,.spl-page~*,.spl-prev{background-position:center;background-repeat:no-repeat}.spl-page{float:left;width:auto;line-height:50px}.spl-page~*{background-size:21px;float:right}.spl-fullscreen{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9Ii0xIC0xIDI2IDI2IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggM0g1YTIgMiAwIDAgMC0yIDJ2M20xOCAwVjVhMiAyIDAgMCAwLTItMmgtM20wIDE4aDNhMiAyIDAgMCAwIDItMnYtM00zIDE2djNhMiAyIDAgMCAwIDIgMmgzIi8+PC9zdmc+)}.spl-fullscreen.on{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04IDN2M2EyIDIgMCAwIDEtMiAySDNtMTggMGgtM2EyIDIgMCAwIDEtMi0yVjNtMCAxOHYtM2EyIDIgMCAwIDEgMi0yaDNNMyAxNmgzYTIgMiAwIDAgMSAyIDJ2MyIvPjwvc3ZnPg==)}.spl-autofit{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgd2lkdGg9Ijk2cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIiBmaWxsPSIjZmZmIiBkPSJNNzEuMzExLDgwQzY5LjY3LDg0LjY2LDY1LjIzLDg4LDYwLDg4SDIwYy02LjYzLDAtMTItNS4zNy0xMi0xMlYzNmMwLTUuMjMsMy4zNC05LjY3LDgtMTEuMzExVjc2YzAsMi4yMSwxLjc5LDQsNCw0SDcxLjMxMSAgeiIvPjxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSIgZmlsbD0iI2ZmZiIgZD0iTTc2LDhIMzZjLTYuNjMsMC0xMiw1LjM3LTEyLDEydjQwYzAsNi42Myw1LjM3LDEyLDEyLDEyaDQwYzYuNjMsMCwxMi01LjM3LDEyLTEyVjIwQzg4LDEzLjM3LDgyLjYzLDgsNzYsOHogTTgwLDYwICBjMCwyLjIxLTEuNzksNC00LDRIMzZjLTIuMjEsMC00LTEuNzktNC00VjIwYzAtMi4yMSwxLjc5LTQsNC00aDQwYzIuMjEsMCw0LDEuNzksNCw0VjYweiIvPjwvc3ZnPg==)}.spl-zoom-in,.spl-zoom-out{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjgiIHgyPSIxNCIgeTE9IjExIiB5Mj0iMTEiLz48L3N2Zz4=);background-size:22px}.spl-zoom-in{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==)}.spl-download{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNDEuNzMycHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0MS43MzIgMTQxLjczMiIgd2lkdGg9IjE0MS43MzJweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIwLjY3NCwxMjUuMTM4SDIwLjc5M3YxNi41OTRoOTkuODgxVjEyNS4xMzh6IE0xMTkuMDE5LDU4Ljc3NmMtMi41NjEtMi41NjItNi43MTYtMi41NjItOS4yNzUsMEw3Ny4yMSw5MS4zMTJWNi41NjIgICBDNzcuMjEsMi45MzYsNzQuMjY5LDAsNzAuNjQ4LDBjLTMuNjI0LDAtNi41NiwyLjkzNy02LjU2LDYuNTYzdjg0Ljc1TDMxLjk5Miw1OS4yMThjLTIuNTYyLTIuNTY0LTYuNzE1LTIuNTY0LTkuMjc3LDAgICBjLTIuNTY1LDIuNTYyLTIuNTY1LDYuNzE2LDAsOS4yNzlsNDMuMjk0LDQzLjI5M2MwLjE1LDAuMTU0LDAuMzE0LDAuMjk5LDAuNDgxLDAuNDM4YzAuMDc2LDAuMDYyLDAuMTU1LDAuMTEzLDAuMjM0LDAuMTc2ICAgYzAuMDk0LDAuMDY1LDAuMTg2LDAuMTQyLDAuMjc5LDAuMjA2YzAuMDk3LDAuMDYzLDAuMTkyLDAuMTE0LDAuMjg2LDAuMTc0YzAuMDg4LDAuMDU0LDAuMTc0LDAuMTA1LDAuMjY1LDAuMTUzICAgYzAuMSwwLjA1NiwwLjE5OSwwLjEsMC4yOTgsMC4xNDdjMC4wOTcsMC4wNDUsMC4xOSwwLjA5MSwwLjI4MywwLjEzMmMwLjA5OCwwLjA0LDAuMTk2LDAuMDcyLDAuMjk1LDAuMTA1ICAgYzAuMTA0LDAuMDM4LDAuMjA3LDAuMDc4LDAuMzEyLDAuMTA5YzAuMTAxLDAuMDMsMC4xOTcsMC4wNTIsMC4yOTcsMC4wNzdjMC4xMDgsMC4wMjMsMC4yMTQsMC4wNTgsMC4zMjQsMC4wNzggICBjMC4xMTUsMC4wMjEsMC4yMzEsMC4wMzMsMC4zNDYsMC4wNTRjMC4wOTcsMC4wMTUsMC4xOTIsMC4wMzIsMC4yODksMC4wNDJjMC40MywwLjA0MiwwLjg2NSwwLjA0MiwxLjI5NSwwICAgYzAuMS0wLjAxLDAuMTkxLTAuMDI3LDAuMjg5LTAuMDQyYzAuMTE0LTAuMDIxLDAuMjMzLTAuMDI5LDAuMzQ0LTAuMDU0YzAuMTA5LTAuMDIxLDAuMjE3LTAuMDU1LDAuMzI0LTAuMDc4ICAgYzAuMTAyLTAuMDI1LDAuMTk5LTAuMDQ3LDAuMjk5LTAuMDc3YzAuMTA1LTAuMDMxLDAuMjA3LTAuMDcxLDAuMzEyLTAuMTA5YzAuMTAyLTAuMDMsMC4xOTUtMC4wNjIsMC4yOTUtMC4xMDUgICBjMC4wOTYtMC4wNDEsMC4xOTEtMC4wODcsMC4yODMtMC4xMzJjMC4xLTAuMDQ4LDAuMTk5LTAuMDkyLDAuMjk3LTAuMTQ3YzAuMDkxLTAuMDQ4LDAuMTc3LTAuMTA0LDAuMjY0LTAuMTUzICAgYzAuMDk4LTAuMDYsMC4xOTMtMC4xMSwwLjI4Ny0wLjE3NGMwLjA5Ni0wLjA2NCwwLjE4OS0wLjE0MSwwLjI4MS0wLjIwNmMwLjA3Ni0wLjA2MiwwLjE1Ni0wLjExMywwLjIzMy0wLjE3NiAgIGMwLjI0OS0wLjIwNCwwLjQ3OS0wLjQzNywwLjY5NC0wLjY3YzAuMDc2LTAuMDY3LDAuMTU0LTAuMTMxLDAuMjI5LTAuMjAzbDQzLjI5NC00My4yOTYgICBDMTIxLjU4MSw2NS40OTEsMTIxLjU4MSw2MS4zMzcsMTE5LjAxOSw1OC43NzYiLz48L2c+PC9zdmc+);background-size:20px}.spl-theme{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9IjI0cHgiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMiAyIDIwIDIwIiB3aWR0aD0iMjRweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIsNGMtNC40MTgsMC04LDMuNTgyLTgsOHMzLjU4Miw4LDgsOHM4LTMuNTgyLDgtOFMxNi40MTgsNCwxMiw0eiBNMTIsMThjLTMuMzE0LDAtNi0yLjY4Ni02LTZzMi42ODYtNiw2LTZzNiwyLjY4Niw2LDYgUzE1LjMxNCwxOCwxMiwxOHoiLz48cGF0aCBkPSJNMTIsN3YxMGMyLjc1NywwLDUtMi4yNDMsNS01UzE0Ljc1Nyw3LDEyLDd6Ii8+PC9nPjwvc3ZnPg==)}.spl-play{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5Z29uIGZpbGw9IiNmZmYiIHBvaW50cz0iMTAgOCAxNiAxMiAxMCAxNiAxMCA4Ii8+PC9zdmc+)}.spl-play.on{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMCIgeDI9IjEwIiB5MT0iMTUiIHkyPSI5Ii8+PGxpbmUgeDE9IjE0IiB4Mj0iMTQiIHkxPSIxNSIgeTI9IjkiLz48L3N2Zz4=);animation:pulsate 1s ease infinite}.spl-close{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIyIDIgMjAgMjAiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTgiIHgyPSI2IiB5MT0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHgyPSIxOCIgeTE9IjYiIHkyPSIxOCIvPjwvc3ZnPg==)}.spl-next,.spl-prev{top:50%;width:50px;height:50px;opacity:.65;background-color:rgba(0,0,0,.45);border-radius:100%;cursor:pointer;margin-top:-25px;transform:translateX(-100px);background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIxNSAxOCA5IDEyIDE1IDYiLz48L3N2Zz4=);background-size:30px}.spl-prev{left:20px}.spl-next{left:auto;right:20px;transform:translateX(100px) scaleX(-1)}#spotlight.menu .spl-prev{transform:translateX(0)}#spotlight.menu .spl-next{transform:translateX(0) scaleX(-1)}@media (hover:hover){.spl-page~div{cursor:pointer;transition:opacity .2s ease}.spl-next:hover,.spl-page~div:hover,.spl-prev:hover{opacity:1}}@media (max-width:500px){.spl-header div{width:44px}.spl-footer .spl-title{font-size:20px}.spl-footer{font-size:14px}.spl-next,.spl-prev{width:35px;height:35px;margin-top:-17.5px;background-size:15px 15px}.spl-spinner{background-size:30px 30px}}.hide-scrollbars{overflow:hidden!important} \ No newline at end of file +@keyframes pulsate{0%,to{opacity:1}50%{opacity:.2}}#spotlight{position:fixed;top:-1px;bottom:-1px;width:100%;z-index:99999;color:#fff;background-color:#000;opacity:0;overflow:hidden;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-out;font-family:Arial,sans-serif;font-size:16px;font-weight:400;contain:strict;touch-action:none;pointer-events:none}#spotlight.show{opacity:1;transition:none;pointer-events:auto}#spotlight.white{color:#212529;background-color:#fff}#spotlight.white .spl-next,#spotlight.white .spl-page~*,#spotlight.white .spl-prev,#spotlight.white .spl-spinner{filter:invert(1)}#spotlight.white .spl-progress{background-color:rgba(0,0,0,.35)}#spotlight.white .spl-footer,#spotlight.white .spl-header{background-color:rgba(255,255,255,.65)}#spotlight.white .spl-button{background:#212529;color:#fff}.spl-footer,.spl-header{background-color:rgba(0,0,0,.45)}#spotlight .contain,#spotlight .cover{object-fit:cover;height:100%;width:100%}#spotlight .contain{object-fit:contain}#spotlight .autofit{object-fit:none;width:auto;height:auto;max-height:none;max-width:none;transition:none}.spl-scene,.spl-spinner,.spl-track{width:100%;height:100%;position:absolute}.spl-track{contain:strict}.spl-spinner{background-position:center;background-repeat:no-repeat;background-size:42px;opacity:0}.spl-spinner.spin{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2Utb3BhY2l0eT0iLjY1Ij48Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuMTUiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMTggMTgiIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvZz48L2c+PC9zdmc+);transition:opacity .2s linear .25s;opacity:1}.spl-spinner.error{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYsMUExNSwxNSwwLDEsMCwzMSwxNiwxNSwxNSwwLDAsMCwxNiwxWm0wLDJhMTMsMTMsMCwwLDEsOC40NSwzLjE0TDYuMTQsMjQuNDVBMTMsMTMsMCwwLDEsMTYsM1ptMCwyNmExMywxMywwLDAsMS04LjQ1LTMuMTRMMjUuODYsNy41NUExMywxMywwLDAsMSwxNiwyOVoiIGlkPSJiYW5fc2lnbl9jcm9zc2VkX2NpcmNsZSIvPjwvc3ZnPg==);background-size:128px;transition:none;opacity:.5}.spl-scene{transition:transform .65s cubic-bezier(.1,1,.1,1);contain:layout size;will-change:transform}.spl-pane>*{position:absolute;width:auto;height:auto;max-width:100%;max-height:100%;left:50%;top:50%;margin:0;padding:0;border:0;transform:translate(-50%,-50%) scale(1);transition:transform .65s cubic-bezier(.3,1,.3,1),opacity .65s ease;contain:layout style;will-change:transform,opacity;visibility:hidden}.spl-header,.spl-pane,.spl-progress{position:absolute;top:0}.spl-pane{width:100%;height:100%;transition:transform .65s cubic-bezier(.3,1,.3,1);contain:layout size;will-change:transform,contents}.spl-header{width:100%;height:50px;text-align:right;transform:translateY(-100px);transition:transform .35s ease;overflow:hidden;will-change:transform}#spotlight.menu .spl-footer,#spotlight.menu .spl-header,.spl-footer:hover,.spl-header:hover{transform:translateY(0)}.spl-header div{display:inline-block;vertical-align:middle;white-space:nowrap;width:50px;height:50px;opacity:.5}.spl-progress{width:100%;height:3px;background-color:rgba(255,255,255,.45);transform:translateX(-100%);transition:transform linear}.spl-footer,.spl-next,.spl-prev{position:absolute;transition:transform .35s ease;will-change:transform}.spl-footer{left:0;right:0;bottom:0;line-height:20px;padding:20px 20px 0;padding-bottom:env(safe-area-inset-bottom,0);text-align:left;font-size:15px;font-weight:400;transform:translateY(100%)}.spl-title{font-size:22px}.spl-button,.spl-description,.spl-title{margin-bottom:20px}.spl-button{display:inline-block;background:#fff;color:#000;border-radius:5px;padding:10px 20px;cursor:pointer}.spl-next,.spl-page~*,.spl-prev{background-position:center;background-repeat:no-repeat}.spl-page{float:left;width:auto;line-height:50px}.spl-page~*{background-size:21px;float:right}.spl-fullscreen{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9Ii0xIC0xIDI2IDI2IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggM0g1YTIgMiAwIDAgMC0yIDJ2M20xOCAwVjVhMiAyIDAgMCAwLTItMmgtM20wIDE4aDNhMiAyIDAgMCAwIDItMnYtM00zIDE2djNhMiAyIDAgMCAwIDIgMmgzIi8+PC9zdmc+)}.spl-fullscreen.on{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04IDN2M2EyIDIgMCAwIDEtMiAySDNtMTggMGgtM2EyIDIgMCAwIDEtMi0yVjNtMCAxOHYtM2EyIDIgMCAwIDEgMi0yaDNNMyAxNmgzYTIgMiAwIDAgMSAyIDJ2MyIvPjwvc3ZnPg==)}.spl-autofit{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9Ijk2cHgiIHZpZXdCb3g9IjAgMCA5NiA5NiIgd2lkdGg9Ijk2cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIiBmaWxsPSIjZmZmIiBkPSJNNzEuMzExLDgwQzY5LjY3LDg0LjY2LDY1LjIzLDg4LDYwLDg4SDIwYy02LjYzLDAtMTItNS4zNy0xMi0xMlYzNmMwLTUuMjMsMy4zNC05LjY3LDgtMTEuMzExVjc2YzAsMi4yMSwxLjc5LDQsNCw0SDcxLjMxMSAgeiIvPjxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSIgZmlsbD0iI2ZmZiIgZD0iTTc2LDhIMzZjLTYuNjMsMC0xMiw1LjM3LTEyLDEydjQwYzAsNi42Myw1LjM3LDEyLDEyLDEyaDQwYzYuNjMsMCwxMi01LjM3LDEyLTEyVjIwQzg4LDEzLjM3LDgyLjYzLDgsNzYsOHogTTgwLDYwICBjMCwyLjIxLTEuNzksNC00LDRIMzZjLTIuMjEsMC00LTEuNzktNC00VjIwYzAtMi4yMSwxLjc5LTQsNC00aDQwYzIuMjEsMCw0LDEuNzksNCw0VjYweiIvPjwvc3ZnPg==)}.spl-zoom-in,.spl-zoom-out{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjgiIHgyPSIxNCIgeTE9IjExIiB5Mj0iMTEiLz48L3N2Zz4=);background-size:22px}.spl-zoom-in{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==)}.spl-download{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNDEuNzMycHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0MS43MzIgMTQxLjczMiIgd2lkdGg9IjE0MS43MzJweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIwLjY3NCwxMjUuMTM4SDIwLjc5M3YxNi41OTRoOTkuODgxVjEyNS4xMzh6IE0xMTkuMDE5LDU4Ljc3NmMtMi41NjEtMi41NjItNi43MTYtMi41NjItOS4yNzUsMEw3Ny4yMSw5MS4zMTJWNi41NjIgICBDNzcuMjEsMi45MzYsNzQuMjY5LDAsNzAuNjQ4LDBjLTMuNjI0LDAtNi41NiwyLjkzNy02LjU2LDYuNTYzdjg0Ljc1TDMxLjk5Miw1OS4yMThjLTIuNTYyLTIuNTY0LTYuNzE1LTIuNTY0LTkuMjc3LDAgICBjLTIuNTY1LDIuNTYyLTIuNTY1LDYuNzE2LDAsOS4yNzlsNDMuMjk0LDQzLjI5M2MwLjE1LDAuMTU0LDAuMzE0LDAuMjk5LDAuNDgxLDAuNDM4YzAuMDc2LDAuMDYyLDAuMTU1LDAuMTEzLDAuMjM0LDAuMTc2ICAgYzAuMDk0LDAuMDY1LDAuMTg2LDAuMTQyLDAuMjc5LDAuMjA2YzAuMDk3LDAuMDYzLDAuMTkyLDAuMTE0LDAuMjg2LDAuMTc0YzAuMDg4LDAuMDU0LDAuMTc0LDAuMTA1LDAuMjY1LDAuMTUzICAgYzAuMSwwLjA1NiwwLjE5OSwwLjEsMC4yOTgsMC4xNDdjMC4wOTcsMC4wNDUsMC4xOSwwLjA5MSwwLjI4MywwLjEzMmMwLjA5OCwwLjA0LDAuMTk2LDAuMDcyLDAuMjk1LDAuMTA1ICAgYzAuMTA0LDAuMDM4LDAuMjA3LDAuMDc4LDAuMzEyLDAuMTA5YzAuMTAxLDAuMDMsMC4xOTcsMC4wNTIsMC4yOTcsMC4wNzdjMC4xMDgsMC4wMjMsMC4yMTQsMC4wNTgsMC4zMjQsMC4wNzggICBjMC4xMTUsMC4wMjEsMC4yMzEsMC4wMzMsMC4zNDYsMC4wNTRjMC4wOTcsMC4wMTUsMC4xOTIsMC4wMzIsMC4yODksMC4wNDJjMC40MywwLjA0MiwwLjg2NSwwLjA0MiwxLjI5NSwwICAgYzAuMS0wLjAxLDAuMTkxLTAuMDI3LDAuMjg5LTAuMDQyYzAuMTE0LTAuMDIxLDAuMjMzLTAuMDI5LDAuMzQ0LTAuMDU0YzAuMTA5LTAuMDIxLDAuMjE3LTAuMDU1LDAuMzI0LTAuMDc4ICAgYzAuMTAyLTAuMDI1LDAuMTk5LTAuMDQ3LDAuMjk5LTAuMDc3YzAuMTA1LTAuMDMxLDAuMjA3LTAuMDcxLDAuMzEyLTAuMTA5YzAuMTAyLTAuMDMsMC4xOTUtMC4wNjIsMC4yOTUtMC4xMDUgICBjMC4wOTYtMC4wNDEsMC4xOTEtMC4wODcsMC4yODMtMC4xMzJjMC4xLTAuMDQ4LDAuMTk5LTAuMDkyLDAuMjk3LTAuMTQ3YzAuMDkxLTAuMDQ4LDAuMTc3LTAuMTA0LDAuMjY0LTAuMTUzICAgYzAuMDk4LTAuMDYsMC4xOTMtMC4xMSwwLjI4Ny0wLjE3NGMwLjA5Ni0wLjA2NCwwLjE4OS0wLjE0MSwwLjI4MS0wLjIwNmMwLjA3Ni0wLjA2MiwwLjE1Ni0wLjExMywwLjIzMy0wLjE3NiAgIGMwLjI0OS0wLjIwNCwwLjQ3OS0wLjQzNywwLjY5NC0wLjY3YzAuMDc2LTAuMDY3LDAuMTU0LTAuMTMxLDAuMjI5LTAuMjAzbDQzLjI5NC00My4yOTYgICBDMTIxLjU4MSw2NS40OTEsMTIxLjU4MSw2MS4zMzcsMTE5LjAxOSw1OC43NzYiLz48L2c+PC9zdmc+);background-size:20px}.spl-theme{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBoZWlnaHQ9IjI0cHgiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMiAyIDIwIDIwIiB3aWR0aD0iMjRweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIsNGMtNC40MTgsMC04LDMuNTgyLTgsOHMzLjU4Miw4LDgsOHM4LTMuNTgyLDgtOFMxNi40MTgsNCwxMiw0eiBNMTIsMThjLTMuMzE0LDAtNi0yLjY4Ni02LTZzMi42ODYtNiw2LTZzNiwyLjY4Niw2LDYgUzE1LjMxNCwxOCwxMiwxOHoiLz48cGF0aCBkPSJNMTIsN3YxMGMyLjc1NywwLDUtMi4yNDMsNS01UzE0Ljc1Nyw3LDEyLDd6Ii8+PC9nPjwvc3ZnPg==)}.spl-play{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5Z29uIGZpbGw9IiNmZmYiIHBvaW50cz0iMTAgOCAxNiAxMiAxMCAxNiAxMCA4Ii8+PC9zdmc+)}.spl-play.on{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSItMC41IC0wLjUgMjUgMjUiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMCIgeDI9IjEwIiB5MT0iMTUiIHkyPSI5Ii8+PGxpbmUgeDE9IjE0IiB4Mj0iMTQiIHkxPSIxNSIgeTI9IjkiLz48L3N2Zz4=);animation:pulsate 1s ease infinite}.spl-close{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIyIDIgMjAgMjAiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTgiIHgyPSI2IiB5MT0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHgyPSIxOCIgeTE9IjYiIHkyPSIxOCIvPjwvc3ZnPg==)}.spl-info{background-image:url(../img/info.svg)}.spl-next,.spl-prev{top:50%;width:50px;height:50px;opacity:.65;background-color:rgba(0,0,0,.45);border-radius:100%;cursor:pointer;margin-top:-25px;transform:translateX(-100px);background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIxNSAxOCA5IDEyIDE1IDYiLz48L3N2Zz4=);background-size:30px}.spl-prev{left:20px}.spl-next{left:auto;right:20px;transform:translateX(100px) scaleX(-1)}#spotlight.menu .spl-prev{transform:translateX(0)}#spotlight.menu .spl-next{transform:translateX(0) scaleX(-1)}@media (hover:hover){.spl-page~div{cursor:pointer;transition:opacity .2s ease}.spl-next:hover,.spl-page~div:hover,.spl-prev:hover{opacity:1}}@media (max-width:500px){.spl-header div{width:44px}.spl-footer .spl-title{font-size:20px}.spl-footer{font-size:14px}.spl-next,.spl-prev{width:35px;height:35px;margin-top:-17.5px;background-size:15px 15px}.spl-spinner{background-size:30px 30px}}.hide-scrollbars{overflow:hidden!important} \ No newline at end of file diff --git a/dist/js/spotlight.min.js b/dist/js/spotlight.min.js index adcc3c7..e6aad2c 100644 --- a/dist/js/spotlight.min.js +++ b/dist/js/spotlight.min.js @@ -5,23 +5,26 @@ * Licence: Apache-2.0 * https://github.com/nextapps-de/spotlight */ -(function(){'use strict';Object.assign||(Object.assign=function(a,b){for(var c=Object.keys(b),e=0,f;e