UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

3 lines (2 loc) 12.3 kB
import{o as S,t as c}from"./lodash-es-876af2e5.js";import{o as a,f as r,g as d,V as v,X as f,Y as p,r as h,k as u,l as y,M as w,a9 as b,n as m,t as T}from"./vendor-18a4b4e1.js";import{_ as k}from"./n8n-02caf295.js";const M={methods:{handleMouseDown(t){this.isMouseDown=!0,t.type.indexOf("touch")!==-1&&(this.dragStartX=t.touches[0].clientX,this.dragStartY=t.touches[0].clientY),t.type.indexOf("mouse")!==-1&&(this.dragStartX=t.clientX,this.dragStartY=t.clientY)},handleMouseMove(t){let e,n;t.type.indexOf("touch")!==-1&&(e=t.touches[0].clientX,n=t.touches[0].clientY),t.type.indexOf("mouse")!==-1&&(e=t.clientX,n=t.clientY);const s=Math.abs(e-this.dragStartX),l=Math.abs(n-this.dragStartY);s>3*l&&(this.disableScroll(),this.dragDistance=e-this.dragStartX)},handleMouseUp(){this.isMouseDown=!1,this.enableScroll()},handleMouseOver(t){this.settings.autoplay&&(t==="dot"&&this.settings.pauseOnDotsHover||t==="track"&&this.settings.pauseOnHover)&&(this.isAutoplayPaused=!0)},handleMouseOut(t){this.settings.autoplay&&(t==="dot"&&this.settings.pauseOnDotsHover||t==="track"&&this.settings.pauseOnHover)&&(this.isAutoplayPaused=!1)}}},A={methods:{getWidth(){if(this.isSSR)return!1;this.widthWindow=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.widthContainer=this.$refs.list.clientWidth},htmlCollectionToArray(t){return Array.prototype.slice.call(t,0)}}},C={methods:{clearAutoPlayPause(){clearTimeout(this.autoplayTimeout),this.autoplayRemaining=null},disableAutoPlay(){clearInterval(this.autoplayInterval),this.autoplayInterval=null},disableScroll(){document.ontouchmove=t=>t.preventDefault()},enableScroll(){document.ontouchmove=()=>!0},restartAutoPlay(){this.disableAutoPlay(),this.toggleAutoPlay()},toggleAutoPlay(){const t=!this.settings.unagile&&this.settings.autoplay;!this.autoplayInterval&&t?this.autoplayInterval=setInterval(()=>{document.hidden||(this.canGoToNext?this.goToNext():this.disableAutoPlay())},this.settings.autoplaySpeed):this.disableAutoPlay()},toggleFade(){const t=!this.settings.unagile&&this.settings.fade;for(let e=0;e<this.countSlides;e++)this.slides[e].style.transition=t?"opacity "+this.settings.timing+" "+this.settings.speed+"ms":"none",this.slides[e].style.transform=t?`translate(-${e*this.widthSlide}px)`:"none"}}},_={methods:{prepareSlides(){this.slides=this.htmlCollectionToArray(this.$refs.slides.children),this.slidesCloned&&(this.slidesClonedBefore=this.htmlCollectionToArray(this.$refs.slidesClonedBefore.children),this.slidesClonedAfter=this.htmlCollectionToArray(this.$refs.slidesClonedAfter.children));for(const t of this.slidesAll)t.classList.add("agile__slide")},prepareSlidesClasses(){if(this.currentSlide===null)return!1;for(let e=0;e<this.countSlides;e++)this.slides[e].classList.remove("agile__slide--active"),this.slides[e].classList.remove("agile__slide--current");setTimeout(()=>this.slides[this.currentSlide].classList.add("agile__slide--active"),this.changeDelay);let t=this.slidesCloned?this.countSlides+this.currentSlide:this.currentSlide;this.centerMode&&(t-=Math.floor(this.settings.slidesToShow/2)-+(this.settings.slidesToShow%2===0));for(let e=Math.max(t,0);e<Math.min(t+this.settings.slidesToShow,this.countSlides);e++)this.slidesAll[e].classList.add("agile__slide--current")},prepareCarousel(){this.settings.unagile?this.translateX=0:(this.currentSlide===null&&this.countSlides&&(this.currentSlide=this.settings.initialSlide),this.currentSlide>this.countSlides&&(this.currentSlide=this.countSlides-1),this.goTo(this.currentSlide,!1,!1))}}},$={props:{asNavFor:{type:Array,default:function(){return[]}},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},centerMode:{type:Boolean,default:!1},centerPadding:{type:String,default:"15%"},changeDelay:{type:Number,default:0},dots:{type:Boolean,default:!0},fade:{type:Boolean,default:!1},infinite:{type:Boolean,default:!0},initialSlide:{type:Number,default:0},mobileFirst:{type:Boolean,default:!0},navButtons:{type:Boolean,default:!0},options:{type:Object,default:()=>null},pauseOnDotsHover:{type:Boolean,default:!1},pauseOnHover:{type:Boolean,default:!0},responsive:{type:Array,default:()=>null},rtl:{type:Boolean,default:!1},slidesToScroll:{type:Number,default:1},slidesToShow:{type:Number,default:1},speed:{type:Number,default:300},swipeDistance:{type:Number,default:50},throttleDelay:{type:Number,default:500},timing:{type:String,default:"ease",validator:t=>["ease","linear","ease-in","ease-out","ease-in-out"].indexOf(t)!==-1},unagile:{type:Boolean,default:!1}},computed:{initialSettings:function(){let{options:t,...e}=this.$props;return t&&(e={...e,...t}),e.responsive&&(e.responsive=S(e.responsive,"breakpoint")),e},settings:function(){const{responsive:t,...e}=this.initialSettings;return t&&t.forEach(n=>{if(e.mobileFirst?n.breakpoint<this.widthWindow:n.breakpoint>this.widthWindow)for(const s in n.settings)e[s]=n.settings[s]}),e}}},B={created(){this.goTo=c(this.goTo,this.throttleDelay),this.getWidth=c(this.getWidth,500)}},D={watch:{currentBreakpoint(){this.$emit("breakpoint",{breakpoint:this.currentBreakpoint})},currentSlide(){this.prepareSlidesClasses(),this.autoplayStartTimestamp=this.settings.autoplay?+new Date:null,this.$emit("after-change",{currentSlide:this.currentSlide})},dragDistance(){if(this.isMouseDown){const{rtl:t}=this.settings,e=this.dragDistance*(t?-1:1);e>this.swipeDistance&&this.canGoToPrev&&(this.goToPrev(),this.handleMouseUp()),e<-1*this.swipeDistance&&this.canGoToNext&&(this.goToNext(),this.handleMouseUp())}},isAutoplayPaused(t){t?(this.remaining=this.settings.autoplaySpeed-(+new Date-this.autoplayStartTimestamp),this.disableAutoPlay(),this.clearAutoPlayPause()):this.autoplayTimeout=setTimeout(()=>{this.clearAutoPlayPause(),this.goToNext(),this.toggleAutoPlay()},this.remaining)},"settings.autoplay"(){this.toggleAutoPlay()},"settings.fade"(){this.toggleFade()},"settings.unagile"(){},widthSlide(){for(let t=0;t<this.countSlidesAll;t++)this.slidesAll[t].style.width=`${this.widthSlide}${this.widthSlide!=="auto"?"px":""}`},widthWindow(t,e){e&&(this.prepareCarousel(),this.toggleFade())}}};const P={name:"agile",mixins:[M,A,C,_,$,B,D],emits:["before-change","after-change","breakpoint"],data(){return{autoplayInterval:null,autoplayRemaining:null,autoplayStartTimestamp:null,autoplayTimeout:null,currentSlide:null,dragDistance:0,dragStartX:0,dragStartY:0,isAutoplayPaused:!1,isMouseDown:!1,slides:[],slidesClonedAfter:[],slidesClonedBefore:[],isSSR:typeof window>"u",transitionDelay:0,translateX:0,widthWindow:0,widthContainer:0}},computed:{breakpoints:function(){return this.initialSettings.responsive?this.initialSettings.responsive.map(t=>t.breakpoint):[]},canGoToPrev:function(){return this.settings.infinite||this.currentSlide>0},canGoToNext:function(){return this.settings.infinite||this.currentSlide<this.countSlides-1},countSlides:function(){return this.isSSR?this.htmlCollectionToArray(this.$slots.default).length:this.slides.length},countSlidesAll:function(){return this.slidesAll.length},currentBreakpoint:function(){const t=this.breakpoints.map(e=>e).reverse();return this.initialSettings.mobileFirst?t.find(e=>e<this.widthWindow)||0:t.find(e=>e>this.widthWindow)||null},marginX:function(){if(this.settings.unagile)return 0;let t=this.slidesCloned?this.countSlides*this.widthSlide:0;return this.settings.centerMode&&(t-=(Math.floor(this.settings.slidesToShow/2)-+(this.settings.slidesToShow%2===0))*this.widthSlide),this.settings.rtl?t:-1*t},slidesCloned:function(){return!this.settings.unagile&&!this.settings.fade&&this.settings.infinite},slidesAll:function(){return this.slidesCloned?[...this.slidesClonedBefore,...this.slides,...this.slidesClonedAfter]:this.slides},widthSlide:function(){return this.settings.unagile?"auto":this.widthContainer/this.settings.slidesToShow}},mounted(){window.addEventListener("resize",this.getWidth),this.$refs.track.addEventListener("touchstart",this.handleMouseDown),this.$refs.track.addEventListener("touchend",this.handleMouseUp),this.$refs.track.addEventListener("touchmove",this.handleMouseMove),this.$refs.track.addEventListener("mousedown",this.handleMouseDown),this.$refs.track.addEventListener("mouseup",this.handleMouseUp),this.$refs.track.addEventListener("mousemove",this.handleMouseMove),this.isSSR=!1,this.reload()},beforeUnmount(){this.destroy()},methods:{destroy(){window.removeEventListener("resize",this.getWidth),this.$refs.track.removeEventListener("touchstart",this.handleMouseDown),this.$refs.track.removeEventListener("touchend",this.handleMouseUp),this.$refs.track.removeEventListener("touchmove",this.handleMouseMove),this.$refs.track.removeEventListener("mousedown",this.handleMouseDown),this.$refs.track.removeEventListener("mouseup",this.handleMouseUp),this.$refs.track.removeEventListener("mousemove",this.handleMouseMove),this.disableAutoPlay()},getCurrentBreakpoint(){return this.currentBreakpoint},getCurrentSettings(){return this.settings},getCurrentSlide(){return this.currentSlide},getInitialSettings(){return this.initialSettings},goTo(t,e=!0,n=!1){if(this.settings.unagile)return!1;n||this.settings.asNavFor.forEach(i=>{i&&i.goTo(t,e,!0)});let s=t;e&&(this.settings.infinite&&t<0?s=this.countSlides-1:t>=this.countSlides&&(s=0),this.$emit("before-change",{currentSlide:this.currentSlide,nextSlide:s}),this.currentSlide=s,t!==s&&setTimeout(()=>{this.goTo(s,!1)},this.settings.speed));const l=this.settings.fade?0:t*this.widthSlide*this.settings.slidesToScroll;this.transitionDelay=e?this.speed:0,(this.infinite||this.currentSlide+this.slidesToShow<=this.countSlides)&&(this.translateX=this.settings.rtl?l:-1*l)},goToNext(){this.canGoToNext&&this.goTo(this.currentSlide+1)},goToPrev(){this.canGoToPrev&&this.goTo(this.currentSlide-1)},reload(){this.getWidth(),this.prepareSlides(),this.prepareCarousel(),this.toggleFade(),this.toggleAutoPlay()}}},N={ref:"list",class:"agile__list"},L={ref:"slidesClonedBefore",class:"agile__slides agile__slides--cloned"},X={ref:"slides",class:"agile__slides agile__slides--regular"},E={ref:"slidesClonedAfter",class:"agile__slides agile__slides--cloned"},O={key:0,class:"agile__caption"},W={key:1,class:"agile__actions"},Y=["disabled"],F={key:1,ref:"dots",class:"agile__dots"},G=["onClick"],x=["disabled"];function I(t,e,n,s,l,i){return a(),r("div",{class:m([{"agile--ssr":l.isSSR,"agile--auto-play":t.settings.autoplay,"agile--disabled":t.settings.unagile,"agile--fade":t.settings.fade&&!t.settings.unagile,"agile--rtl":t.settings.rtl,"agile--no-nav-buttons":!t.settings.navButtons},"agile"]),onTouchstart:()=>{}},[d("div",N,[d("div",{ref:"track",style:v({transform:`translate(${l.translateX+i.marginX}px)`,transition:`transform ${t.settings.timing} ${l.transitionDelay}ms`}),class:"agile__track",onMouseout:e[0]||(e[0]=o=>t.handleMouseOut("track")),onMouseover:e[1]||(e[1]=o=>t.handleMouseOver("track"))},[f(d("div",L,[h(t.$slots,"default")],512),[[p,i.slidesCloned]]),d("div",X,[h(t.$slots,"default")],512),f(d("div",E,[h(t.$slots,"default")],512),[[p,i.slidesCloned]])],36)],512),t.$slots.caption?(a(),r("div",O,[h(t.$slots,"caption")])):u("",!0),!t.settings.unagile&&(t.settings.navButtons||t.settings.dots)?(a(),r("div",W,[t.settings.navButtons&&!t.settings.unagile?(a(),r("button",{key:0,ref:"prevButton",disabled:!i.canGoToPrev,"aria-label":"Previous",class:"agile__nav-button agile__nav-button--prev",type:"button",onClick:e[2]||(e[2]=o=>(i.goToPrev(),t.restartAutoPlay()))},[h(t.$slots,"prevButton",{},()=>[y(" ← ")])],8,Y)):u("",!0),t.settings.dots&&!t.settings.unagile?(a(),r("ul",F,[(a(!0),r(w,null,b(i.countSlides,o=>(a(),r("li",{key:o,class:m([{"agile__dot--current":o-1===l.currentSlide},"agile__dot"]),onMouseout:e[3]||(e[3]=g=>t.handleMouseOut("dot")),onMouseover:e[4]||(e[4]=g=>t.handleMouseOver("dot"))},[d("button",{type:"button",onClick:g=>(i.goTo(o-1),t.restartAutoPlay())},T(o),9,G)],34))),128))],512)):u("",!0),t.settings.navButtons&&!t.settings.unagile?(a(),r("button",{key:2,ref:"nextButton",disabled:!i.canGoToNext,"aria-label":"Next",class:"agile__nav-button agile__nav-button--next",type:"button",onClick:e[5]||(e[5]=o=>(i.goToNext(),t.restartAutoPlay()))},[h(t.$slots,"nextButton",{},()=>[y(" → ")])],8,x)):u("",!0)])):u("",!0)],34)}const H=k(P,[["render",I]]);export{H as V}; //# sourceMappingURL=vue-agile-44d1a063.js.map