UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

6 lines 6.58 kB
/** @license Copyright (c) 2017 Vaadin Ltd. This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import{GestureEventListeners as t}from"../../../@polymer/polymer/lib/mixins/gesture-event-listeners.js";import{GridHelper as e}from"./vaadin-grid-helpers.js";import{addListener as r}from"../../../@polymer/polymer/lib/utils/gestures.js";import{dom as o}from"../../../@polymer/polymer/lib/legacy/polymer.dom.js";export const ColumnReorderingMixin=i=>class ColumnReorderingMixin extends(t(i)){static get properties(){return{columnReorderingAllowed:{type:Boolean,value:!1},_orderBaseScope:{type:Number,value:1e7}}}static get observers(){return["_updateOrders(_columnTree, _columnTree.*)"]}ready(){super.ready(),r(this,"track",this._onTrackEvent),this._reorderGhost=this.shadowRoot.querySelector('[part="reorder-ghost"]'),this.addEventListener("touchstart",this._onTouchStart.bind(this)),this.addEventListener("touchmove",this._onTouchMove.bind(this)),this.addEventListener("touchend",this._onTouchEnd.bind(this)),this.addEventListener("contextmenu",this._onContextMenu.bind(this))}_onContextMenu(t){this.hasAttribute("reordering")&&t.preventDefault()}_onTouchStart(t){this._startTouchReorderTimeout=setTimeout((()=>{this._onTrackStart({detail:{x:t.touches[0].clientX,y:t.touches[0].clientY}})}),100)}_onTouchMove(t){this._draggedColumn&&t.preventDefault(),clearTimeout(this._startTouchReorderTimeout)}_onTouchEnd(){clearTimeout(this._startTouchReorderTimeout),this._onTrackEnd()}_onTrackEvent(t){if("start"===t.detail.state){const e=t.composedPath(),r=e[e.indexOf(this.$.header)-2];if(!r||!r._content)return;const o=this.getRootNode().activeElement;if(r._content.contains(this.getRootNode().activeElement)&&(!this._ie||!this._isFocusable(o)))return;if(this.$.scroller.hasAttribute("column-resizing"))return;this._touchDevice||this._onTrackStart(t)}else"track"===t.detail.state?this._onTrack(t):"end"===t.detail.state&&this._onTrackEnd(t)}_onTrackStart(t){if(!this.columnReorderingAllowed)return;const e=t.path||o(t).path;if(e&&e.filter((t=>t.hasAttribute&&t.hasAttribute("draggable")))[0])return;const r=this._cellFromPoint(t.detail.x,t.detail.y);if(r&&-1!==r.getAttribute("part").indexOf("header-cell")){for(this._toggleAttribute("reordering",!0,this),this._draggedColumn=r._column;1===this._draggedColumn.parentElement.childElementCount;)this._draggedColumn=this._draggedColumn.parentElement;this._setSiblingsReorderStatus(this._draggedColumn,"allowed"),this._draggedColumn._reorderStatus="dragging",this._updateGhost(r),this._reorderGhost.style.visibility="visible",this._updateGhostPosition(t.detail.x,this._touchDevice?t.detail.y-50:t.detail.y),this._autoScroller()}}_onTrack(t){if(!this._draggedColumn)return;const e=this._cellFromPoint(t.detail.x,t.detail.y);if(!e)return;const r=this._getTargetColumn(e,this._draggedColumn);if(this._isSwapAllowed(this._draggedColumn,r)&&this._isSwappableByPosition(r,t.detail.x)){const t=this.__getColumnTreeLevel(r),e=this._getColumnsInOrder(t),o=e.indexOf(this._draggedColumn),i=e.indexOf(r),n=o<i?1:-1;for(let t=o;t!==i;t+=n)this._swapColumnOrders(this._draggedColumn,e[t+n])}this._updateGhostPosition(t.detail.x,this._touchDevice?t.detail.y-50:t.detail.y),this._lastDragClientX=t.detail.x}_onTrackEnd(){this._draggedColumn&&(this._toggleAttribute("reordering",!1,this),this._draggedColumn._reorderStatus="",this._setSiblingsReorderStatus(this._draggedColumn,""),this._draggedColumn=null,this._lastDragClientX=null,this._reorderGhost.style.visibility="hidden",this.dispatchEvent(new CustomEvent("column-reorder",{detail:{columns:this._getColumnsInOrder()}})))}_getColumnsInOrder(t){return t||0===t||(t=this._columnTree.length-1),this._columnTree[t].filter((t=>!t.hidden)).sort(((t,e)=>t._order-e._order))}_cellFromPoint(t,e){let r;for(t=t||0,e=e||0,this._draggedColumn||this._toggleAttribute("no-content-pointer-events",!0,this.$.scroller),this._reorderGhost.hidden=!0,r=this.shadowRoot.elementFromPoint?this.shadowRoot.elementFromPoint(t,e):document.elementFromPoint(t,e),this._reorderGhost.hidden=!1;!r._column&&r.parentElement;)r="vaadin-grid-cell-content"===r.localName?r.assignedSlot.parentNode:r.parentElement;if(this._toggleAttribute("no-content-pointer-events",!1,this.$.scroller),r&&r._column)return r}_updateGhostPosition(t,e){const r=this._reorderGhost.getBoundingClientRect(),o=t-r.width/2,i=e-r.height/2,n=parseInt(this._reorderGhost._left||0),s=parseInt(this._reorderGhost._top||0);this._reorderGhost._left=n-(r.left-o),this._reorderGhost._top=s-(r.top-i),this._reorderGhost.style.transform=`translate(${this._reorderGhost._left}px, ${this._reorderGhost._top}px)`}_getInnerText(t){return t.localName?"none"===getComputedStyle(t).display?"":Array.from(t.childNodes).map((t=>this._getInnerText(t))).join(""):t.textContent}_updateGhost(t){const e=this._reorderGhost;e.textContent=this._getInnerText(t._content);const r=window.getComputedStyle(t);return["boxSizing","display","width","height","background","alignItems","padding","border","flex-direction","overflow"].forEach((t=>e.style[t]=r[t])),e}_updateOrders(t,r){void 0!==t&&void 0!==r&&(t[0].forEach(((t,e)=>t._order=0)),e._updateColumnOrders(t[0],this._orderBaseScope,0))}_setSiblingsReorderStatus(t,e){Array.from(t.parentNode.children).filter((e=>/column/.test(e.localName)&&this._isSwapAllowed(e,t))).forEach((t=>t._reorderStatus=e))}_autoScroller(){if(this._lastDragClientX){const t=this._lastDragClientX-this.getBoundingClientRect().right+50,e=this.getBoundingClientRect().left-this._lastDragClientX+50;t>0?this.$.table.scrollLeft+=t/10:e>0&&(this.$.table.scrollLeft-=e/10),this._scrollHandler()}this._draggedColumn&&this.async(this._autoScroller,10)}_isSwapAllowed(t,e){if(t&&e){const r=t!==e,o=t.parentElement===e.parentElement,i=t.frozen===e.frozen;return r&&o&&i}}_isSwappableByPosition(t,e){const r=Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~="cell"]')).filter((e=>t.contains(e._column)))[0],o=this.$.header.querySelector("tr:not([hidden]) [reorder-status=dragging]").getBoundingClientRect(),i=r.getBoundingClientRect();return i.left>o.left?e>i.right-o.width:e<i.left+o.width}_swapColumnOrders(t,e){const r=t._order;t._order=e._order,e._order=r,this._updateLastFrozen(),this._updateFirstAndLastColumn()}_getTargetColumn(t,e){if(t&&e){let r=t._column;for(;r.parentElement!==e.parentElement&&r!==this;)r=r.parentElement;return r.parentElement===e.parentElement?r:t._column}}__getColumnTreeLevel(t){for(let e=0;e<this._columnTree.length;e++)if(this._columnTree[e].indexOf(t)>=0)return e;return-1}};