ideaz-element

Version:

naivesteven.github.io/ideaz-element/

1 lines • 7.67 kB

Source Map (JSON)

View Raw

{"version":3,"file":"sticky.cjs","sources":["../../../packages/directives/sticky.ts"],"sourcesContent":["import { isObject } from '@ideaz/utils'\nimport type { Directive, DirectiveBinding } from 'vue'\n\n/**\n * Idea: Set fixed through the simple el-table's thead and tbody parent level areas\n * 1.Make a copy of thead set to fixed and hide it.\n * 2.Create a scroll bar to listen for events and calculate the position of the visible window where the table is located based on the scroll bar. Set whether the thead copy is displayed\n * 3.Create a landscape scrollbar property change listener. When listening changes, you need to set the table header position of the corresponding copy before dragging the horizontal scroll bar to prevent misalignment\n */\n\nfunction getElParentBySelector(el: any, queryClassSelector: string) {\n if (!el) {\n return el\n }\n if ([...el.classList].includes(queryClassSelector)) {\n return el\n }\n return getElParentBySelector(el.parentNode, queryClassSelector)\n}\n\nfunction getTableShowWidth(thead: string) {\n const tableBox = getElParentBySelector(thead, 'el-table')\n return tableBox.getBoundingClientRect().width\n}\n\n// Use setTime to ensure that the Settings are not repeated\n\nfunction createTableSticky(el: any, binding: DirectiveBinding) {\n let stickyTop = binding.value.top || 0\n const zIndex = binding.value.zIndex || 0\n stickyTop = Number.parseFloat(stickyTop)\n // Get a table (element)\n let thead = el.querySelector('.el-table__header')\n thead = getElParentBySelector(thead, 'el-table__header-wrapper')\n const tbody = el.querySelector('.el-scrollbar') || el.querySelector('.el-table__body')\n // const tableBox = el.querySelector('.el-table__inner-wrapper')\n\n const elBodyBox = el.querySelector('.el-table__body-wrapper')\n\n // Insert the copy element to ensure that the document flow does not collapse\n const copyThead = thead.cloneNode(true)\n copyThead.classList.add('el-table_header-copy')\n copyThead.style.display = 'none'\n copyThead.style.position = 'fixed'\n copyThead.style.zIndex = zIndex || 1994\n copyThead.style.top = `${stickyTop}px`\n copyThead.style.backgroundColor = '#fff'\n if (isObject(binding.value?.style)) {\n Object.keys(binding.value.style).forEach((key) => {\n copyThead.style[key] = binding.value.style[key]\n })\n }\n // copyThead.style.borderTop = '1px solid #999999'\n\n thead.parentNode.insertBefore(copyThead, elBodyBox)\n\n // Gets the display width of thead\n const headerShowWidth = getTableShowWidth(thead)\n\n // Get scroll element\n const scrollParent = binding.value.parent === 'document' ? document : document.querySelector(binding.value.parent || 'body')\n if (!scrollParent || binding.value.disabled === true) {\n return\n }\n scrollParent.addEventListener('scroll', () => {\n const theadHeight = thead.clientHeight\n // Gets the distance of thead from the top\n const theadTop = thead.getBoundingClientRect().top\n // Determine if you need to return to your original position\n const originally = tbody.getBoundingClientRect().top\n // Determine whether the bottom distance exceeds the table head\n const goBeyond = tbody.getBoundingClientRect().bottom\n\n if (theadTop <= stickyTop) {\n copyThead.style.display = 'block'\n copyThead.style.width\n = `${tbody.offsetWidth < headerShowWidth ? tbody.offsetWidth : headerShowWidth}px`\n }\n\n if (originally - theadHeight > stickyTop || goBeyond - theadHeight / 2 <= stickyTop) {\n // Hidden copy\n copyThead.style.display = 'none'\n }\n })\n\n try {\n // Start the bottom scroll bar monitor to prevent the horizontal scroll bar from rolling and the watch head does not move\n const elThumbBut = el.querySelector(\n '.el-table__body-wrapper .el-scrollbar .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb',\n )\n if (elThumbBut) {\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'style') {\n const transformX = elThumbBut.style.transform\n if (transformX) {\n copyThead.querySelector(\n '.el-table__header',\n ).style.marginLeft = `-${transformX.replace(/[a-z()]/gi, '')}`\n }\n }\n }\n })\n // Start listening for the horizontal scroll bar\n observer.observe(elThumbBut, { attributes: true })\n }\n }\n catch (error) {}\n}\n\nlet clearTimeId: any = null\n\nexport const sticky: Directive = {\n mounted(el: any, binding: DirectiveBinding) {\n if (!binding.value)\n return\n const random = Number.parseInt(`${Math.random() * 10}`)\n // TIP delay Settings to ensure successful rendering of the table!\n clearTimeId = setTimeout(() => {\n createTableSticky(el, binding)\n // clearTimeout(clearTimeId)\n }, 1000 + random)\n },\n\n // update(el: any, binding: DirectiveBinding) {\n // if (!binding.value)\n // return\n // const random = Number.parseInt(`${Math.random() * 10}`)\n // // TIP delay Settings to ensure successful rendering of the table!\n // clearTimeId = setTimeout(() => {\n // createTableSticky(el, binding)\n // // clearTimeout(clearTimeId)\n // }, 1000 + random)\n // },\n\n unmounted() {\n clearTimeId && clearTimeout(clearTimeId)\n },\n}\n"],"names":["getElParentBySelector","el","queryClassSelector","getTableShowWidth","thead","createTableSticky","binding","stickyTop","zIndex","tbody","elBodyBox","copyThead","is","_a","key","headerShowWidth","scrollParent","theadHeight","theadTop","originally","goBeyond","elThumbBut","mutationsList","mutation","transformX","clearTimeId","sticky","random"],"mappings":"iJAUA,SAAAA,EAAAC,EAAAC,EAAA,CAIE,MAHA,CAAAD,GAGA,CAAA,GAAAA,EAAA,SAAA,EAAA,SAAAC,CAAA,EACED,EAEFD,EAAAC,EAAA,WAAAC,CAAA,CACF,CAEA,SAAAC,EAAAC,EAAA,CAEE,OADAJ,EAAAI,EAAA,UAAA,EACA,sBAAA,EAAA,KACF,CAIA,SAAAC,EAAAJ,EAAAK,EAAA,OACE,IAAAC,EAAAD,EAAA,MAAA,KAAA,EACA,MAAAE,EAAAF,EAAA,MAAA,QAAA,EACAC,EAAA,OAAA,WAAAA,CAAA,EAEA,IAAAH,EAAAH,EAAA,cAAA,mBAAA,EACAG,EAAAJ,EAAAI,EAAA,0BAAA,EACA,MAAAK,EAAAR,EAAA,cAAA,eAAA,GAAAA,EAAA,cAAA,iBAAA,EAGAS,EAAAT,EAAA,cAAA,yBAAA,EAGAU,EAAAP,EAAA,UAAA,EAAA,EACAO,EAAA,UAAA,IAAA,sBAAA,EACAA,EAAA,MAAA,QAAA,OACAA,EAAA,MAAA,SAAA,QACAA,EAAA,MAAA,OAAAH,GAAA,KACAG,EAAA,MAAA,IAAA,GAAAJ,CAAA,KACAI,EAAA,MAAA,gBAAA,OACAC,EAAA,UAAAC,EAAAP,EAAA,QAAA,YAAAO,EAAA,KAAA,GACE,OAAA,KAAAP,EAAA,MAAA,KAAA,EAAA,QAAAQ,GAAA,CACEH,EAAA,MAAAG,CAAA,EAAAR,EAAA,MAAA,MAAAQ,CAAA,CAA8C,CAAA,EAKlDV,EAAA,WAAA,aAAAO,EAAAD,CAAA,EAGA,MAAAK,EAAAZ,EAAAC,CAAA,EAGAY,EAAAV,EAAA,MAAA,SAAA,WAAA,SAAA,SAAA,cAAAA,EAAA,MAAA,QAAA,MAAA,EACA,GAAA,GAAAU,GAAAV,EAAA,MAAA,WAAA,IAGA,CAAAU,EAAA,iBAAA,SAAA,IAAA,CACE,MAAAC,EAAAb,EAAA,aAEAc,EAAAd,EAAA,sBAAA,EAAA,IAEAe,EAAAV,EAAA,sBAAA,EAAA,IAEAW,EAAAX,EAAA,sBAAA,EAAA,OAEAS,GAAAX,IACEI,EAAA,MAAA,QAAA,QACAA,EAAA,MAAA,MAAA,GAAAF,EAAA,YAAAM,EAAAN,EAAA,YAAAM,CAAA,OAIFI,EAAAF,EAAAV,GAAAa,EAAAH,EAAA,GAAAV,KAEEI,EAAA,MAAA,QAAA,OACF,CAAA,EAGF,GAAA,CAEE,MAAAU,EAAApB,EAAA,cAAsB,6FACpB,EAEFoB,GACE,IAAA,iBAAAC,GAAA,CACE,UAAAC,KAAAD,EACE,GAAAC,EAAA,OAAA,cAAAA,EAAA,gBAAA,QAAA,CACE,MAAAC,EAAAH,EAAA,MAAA,UACAG,IACEb,EAAA,cAAU,mBACR,EAAA,MAAA,WAAA,IAAAa,EAAA,QAAA,YAAA,EAAA,CAAA,GAEJ,CAEJ,CAAA,EAGF,QAAAH,EAAA,CAAA,WAAA,EAAA,CAAA,CACF,MAAA,CAEY,EAChB,CAEA,IAAAI,EAAA,KAEO,MAAAC,EAAA,CAA0B,QAAAzB,EAAAK,EAAA,CAE7B,GAAA,CAAAA,EAAA,MACE,OACF,MAAAqB,EAAA,OAAA,SAAA,GAAA,KAAA,OAAA,EAAA,EAAA,EAAA,EAEAF,EAAA,WAAA,IAAA,CACEpB,EAAAJ,EAAAK,CAAA,CAA6B,EAAA,IAAAqB,CAAA,CAEf,EAClB,WAAA,CAcEF,GAAA,aAAAA,CAAA,CAAuC,CAE3C"}