UNPKG

@fancyapps/ui

Version:

Robust JavaScript UI Component Library

3 lines (2 loc) 3.29 kB
/*! 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";var i;!function(t){t.Left="left",t.middle="middle",t.right="right"}(i||(i={}));const s=Object.assign({counter:{tpl:'<div class="f-carousel__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),a={absolute:!1,display:{left:[],middle:["zoomIn","zoomOut","toggle1to1","rotateCCW","rotateCW","flipX","flipY","reset"],right:[]},enabled:"auto",items:{}},u=()=>{let i,u;function d(){const e=null==i?void 0:i.getOptions().Toolbar;return t(e)?Object.assign(Object.assign({},a),e):a}function r(){var t,a,r;if(!(null==i?void 0:i.getOptions().Toolbar))return;if(!i||u)return;let c=d().enabled;if(!c)return;let f=d().absolute;const g=i.getSlides().length>1;let p=!1,b=!1;for(const t of i.getSlides())t.panzoomRef&&(p=!0),(t.downloadSrc||"image"===t.type&&t.src)&&(b=!0);let m=(null===(t=i.getPlugins().Thumbs)||void 0===t?void 0:t.isEnabled())||!1,v=g&&i.getPlugins().Autoplay||!1,h=i.getPlugins().Fullscreen&&(document.fullscreenEnabled||document.webkitFullscreenEnabled);if("auto"===c&&(c=p),!c)return;u=document.createElement("div"),u.classList.add("f-carousel__toolbar");const j=d().display,y=l({},s,d().items);for(const t of["left","middle","right"]){const l=j[t]||[],s=document.createElement("div");s.classList.add("f-carousel__toolbar__column"),s.classList.add(`is-${t}`);for(const t of l){let l;if(e(t)){if("counter"===t&&!g)continue;if("autoplay"===t&&!v)continue;if(n[t]&&!p)continue;if("fullscreen"===t&&!h)continue;if("thumbs"===t&&!m)continue;if("download"===t&&!b)continue;l=y[t]}if("object"==typeof t&&(l=t),l&&l.tpl){let t=i.localize(l.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 l.click&&i&&e.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation(),"function"==typeof l.click&&i&&l.click(i,t)})),s.append(e))}}u.append(s)}u.childElementCount&&(!0===f&&u.classList.add("is-absolute"),null===(a=i.getContainer())||void 0===a||a.classList.add("has-toolbar"),null===(r=i.getViewport())||void 0===r||r.insertAdjacentElement("beforebegin",u))}return{init:function(t){i=t,i.on("initSlides",r)},destroy:function(){var t;null==i||i.off("initSlides",r),null===(t=null==i?void 0:i.getContainer())||void 0===t||t.classList.remove("has-toolbar"),null==u||u.remove(),u=void 0},add:function(t,e){s[t]=e},isEnabled:function(){return!!u}}};export{u as Toolbar,i as ToolbarColumn};