From 8cbc2ed182c104f4ab42df35ea21acc6a4fea9f5 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Wed, 29 Mar 2023 13:08:42 +0300 Subject: [PATCH] fix clear button for img2img inpaint, sketch, inpaint sketch added preview subfolder for extra networks --- javascript/imageMaskFix.js | 10 +- javascript/spotlight.js | 1311 +++++++++++++++++++++++++++++++++- modules/ui_extra_networks.py | 6 +- 3 files changed, 1319 insertions(+), 8 deletions(-) diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 0439c926..cae62fcf 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -204,8 +204,6 @@ onUiUpdate(function() { } function getImgSync(image){ - let c_src; - if(curr_src[img2img_tab_index] != image.src){ //console.log("NEWIMAGE"); curr_src[img2img_tab_index] = image.src; @@ -218,14 +216,15 @@ onUiUpdate(function() { spotlight.show([{ media: "node", src: spotlight_parent, - autohide: true, - control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"], + //autohide: true, + //control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"], class: "relative", }], ); parent_container_img.style.flexGrow = "0"; } + } const getImage = async (image) => { @@ -234,8 +233,7 @@ onUiUpdate(function() { spotlight.close(false, true); parent_container_img.style.flexGrow = "1"; curr_src[img2img_tab_index] = ""; - spotlight_parent.style = ""; - + spotlight_parent.style.transform = "none"; } }else if (image.complete) { return getImgSync(image); diff --git a/javascript/spotlight.js b/javascript/spotlight.js index 47e850f6..a2e7cb5c 100644 --- a/javascript/spotlight.js +++ b/javascript/spotlight.js @@ -10,4 +10,1313 @@ it supports multi-instancing, enable-disable panzoom functionallity and input type tools */ -!function(e){"use strict";let t=function(t,i={}){this.controls=["info","theme","download","play","page","close","autofit","zoom-in","zoom-out","prev","next","fullscreen"],this.controls_default={page:1,close:1,autofit:1,"zoom-in":1,"zoom-out":1,prev:1,next:1,fullscreen:1},this.keycodes={BACKSPACE:8,ESCAPE:27,SPACEBAR:32,LEFT:37,RIGHT:39,UP:38,NUMBLOCK_PLUS:107,PLUS:187,DOWN:40,NUMBLOCK_MINUS:109,MINUS:189,INFO:73};let s=this;Object.assign||(Object.assign=function(e,t){let i=Object.keys(t);for(let s=0,o;s{s.toggleClass(e,t,!0)},this.removeClass=(e,t)=>{s.toggleClass(e,t)},this.toggleClass=(e,t,i)=>{e.classList[i?"add":"remove"](t)},this.hasClass=(e,t)=>e.classList.contains(t),this.setStyle=(e,t,i)=>{i=""+i,e["_s_"+t]!==i&&(e.style.setProperty(t,i),e["_s_"+t]=i)};let o=0;this.prepareStyle=(e,t)=>{t&&(s.setStyle(e,"transition","none"),t()),o||(o=e.clientTop&&0),t&&s.setStyle(e,"transition","")},this.setText=(e,t)=>{e.firstChild.nodeValue=t},this.getByClass=(e,t)=>(t||document).getElementsByClassName(e),this.getByTag=(e,t)=>(t||document).getElementsByTagName(e),this.addListener=(e,t,i,o)=>{s.toggleListener(!0,e,t,i,o)},this.removeListener=(e,t,i,o)=>{s.toggleListener(!1,e,t,i,o)},this.toggleListener=(e,t,i,s,o)=>{t[(e?"add":"remove")+"EventListener"](i,s,!o&&!1!==o||o)},this.cancelEvent=(e,t)=>{e.stopPropagation(),t&&e.preventDefault()},this.downloadImage=(e,t)=>{let i=s.createElement("a"),o=t.src;i.href=o,i.download=o.substring(o.lastIndexOf("/")+1),s.body.appendChild(i),i.click(),s.body.removeChild(i)},this.createElement=e=>document.createElement(e),this.toggleDisplay=(e,t)=>{s.setStyle(e,"display",t?"":"none")},this.toggleVisibility=(e,t)=>{s.setStyle(e,"visibility",t?"":"hidden")},this.toggleAnimation=(e,t)=>{s.setStyle(e,"transition",t?"":"none")},this.widget=this.createElement("div"),this.widget.innerHTML="
",this.video_support={},this.tpl_video=this.createElement("video"),this.parse_src=(e,t,i,o)=>{let n,l;if("node"!==o){let a=Object.keys(i);for(let r=0,d;r3&&0===d.indexOf("src")){if("video"===o){let p=s.video_support[d];if(p){if(p>0){n=i[d];break}}else if(s.tpl_video.canPlayType("video/"+d.substring(3).replace("-","").toLowerCase())){s.video_support[d]=1,n=i[d];break}else s.video_support[d]=-1}else{let c=parseInt(d.substring(4),10);if(c){let h=Math.abs(t-c);(!l||h{!s.body&&(s.id="spotlight"+t,s.widget.id="spotlight"+t,s.doc=document.body,s.body=e,s.slider=s.getOneByClass("scene"),s.header=s.getOneByClass("header"),s.footer=s.getOneByClass("footer"),s.title=s.getOneByClass("title"),s.description=s.getOneByClass("description"),s.button=s.getOneByClass("button"),s.page_prev=s.getOneByClass("prev"),s.page_next=s.getOneByClass("next"),s.page=s.getOneByClass("page"),s.progress=s.getOneByClass("progress"),s.spinner=s.getOneByClass("spinner"),s.panes=[s.getOneByClass("pane")],s.addControl("close",s.close),s.doc[s.prefix_request="requestFullscreen"]||s.doc[s.prefix_request="msRequestFullscreen"]||s.doc[s.prefix_request="webkitRequestFullscreen"]||s.doc[s.prefix_request="mozRequestFullscreen"]||(s.prefix_request=""),s.prefix_request?(s.prefix_exit=s.prefix_request.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit"),s.maximize=s.addControl("fullscreen",s.fullscreen)):s.controls.pop(),s.addControl("info",s.info),s.addControl("autofit",s.autofit),s.addControl("zoom-in",s.zoom_in),s.addControl("zoom-out",s.zoom_out),s.addControl("theme",s.theme),s.player=s.addControl("play",s.play),s.addControl("download",s.download),s.addListener(s.page_prev,"click",s.prev),s.addListener(s.page_next,"click",s.next),s.track=s.getOneByClass("track"),s.addListener(s.track,"mousedown",s.start),s.addListener(s.track,"mousemove",s.move),s.addListener(s.track,"mouseleave",s.end),s.addListener(s.track,"mouseup",s.end),s.addListener(s.track,"touchstart",s.start,{passive:!1}),s.addListener(s.track,"touchmove",s.move,{passive:!0}),s.addListener(s.track,"touchend",s.end),s.addListener(s.button,"click",function(){s.options_click?s.options_click(s.current_slide,s.options):s.options_href&&(location.href=s.options_href)}))},this.getOneByClass=e=>this.controls_dom[e]=this.getByClass("spl-"+e,this.widget)[0],this.addControl=(e,t,i="")=>{let o=s.createElement("div");return o.className="spl-"+e,o.innerHTML=i,s.addListener(o,"click",t),s.header.appendChild(o),s.controls_dom[e]=o},this.removeControl=e=>{let t=s.controls_dom[e];t&&(s.header.removeChild(t),s.controls_dom[e]=null)},this.dispatch=e=>{let t=e.target.closest(".spotlight");if(t){s.cancelEvent(e,!0);let i=t.closest(".spotlight-group");s.anchors=s.getByClass("spotlight",i);for(let o=0;o{s.anchors=e,t&&(s.options_group=t,s.options_onshow=t.onshow,s.options_onchange=t.onchange,s.options_onclose=t.onclose,i=i||t.index),s.init_gallery(i)},this.panzoom=e=>{s.toggleListener(e,s.track,"wheel",s.wheel_listener,{passive:!1}),s.toggleListener(e,s.track,"mousedown",s.start),s.toggleListener(e,s.track,"mousemove",s.move),s.toggleListener(e,s.track,"mouseleave",s.end),s.toggleListener(e,s.track,"mouseup",s.end),s.toggleListener(e,s.track,"touchstart",s.start,{passive:!1}),s.toggleListener(e,s.track,"touchmove",s.move,{passive:!0}),s.toggleListener(e,s.track,"touchend",s.end)},this.init_gallery=e=>{if(s.slide_count=s.anchors.length,s.slide_count){s.body||s.init(),s.options_onshow&&s.options_onshow(e);let t=s.panes[0],i=t.parentElement;for(let o=s.panes.length;o{let s=i[e];return void 0!==s?"false"!=(s=""+s)&&(s||t):t},this.apply_options=e=>{s.options={},s.options_group&&Object.assign(s.options,s.options_group),Object.assign(s.options,e.dataset||e),s.options_media=s.options.media,s.options_click=s.options.onclick,s.options_theme=s.options.theme,s.options_class=s.options.class,s.options_autohide=s.parse_option("autohide",!1),s.options_infinite=s.parse_option("infinite"),s.options_progress=s.parse_option("progress",!0),s.options_autoslide=s.parse_option("autoslide"),s.options_preload=s.parse_option("preload",!0),s.options_href=s.options.buttonHref,s.delay=s.options_autoslide&&parseFloat(s.options_autoslide)||7,s.toggle_theme||s.options_theme&&s.theme(s.options_theme),s.options_class&&s.addClass(s.widget,s.options_class),s.options_class&&s.prepareStyle(s.widget);let t=s.options.control;if(t){let i="string"==typeof t?t.split(","):t;for(let o=0;o{e?s.prepareStyle(s.media,s.prepare_animation):(s.toggleAnimation(s.slider,s.animation_slide),s.setStyle(s.media,"opacity",s.animation_fade?0:1),s.update_scroll(s.animation_scale&&.8),s.animation_custom&&s.addClass(s.media,s.animation_custom))},this.init_slide=e=>{if(s.panel=s.panes[e-1],s.media=s.panel.firstChild,s.current_slide=e,s.media)s.disable_autoresizer(),s.options_fit&&s.addClass(s.media,s.options_fit),s.prepare_animation(!0),s.animation_custom&&s.removeClass(s.media,s.animation_custom),s.animation_fade&&s.setStyle(s.media,"opacity",1),s.animation_scale&&s.setStyle(s.media,"transform",""),s.setStyle(s.media,"visibility","visible"),s.gallery_next&&(s.media_next.src=s.gallery_next),s.options_autoslide&&s.animate_bar(s.playing);else{let t=s.gallery.media;if(s.parse_option("spinner",!0),"node"===t){s.media=s.gallery.src,"string"==typeof s.media&&(s.media=gradioApp().querySelector(s.media)),s.media&&(s.media._root||(s.media._root=s.media.parentElement),s.update_media_viewport(),s.panel.appendChild(s.media),s.init_slide(e));return}s.toggle_spinner(s.options_spinner,!0),s.media=s.createElement("img"),s.media.onload=function(){s.media===s&&(s.media.onerror=null,s.toggle_spinner(s.options_spinner),s.init_slide(e),s.update_media_viewport())},s.media.src=s.gallery.src,s.panel.appendChild(s.media),s.media&&(s.options_spinner||s.setStyle(s.media,"visibility","visible"),s.media.onerror=function(){s.media===s&&(s.checkout(s.media),s.addClass(s.spinner,"error"),s.toggle_spinner(s.options_spinner))})}},this.toggle_spinner=(e,t)=>{e&&s.toggleClass(s.spinner,"spin",t)},this.has_fullscreen=()=>document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement,this.resize_listener=()=>{if(s.update_widget_viewport(),s.media&&s.update_media_viewport(),s.prefix_request){let e=s.has_fullscreen();s.toggleClass(s.maximize,"on",e),e||s.detect_fullscreen()}},this.detect_fullscreen=()=>{s.toggleDisplay(s.maximize,screen.availHeight-e.innerHeight>0)},this.update_widget_viewport=()=>{s.viewport_w=s.widget.clientWidth,s.viewport_h=s.widget.clientHeight},this.update_media_viewport=()=>{s.media_w=s.media.clientWidth,s.media_h=s.media.clientHeight},this.update_scroll=e=>{s.setStyle(s.media,"transform","translate(-50%, -50%) scale("+(e||s.scale)+")")},this.update_panel=(e,t)=>{s.setStyle(s.panel,"transform",e||t?"translate("+e+"px, "+t+"px)":"")},this.update_slider=(e,t,i)=>{t?s.prepareStyle(s.slider,function(){s.update_slider(e,!1,i)}):s.setStyle(s.slider,"transform","translateX("+(-(100*e)+(i||0))+"%)")},this.toggle_listener=t=>{s.toggleListener(t,e,"keydown",s.key_listener),s.toggleListener(t,e,"resize",s.resize_listener)},this.history_listener=e=>{s.panel&&e.state.spl&&s.close(!0)},this.key_listener=e=>{if(s.panel){let t=!1!==s.options["zoom-in"];switch(e.keyCode){case s.keycodes.BACKSPACE:t&&s.autofit();break;case s.keycodes.ESCAPE:s.close();break;case s.keycodes.SPACEBAR:s.options_autoslide&&s.play();break;case s.keycodes.LEFT:s.prev();break;case s.keycodes.RIGHT:s.next();break;case s.keycodes.UP:case s.keycodes.NUMBLOCK_PLUS:case s.keycodes.PLUS:t&&s.zoom_in();break;case s.keycodes.DOWN:case s.keycodes.NUMBLOCK_MINUS:case s.keycodes.MINUS:t&&s.zoom_out();break;case s.keycodes.INFO:s.info()}}},this.wheel_listener=e=>{if(s.panel&&!1!==s.options["zoom-in"]){let t=e.deltaY;(t=(t<0?1:t?-1:0)*.5)<0?s.zoom_out():s.zoom_in()}},this.play=(e,t)=>{let i="boolean"==typeof e?e:!this.playing;!s.playing===i&&(s.playing=s.playing?clearTimeout(s.playing):1,s.toggleClass(s.player,"on",s.playing),t||s.animate_bar(s.playing))},this.animate_bar=e=>{s.options_progress&&(s.prepareStyle(s.progress,function(){s.setStyle(s.progress,"transition-duration",""),s.setStyle(s.progress,"transform","")}),e&&(s.setStyle(s.progress,"transition-duration",s.delay+"s"),s.setStyle(s.progress,"transform","translateX(0)"))),e&&(s.playing=setTimeout(s.next,1e3*s.delay))},this.autohide=()=>{s.options_autohide&&(s.hide_cooldown=Date.now()+2950,s.hide||(s.addClass(s.widget,"menu"),s.schedule(3e3)))},this.schedule=e=>{s.hide=setTimeout(function(){let e=Date.now();e>=s.hide_cooldown?(s.removeClass(s.widget,"menu"),s.hide=0):s.schedule(s.hide_cooldown-e)},e)},this.menu=e=>{"boolean"==typeof e&&(s.hide=e?s.hide:0),s.hide?(s.hide=clearTimeout(s.hide),s.removeClass(s.widget,"menu")):s.autohide()},this.start=e=>{s.cancelEvent(e,!0),s.is_down=!0,s.dragged=!1;let t=e.touches;t&&(t=t[0])&&(e=t),s.slidable=s.media_w*s.scale<=s.viewport_w,s.startX=e.pageX,s.startY=e.pageY,s.toggleAnimation(s.panel)},this.end=e=>{if(s.cancelEvent(e),s.is_down){if(s.dragged){if(s.slidable&&s.dragged){let t=s.x<-(s.viewport_w/7)&&(s.current_slides.viewport_w/7&&(s.current_slide>1||s.options_infinite);(t||i)&&(s.update_slider(s.current_slide-1,!0,s.x/s.viewport_w*100),t&&s.next()||i&&s.prev()),s.x=0,s.update_panel()}s.toggleAnimation(s.panel,!0)}else s.menu();s.is_down=!1}},this.move=e=>{if(s.cancelEvent(e),s.is_down){let t=e.touches;t&&(t=t[0])&&(e=t);let i=(s.media_w*s.scale-s.viewport_w)/2;s.x-=s.startX-(s.startX=e.pageX),!s.slidable&&(s.x>i?s.x=i:s.x<-i&&(s.x=-i),s.media_h*s.scale>s.viewport_h&&(i=(s.media_h*s.scale-s.viewport_h)/2,s.y-=s.startY-(s.startY=e.pageY),s.y>i?s.y=i:s.y<-i&&(s.y=-i))),s.dragged=!0,s.update_panel(s.x,s.y)}else s.autohide()},this.fullscreen=e=>{let t=s.has_fullscreen();("boolean"!=typeof e||!!t!==e)&&(t?document[s.prefix_exit]():s.widget[s.prefix_request]())},this.theme=e=>{"string"!=typeof e&&(e=s.toggle_theme?"":s.options_theme||"white"),s.toggle_theme!==e&&(s.toggle_theme&&s.removeClass(s.widget,s.toggle_theme),e&&s.addClass(s.widget,e),s.toggle_theme=e)},this.autofit=e=>{"boolean"==typeof e&&(s.toggle_autofit=!e),s.toggle_autofit=1===s.scale&&!s.toggle_autofit,s.toggleClass(s.media,"autofit",s.toggle_autofit),s.setStyle(s.media,"transform",""),s.scale=1,s.x=0,s.y=0,s.update_media_viewport(),s.toggleAnimation(s.panel),s.update_panel()},this.zoom_in=e=>{let t=s.scale/.65;t<=50&&(s.disable_autoresizer(),s.x/=.65,s.y/=.65,s.update_panel(s.x,s.y),s.zoom(t))},this.zoom_out=e=>{let t=.65*s.scale;s.disable_autoresizer(),t>=1&&(1===t?s.x=s.y=0:(s.x*=.65,s.y*=.65),s.update_panel(s.x,s.y),s.zoom(t))},this.zoom=e=>{s.scale=e||1,s.update_scroll()},this.info=()=>{s.footer_visible=!s.footer_visible,s.toggleVisibility(s.footer,s.footer_visible)},this.disable_autoresizer=()=>{s.toggle_autofit&&s.autofit()},this.show_gallery=()=>{s.toggleAnimation(s.widget,!0),s.addClass(s.body,"hide-scrollbars"),s.addClass(s.widget,"show"),s.toggle_listener(!0),s.update_widget_viewport(),s.resize_listener(),s.autohide(),s.options_autoslide&&s.play(!0,!0)},this.download=()=>{s.downloadImage(s.body,s.media)},this.close=(e,t)=>{if(s.hasClass(s.body,"relative")){s.fullscreen(!1);return}t||setTimeout(function(){s.body.removeChild(s.widget),s.panel=s.media=s.gallery=s.options=s.options_group=s.anchors=s.options_onshow=s.options_onchange=s.options_onclose=s.options_click=null},200),s.removeClass(s.body,"hide-scrollbars"),s.removeClass(s.widget,"show"),s.fullscreen(!1),s.toggle_listener(),s.gallery_next&&(s.media_next.src=""),s.playing&&s.play(),s.media&&s.checkout(s.media),s.hide&&(s.hide=clearTimeout(s.hide)),s.toggle_theme&&s.theme(),s.options_class&&s.removeClass(s.widget,s.options_class),s.options_onclose&&s.options_onclose(),t&&(s.body.removeChild(s.widget),s.panel=s.media=s.gallery=s.options=s.options_group=s.anchors=s.options_onshow=s.options_onchange=s.options_onclose=s.options_click=null)},this.checkout=e=>{if(e._root)e._root.appendChild(e),e._root=null;else{let t=e.parentNode;t&&t.removeChild(e),e=e.src=e.onerror=""}},this.prev=e=>{if(e&&s.autohide(),s.slide_count>1){if(s.current_slide>1)return s.goto(s.current_slide-1);if(s.options_infinite)return s.update_slider(s.slide_count,!0),s.goto(s.slide_count)}},this.next=e=>{if(e&&s.autohide(),s.slide_count>1){if(s.current_slide{if(e!==s.current_slide){s.playing?(clearTimeout(s.playing),s.animate_bar()):s.autohide();let t=e>s.current_slide;return s.current_slide=e,s.setup_page(t),!0}},this.prepare=e=>{let t=s.anchors[s.current_slide-1];s.apply_options(t);let i=n&&n.downlink,o=Math.max(s.viewport_h,s.viewport_w)*l;i&&1200*i{if(s.x=0,s.y=0,s.scale=1,s.media){if(s.media.onerror)s.checkout(s.media);else{let t=s.media;setTimeout(function(){t&&s.media!==t&&(s.checkout(t),t=null)},650),s.prepare_animation(),s.update_panel()}}s.footer&&s.toggleVisibility(s.footer,0),s.prepare(e),s.update_slider(s.current_slide-1),s.removeClass(s.spinner,"error"),s.init_slide(s.current_slide),s.toggleAnimation(s.panel),s.update_panel();let i=s.gallery.title,o=s.parse_option("description"),n=s.parse_option("button"),l=i||o||n;l&&(i&&s.setText(s.title,i),o&&s.setText(s.description,o),n&&s.setText(s.button,n),s.toggleDisplay(s.title,i),s.toggleDisplay(s.description,o),s.toggleDisplay(s.button,n),s.setStyle(s.footer,"transform","all"===s.options_autohide?"":"none")),s.options_autohide||s.addClass(s.widget,"menu"),s.toggleVisibility(s.footer,s.footer_visible&&l),s.toggleVisibility(s.page_prev,s.options_infinite||s.current_slide>1),s.toggleVisibility(s.page_next,s.options_infinite||s.current_slide1?s.current_slide+" / "+s.slide_count:""),s.options_onchange&&s.options_onchange(s.current_slide,s.options)}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=t:e.Spotlight=t}(window); \ No newline at end of file +(function (window) { + 'use strict'; + const Spotlight = function (selector, options = {}) { + this.controls = [ + "info", + "theme", + "download", + "play", + "page", + "close", + "autofit", + "zoom-in", + "zoom-out", + "prev", + "next", + "fullscreen" + ]; + this.controls_default = { + //"info": 1, + "page": 1, + "close": 1, + "autofit": 1, + "zoom-in": 1, + "zoom-out": 1, + "prev": 1, + "next": 1, + "fullscreen": 1 + }; + this.keycodes = { + BACKSPACE: 8, + ESCAPE: 27, + SPACEBAR: 32, + LEFT: 37, + RIGHT: 39, + UP: 38, + NUMBLOCK_PLUS : 107, + PLUS: 187, + DOWN: 40, + NUMBLOCK_MINUS: 109, + MINUS: 189, + INFO: 73 + }; + + const self = this; + + Object.assign || (Object.assign = + function(target, source){ + //console.log("assign", target, source); + const keys = Object.keys(/** @type {!Object} */(source)); + for(let i = 0, key; i < keys.length; i++){ + key = keys[i]; + target[key] = /*"" +*/ source[key]; + } + return target; + } + ); + + Element.prototype.closest || (Element.prototype.closest = function(classname){ + //console.log("closest", classname); + classname = classname.substring(1); + let node = this; + while(node && (node.nodeType === 1)){ + if(node.classList.contains(classname)){ + return (node); + } + node = node.parentElement /* || node.parentNode */; + } + return null; + }); + + this.addClass = (node, class_name) => { + self.toggleClass(node, class_name, true); + } + this.removeClass = (node, class_name) =>{ + self.toggleClass(node, class_name); + } + this.toggleClass = (node, class_name, state) =>{ + node.classList[state ? "add" : "remove"](class_name); + } + this.hasClass = (node, class_name) =>{ + return node.classList.contains(class_name); + } + this.setStyle = (node, style, value) =>{ + value = "" + value; + if(node["_s_" + style] !== value){ + node.style.setProperty(style, value); + node["_s_" + style] = value; + } + } + let tmp = 0; + this.prepareStyle = (node, fn) => { + if(fn){ + self.setStyle(node, "transition", "none"); + fn(); + } + // force applying styles (quick-fix for closure compiler): + tmp || (tmp = node.clientTop && 0); // clientWidth + fn && self.setStyle(node, "transition", ""); + } + this.setText = (node, text) => { + node.firstChild.nodeValue = text; + } + this.getByClass = (classname, context) => { + return (context || document).getElementsByClassName(classname); + } + this.getByTag = (tag, context) => { + return (context || document).getElementsByTagName(tag); + } + this.addListener = (node, event, fn, mode) => { + self.toggleListener(true, node, event, fn, mode); + } + this.removeListener = (node, event, fn, mode) => { + self.toggleListener(false, node, event, fn, mode); + } + this.toggleListener = (state, node, event, fn, mode) => { + node[(state ? "add" : "remove") + "EventListener"](event, fn, mode || (mode === false) ? mode : true); + } + this.cancelEvent = (event, prevent) => { + event.stopPropagation(); + //event.stopImmediatePropagation(); + prevent && event.preventDefault(); + } + this.downloadImage = (body, image) => { + const link = self.createElement("a"); + const src = image.src; + link.href = src; + link.download = src.substring(src.lastIndexOf("/") + 1); + self.body.appendChild(link); + link.click(); + self.body.removeChild(link); + } + this.createElement = (element) => { + return document.createElement(element); + } + this.toggleDisplay = (node, state) => { + self.setStyle(node, "display", state ? "" : "none"); + } + this.toggleVisibility = (node, state) => { + self.setStyle(node, "visibility", state ? "" : "hidden"); + } + this.toggleAnimation = (node, state) => { + self.setStyle(node, "transition", state ? "" : "none"); + } + this.widget = this.createElement("div"); + this.widget.innerHTML = ( + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + ); + + this.video_support = {}; + this.tpl_video = this.createElement("video"); + + this.parse_src = (anchor, size, options, media) => { + let src, diff; + if(media !== "node"){ + const keys = Object.keys((options)); + for(let x = 0, key; x < keys.length; x++){ + key = keys[x]; + if((key.length > 3) && (key.indexOf("src") === 0)){ + if(media === "video"){ + const cache = self.video_support[key]; + if(cache){ + if(cache > 0){ + src = options[key]; + break; + } + } + else if(self.tpl_video.canPlayType("video/" + key.substring(3).replace("-", "").toLowerCase())){ + self.video_support[key] = 1; + src = options[key]; + break; + } + else{ + self.video_support[key] = -1; + } + } + else{ + // Image Media: + const res = parseInt(key.substring(4), 10); + if(res){ + const abs = Math.abs(size - res); + if(!diff || (abs < diff)){ + diff = abs; + src = options[key]; + } + } + } + } + } + } + return src || options["src"] || options["href"] || anchor["src"] || anchor["href"]; + } + + this.controls_dom = {}; + const connection = navigator["connection"]; + const dpr = window["devicePixelRatio"] || 1; + + + this.x; + this.y; + this.startX; + this.startY; + this.viewport_w; + this.viewport_h; + this.media_w; + this.media_h; + this.scale; + + this.is_down; + this.dragged; + this.slidable; + this.toggle_autofit; + this.toggle_theme; + + this.current_slide; + this.slide_count; + this.anchors; + this.options; + this.options_media; + this.options_group; + this.options_infinite; + this.options_progress; + this.options_onshow; + this.options_onchange; + this.options_onclose; + this.options_fit; + this.options_autohide; + this.options_autoslide; + this.options_theme; + this.options_preload; + this.options_href; + this.options_click; + this.options_class; + this.delay; + + this.animation_scale; + this.animation_fade; + this.animation_slide; + this.animation_custom; + + this.body; + this.doc; + this.panel; + this.panes; + this.media; + this.media_next = this.createElement("img"); + this.slider; + this.header; + this.footer; + this.footer_visible = 0; + this.title; + this.description; + this.button; + this.page_prev; + this.page_next; + this.maximize; + this.page; + this.player; + this.progress; + this.spinner; + + this.gallery; + this.gallery_next; + this.playing; + this.hide; + this.hide_cooldown; + this.id = "spotlight"; + + this.prefix_request; + this.prefix_exit; + + this.track; + + this.addListener(document, "click", this.dispatch); + + this.init = (selector, instanceId) => { + + //setUserOptions(); + //setSliderOptions(); + + if (self.body) { + return; + } + + self.id = "spotlight" + instanceId; + self.widget.id = "spotlight" + instanceId; + self.doc = document.body; + self.body = selector; + self.slider = self.getOneByClass("scene"); + self.header = self.getOneByClass("header"); + self.footer = self.getOneByClass("footer"); + self.title = self.getOneByClass("title"); + self.description = self.getOneByClass("description"); + self.button = self.getOneByClass("button"); + self.page_prev = self.getOneByClass("prev"); + self.page_next = self.getOneByClass("next"); + self.page = self.getOneByClass("page"); + self.progress = self.getOneByClass("progress"); + self.spinner = self.getOneByClass("spinner"); + self.panes = [self.getOneByClass("pane")]; + + //console.log(selector); + + self.addControl("close", self.close); + + self.doc[self.prefix_request = "requestFullscreen"] || + self.doc[self.prefix_request = "msRequestFullscreen"] || + self.doc[self.prefix_request = "webkitRequestFullscreen"] || + self.doc[self.prefix_request = "mozRequestFullscreen"] || + (self.prefix_request = ""); + + if (self.prefix_request) { + + self.prefix_exit = ( + + self.prefix_request.replace("request", "exit") + .replace("mozRequest", "mozCancel") + .replace("Request", "Exit") + ); + + self.maximize = self.addControl("fullscreen", self.fullscreen); + } + else { + + self.controls.pop(); + } + + self.addControl("info", self.info); + self.addControl("autofit", self.autofit); + self.addControl("zoom-in", self.zoom_in); + self.addControl("zoom-out", self.zoom_out); + self.addControl("theme", self.theme); + self.player = self.addControl("play", self.play); + self.addControl("download", self.download); + + self.addListener(self.page_prev, "click", self.prev); + self.addListener(self.page_next, "click", self.next); + + self.track = self.getOneByClass("track"); + + self.addListener(self.track, "mousedown", self.start); + self.addListener(self.track, "mousemove", self.move); + self.addListener(self.track, "mouseleave", self.end); + self.addListener(self.track, "mouseup", self.end); + + self.addListener(self.track, "touchstart", self.start, { "passive": false }); + self.addListener(self.track, "touchmove", self.move, { "passive": true }); + //addListener(self.track, "touchcancel", end); + self.addListener(self.track, "touchend", self.end); + // click listener for the wrapper "track" is already covered + //addListener(self.track, "click", menu); + + self.addListener(self.button, "click", function () { + if (self.options_click) { + self.options_click(self.current_slide, self.options); + } + else if (self.options_href) { + location.href = self.options_href; + } + }); + //this.onInit(); + } + + + this.getOneByClass = (classname) => { + return this.controls_dom[classname] = this.getByClass("spl-" + classname, this.widget)[0]; + } + + this.addControl = (classname, fn, html="") => { + //console.log("addControl", classname, fn); + const div = self.createElement("div"); + div.className = "spl-" + classname; + div.innerHTML = html; + self.addListener(div, "click", fn); + self.header.appendChild(div); + return self.controls_dom[classname] = div; + } + + this.removeControl = (classname) => { + //console.log("dispatch", classname); + const div = self.controls_dom[classname]; + if (div) { + self.header.removeChild(div); + self.controls_dom[classname] = null; + } + } + + this.dispatch = (event) => { + //console.log("dispatch"); + const target = event.target.closest(".spotlight"); + if (target) { + self.cancelEvent(event, true); + const group = target.closest(".spotlight-group"); + self.anchors = self.getByClass("spotlight", group); + // determine current selected index + for (let i = 0; i < self.anchors.length; i++) { + if (self.anchors[i] === target) { + self.options_group = group && group.dataset; + self.init_gallery(i + 1); + break; + } + } + } + } + + this.show = (gallery, group, index) => { + //console.log(gallery, group, index); + //console.log(group); + self.anchors = gallery; + if (group) { + + self.options_group = group; + self.options_onshow = group["onshow"]; + self.options_onchange = group["onchange"]; + self.options_onclose = group["onclose"]; + index = index || group["index"]; + } + + self.init_gallery(index); + } + //state, node, event, fn, mode + this.panzoom = (state) => { + self.toggleListener(state, self.track, "wheel", self.wheel_listener, { passive: false }); + self.toggleListener(state, self.track, "mousedown", self.start); + self.toggleListener(state, self.track, "mousemove", self.move); + self.toggleListener(state, self.track, "mouseleave", self.end); + self.toggleListener(state, self.track, "mouseup", self.end); + self.toggleListener(state, self.track, "touchstart", self.start, { passive: false }); + self.toggleListener(state, self.track, "touchmove", self.move, { passive: true }); + self.toggleListener(state, self.track, "touchend", self.end); + } + + this.init_gallery = (index) => { + //console.log("init_gallery", index); + self.slide_count = self.anchors.length; + if (self.slide_count) { + + self.body || self.init(); + + self.options_onshow && self.options_onshow(index); + const pane = self.panes[0]; + //const parent = pane.parentNode; + const parent = pane.parentElement; + + for (let i = self.panes.length; i < self.slide_count; i++) { + const clone = pane.cloneNode(false); + self.setStyle(clone, "left", (i * 100) + "%"); + parent.appendChild(clone); + self.panes[i] = clone; + } + + if (!self.panel) { + self.body.appendChild(self.widget); + self.update_widget_viewport(); + //resize_listener(); + } + self.current_slide = index || 1; + self.toggleAnimation(self.slider); + self.setup_page(true); + self.prefix_request && self.detect_fullscreen(); + self.show_gallery(); + } + } + + this.parse_option = (key, is_default) => { + //console.log("parse_option", key, is_default); + let val = options[key]; + if (typeof val !== "undefined") { + val = "" + val; + return (val !== "false") && (val || is_default); + } + return is_default; + } + + this.apply_options = (anchor) => { + //console.log("apply_options", anchor); + self.options = {}; + self.options_group && Object.assign(self.options, self.options_group); + Object.assign(self.options, anchor.dataset || anchor); + + // TODO: theme is icon and option field! + + self.options_media = self.options["media"]; + self.options_click = self.options["onclick"]; + self.options_theme = self.options["theme"]; + self.options_class = self.options["class"]; + self.options_autohide = self.parse_option("autohide", false); + self.options_infinite = self.parse_option("infinite"); + self.options_progress = self.parse_option("progress", true); + self.options_autoslide = self.parse_option("autoslide"); + self.options_preload = self.parse_option("preload", true); + self.options_href = self.options["buttonHref"]; + self.delay = (self.options_autoslide && parseFloat(self.options_autoslide)) || 7; + self.toggle_theme || (self.options_theme && self.theme(self.options_theme)); + self.options_class && self.addClass(self.widget, self.options_class); + self.options_class && self.prepareStyle(self.widget) + + const control = self.options["control"]; + + // determine controls + if (control) { + const whitelist = ( + typeof control === "string" ? control.split(",") : control + ); + // prepare to false when using whitelist + for (let i = 0; i < self.controls.length; i++) { + self.options[self.controls[i]] = false; + } + // apply whitelist + for (let i = 0; i < whitelist.length; i++) { + const option = whitelist[i].trim(); + // handle shorthand "zoom" + if (option === "zoom") { + self.options["zoom-in"] = self.options["zoom-out"] = true; + } + else { + self.options[option] = true; + } + } + } + + // determine animations + const animation = self.options["animation"]; + self.animation_scale = self.animation_fade = self.animation_slide = !animation; + self.animation_custom = false; + + if (animation) { + const whitelist = ( + typeof animation === "string" ? + animation.split(",") : animation + ); + + // apply whitelist + for (let i = 0; i < whitelist.length; i++) { + const option = whitelist[i].trim(); + if (option === "scale") { + self.animation_scale = true; + } + else if (option === "fade") { + self.animation_fade = true; + } + else if (option === "slide") { + self.animation_slide = true; + } + else if (option) { + self.animation_custom = option; + } + } + } + self.options_fit = self.options["fit"]; + } + + this.prepare_animation = (prepare) => { + //console.log("prepare_animation", prepare); + if (prepare) { + self.prepareStyle(self.media, self.prepare_animation); + } + else { + self.toggleAnimation(self.slider, self.animation_slide); + self.setStyle(self.media, "opacity", self.animation_fade ? 0 : 1); + self.update_scroll(self.animation_scale && 0.8); + self.animation_custom && self.addClass(self.media, self.animation_custom); + } + } + + this.init_slide = (index) => { + //console.log("init_slide", index); + self.panel = self.panes[index - 1]; + self.media = (self.panel.firstChild); + self.current_slide = index; + + if (self.media) { + self.disable_autoresizer(); + if (self.options_fit) { + self.addClass(self.media, self.options_fit); + } + self.prepare_animation(true); + self.animation_custom && self.removeClass(self.media, self.animation_custom); + self.animation_fade && self.setStyle(self.media, "opacity", 1); + self.animation_scale && self.setStyle(self.media, "transform", ""); + self.setStyle(self.media, "visibility", "visible"); + + self.gallery_next && (self.media_next.src = self.gallery_next); + self.options_autoslide && self.animate_bar(self.playing); + } + else { + + const type = self.gallery.media; + const options_spinner = self.parse_option("spinner", true); + + if (type === "node") { + self.media = self.gallery.src; + if (typeof self.media === "string") { + self.media = gradioApp().querySelector(self.media); + } + + if (self.media) { + //self.media._root || (self.media._root = self.media.parentNode); + self.media._root || (self.media._root = self.media.parentElement); + self.update_media_viewport(); + self.panel.appendChild(self.media); + self.init_slide(index); + } + return; + } + else { + self.toggle_spinner(self.options_spinner, true); + self.media = (self.createElement("img")); + self.media.onload = function () { + if (self.media === self) { + self.media.onerror = null; + self.toggle_spinner(self.options_spinner); + self.init_slide(index); + self.update_media_viewport(); + } + }; + //media.crossOrigin = "anonymous"; + self.media.src = self.gallery.src; + self.panel.appendChild(self.media); + } + + if (self.media) { + self.options_spinner || self.setStyle(self.media, "visibility", "visible"); + self.media.onerror = function () { + if (self.media === self) { + self.checkout(self.media); + self.addClass(self.spinner, "error"); + self.toggle_spinner(self.options_spinner); + } + }; + } + } + } + + this.toggle_spinner = (options_spinner, is_on) => { + options_spinner && self.toggleClass(self.spinner, "spin", is_on); + } + + this.has_fullscreen = () => { + return ( + document["fullscreen"] || + document["fullscreenElement"] || + document["webkitFullscreenElement"] || + document["mozFullScreenElement"] + ); + } + + this.resize_listener = () => { + self.update_widget_viewport() + self.media && self.update_media_viewport(); + if (self.prefix_request) { + const is_fullscreen = self.has_fullscreen(); + self.toggleClass(self.maximize, "on", is_fullscreen) + is_fullscreen || self.detect_fullscreen(); + } + //update_scroll(); + } + + this.detect_fullscreen = () => { + self.toggleDisplay(self.maximize, (screen.availHeight - window.innerHeight) > 0); + } + + this.update_widget_viewport = () => { + self.viewport_w = self.widget.clientWidth; + self.viewport_h = self.widget.clientHeight; + } + + this.update_media_viewport = () => { + self.media_w = self.media.clientWidth; + self.media_h = self.media.clientHeight; + } + + // function update_media_dimension(){ + // + // media_w = media.width; + // media_h = media.height; + // } + + this.update_scroll = (force_scale) => { + self.setStyle(self.media, "transform", "translate(-50%, -50%) scale(" + (force_scale || self.scale) + ")"); + } + + this.update_panel = (x, y) => { + self.setStyle(self.panel, "transform", x || y ? "translate(" + x + "px, " + y + "px)" : ""); + } + + this.update_slider = (index, prepare, offset) => { + if (prepare) { + self.prepareStyle(self.slider, function () { + self.update_slider(index, false, offset); + }); + } + else { + self.setStyle(self.slider, "transform", "translateX(" + (-index * 100 + (offset || 0)) + "%)"); + } + } + + this.toggle_listener = (install) => { + //console.log("toggle_listener", install); + self.toggleListener(install, window, "keydown", self.key_listener); + //toggleListener(install, window, "wheel", wheel_listener); + self.toggleListener(install, window, "resize", self.resize_listener); + //self.toggleListener(install, window, "popstate", self.history_listener); + } + + this.history_listener = (event) => { + //console.log("history_listener"); + if (self.panel && event.state["spl"]) { + self.close(true); + } + } + + this.key_listener = (event) => { + //console.log("key_listener"); + if (self.panel) { + const zoom_enabled = self.options["zoom-in"] !== false; + switch (event.keyCode) { + case self.keycodes.BACKSPACE: + zoom_enabled && self.autofit(); + break; + case self.keycodes.ESCAPE: + self.close(); + break; + case self.keycodes.SPACEBAR: + self.options_autoslide && self.play(); + break; + case self.keycodes.LEFT: + self.prev(); + break; + case self.keycodes.RIGHT: + self.next(); + break; + case self.keycodes.UP: + case self.keycodes.NUMBLOCK_PLUS: + case self.keycodes.PLUS: + zoom_enabled && self.zoom_in(); + break; + case self.keycodes.DOWN: + case self.keycodes.NUMBLOCK_MINUS: + case self.keycodes.MINUS: + zoom_enabled && self.zoom_out(); + break; + case self.keycodes.INFO: + self.info(); + break; + } + } + } + + this.wheel_listener = (event) => { + //console.log("wheel_listener"); + if (self.panel && (self.options["zoom-in"] !== false)) { + let delta = event["deltaY"]; + delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5; + if (delta < 0) { + self.zoom_out(); + } + else { + self.zoom_in(); + } + } + } + + this.play = (init, _skip_animation) => { + //console.log("play", init); + const state = (typeof init === "boolean" ? init : !this.playing); + if (state === !self.playing) { + self.playing = self.playing ? clearTimeout(self.playing) : 1; + self.toggleClass(self.player, "on", self.playing); + _skip_animation || self.animate_bar(self.playing); + } + } + + this.animate_bar = (start) => { + //console.log("animate_bar", start); + if (self.options_progress) { + self.prepareStyle(self.progress, function () { + self.setStyle(self.progress, "transition-duration", ""); + self.setStyle(self.progress, "transform", ""); + }); + + if (start) { + self.setStyle(self.progress, "transition-duration", self.delay + "s"); + self.setStyle(self.progress, "transform", "translateX(0)"); + } + } + + if (start) { + self.playing = setTimeout(self.next, self.delay * 1000); + } + } + + this.autohide = () => { + //console.log("autohide"); + if (self.options_autohide) { + self.hide_cooldown = Date.now() + 2950; + if (!self.hide) { + self.addClass(self.widget, "menu"); + self.schedule(3000); + } + } + } + + this.schedule = (cooldown) => { + //console.log("schedule", cooldown); + + self.hide = setTimeout(function () { + const now = Date.now(); + if (now >= self.hide_cooldown) { + self.removeClass(self.widget, "menu"); + self.hide = 0; + } + else { + self.schedule(self.hide_cooldown - now); + } + }, cooldown); + } + + this.menu = (state) => { + //console.log("menu"); + if (typeof state === "boolean") { + self.hide = state ? self.hide : 0; + } + if (self.hide) { + self.hide = clearTimeout(self.hide); + self.removeClass(self.widget, "menu"); + } + else { + self.autohide(); + } + } + + this.start = (e) => { + //console.log("start"); + self.cancelEvent(e, true); + self.is_down = true; + self.dragged = false; + let touches = e.touches; + if (touches && (touches = touches[0])) { + e = touches; + } + self.slidable = (self.media_w * self.scale) <= self.viewport_w; + self.startX = e.pageX; + self.startY = e.pageY; + self.toggleAnimation(self.panel); + } + + this.end = (e) => { + //console.log("end"); + self.cancelEvent(e); + if (self.is_down) { + if (!self.dragged) { + self.menu(); + } + else { + if (self.slidable && self.dragged) { + const has_next = (self.x < -(self.viewport_w / 7)) && ((self.current_slide < self.slide_count) || self.options_infinite); + const has_prev = has_next || (self.x > (self.viewport_w / 7)) && ((self.current_slide > 1) || self.options_infinite); + if (has_next || has_prev) { + self.update_slider(self.current_slide - 1, true, self.x / self.viewport_w * 100); + (has_next && self.next()) || + (has_prev && self.prev()); + } + self.x = 0; + self.update_panel(); + } + self.toggleAnimation(self.panel, true); + } + self.is_down = false; + } + } + + this.move = (e) => { + //console.log("move"); + self.cancelEvent(e); + if (self.is_down) { + let touches = e.touches; + if (touches && (touches = touches[0])) { + e = touches; + } + // handle x-axis in slide mode and in drag mode + let diff = (self.media_w * self.scale - self.viewport_w) / 2; + self.x -= self.startX - (self.startX = e.pageX); + if (!self.slidable) { + if (self.x > diff) { + self.x = diff; + } + else if (self.x < -diff) { + self.x = -diff + } + // handle y-axis in drag mode + if ((self.media_h * self.scale) > self.viewport_h) { + diff = (self.media_h * self.scale - self.viewport_h) / 2; + self.y -= self.startY - (self.startY = e.pageY); + if (self.y > diff) { + self.y = diff; + } + else if (self.y < -diff) { + self.y = -diff; + } + } + } + self.dragged = true; + self.update_panel(self.x, self.y); + } + else { + self.autohide(); + } + } + + this.fullscreen = (init) => { + //console.log("fullscreen", init); + const is_fullscreen = self.has_fullscreen(); + if ((typeof init !== "boolean") || (init !== !!is_fullscreen)) { + if (is_fullscreen) { + document[self.prefix_exit](); + //removeClass(maximize, "on"); + } + else { + self.widget[self.prefix_request](); + //addClass(maximize, "on"); + } + } + } + + this.theme = (theme) => { + //console.log("theme", theme); + if (typeof theme !== "string") { + // toggle: + theme = self.toggle_theme ? "" : self.options_theme || "white"; + } + + if (self.toggle_theme !== theme) { + // set: + self.toggle_theme && self.removeClass(self.widget, self.toggle_theme); + theme && self.addClass(self.widget, theme); + self.toggle_theme = theme; + } + } + + this.autofit = (init) => { + + //console.log("autofit", init); + if (typeof init === "boolean") { + self.toggle_autofit = !init; + } + + self.toggle_autofit = (self.scale === 1) && !self.toggle_autofit; + + self.toggleClass(self.media, "autofit", self.toggle_autofit); + self.setStyle(self.media, "transform", ""); + + self.scale = 1; + self.x = 0; + self.y = 0; + + self.update_media_viewport(); + self.toggleAnimation(self.panel); + self.update_panel(); + //autohide(); + } + + this.zoom_in = (e) => { + //console.log("zoom_in"); + let value = self.scale / 0.65; + if (value <= 50) { + //console.log(toggle_autofit); + self.disable_autoresizer(); + // if(options_fit){ + // removeClass(media, options_fit); + // } + self.x /= 0.65; + self.y /= 0.65; + self.update_panel(self.x, self.y); + self.zoom(value); + } + //e && autohide(); + } + + this.zoom_out = (e) => { + //console.log("zoom_out"); + let value = self.scale * 0.65; + self.disable_autoresizer(); + if (value >= 1) { + if (value === 1) { + self.x = self.y = 0; + // if(options_fit){ + // addClass(media, options_fit); + // } + } + else { + self.x *= 0.65; + self.y *= 0.65; + } + self.update_panel(self.x, self.y); + self.zoom(value); + } + //e && autohide(); + } + + this.zoom = (factor) => { + //console.log("zoom", factor); + self.scale = factor || 1; + self.update_scroll(); + } + + this.info = () => { + //console.log("info"); + self.footer_visible = !self.footer_visible; + self.toggleVisibility(self.footer, self.footer_visible); + + } + + this.disable_autoresizer = () => { + //console.log("disable_autoresizer"); + //update_media_dimension(); + if (self.toggle_autofit) { + // removeClass(media, "autofit"); + // toggle_autofit = false; + self.autofit(); + } + } + + this.show_gallery = () => { + + //console.log("show_gallery"); + + //history.pushState({ "spl": 1 }, ""); + //history.pushState({ "spl": 2 }, ""); + + self.toggleAnimation(self.widget, true); + self.addClass(self.body, "hide-scrollbars"); + self.addClass(self.widget, "show"); + + self.toggle_listener(true); + self.update_widget_viewport(); + //investigate resize_listener + self.resize_listener(); + self.autohide(); + + self.options_autoslide && self.play(true, true); + } + + this.download = () => { + //console.log("download", media); + self.downloadImage(self.body, self.media); + } + + this.close = (hashchange, nofade) => { + //console.log("close", hashchange); + if(self.hasClass(self.body,"relative") && !nofade){ + self.fullscreen(false); + return; + } + + if(!nofade){ + setTimeout(function () { + self.body.removeChild(self.widget); + self.panel = self.media = self.gallery = self.options = self.options_group = self.anchors = self.options_onshow = self.options_onchange = self.options_onclose = self.options_click = null; + + }, 200); + } + + self.removeClass(self.body, "hide-scrollbars"); + self.removeClass(self.widget, "show"); + + self.fullscreen(false); + self.toggle_listener(); + + //history.go(hashchange === true ? -1 : -2); + + // teardown + self.gallery_next && (self.media_next.src = ""); + self.playing && self.play(); + self.media && self.checkout(self.media); + self.hide && (self.hide = clearTimeout(self.hide)); + self.toggle_theme && self.theme(); + self.options_class && self.removeClass(self.widget, self.options_class); + self.options_onclose && self.options_onclose(); + + if(nofade){ + self.body.removeChild(self.widget); + self.panel = self.media = self.gallery = self.options = self.options_group = self.anchors = self.options_onshow = self.options_onchange = self.options_onclose = self.options_click = null; + } + } + + this.checkout = (media) => { + //console.log("checkout"); + if (media._root) { + media._root.appendChild(media); + media._root = null; + } + else { + const parent = media.parentNode; + parent && parent.removeChild(media); + media = media.src = media.onerror = ""; + } + } + + this.prev = (e) => { + //console.log("prev"); + e && self.autohide(); + if (self.slide_count > 1) { + if (self.current_slide > 1) { + return self.goto(self.current_slide - 1); + } + else if (self.options_infinite) { + self.update_slider(self.slide_count, true); + return self.goto(self.slide_count); + } + } + } + + this.next = (e) => { + //console.log("next"); + e && self.autohide(); + if (self.slide_count > 1) { + if (self.current_slide < self.slide_count) { + return self.goto(self.current_slide + 1); + } + else if (self.options_infinite) { + self.update_slider(-1, true); + return self.goto(1); + } + else if (self.playing) { + self.play(); + } + } + } + + this.goto = (slide) => { + //console.log("goto", slide); + if (slide !== self.current_slide) { + if (self.playing) { + clearTimeout(self.playing); + self.animate_bar(); + } + else { + self.autohide(); + } + + //playing ? animate_bar() : autohide(); + const direction = slide > self.current_slide; + self.current_slide = slide; + self.setup_page(direction); + //options_autoslide && play(true, true); + return true; + } + } + + this.prepare = (direction) => { + + //console.log("prepare", direction); + + let anchor = self.anchors[self.current_slide - 1]; + + self.apply_options(anchor); + const speed = connection && connection["downlink"]; + let size = Math.max(self.viewport_h, self.viewport_w) * dpr; + if (speed && ((speed * 1200) < size)) { + size = speed * 1200; + } + let tmp; + self.gallery = { + media: self.options_media, + src: self.parse_src(anchor, size, self.options, self.options_media), + title: self.parse_option("title", + anchor["alt"] || anchor["title"] || + // inherit title from a direct child only + ((tmp = anchor.firstElementChild) && (tmp["alt"] || tmp["title"])) + ) + }; + + self.gallery_next && (self.media_next.src = self.gallery_next = ""); + + if (self.options_preload && direction) { + if ((anchor = self.anchors[self.current_slide])) { + const options_next = anchor.dataset || anchor; + const next_media = options_next["media"]; + if (!next_media || (next_media === "image")) { + self.gallery_next = self.parse_src(anchor, size, options_next, next_media); + } + } + } + + // apply controls + + for (let i = 0; i < self.controls.length; i++) { + const option = self.controls[i]; + //console.log(option + ": ", options[option]); + self.toggleDisplay(self.controls_dom[option], self.parse_option(option, self.controls_default[option])); + } + } + + this.setup_page = (direction) => { + //console.log("setup_page", direction); + self.x = 0; + self.y = 0; + self.scale = 1; + + if (self.media) { + // Note: the onerror callback was removed when the image was fully loaded (also for video) + if (self.media.onerror) { + self.checkout(self.media); + } + else { + let ref = self.media; + setTimeout(function () { + if (ref && (self.media !== ref)) { + self.checkout(ref); + ref = null; + } + }, 650); + + // animate out the old image + self.prepare_animation(); + self.update_panel(); + } + } + + self.footer && self.toggleVisibility(self.footer, 0); + + self.prepare(direction); + self.update_slider(self.current_slide - 1); + self.removeClass(self.spinner, "error"); + self.init_slide(self.current_slide); + self.toggleAnimation(self.panel); + self.update_panel(); + + const str_title = self.gallery.title; + const str_description = self.parse_option("description"); + const str_button = self.parse_option("button"); + const has_content = str_title || str_description || str_button; + + if (has_content) { + + str_title && self.setText(self.title, str_title); + str_description && self.setText(self.description, str_description); + str_button && self.setText(self.button, str_button); + + self.toggleDisplay(self.title, str_title); + self.toggleDisplay(self.description, str_description); + self.toggleDisplay(self.button, str_button); + + self.setStyle(self.footer, "transform", self.options_autohide === "all" ? "" : "none"); + } + + self.options_autohide || self.addClass(self.widget, "menu"); + + self.toggleVisibility(self.footer, self.footer_visible && has_content); + self.toggleVisibility(self.page_prev, self.options_infinite || (self.current_slide > 1)); + self.toggleVisibility(self.page_next, self.options_infinite || (self.current_slide < self.slide_count)); + self.setText(self.page, self.slide_count > 1 ? self.current_slide + " / " + self.slide_count : ""); + + self.options_onchange && self.options_onchange(self.current_slide, self.options); + } + /* + const isWebkit = property => { + if (typeof document.documentElement.style[property] === 'string') { + return property; + } + // Capitalize the first letter + property = property.charAt(0).toUpperCase() + property.slice(1); + return `webkit${property}`; + }; + */ + + /* const extendDefaults = (defaults, properties) => { + let property, propertyDeep; + if (properties != undefined && properties != 'undefined') { + for (property in properties) { + const propObj = properties[property]; + + if (typeof propObj === 'object') { + for (propertyDeep in propObj) { + defaults[property][propertyDeep] = propObj[propertyDeep]; + } + } else { + defaults[property] = propObj; + } + } + } + return defaults; + }; */ + + //this.init(); + }; + + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { + module.exports = Spotlight; + } else { + window.Spotlight = Spotlight; + } + +})(window); \ No newline at end of file diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index a8e03b34..77d2194c 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -153,8 +153,12 @@ class ExtraNetworksPage: preview_extensions = ["png", "jpg", "webp"] if shared.opts.samples_format not in preview_extensions: preview_extensions.append(shared.opts.samples_format) + + file_name = os.path.basename(path) + location = os.path.dirname(path) + preview_path = location + "/preview/" + file_name - potential_files = sum([[path + "." + ext, path + ".preview." + ext] for ext in preview_extensions], []) + potential_files = sum([[path + "." + ext, path + ".preview." + ext, preview_path + "." + ext, preview_path + ".preview." + ext] for ext in preview_extensions], []) for file in potential_files: if os.path.isfile(file):