@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 3.47 kB
JavaScript
/*! License details at fancyapps.com/license */
import{isPlainObject as t}from"../utils/isPlainObject.js";import{isString as e}from"../utils/isString.js";import{stringToHtml as o}from"../utils/strToHtml.js";import{PanzoomButtons as n}from"../shared/buttons.js";import{extend as l}from"../utils/extend.js";import{addClass as i}from"../utils/addClass.js";import{removeClass as s}from"../utils/removeClass.js";var a;!function(t){t.Left="left",t.middle="middle",t.right="right"}(a||(a={}));const r=Object.assign({counter:{tpl:'<div class="f-counter"><span data-carousel-page></span>/<span data-carousel-pages></span></div>'},download:{tpl:'<button data-carousel-download class="f-button" title="{{DOWNLOAD}}"><svg><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"/></svg></button>'},autoplay:{tpl:'<button data-autoplay-action="toggle" class="f-button" title="{{TOGGLE_AUTOPLAY}}"><svg><g><path d="M5 3.5 19 12 5 20.5Z"/></g><g><path d="M8 4v15M17 4v15"/></g></svg></button>'},thumbs:{tpl:'<button data-thumbs-action="toggle" class="f-button" title="{{TOGGLE_THUMBS}}"><svg><rect width="18" height="14" x="3" y="3" rx="2"/><path d="M4 21h1M9 21h1M14 21h1M19 21h1"/></svg></button>'}},n),u={absolute:!1,display:{left:[],middle:["zoomIn","zoomOut","toggle1to1","rotateCCW","rotateCW","flipX","flipY","reset"],right:[]},enabled:"auto",items:{}},c=()=>{let a,c;function d(e){const o=null==a?void 0:a.getOptions().Toolbar;let n=(t(o)?Object.assign(Object.assign({},u),o):u)[e];return n&&"function"==typeof n&&a?n(a):n}function f(){var s;if(!(null==a?void 0:a.getOptions().Toolbar))return;if(!a||c)return;const u=a.getContainer();if(!u)return;let f=d("enabled");if(!f)return;const p=d("absolute"),g=a.getSlides().length>1;let b=!1,m=!1;for(const t of a.getSlides())t.panzoomRef&&(b=!0),(t.downloadSrc||"image"===t.type&&t.src)&&(m=!0);const v=(null===(s=a.getPlugins().Thumbs)||void 0===s?void 0:s.isEnabled())||!1,h=g&&a.getPlugins().Autoplay||!1,j=a.getPlugins().Fullscreen&&(document.fullscreenEnabled||document.webkitFullscreenEnabled);if("auto"===f&&(f=b),!f)return;c=u.querySelector(".f-carousel__toolbar")||void 0,c||(c=document.createElement("div"),i(c,"f-carousel__toolbar"));const E=d("display"),y=l({},r,d("items"));for(const l of["left","middle","right"]){const s=E[l]||[],r=document.createElement("div");i(r,`f-carousel__toolbar__column is-${l}`);for(const l of s){let i;if(e(l)){if("counter"===l&&!g)continue;if("autoplay"===l&&!h)continue;if(n[l]&&!b)continue;if("fullscreen"===l&&!j)continue;if("thumbs"===l&&!v)continue;if("download"===l&&!m)continue;i=y[l]}if(t(l)&&(i=l),i&&i.tpl){let t=a.localize(i.tpl);t=t.split("<svg>").join('<svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24">');const e=o(t);e&&("function"==typeof i.click&&a&&e.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation(),"function"==typeof i.click&&a&&i.click(a,t)}),r.append(e))}}c.append(r)}if(c.childElementCount){if(p&&i(c,"is-absolute"),!c.parentElement){const t=d("parentEl");t?t.insertAdjacentElement("afterbegin",c):u.insertAdjacentElement("afterbegin",c)}u.contains(c)&&(i(u,"has-toolbar"),p&&i(u,"has-absolute-toolbar"))}}return{init:function(t){a=t,null==a||a.on("initSlides",f)},destroy:function(){null==a||a.off("initSlides",f),s(null==a?void 0:a.getContainer(),"has-toolbar has-absolute-toolbar"),null==c||c.remove(),c=void 0},add:function(t,e){r[t]=e},isEnabled:function(){return!!c}}};export{c as Toolbar,a as ToolbarColumn};