UNPKG

@ionic/core

Version:
4 lines 6.08 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{r as t,h as s,d as i,g as e,c as r}from"./p-C8IsBmNU.js";import{j as o,k as n}from"./p-DV3sJJW8.js";import{b as h}from"./p-BFvmZNyx.js";import{f as a,g as c}from"./p-CwgG81ZD.js";import{r as d}from"./p-CTfR9YZG.js";import{b as l,a as m,h as p}from"./p-CKvCXMs9.js";import"./p-CIGNaXM1.js";import"./p-ZjP4CjeZ.js";const b=class{constructor(s){t(this,s)}onClick(t){const s=this.el.closest("ion-reorder-group");t.preventDefault(),s&&s.disabled||t.stopImmediatePropagation()}render(){const t=h(this);return s(i,{key:"e6807bb349725682e99e791ac65e729a360d64e8",class:t},s("slot",{key:"1c691cdbffa6427ba08dc12184c69559ed5d5506"},s("ion-icon",{key:"8b4150302cdca475379582b2251737b5e74079b1",icon:"ios"===t?o:n,lazy:!1,class:"reorder-icon",part:"icon","aria-hidden":"true"})))}get el(){return e(this)}};b.style={ios:":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:2.125rem;opacity:0.4}",md:":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:1.9375rem;opacity:0.3}"};const f=class{constructor(s){t(this,s),this.ionItemReorder=r(this,"ionItemReorder",7),this.ionReorderStart=r(this,"ionReorderStart",7),this.ionReorderMove=r(this,"ionReorderMove",7),this.ionReorderEnd=r(this,"ionReorderEnd",7),this.lastToIndex=-1,this.cachedHeights=[],this.scrollElTop=0,this.scrollElBottom=0,this.scrollElInitial=0,this.containerTop=0,this.containerBottom=0,this.state=0,this.disabled=!0}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled)}async connectedCallback(){const t=a(this.el);t&&(this.scrollEl=await c(t)),this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:this.el,gestureName:"reorder",gesturePriority:110,threshold:0,direction:"y",passive:!1,canStart:t=>this.canStart(t),onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:()=>this.onEnd()}),this.disabledChanged()}disconnectedCallback(){this.onEnd(),this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}complete(t){return Promise.resolve(this.completeReorder(t))}canStart(t){if(this.selectedItemEl||0!==this.state)return!1;const s=t.event.target.closest("ion-reorder");if(!s)return!1;const i=g(s,this.el);return!!i&&(t.data=i,!0)}onStart(t){t.event.preventDefault();const s=this.selectedItemEl=t.data,i=this.cachedHeights;i.length=0;const e=this.el,r=e.__children||e.children;if(!r||0===r.length)return;let o=0;for(let t=0;t<r.length;t++){const s=r[t];o+=s.offsetHeight,i.push(o),s.$ionIndex=t}const n=e.getBoundingClientRect();if(this.containerTop=n.top,this.containerBottom=n.bottom,this.scrollEl){const t=this.scrollEl.getBoundingClientRect();this.scrollElInitial=this.scrollEl.scrollTop,this.scrollElTop=t.top+k,this.scrollElBottom=t.bottom-k}else this.scrollElInitial=0,this.scrollElTop=0,this.scrollElBottom=0;this.lastToIndex=u(s),this.selectedItemHeight=s.offsetHeight,this.state=1,s.classList.add(w),l(),this.ionReorderStart.emit()}onMove(t){const s=this.selectedItemEl;if(!s)return;const i=this.autoscroll(t.currentY),e=this.containerTop-i,r=Math.max(e,Math.min(t.currentY,this.containerBottom-i)),o=i+r-t.startY,n=this.lastToIndex,h=this.itemIndexForTop(r-e);if(h!==this.lastToIndex){const t=u(s);this.lastToIndex=h,m(),this.reorderMove(t,h)}s.style.transform=`translateY(${o}px)`,this.ionReorderMove.emit({from:n,to:h})}onEnd(){const t=this.selectedItemEl;if(this.state=2,!t)return void(this.state=0);const s=this.lastToIndex,i=u(t);s===i?this.completeReorder():this.ionItemReorder.emit({from:i,to:s,complete:this.completeReorder.bind(this)}),p(),this.ionReorderEnd.emit({from:i,to:s,complete:this.completeReorder.bind(this)})}completeReorder(t){const s=this.selectedItemEl;if(s&&2===this.state){const i=this.el.__children||this.el.children,e=i.length,r=this.lastToIndex,o=u(s);d((()=>{r===o||void 0!==t&&!0!==t||this.el.insertBefore(s,o<r?i[r+1]:i[r]);for(let t=0;t<e;t++)i[t].style.transform=""})),Array.isArray(t)&&(t=v(t,o,r)),s.style.transition="",s.classList.remove(w),this.selectedItemEl=void 0,this.state=0}return t}itemIndexForTop(t){const s=this.cachedHeights;for(let i=0;i<s.length;i++)if(s[i]>t)return i;return s.length-1}reorderMove(t,s){const i=this.selectedItemHeight,e=this.el.__children||this.el.children;for(let r=0;r<e.length;r++){let o="";r>t&&r<=s?o=`translateY(${-i}px)`:r<t&&r>=s&&(o=`translateY(${i}px)`),e[r].style.transform=o}}autoscroll(t){if(!this.scrollEl)return 0;let s=0;return t<this.scrollElTop?s=-10:t>this.scrollElBottom&&(s=y),0!==s&&this.scrollEl.scrollBy(0,s),this.scrollEl.scrollTop-this.scrollElInitial}render(){const t=h(this);return s(i,{key:"b9641f3061d67fbfe68317b901ec33267046e073",class:{[t]:!0,"reorder-enabled":!this.disabled,"reorder-list-active":0!==this.state}})}get el(){return e(this)}static get watchers(){return{disabled:["disabledChanged"]}}},u=t=>t.$ionIndex,g=(t,s)=>{let i;for(;t;){if(i=t.parentElement,i===s)return t;t=i}},k=60,y=10,w="reorder-selected",v=(t,s,i)=>{const e=t[s];return t.splice(s,1),t.splice(i,0,e),t.slice()};f.style=".reorder-list-active>*{display:block;-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms;will-change:transform}.reorder-enabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.reorder-enabled ion-reorder{display:block;cursor:-webkit-grab;cursor:grab;pointer-events:all;-ms-touch-action:none;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:-webkit-grabbing;cursor:grabbing}.reorder-selected{position:relative;-webkit-transition:none !important;transition:none !important;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}";export{b as ion_reorder,f as ion_reorder_group}