burGallery_min.js

class Gallery{constructor(t,s,e){this.info={name:t,directory:s},this.containers={gallery:void 0,images:void 0,grid:void 0,scroll:void 0,album_navigation:void 0,caption:void 0,counter:void 0,title:void 0,progress_bar:void 0,appearance_btn:void 0,caption_btn:void 0,close_btn:void 0,download_btn:void 0,fscreen_btn:void 0,fwindow_btn:void 0,pause_btn:void 0,first_btn:void 0,last_btn:void 0,next_btn:void 0,previous_btn:void 0,modal:void 0,modal_content:void 0,fscreen:document.documentElement},this.status={appearance_mode:!1,caption:!1,custom_event:!1,display:!1,fscreen:!1,fwindow:!1,loop:!1,play:!1,slideshow_interval:void 0,slideshow_speed:4500,album_index:0,album_num:1,img_index:0,img_num:1,album_title:void 0,image_file:void 0,image_folder:void 0,total_images:void 0,total_albums:0},this.markup={images:"",grid:"",scroll:"",album_navigation_menu:""},this.template={images_wrapper_open:void 0,images_wrapper_content:void 0,images_wrapper_close:void 0,grid_wrapper_open:void 0,grid_wrapper_content:void 0,grid_wrapper_close:void 0,scroll:void 0,album_navigation_menu:void 0},this.component_array={dbase:[],img:[],grid_thb:[],scroll_thb:[]},this.component_name=["images","grid","scroll","album_navigation","caption","counter","title","progress_bar","appearance_btn","caption_btn","close_btn","download_btn","fscreen_btn","fwindow_btn","pause_btn","first_btn","last_btn","next_btn","previous_btn","modal","modal_content"],e.appearance_mode&&(this.status.appearance_mode=e.appearance_mode),e.caption&&(this.status.caption=e.caption),e.custom_event&&(this.status.custom_event=e.custom_event),e.display&&(this.status.display=e.display),e.fscreen&&(this.status.fscreen=e.fscreen),e.fwindow&&(this.status.fwindow=e.fwindow),e.loop&&(this.status.loop=e.loop),e.play&&(this.status.play=e.play),e.slideshow_speed&&(this.status.slideshow_speed=e.slideshow_speed),e.template&&(e.template.images_wrapper_open&&(this.template.images_wrapper_open=e.template.images_wrapper_open),e.template.images_wrapper_content&&(this.template.images_wrapper_content=e.template.images_wrapper_content),e.template.images_wrapper_close&&(this.template.images_wrapper_close=e.template.images_wrapper_close),e.template.grid_wrapper_open&&(this.template.grid_wrapper_open=e.template.grid_wrapper_open),e.template.grid_wrapper_content&&(this.template.grid_wrapper_content=e.template.grid_wrapper_content),e.template.grid_wrapper_close&&(this.template.grid_wrapper_close=e.template.grid_wrapper_close),e.template.scroll&&(this.template.scroll=e.template.scroll),e.template.album_navigation_menu&&(this.template.album_navigation_menu=e.template.album_navigation_menu)),this.load_gallery()}load_gallery(){const t=new XMLHttpRequest;t.onreadystatechange=()=>{4===t.readyState&&(200===t.status?(this.component_array.dbase=JSON.parse(t.responseText),this.build_gallery()):document.write(`<h2>Hello.</h2><p>Unfortunately, an error occured: ${t.statusText}.</p>`))},this.info.directory&&""!==this.info.directory?(t.open("GET",`${this.info.directory}?t=${Math.random()}`),t.send()):document.write("<h2>Hello.</h2><p>Unfortunately, the gallery directory file cannot be loaded at this time.</p>")}build_gallery(){this.info.name&&""!==this.info.name&&document.querySelector(`.${this.info.name}`)?document.querySelector(`.${this.info.name}`).querySelector(".images")?(this.containers.gallery=document.querySelector(`.${this.info.name}`),this.containers.images=document.querySelector(`.${this.info.name}`).querySelector(".images"),this.component_name.forEach((t=>{this.containers.gallery.querySelector(`.${t}`)&&(this.containers[t]=this.containers.gallery.querySelector(`.${t}`))})),this.component_array.dbase.forEach((t=>{t[0].album&&""!==t[0].album&&t[0].img_folder&&""!==t[0].img_folder&&t.length&&""!==t.length?(this.status.album_num=t[0].album,this.status.album_title=t[0].title,this.status.image_folder=t[0].img_folder,this.status.total_images=t.length,this.status.total_albums++,this.markup.images+=`<div class='album_${this.status.album_num}'>`,this.containers.grid&&(this.markup.grid+=`<div class='album_${this.status.album_num}'>`),this.containers.scroll&&(this.markup.scroll+=`<div class='album_${this.status.album_num}'>`),this.template_check_1(t),this.markup.images+="</div>",this.containers.grid&&(this.markup.grid+="</div>"),this.containers.scroll&&(this.markup.scroll+="</div>")):document.write("<h2>Hello.</h2><p>Unfortunately, the album is unable to build at this time.</p>")})),this.containers.images.innerHTML=this.markup.images,this.containers.grid&&(this.containers.grid.innerHTML=this.markup.grid),this.containers.scroll&&(this.containers.scroll.innerHTML=this.markup.scroll),this.containers.progress_bar&&(this.containers.progress_bar.querySelector("span").innerHTML=""),this.containers.counter&&(this.containers.counter.innerHTML=""),this.containers.title&&(this.containers.title.innerHTML=""),this.containers.caption&&(this.containers.caption.innerHTML=""),this.containers.modal&&(this.containers.modal.style.display="none",document.querySelector("body").style.overflow="auto"),(this.containers.grid||this.containers.scroll||this.containers.album_navigation)&&this.template_check_2()):document.write("<h2>Hello.</h2><p>Unfortunately, the gallery images container is not available at this time.</p>"):document.write("<h2>Hello.</h2><p>Unfortunately, the gallery name or container is not available at this time.</p>")}template_check_1(t){this.component_name.forEach((s=>{if("images"===s||"grid"===s){let e=s+"_wrapper_open";this.template[e]?this.markup[s]+=this.template[e](t,this.status.album_num,this.status.album_title,this.status.image_folder,this.status.total_images):("images"===s&&(this.markup.images+="<div>"),"grid"===s&&(this.markup.grid+=`<h4>${this.status.album_title}</h4>`))}}));for(let s=1;s<this.status.total_images;s++)this.status.image_file=t[s].img,this.status.image_file&&""!==this.status.image_file?this.component_name.forEach((e=>{if("images"===e||"grid"===e||"scroll"===e){let i="";i="scroll"===e?"scroll":e+"_wrapper_content",this.template[i]?this.markup[e]+=this.template[i](s,t,this.status.album_num,this.status.album_title,this.status.image_folder,this.status.image_file,this.status.total_images):("images"===e&&(this.markup.images+=`<img class='img' data-src='${this.status.image_folder+this.status.image_file}' src='img/spinner.gif'>`),"grid"===e&&(this.markup.grid+=`<button type='button' class='thb i_${s}'>${s}</button>`),"scroll"===e&&(this.markup.scroll+=`<button type='button' class='thb i_${s}'>${s}</button>`))}})):document.write("<h2>Hello.</h2><p>Unfortunately, the gallery is unable to build thumbnails and/or images at this time.</p>");this.component_name.forEach((t=>{if("images"===t||"grid"===t){let s=t+"_wrapper_close";this.template[s]?this.markup[t]+=this.template[s]:("images"===t&&(this.markup.images+="</div>"),"grid"===t&&(this.markup.grid+="</div>"))}}))}template_check_2(){this.containers.album_navigation&&(this.markup.album_navigation_menu='<div class="dropdown_content">'),this.component_array.dbase.forEach((t=>{this.status.album_num=t[0].album,this.status.album_title=t[0].title,this.status.total_images=t.length,this.containers.album_navigation&&(this.template.album_navigation_menu?this.markup.album_navigation_menu+=this.template.album_navigation_menu(this.status.album_num,this.status.album_title):this.markup.album_navigation_menu+=`<button class='n_${this.status.album_num}'>${this.status.album_title}</button>`),this.containers.images.querySelector(`.album_${this.status.album_num}`)&&(this.containers.images.querySelector(`.album_${this.status.album_num}`).style.display="none"),this.containers.scroll&&this.containers.scroll.querySelector(`.album_${this.status.album_num}`)&&(this.containers.scroll.querySelector(`.album_${this.status.album_num}`).style.display="none")})),this.containers.album_navigation&&(this.markup.album_navigation_menu+="</div>",this.containers.album_navigation.innerHTML+=this.markup.album_navigation_menu),window.addEventListener("load",this.add_event_listeners()),this.status.custom_event&&window.custom_event()}add_event_listeners(){this.component_array.dbase.forEach((t=>{this.status.album_num=t[0].album,this.status.album_title=t[0].title,this.status.total_images=t.length;for(let t=1;t<this.status.total_images;t++)this.containers.grid&&this.thb_listeners(this.containers.grid,this.status.album_num,t),this.containers.scroll&&this.thb_listeners(this.containers.scroll,this.status.album_num,t);this.containers.album_navigation&&this.album_listeners(this.containers.album_navigation,this.status.album_num)})),this.btn_listeners(),this.keydown_listeners(),this.swipe_listeners(),this.status.caption&&this.toggle_caption(),this.status.fwindow&&this.toggle_fwindow(),this.status.appearance_mode&&this.toggle_appearance(),this.status.display&&this.open_gallery(1,1)}thb_listeners(t,s,e){t.querySelector(`.album_${s}`).addEventListener("click",(t=>{t.target.classList.contains(`i_${e}`)&&(this.slideshow_pause(),this.open_gallery(s,e),this.status.fscreen&&this.toggle_fscreen())}))}album_listeners(t,s){t.querySelector(`.n_${s}`).addEventListener("click",(()=>{this.containers.album_navigation.querySelector(".dropdown_content").classList.remove("active"),this.slideshow_pause(),this.open_gallery(s,1)}))}btn_listeners(){this.component_name.forEach((t=>{"images"!==t&&"appearance_btn"!==t&&"caption_btn"!==t&&"close_btn"!==t&&"download_btn"!==t&&"fscreen_btn"!==t&&"fwindow_btn"!==t&&"pause_btn"!==t&&"first_btn"!==t&&"last_btn"!==t&&"next_btn"!==t&&"previous_btn"!==t&&"modal"!==t||this.containers.gallery.querySelector(`.${t}`)&&this.containers.gallery.querySelector(`.${t}`).addEventListener("click",(()=>{"images"===t&&this.containers.album_navigation&&this.containers.album_navigation.querySelector(".dropdown_content").classList.contains("active")&&this.containers.album_navigation.querySelector(".dropdown_content").classList.remove("active"),"appearance_btn"===t&&this.containers.appearance_btn&&this.toggle_appearance(),"caption_btn"===t&&this.containers.caption_btn&&this.toggle_caption(),"close_btn"===t&&this.containers.close_btn&&this.containers.modal&&"block"===this.containers.modal.style.display&&this.close_gallery(),"download_btn"===t&&this.containers.download_btn&&this.download_image(),"fscreen_btn"===t&&this.containers.fscreen_btn&&this.toggle_fscreen(),"fwindow_btn"===t&&this.containers.fwindow_btn&&this.toggle_fwindow(),"pause_btn"===t&&this.containers.pause_btn&&(this.status.play?this.slideshow_pause():this.slideshow_play()),"first_btn"===t&&this.containers.first_btn&&this.set_img_status(this.status.img_num=1),"last_btn"===t&&this.containers.last_btn&&this.set_img_status(this.status.img_num=this.status.total_images),"next_btn"===t&&this.containers.next_btn&&this.set_img_status(this.status.img_num++),"previous_btn"===t&&this.containers.previous_btn&&this.set_img_status(this.status.img_num--),"modal"===t&&this.containers.modal&&event.target===this.containers.modal&&this.close_gallery()}))})),this.containers.album_navigation.querySelector(".dropdown_btn").addEventListener("click",(()=>{this.containers.album_navigation.querySelector(".dropdown_content").classList.contains("active")?this.containers.album_navigation.querySelector(".dropdown_content").classList.remove("active"):this.containers.album_navigation.querySelector(".dropdown_content").classList.add("active")}))}keydown_listeners(){document.addEventListener("keydown",(t=>{if(this.containers.modal&&"block"===this.containers.modal.style.display)return"Escape"!==t.key&&"Escape"!==t.code&&27!==t.keyCode||(t.preventDefault(),t.stopPropagation(),this.close_gallery()),(this.containers.pause||this.containers.scroll)&&("ArrowLeft"!==t.key&&"ArrowLeft"!==t.code&&37!==t.keyCode||(t.preventDefault(),t.stopPropagation(),1===this.status.img_num?this.status.img_num=this.status.total_images:this.status.img_num--,this.set_img_status()),"ArrowRight"!==t.key&&"ArrowRight"!==t.code&&39!==t.keyCode&&"Enter"!==t.key&&"Enter"!==t.code&&13!==t.keyCode||(t.preventDefault(),t.stopPropagation(),this.status.img_num++,this.set_img_status())," "!==t.key&&"Space"!==t.code&&32!==t.keyCode||(t.preventDefault(),t.stopPropagation(),this.status.play?this.slideshow_pause():this.slideshow_play())),!1}))}swipe_listeners(){let t=0,s=0,e=()=>{s<t&&(1===this.status.img_num?this.status.img_num=this.status.total_images:this.status.img_num--,this.set_img_status()),s>t&&(this.status.img_num++,this.set_img_status())};this.containers.images.addEventListener("touchstart",(s=>{t=s.changedTouches[0].screenX})),this.containers.images.addEventListener("touchend",(t=>{s=t.changedTouches[0].screenX,e()}))}toggle_appearance(){this.status.appearance_mode&&this.containers.appearance_btn.classList.contains("active")?(this.containers.appearance_btn.classList.remove("active"),this.containers.fscreen.style.setProperty("--white","#FFFFFF"),this.containers.fscreen.style.setProperty("--white_alpha","rgba(255,255,255,0.9)"),this.containers.fscreen.style.setProperty("--black","#000000"),this.containers.fscreen.style.setProperty("--color_1","#2E9AFE"),this.containers.fscreen.style.setProperty("--color_2","#F79F81"),this.containers.fscreen.style.setProperty("--color_3","#848484"),this.containers.fscreen.style.setProperty("--color_4","#F2F2F2"),this.containers.fscreen.style.setProperty("--charcoal","#1A1A1A"),this.status.appearance_mode=!1):(this.containers.appearance_btn.classList.add("active"),this.containers.fscreen.style.setProperty("--white","#000000"),this.containers.fscreen.style.setProperty("--white_alpha","rgba(0,0,0,0.9)"),this.containers.fscreen.style.setProperty("--black","#FFFFFF"),this.containers.fscreen.style.setProperty("--color_1","#F79F81"),this.containers.fscreen.style.setProperty("--color_2","#2E9AFE"),this.containers.fscreen.style.setProperty("--color_3","#F2F2F2"),this.containers.fscreen.style.setProperty("--color_4","#1A1A1A"),this.containers.fscreen.style.setProperty("--charcoal","#F2F2F2"),this.status.appearance_mode=!0)}toggle_caption(){this.status.caption&&this.containers.caption_btn.classList.contains("active")?(this.containers.caption.classList.remove("active"),this.containers.caption_btn.classList.remove("active"),this.status.caption=!1):(this.containers.caption.classList.add("active"),this.containers.caption_btn.classList.add("active"),this.status.caption=!0)}close_active(){this.containers.images.querySelector(".active")&&this.containers.images.querySelector(".active").classList.remove("active"),this.containers.grid&&this.containers.grid.querySelector(".active")&&(this.containers.grid.querySelector(".active").disabled=!1,this.containers.grid.querySelector(".active").classList.remove("active")),this.containers.scroll&&this.containers.scroll.querySelector(".active")&&(this.containers.scroll.querySelector(".active").disabled=!1,this.containers.scroll.querySelector(".active").classList.remove("active"))}close_album(){this.containers.images.querySelector(`.album_${this.status.album_num}`)&&(this.containers.images.querySelector(`.album_${this.status.album_num}`).style.display="none"),this.containers.scroll&&this.containers.scroll.querySelector(`.album_${this.status.album_num}`)&&(this.containers.scroll.querySelector(`.album_${this.status.album_num}`).style.display="none")}close_gallery(){this.close_active(),this.close_album(),this.containers.modal&&(this.containers.modal.style.display="none",document.querySelector("body").style.overflow="auto"),this.status.play&&this.slideshow_pause()}download_image(){window.open(this.containers.images.querySelector(`.album_${this.status.album_num}`).querySelector(".active").getAttribute("src"),"_blank","width="+.2*parseInt(window.innerWidth)+",height="+.2*parseInt(window.innerHeight))}toggle_fscreen(){if(this.status.fscreen&&this.containers.fscreen_btn.classList.contains("active")){if(this.containers.fscreen_btn.classList.remove("active"),this.containers.modal_content.classList.remove("fullscreen"),this.containers.gallery.querySelector(".scroll")){const t=this.containers.gallery.querySelector(".scroll");t.style.opacity="100%",t.style.pointerEvents="auto",t.style.cursor="pointer"}document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.status.fscreen=!1}else{if(this.containers.fscreen_btn.classList.add("active"),this.containers.modal_content.classList.add("fullscreen"),this.containers.gallery.querySelector(".scroll")){const t=this.containers.gallery.querySelector(".scroll");t.style.opacity="30%",t.style.pointerEvents="none",t.style.cursor="default"}this.containers.fscreen.requestFullscreen?this.containers.fscreen.requestFullscreen():this.containers.fscreen.webkitRequestFullscreen?this.containers.fscreen.webkitRequestFullscreen():this.containers.fscreen.msRequestFullscreen&&this.containers.fscreen.msRequestFullscreen(),this.status.fscreen=!0}}toggle_fwindow(){this.status.fwindow&&this.containers.fwindow_btn.classList.contains("active")?(this.containers.fwindow_btn.classList.remove("active"),this.containers.modal_content.style.width="600px",this.status.fwindow=!1):(this.containers.fwindow_btn.classList.add("active"),this.containers.modal_content.style.width="100%",this.status.fwindow=!0)}slideshow_pause(){this.component_name.forEach((t=>{"first_btn"!==t&&"last_btn"!==t&&"next_btn"!==t&&"previous_btn"!==t&&"scroll"!==t||this.containers.gallery.querySelector(`.${t}`)&&((t=this.containers.gallery.querySelector(`.${t}`)).style.opacity="100%",t.style.pointerEvents="auto",t.style.cursor="pointer")})),clearInterval(this.status.slideshow_interval),this.status.play=!1,this.containers.pause_btn&&this.containers.pause_btn.classList.remove("active")}slideshow_play(){this.component_name.forEach((t=>{"first_btn"!==t&&"last_btn"!==t&&"next_btn"!==t&&"previous_btn"!==t&&"scroll"!==t||this.containers.gallery.querySelector(`.${t}`)&&((t=this.containers.gallery.querySelector(`.${t}`)).style.opacity="30%",t.style.pointerEvents="none",t.style.cursor="default")})),this.status.slideshow_interval=setInterval((()=>this.set_img_status(this.status.img_num++)),this.status.slideshow_speed),this.status.play=!0,this.containers.pause_btn&&this.containers.pause_btn.classList.add("active")}open_gallery(t,s){if(this.close_active(),this.close_album(),this.status.album_num=t,this.status.album_index=this.status.album_num-1,this.status.img_num=s,this.status.album_num&&""!==this.status.album_num){if(this.component_array.img=this.containers.images.querySelector(`.album_${this.status.album_num}`).querySelectorAll(".img"),this.status.total_images=this.component_array.img.length,this.containers.grid&&(this.component_array.grid_thb=this.containers.grid.querySelector(`.album_${this.status.album_num}`).querySelectorAll(".thb")),this.containers.scroll&&(this.component_array.scroll_thb=this.containers.scroll.querySelector(`.album_${this.status.album_num}`).querySelectorAll(".thb")),"none"===this.containers.images.querySelector(`.album_${this.status.album_num}`).style.display&&(this.containers.images.querySelector(`.album_${this.status.album_num}`).style.display="block"),this.containers.scroll&&this.containers.scroll.querySelector(`.album_${this.status.album_num}`)&&"none"===this.containers.scroll.querySelector(`.album_${this.status.album_num}`).style.display&&(this.containers.scroll.querySelector(`.album_${this.status.album_num}`).style.display="block"),this.containers.album_navigation){if(this.containers.album_navigation.querySelector(".dropdown_content .active")){this.containers.album_navigation.querySelector(".dropdown_content .active").classList.remove("active")}this.containers.album_navigation.querySelector(`.n_${this.status.album_num}`).classList.add("active")}this.containers.title&&(this.containers.title.innerHTML=`<h2>${this.info.name}</h2><h3>${this.component_array.dbase[this.status.album_index][0].title}</h3>`),this.status.play?(this.status.img_num=1,this.set_img_status(),this.slideshow_play()):this.set_img_status()}else document.write("<h2>Hello.</h2><p>Unfortunately, the gallery is unable to open at this time.</p>")}set_img_status(){this.status.img_num>this.status.total_images&&(this.status.img_num=1),this.status.img_num<1&&(this.status.img_num=this.status.total_images),this.status.img_index=this.status.img_num-1,this.show_current_img()}load_current_img(){var t;(t=this.component_array.img[this.status.img_index].getAttribute("data-src"),new Promise(((s,e)=>{var i=new Image;i.onload=()=>{s(t)},i.onerror=()=>{e(t)},i.src=t}))).then((t=>{this.containers.images.querySelector(".error")&&this.containers.images.querySelector(".error").remove(),this.component_array.img[this.status.img_index].style.width="100%",this.component_array.img[this.status.img_index].style.height="100%",this.component_array.img[this.status.img_index].style.marginTop="0px",this.component_array.img[this.status.img_index].style.boxShadow="var(--shadow)",this.component_array.img[this.status.img_index].setAttribute("src",t)})).catch((t=>{this.containers.images.querySelector(".error")&&this.containers.images.querySelector(".error").remove();const s=document.createElement("p");s.className="error",s.innerHTML="Image not available at this time.<br>"+t,this.containers.images.appendChild(s),this.component_array.img[this.status.img_index].classList.contains("active")&&this.component_array.img[this.status.img_index].classList.remove("active")})).finally((()=>{this.component_array.img[this.status.img_index].setAttribute("alt",this.containers.caption.innerHTML)}))}show_current_img(){this.close_active(),this.component_array.img[this.status.img_index].classList.add("active"),this.containers.counter&&(this.containers.counter.innerHTML=`${this.status.img_num} / ${this.status.total_images}`),this.containers.caption&&(this.containers.caption.innerHTML=this.component_array.dbase[this.status.album_index][this.status.img_num].caption,this.status.caption&&this.containers.caption.classList.add("active"));let t=Math.round(this.status.img_num/this.status.total_images*100);this.containers.progress_bar&&(t>=100?(this.containers.progress_bar.style.width="0%",this.containers.progress_bar.querySelector("span").innerHTML="0 %"):(this.containers.progress_bar.style.width=t+"%",this.containers.progress_bar.querySelector("span").innerHTML=t+" %")),this.load_current_img(),this.containers.grid&&(this.component_array.grid_thb[this.status.img_index].classList.add("active"),this.component_array.grid_thb[this.status.img_index].disabled=!0),this.containers.scroll&&(this.component_array.scroll_thb[this.status.img_index].classList.add("active"),this.component_array.scroll_thb[this.status.img_index].disabled=!0),this.status.play||(this.containers.first_btn&&(this.containers.first_btn.style.opacity="100%",this.containers.first_btn.style.pointerEvents="auto",this.containers.first_btn.style.cursor="pointer"),this.containers.last_btn&&(this.containers.last_btn.style.opacity="100%",this.containers.last_btn.style.pointerEvents="auto",this.containers.last_btn.style.cursor="pointer")),1===this.status.img_num?this.status.play||this.containers.first_btn&&(this.containers.first_btn.style.opacity="30%",this.containers.first_btn.style.pointerEvents="none",this.containers.first_btn.style.cursor="default"):this.status.img_num===this.status.total_images&&(this.status.play||this.containers.last_btn&&(this.containers.last_btn.style.opacity="30%",this.containers.last_btn.style.pointerEvents="none",this.containers.last_btn.style.cursor="default"),this.containers.progress_bar&&(this.containers.progress_bar.style.width="100%",this.containers.progress_bar.querySelector("span").innerHTML="100 %"),this.status.loop||this.slideshow_pause()),this.containers.modal&&"none"===this.containers.modal.style.display&&(this.containers.modal.style.display="block",document.querySelector("body").style.overflow="hidden"),this.containers.scroll&&this.component_array.scroll_thb[this.status.img_index].scrollIntoView({behavior:"smooth",block:"start",inline:"center"})}}