regular-clamp
Version:
1 lines • 9.12 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i=t();for(var r in i)("object"==typeof exports?exports:e)[r]=i[r]}}(window,(function(){return function(e){var t={};function i(r){if(t[r])return t[r].exports;var s=t[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)i.d(r,s,function(t){return e[t]}.bind(null,s));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,i){"use strict";i.r(t);let r=null;let s=null;function a(e,t={}){let i=document.createElement(e);return Object.keys(t).forEach(e=>{i[e]=t[e]}),i}function n(e,t,i){return(window.getComputedStyle(e,i||null)||{display:"none"})[t]}function o(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};let t=e;for(;t!==document;){if("none"===n(t,"display"))return{detached:!1,rendered:!1};t=t.parentNode}return{detached:!1,rendered:!0}}var d='.resize-triggers{visibility:hidden;opacity:0}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}';let l=0,_=null;function h(e,t){if(e.__resize_mutation_handler__||(e.__resize_mutation_handler__=c.bind(e)),!e.__resize_listeners__)if(e.__resize_listeners__=[],window.ResizeObserver){let{offsetWidth:t,offsetHeight:i}=e,r=new ResizeObserver(()=>{(e.__resize_observer_triggered__||(e.__resize_observer_triggered__=!0,e.offsetWidth!==t||e.offsetHeight!==i))&&u(e)}),{detached:s,rendered:a}=o(e);e.__resize_observer_triggered__=!1===s&&!1===a,e.__resize_observer__=r,r.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){u(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(l||(_=function(e){var t=document.createElement("style");return t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(t),t}(d)),function(e){let t=n(e,"position");t&&"static"!==t||(e.style.position="relative");e.__resize_old_position__=t,e.__resize_last__={};let i=a("div",{className:"resize-triggers"}),r=a("div",{className:"resize-expand-trigger"}),s=a("div"),o=a("div",{className:"resize-contract-trigger"});r.appendChild(s),i.appendChild(r),i.appendChild(o),e.appendChild(i),e.__resize_triggers__={triggers:i,expand:r,expandChild:s,contract:o},p(e),e.addEventListener("scroll",f,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}(e),e.__resize_rendered__=o(e).rendered,window.MutationObserver){let t=new MutationObserver(e.__resize_mutation_handler__);t.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=t}e.__resize_listeners__.push(t),l++}function c(){let{rendered:e,detached:t}=o(this);e!==this.__resize_rendered__&&(!t&&this.__resize_triggers__&&(p(this),this.addEventListener("scroll",f,!0)),this.__resize_rendered__=e,u(this))}function f(){var e,t;p(this),this.__resize_raf__&&(e=this.__resize_raf__,s||(s=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}).bind(window)),s(e)),this.__resize_raf__=(t=()=>{let e=function(e){let{width:t,height:i}=e.__resize_last__,{offsetWidth:r,offsetHeight:s}=e;return r!==t||s!==i?{width:r,height:s}:null}(this);e&&(this.__resize_last__=e,u(this))},r||(r=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){return setTimeout(e,16)}).bind(window)),r(t))}function u(e){e&&e.__resize_listeners__&&e.__resize_listeners__.forEach(t=>{t.call(e)})}function p(e){let{expand:t,expandChild:i,contract:r}=e.__resize_triggers__,{scrollWidth:s,scrollHeight:a}=r,{offsetWidth:n,offsetHeight:o,scrollWidth:d,scrollHeight:l}=t;r.scrollLeft=s,r.scrollTop=a,i.style.width=n+1+"px",i.style.height=o+1+"px",t.scrollLeft=d,t.scrollTop=l}const g=["maxLines","maxHeight","ellipsis","isClamped"],m=["tag","text","autoresize"],x={name:"regular-clamp",data:{offset:null,text:"",ellipsis:"...",localExpanded:!1,realLines:0},computed:{clampedText:e=>e.text.slice(0,e.offset)+e.ellipsis,isClamped:e=>!!e.text&&e.offset!==e.text.length,realText(e){return this.$get("isClamped")?this.$get("clampedText"):e.text},realMaxHeight(e){if(e.localExpanded)return null;let{maxHeight:t}=e;return t?"number"==typeof t?`${t}px`:t:null}},config(){this.data.afterElm=this.data.after,this.data.text=this.getText(),this.data.maxLines=+this.data.maxLines||0,this.data.localExpanded=!!this.data.expanded,this.$watch("expanded",e=>{this.data.localExpanded=e,this.$update()}),this.$watch("localExpanded",e=>{e?this.clampAt(this.data.text.length):this.update(),this.data.expanded!==e&&this.$emit("expanded",e),this.$update()}),this.$update()},init(){setTimeout(()=>{this.mounted()},0)},destroy(){this.supr(),this.cleanUp()},mounted(){this.initComp(),m.forEach(e=>{this.$watch(e,this.initComp)}),g.forEach(e=>{this.$watch(e,()=>{this.update()})}),this.$watch("text",(e,t)=>{null!=t?(this.resetData(e),setTimeout(()=>{this.update(!0)},0)):setTimeout(()=>{this.update()},0)},{init:!0})},resetData(e){this.data.afterElm="",this.data.offset=e.length,this.data.realLines=0,this.data.localExpanded=!1,this.data.text=e,this.$update()},initComp(){if(this.data.text){if(this.data.offset=this.data.text.length,this.cleanUp(),this.data.autoresize){let e=()=>{this.update()};h(this.$refs.clamp,e),this.unregisterResizeCallback=()=>{!function(e,t){let i=e.__resize_listeners__;if(i){if(t&&i.splice(i.indexOf(t),1),!i.length||!t){if(e.detachEvent&&e.removeEventListener)return e.detachEvent("onresize",e.__resize_legacy_resize_handler__),void document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",f),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--l&&_&&_.parentNode.removeChild(_)}}(this.$refs.clamp,e)}}this.update()}},update(e){e&&(this.data.afterElm=this.data.after,this.data.localExpanded=!!this.data.expanded),this.data.realLines=this.getLines(),this.$update(),this.data.localExpanded&&!e||(this.applyChange(),(this.isOverflow()||this.$get("isClamped"))&&this.search(),this.data.realLines=this.getLines(),this.$update())},toggle(){this.data.localExpanded=!this.data.localExpanded,this.$update()},getLines(){return this.$refs.content.getClientRects().length},isOverflow(){return!(!this.data.maxLines&&!this.data.maxHeight)&&(!!(this.data.maxLines&&this.getLines()>this.data.maxLines)||!!(this.data.maxHeight&&this.$el.scrollHeight>this.$el.offsetHeight))},getText(){let[e={}]=(this._body.ast||[]).filter(e=>"text"===e.type);return e.text&&e.text.trim()?e.text:this.data.text||""},moveEdge(e){this.clampAt(this.data.offset+e)},clampAt(e){this.data.offset=e,this.$update(),this.applyChange()},applyChange(){this.$refs.text.textContent=this.$get("realText")},stepToFit(){this.fill(),this.clamp()},fill(){for(;(!this.isOverflow()||this.getLines()<2)&&this.data.offset<this.data.text.length;)this.moveEdge(1)},clamp(){for(;this.isOverflow()&&this.getLines()>1&&this.data.offset>0;)this.moveEdge(-1)},search(...e){let[t=0,i=this.data.offset]=e;if(i-t<=3)return void this.stepToFit();let r=Math.floor((i+t)/2);this.clampAt(r),this.isOverflow()?this.search(t,r):this.search(r,i)},cleanUp(){this.unregisterResizeCallback&&this.unregisterResizeCallback()},template:'<div ref="clamp" style="max-height: {realMaxHeight}; overflow: hidden;">\n <span ref="content" style="box-shadow: transparent 0 0;">{#if before}{#include before}{/if}<span ref="text" aria-label="{text.trim()}" style="white-space: pre-wrap;word-break: break-all;" {#if isTextTriggerToggle} on-click={this.toggle()} {/if}>{realText}</span>{#if afterElm}{#include afterElm}{/if}</span>\n </div>'};"undefined"!=typeof window&&window.Regular&&window.Regular.extend(x);t.default=x}])}));