@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 22.5 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[33],{845:function(t,e){t.exports='<style>\n :host {\n display: block;\n width: 100%;\n height: var(--au-widget-height, 100%) !important;\n --paper-tabs-selection-bar_-_border-width: 0;\n --container-background-color: var(--au-widget--background-color, var(--carousel-current-image-background, transparent));\n --grid-template-carousel: "title title title""main main main""tabs tabs tabs"\n }\n\n :host .image-gallery {\n display: flex;\n width: 100%;\n height: 100%;\n flex-direction: column;\n display: grid;\n grid-template-columns: auto 2.4fr auto;\n grid-template-rows: 0.4fr 2.4fr auto;\n grid-template-areas: var(--grid-template-carousel);\n }\n\n :host .image-gallery__header {\n display: flex;\n width: 99%;\n min-height: 70px;\n justify-content: space-between;\n align-items: center;\n grid-area: title;\n }\n\n :host .image-gallery__header span {\n @apply --au-caption-font;\n }\n\n :host .image-gallery__header .title {\n @apply --au-subtitle1-font;\n font-weight: 600;\n font-size: calc(1 * var(--au-hem));\n color: var(--carousel-title);\n }\n\n :host .image-gallery__current-image {\n display: block;\n width: 100%;\n min-height: calc(7.5 * var(--au-hem));\n margin-bottom: calc(1.25 * var(--au-hem));\n background-color: var(--container-background-color);\n grid-area: main;\n position: relative;\n height: 100%;\n }\n\n :host .image-gallery__current-image iron-pages {\n height: 100%;\n box-sizing: border-box;\n }\n\n :host .image-gallery__current-image au-responsive-image {\n background-color: var(--container-background-color);\n --aurigma-responsive-image-width: calc(100% - var(--au-widget--padding));\n --aurigma-responsive-image-height: calc(100% - var(--au-widget--padding));\n --aurigma-responsive-image-padding: var(--au-widget--padding);\n --aurigma-responsive-image-box-shadow: var(--au-widget--box-shadow);\n --aurigma-responsive-image-border: var(--au-widget--border);\n }\n\n :host .image-gallery__tabs {\n display: block;\n width: 100%;\n min-height: calc(6.25 * var(--au-hem));\n height: 100%;\n grid-area: tabs;\n }\n\n :host .image-gallery__tabs .tab__content {\n width: calc(6 * var(--au-hem));\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n :host .image-gallery__tabs .not-visible {\n display: none;\n }\n\n :host .image-gallery__tabs.vertical {\n width: fit-content;\n }\n\n :host .image-gallery__tabs.left {\n margin-right: var(--au-carousel-space-to-main-image, 0px);\n }\n\n :host .image-gallery__tabs.right {\n margin-left: var(--au-carousel-space-to-main-image, 0px);\n }\n\n :host .image-gallery__tabs.bottom {\n margin-top: var(--au-carousel-space-to-main-image, 0px);\n }\n\n button>iron-icon {\n pointer-events: none;\n }\n\n .tabs {\n display: flex;\n height: 100%;\n --i: 0;\n --n: 10;\n --scrollSize: 120px;\n position: relative;\n }\n\n .tabs.vertical {\n flex-direction: column;\n }\n\n .tabs.vertical.right {\n margin-left: calc(1.25 * var(--au-hem));\n }\n\n .tabs.vertical.left {\n margin-right: calc(1.25 * var(--au-hem));\n }\n\n .tabs .tabs__button {\n --iron-icon-fill-color: var(--carousel-thumb-button-color);\n --iron-icon-stroke-color: var(--carousel-thumb-button-color);\n font-size: calc(0.5 * var(--au-hem));\n width: calc(2.5 * var(--au-hem));\n height: calc(5.75 * var(--au-hem));\n }\n\n .tabs .tabs__button--back {\n margin-right: calc(1 * var(--au-hem));\n }\n\n .tabs .tabs__button--next {\n margin-left: calc(1 * var(--au-hem));\n }\n\n .vertical .tabs__button {\n font-size: calc(1.5 * var(--au-hem));\n width: 100%;\n height: calc(2.5 * var(--au-hem));\n }\n\n .vertical .tabs__button--back {\n margin: 0;\n margin-bottom: calc(1 * var(--au-hem));\n }\n\n .vertical .tabs__button--next {\n margin: 0;\n margin-top: calc(1 * var(--au-hem));\n }\n\n .tabs .tabs__button:hover {\n --iron-icon-fill-color: var(--carousel-thumb-button-color-hover);\n --iron-icon-stroke-color: var(--carousel-thumb-button-color-hover);\n }\n\n .tabs .tabs__button[disabled] {\n --iron-icon-fill-color: var(--carousel-thumb-button-color-disabled);\n --iron-icon-stroke-color: var(--carousel-thumb-button-color-disabled);\n }\n\n .tabs .tabs__content {\n overflow: hidden;\n flex: 1 1 auto;\n }\n\n .tabs__content iron-selector {\n display: flex;\n width: 100%;\n height: 100%;\n transition: all 0.1s linear;\n\n transform: translate(calc(var(--tx, 0px) + var(--i, 0) / var(--n) * -1 * var(--scrollSize)));\n }\n\n .vertical .tabs__content iron-selector {\n flex-direction: column;\n transform: translate(0, calc(var(--tx, 0px) + var(--i, 0) / var(--n) * -1 * var(--scrollSize)));\n max-height: 480px;\n }\n\n .vertical iron-icon {\n transform: rotate(90deg);\n }\n\n .tabs * {\n box-sizing: border-box;\n }\n\n .tabs .tab {\n cursor: pointer;\n\n border: 2px solid transparent;\n margin: auto calc(0.625 * var(--au-hem));\n transition: all 0.1s ease;\n }\n\n .tabs .tab:first-child {\n /*margin-left: 0;*/\n }\n\n .vertical .tab {\n margin: calc(0.625 * var(--au-hem)) auto;\n }\n\n .vertical .tab:first-child {\n /*margin-top: 0;*/\n }\n\n .tab au-responsive-image {\n cursor: pointer;\n background-color: var(--container-background-color);\n border: 4px solid var(--container-background-color);\n box-sizing: border-box;\n width: calc(5.625 * var(--au-hem));\n height: calc(5.625 * var(--au-hem));\n }\n\n .tab .tab__img {\n box-shadow: 0 0 0 1px var(--carousel-thumb-image-border);\n box-sizing: border-box;\n border-radius: 2px;\n background: var(--container-background-color);\n width: 100%;\n /*height: 100%;*/\n }\n\n .tab:hover .tab__img {\n opacity: 1;\n }\n\n .tab.iron-selected .tab__img {\n box-shadow: 0 0 0 2px var(--theme-primary-color);\n box-sizing: border-box;\n opacity: 1;\n }\n\n .tab .tab__title {\n @apply --au-caption-font;\n margin-top: calc(0.25 * var(--au-hem));\n user-select: none;\n }\n\n .hidden {\n position: absolute;\n opacity: 0;\n z-index: -1;\n pointer-events: none;\n }\n\n .current-image__button {\n position: absolute;\n width: calc(var(--au-hem) * 3);\n height: calc(var(--au-hem) * 3);\n top: calc(50% - var(--au-hem) * 1.5);\n z-index: 1;\n color: #83888F;\n background: #FFFFFF;\n border-radius: 50%;\n opacity: 0;\n cursor: pointer;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n user-select: none;\n border: none;\n outline: none;\n }\n\n .current-image____button--back {\n left: calc(var(--au-hem) * 0.5);\n\n }\n\n .current-image____button--next {\n right: calc(var(--au-hem) * 0.5);\n\n }\n\n .current-image__functional-container {\n z-index: 1;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n }\n\n .current-image__functional-container:hover .current-image__button {\n opacity: 0.8;\n }\n\n .current-image__functional-container:hover .current-image__button:hover {\n opacity: 1;\n }\n\n .current-image__lightbox {\n width: 100%;\n height: 100%;\n }\n\n #image {\n width: 100%;\n height: 100%;\n }\n\n .image-gallery.right {\n flex-direction: row !important;\n }\n\n .image-gallery.left {\n flex-direction: row-reverse !important;\n }\n</style>\n\n<div class$="image-gallery [[containerLayout]]">\n <div class="image-gallery__header" id="imageGalleryHeader">\n <span class="title">{{currentImageTitle}}</span>\n <span id="imageCounter">{{counterImage}}/{{imagesCount}}</span>\n </div>\n <div class="image-gallery__current-image" id="imageGalleryCurrentImage">\n <iron-pages id="image" selected="{{currentImageId}}" attr-for-selected="name">\n <dom-repeat items="{{images}}" index-as="index">\n <template>\n <au-responsive-image name="{{index}}" src$="{{item.urlHD}}" width="{{item.width}}"\n height="{{item.height}}">\n </au-responsive-image>\n </template>\n </dom-repeat>\n </iron-pages>\n <div class="current-image__functional-container">\n <div class="current-image__lightbox" style$="{{_cursorStyle}}" onclick="{{initLightbox()}}"></div>\n <dom-if if="{{arrowButtonsEnabled}}">\n <template>\n <button class="current-image__button current-image____button--back" onclick="{{backImage}}"\n animated="" elevation="0">\n <iron-icon icon="au-icons:chevron_left"></iron-icon>\n </button>\n <button class="current-image__button current-image____button--next" onclick="{{nextImage}}"\n animated="" elevation="0">\n <iron-icon icon="au-icons:chevron_right"></iron-icon>\n </button>\n </template>\n </dom-if>\n </div>\n </div>\n <div class="image-gallery__tabs">\n <div id="tabs" class="tabs">\n <paper-button class="tabs__button tabs__button--back " disabled role="button" animated="" elevation="0">\n <iron-icon icon="au-icons:chevron_left"></iron-icon>\n </paper-button>\n <div id="tabsContent" class="tabs__content">\n <iron-selector id="imageSelector" on-selected-changed="changeSelectedImage" attr-for-selected="name"\n selected="{{currentImageId}}" noink="true" autoselect="true" noBar="true" noSlide="true">\n <template is="dom-repeat" items="{{images}}" index-as="index">\n <div class="tab" noink="true" noBar="true" noSlide="true" name="{{index}}">\n <div class="tab__content">\n <div class="tab__img">\n <au-responsive-image src$="{{item.url}}"></au-responsive-image>\n </div>\n <span class="tab__title" title="{{item.title}}">{{item.title}}</span>\n </div>\n </div>\n </template>\n </iron-selector>\n </div>\n <paper-button class="tabs__button tabs__button--next" role="button" animated="" elevation="0">\n <iron-icon icon="au-icons:chevron_right"></iron-icon>\n </paper-button>\n </div>\n </div>\n</div>\n<au-lightbox id=\'lightbox\' images="{{images}}" styles="{{styles}}"></au-lightbox>'},902:function(t,e,n){n.r(e),n.d(e,"AuWidgetImageCarousel",function(){return r}),n.d(e,"widget",function(){return r});var e=n(0),a=n(845),a=n.n(a),i=n(160),s=n(1),o=n(2);n(821);let r=class extends i.c{constructor(){super(...arguments),this._isRestoring=!1,this._isLoaded=!1,this._loadedCount=0,this.isSingleElement=!1,this.images=[],this.imagesCount=0,this.oldImageId=0,this.currentImageId=-1,this.counterImage=0,this.__changeFlag=0,this.currentImageTitle="",this.imageSelectorPosition="bottom",this.imageSelectorAlignment="start",this._cursorStyle="",this.tabsScrollingEnabled=!0,this.autoPlay=0,this.arrowButtonsEnabled=!1,this.styles={},this._onChange=null}loadedCountChanged(){this.params&&this.params.preloader&&this.params.preloader.enabled&&this._loadedCount>=this._loadedCountToDisplay&&0!==this._loadedCountToDisplay&&0<=this._preloaderLockingSum&&this.showPreloader(!1)}_countImage(t){return t+1}__changeFlagFunc(t){this._onChange&&this._onChange(this.images[t])}_getTitle(t,e){return t&&0<t.length&&t[e]&&t[e].title||""}updateParams(t,n){var e,a,i=this._isLoaded?t.images.some(e=>!((null==n?void 0:n.images)||[]).some(t=>t.url===e.url)):t.images.some(e=>!this.images.some(t=>t.url===e.url));let o=t.images;if(this.timestamp=!!s.a.isNotNullOrUndefined(t.timestamp)&&t.timestamp,this.styles=t.style||{},(o=o.filter(t=>!!t)).forEach(e=>{var t=this.images.find(t=>t.url===e.url);e.width=e.width||(t?t.width:0),e.height=e.height||(t?t.height:0),this.timestamp&&(e.url=s.a.addTimestampToURL(e.url),e.urlHD)&&(e.urlHD=s.a.addTimestampToURL(e.urlHD)),e.urlHD=e.urlHD||e.url}),this.images=o,this.imagesCount=this.images.length,this._onChange=s.a.isNotNullOrUndefined(t.onChange)?s.a.functionWrapperConstructor(Array.isArray(t.onChange)?t.onChange:[t.onChange]):null,this.currentImageId=0,this.currentImageTitle=o[this.currentImageId]&&o[this.currentImageId].title?o[this.currentImageId].title:"",this.lightbox=!!s.a.isNotNullOrUndefined(t.lightbox)&&t.lightbox,!0===this.lightbox&&(this._cursorStyle="cursor: zoom-in;"),t.containerColor&&this.$.imageGalleryCurrentImage.setAttribute("style","--container-background-color:"+t.containerColor),this.showImageHeader=t.showImageHeader||!1,this.showIndex=t.showIndex||!1,this.isSingleElement=t.images.length<=1,this.imageSelectorPosition=t.imageSelectorPosition||"bottom",this.imageSelectorAlignment=t.imageSelectorAlignment||"start",this.computeGrid(),"bottom"===this.imageSelectorPosition?(e=this.$.tabs.offsetWidth,a=this.$.tabs.querySelector(".tab")?this.$.tabs.querySelector(".tab").offsetWidth:120,this.tabsScrollingEnabled=e<a*this.imagesCount,this.tabImages=Math.ceil(e/a)):(e=this.$.tabs.offsetHeight,a=this.$.tabs.querySelector(".tab")?this.$.tabs.querySelector(".tab").offsetHeight:140,this.tabsScrollingEnabled=e<a*this.imagesCount,this.tabImages=Math.ceil(e/a)),!t.resetIndexOnUpdate)switch(!0){case-1===this.oldImageId:this.selectImage(0);break;case this.images.length-1>=this.oldImageId:this.selectImage(this.oldImageId);break;case this.images.length-1<this.oldImageId:this.selectImage(this.images.length-1);break;default:this.selectImage(0)}this.autoPlay=this.params.autoPlay,this.arrowButtonsEnabled=this.params.arrowButtonsEnabled,t&&t.preloader&&t.preloader.enabled&&this.images&&0<this.images.length&&(e=this.$.image.querySelectorAll("au-responsive-image").length,isNaN(t.preloader.loadedCountToHide)||null===t.preloader.loadedCountToHide||t.preloader.loadedCountToHide<1?this._loadedCountToDisplay=0<e?Math.min(e,this.images.length):this.images.length:this._loadedCountToDisplay=0<e?Math.min(this.images.length,t.preloader.loadedCountToHide,e):Math.min(this.images.length,t.preloader.loadedCountToHide),i)&&(a=s.a.isNullOrEmptyString(t.preloader.text)?this.localize("common.loading.preload"):t.preloader.text,this.showPreloader(!0,a),this._loadedCount=0),this.addTabsEventListeners()}currentImageTitleChanged(){var t=this.$.imageGalleryHeader||{};!this.isSingleElement&&this.currentImageTitle&&this.showImageHeader?t.style=this.currentImageTitle?"":"flex: 0 !important; min-height:10px !important;":t.style="display:none; flex: 0 !important; min-height:0px !important;"}async exportWidgetData(t){return{imageId:this.currentImageId}}async restoreWidgetFromData(t,e){t&&this.currentImageId!==t.imageId&&(this.currentImageId=t.imageId)}computeGrid(){let t=[["title","title","title"],["main","main","main"],["tabs","tabs","tabs"]],e=(this.showImageHeader||(t[0][0]="left"===this.imageSelectorPosition?"tabs":"main",t[0][1]="main",t[0][2]="right"===this.imageSelectorPosition?"tabs":"main"),t[1][0]="left"===this.imageSelectorPosition?"tabs":"main",t[1][2]="right"===this.imageSelectorPosition?"tabs":"main",t[2][0]="left"===this.imageSelectorPosition||"bottom"===this.imageSelectorPosition?"tabs":"main",t[2][1]="bottom"===this.imageSelectorPosition?"tabs":"main",t[2][2]="right"===this.imageSelectorPosition||"bottom"===this.imageSelectorPosition?"tabs":"main",!this.isSingleElement&&"none"!==this.imageSelectorPosition||(t=[["main","main","main"],["main","main","main"],["main","main","main"]]),[]);switch(t.forEach(t=>{e.push(t.join(" "))}),this.showIndex||this.$.imageCounter.classList.add("hidden"),this.showImageHeader||this.$.imageGalleryHeader.classList.add("hidden"),this.isSingleElement||"none"===this.imageSelectorPosition?(this.$.tabs.parentNode.style="display:none;",this.$.imageCounter.style="display:none"):(this.$.tabs.parentNode.style="display:block;",this.$.imageCounter.style="display:block"),"right"!==this.imageSelectorPosition&&"left"!==this.imageSelectorPosition||(this.$.tabs.classList.add("vertical"),this.querySelectorShadow(".image-gallery__tabs").classList.add("vertical"),this.$.tabs.classList.add(this.imageSelectorPosition)),this.imageSelectorAlignment){case"middle":this.$.imageSelector.style.justifyContent="center";break;case"end":this.$.imageSelector.style.justifyContent="flex-end";break;default:this.$.imageSelector.style.justifyContent="flex-start"}this.querySelectorShadow(".image-gallery__tabs").classList.add(this.imageSelectorPosition),this.style.setProperty("--grid-template-carousel",`"${e.join('" "')}"`)}addTabsEventListeners(){let e={tx:0,i:0,x0:null,locked:!1,n:this.imagesCount-this.tabImages/2,client:"left"===this.imageSelectorPosition||"right"===this.imageSelectorPosition?"clientY":"clientX",di:0,sizeItem:this.$.tabs.querySelector(".tab")?this.$.tabs.querySelector(".tab").offsetWidth:120};this.$.tabs.style.setProperty("--n",this.imagesCount);var t=Math.round(this.$.tabsContent.offsetWidth/(e.sizeItem+20)-2);if(this.$.tabs.style.setProperty("--scrollSize",this.imagesCount*(e.sizeItem+20)-t/2*e.sizeItem+"px"),this.tabsScrollingEnabled?(this.$.tabs.querySelector(".tabs__button--back").addEventListener("click",t=>this.moveTabBack(t,e)),this.$.tabs.querySelector(".tabs__button--next").addEventListener("click",t=>this.moveTabNext(t,e)),this.$.tabsContent.addEventListener("mousedown",t=>this.lock(t,e),!1),this.$.tabsContent.addEventListener("touchstart",t=>this.lock(t,e),!1),this.$.tabsContent.addEventListener("mousemove",t=>this.drag(t,e),!1),this.$.tabsContent.addEventListener("touchmove",t=>this.drag(t,e),!1),this.$.tabsContent.addEventListener("mouseup",t=>this.move(t,e),!1),this.$.tabsContent.addEventListener("touchend",t=>this.move(t,e),!1),this.$.tabs.querySelectorAll(".tabs__button").forEach(t=>{t.classList.remove("hidden")})):this.$.tabs.querySelectorAll(".tabs__button").forEach(t=>{t.classList.add("hidden")}),this.nextImage=this.nextImage.bind(this),this.backImage=this.backImage.bind(this),this.autoPlay){let t=this;setInterval(()=>{t.nextImage()},this.autoPlay)}this._isLoaded||(this.$.image.addEventListener("load",t=>{this._loadedCount++}),this._isLoaded=!0)}nextImage(){this.$.image.selectNext()}backImage(){this.$.image.selectPrevious()}moveTabHandler(t){var e=this.$.tabs;switch(t.di=Math.round(t.di),!0){case t.i+t.di<0:t.i=0,this.$.tabs.style.setProperty("--i",t.i),e.querySelector(".tabs__button--back").disabled=!0;break;case t.i+t.di>t.n:t.i=t.n,this.$.tabs.style.setProperty("--i",t.i),e.querySelector(".tabs__button--next").disabled=!0;break;default:t.i=t.i+t.di,this.$.tabs.style.setProperty("--i",t.i),e.querySelectorAll(".tabs__button").forEach(t=>{t.disabled=!1})}}unify(t){return t.changedTouches?t.changedTouches[0]:t}lock(t,e){e.x0=this.unify(t)[e.client],this.$.tabs.classList.toggle("smooth",!(e.locked=!0))}drag(t,e){t.preventDefault(),e.locked&&(e.tx=this.unify(t)[e.client]-e.x0,this.$.tabs.style.setProperty("--tx",Math.round(this.unify(t)[e.client]-e.x0)+"px"))}move(t,e){e.locked&&(e.di=-e.tx/e.sizeItem,this.moveTabHandler(e),this.$.tabs.style.setProperty("--tx","0px"),this.$.tabs.classList.toggle("smooth",!(e.locked=!1)),e.x0=null)}moveTabNext(t,e){e.di=1,this.moveTabHandler(e)}moveTabBack(t,e){e.di=-1,this.moveTabHandler(e)}initLightbox(){return()=>{this.lightbox&&(this.$.lightbox.currentImageId=this.currentImageId,this.$.lightbox.open=!0)}}selectImage(t){this.images.length<=t&&this.$.imageSelector.select(t)}changeSelectedImage(t){this.oldImageId=t.detail.value}};Object(e.a)([Object(o.b)("_loadedCount"),Object(e.b)("design:type",Function),Object(e.b)("design:paramtypes",[]),Object(e.b)("design:returntype",void 0)],r.prototype,"loadedCountChanged",null),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Object)],r.prototype,"params",void 0),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Boolean)],r.prototype,"isSingleElement",void 0),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Array)],r.prototype,"images",void 0),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Boolean)],r.prototype,"lightbox",void 0),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Boolean)],r.prototype,"timestamp",void 0),Object(e.a)([Object(o.c)(),Object(e.b)("design:type",Number)],r.prototype,"imagesCount",void 0),Object(e.a)([Object(o.c)({notify:!0}),Object(e.b)("design:type",Number)],r.prototype,"currentImageId",void 0),Object(e.a)([Object(o.c)({computed:"_countImage(currentImageId)"}),Object(e.b)("design:type",Number)],r.prototype,"counterImage",void 0),Object(e.a)([Object(o.c)({computed:"__changeFlagFunc(currentImageId)"}),Object(e.b)("design:type",Number)],r.prototype,"__changeFlag",void 0),Object(e.a)([Object(o.c)({computed:"_getTitle(images, currentImageId)"}),Object(e.b)("design:type",String)],r.prototype,"currentImageTitle",void 0),Object(e.a)([Object(o.b)("currentImageTitle"),Object(e.b)("design:type",Function),Object(e.b)("design:paramtypes",[]),Object(e.b)("design:returntype",void 0)],r.prototype,"currentImageTitleChanged",null),r=Object(e.a)([Object(o.a)("au-widget-image-carousel",a.a)],r)}}]);