@popgrids/embed 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -1903,7 +1903,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     font-style: italic;
     opacity: 0.8;
   }
-`),X=class extends k{constructor(...e){super(...e),this.events={click:`onClick`},this._expanded=!1,this._dropdownOpen=!1,this._onOutsideClick=e=>{let t=e.composedPath(),n=this.getElement(A(`dropdown`)),r=this.getElement(A(`menu-trigger`));n&&r&&!t.includes(n)&&!t.includes(r)&&this.closeDropdown()},this._timeUpdateTimer=null}static get observedAttributes(){return[`data-size`,`comment-id`]}onDataSizeChanged(){this.render()}onCommentIdChanged(){this.render()}get size(){return this.getAttribute(`data-size`)||`sm`}get commentAvatarSize(){return this.size===`sm`?`xs`:`sm`}get styleSheets(){return[Xe]}toggleDropdown(){this._dropdownOpen?this.closeDropdown():this.openDropdown()}openDropdown(){this._dropdownOpen=!0;let t=this.getElement(A(`dropdown`)),n=this.getElement(A(`menu-trigger`));if(t&&n){t.classList.add(`is-open`);let r=()=>{(0,e.computePosition)(n,t,{placement:`bottom-end`,middleware:[(0,e.offset)(4),(0,e.flip)(),(0,e.shift)({padding:8})],strategy:`fixed`}).then(({x:e,y:n})=>{Object.assign(t.style,{left:`${e}px`,top:`${n}px`,position:`fixed`})})};this._floatingCleanup=(0,e.autoUpdate)(n,t,r),document.addEventListener(`mousedown`,this._onOutsideClick)}}closeDropdown(){this._dropdownOpen=!1;let e=this.getElement(A(`dropdown`));e&&e.classList.remove(`is-open`),this._floatingCleanup&&=(this._floatingCleanup(),void 0),document.removeEventListener(`mousedown`,this._onOutsideClick)}async deleteComment(){let e=this.getAttribute(`comment-id`);e&&confirm(`Are you sure you want to delete this comment?`)&&await this.gridStore.deleteComment(e)}async flagComment(){let e=this.getAttribute(`comment-id`);e&&(await this.gridStore.flagComment(e)?alert(`Comment flagged successfully.`):alert(`Failed to flag comment.`))}onClick(e){let t=e.target;if(t.closest(A(`menu-trigger`))){e.stopPropagation(),this.toggleDropdown();return}let n=t.closest(A(`dropdown-item`));if(n){e.stopPropagation();let t=n.getAttribute(`data-action`),r=this.getAttribute(`comment-id`);t===`edit`&&r?(this.gridStore.replyingTo.value=null,this.gridStore.editingCommentId.value=r):t===`delete`?this.deleteComment():t===`flag`&&this.flagComment(),this.closeDropdown();return}if(t.closest(A(`dropdown`))){e.stopPropagation();return}if(!this.authStore.currentUser.value)return;let r=this.getAttribute(`comment-id`);r&&this.gridStore.comments.value.find(e=>e.id===r)?.status!==`deleted`&&(this.gridStore.replyingTo.value===r?this.gridStore.replyingTo.value=null:this.gridStore.replyingTo.value=r,this.expandText())}expandText(){let e=this.getElement(A(`text`));if(!this._expanded&&e){let t=e.offsetHeight;this._expanded=!0,this.render();let n=this.getElement(A(`text`));if(n){let e=n.scrollHeight;n.style.height=`${t}px`,n.style.overflow=`hidden`,n.offsetHeight,n.style.transition=`height var(--pop-duration-quick) var(--pop-ease-quick)`,n.style.height=`${e}px`,setTimeout(()=>{n.style.height=``,n.style.overflow=``},300)}}}disconnectedCallback(){this.closeDropdown(),this.stopTimeUpdates(),super.disconnectedCallback()}startTimeUpdates(){this.stopTimeUpdates();let e=this.getAttribute(`comment-id`);if(!e)return;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return;let n=()=>{let e=this.getElement(A(`timestamp`));e&&(e.textContent=Y(t.createdAt));let r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt))),i=6e4;i=r<6e4?5e3:r<36e5?6e4:18e5,this._timeUpdateTimer=setTimeout(n,i)},r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt)))<6e4?5e3:6e4;this._timeUpdateTimer=setTimeout(n,r)}stopTimeUpdates(){this._timeUpdateTimer&&=(clearTimeout(this._timeUpdateTimer),null)}setupEffects(){this.addEffect(()=>{this.setAttribute(`data-size`,this.gridStore.commentSize.value)}),this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=this.authStore.currentUser.value,n=this.gridStore.replyingTo.value,r=this.gridStore.editingCommentId.value,i=this.gridStore.scrollingCommentId.value;this.classList.toggle(`is-signed-in`,t!==null),this.classList.toggle(`is-replying`,e!==null&&n===e),this.classList.toggle(`is-editing`,e!==null&&r===e),this.gridStore.comments.value,this.render(),this.startTimeUpdates(),e&&i===e&&setTimeout(()=>{let t=this.shadowRoot?.querySelector(`#comment-${e}`);t?t.scrollIntoView({behavior:`smooth`,block:`center`}):this.scrollIntoView({behavior:`smooth`,block:`center`}),this.gridStore.scrollingCommentId.value=null},50)})}getTemplate(){let e=this.getAttribute(`comment-id`);if(!e)return``;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return``;let r=t.status===`deleted`,i=t.authorDeleted===!0,a=r||i,o=a?``:t.author?.image?`<img src="${t.author.image}" alt="${t.author.name??`User avatar`}" />`:n(t.author?.name),s=this.gridStore.replyingTo.value,c=e!==null&&s===e,l=this.size,u=this.authStore.currentUser.value,d=u&&t.author&&u.id===t.author.id,f=u&&!r?`<div class="comment__menu">
+`),X=class extends k{constructor(...e){super(...e),this.events={click:`onClick`},this._expanded=!1,this._dropdownOpen=!1,this._onOutsideClick=e=>{let t=e.composedPath(),n=this.getElement(A(`dropdown`)),r=this.getElement(A(`menu-trigger`));n&&r&&!t.includes(n)&&!t.includes(r)&&this.closeDropdown()},this._timeUpdateTimer=null}static get observedAttributes(){return[`data-size`,`comment-id`]}onDataSizeChanged(){this.render()}onCommentIdChanged(){this.render()}get size(){return this.getAttribute(`data-size`)||`sm`}get commentAvatarSize(){return this.size===`sm`?`xs`:`sm`}get styleSheets(){return[Xe]}toggleDropdown(){this._dropdownOpen?this.closeDropdown():this.openDropdown()}openDropdown(){this._dropdownOpen=!0;let t=this.getElement(A(`dropdown`)),n=this.getElement(A(`menu-trigger`));if(t&&n){t.classList.add(`is-open`);let r=()=>{(0,e.computePosition)(n,t,{placement:`bottom-end`,middleware:[(0,e.offset)(4),(0,e.flip)(),(0,e.shift)({padding:8})],strategy:`fixed`}).then(({x:e,y:n})=>{Object.assign(t.style,{left:`${e}px`,top:`${n}px`,position:`fixed`})})};this._floatingCleanup=(0,e.autoUpdate)(n,t,r),document.addEventListener(`mousedown`,this._onOutsideClick)}}closeDropdown(){this._dropdownOpen=!1;let e=this.getElement(A(`dropdown`));e&&e.classList.remove(`is-open`),this._floatingCleanup&&=(this._floatingCleanup(),void 0),document.removeEventListener(`mousedown`,this._onOutsideClick)}async deleteComment(){let e=this.getAttribute(`comment-id`);e&&confirm(`Are you sure you want to delete this comment?`)&&await this.gridStore.deleteComment(e)}async flagComment(){let e=this.getAttribute(`comment-id`);e&&(await this.gridStore.flagComment(e)?alert(`Comment flagged successfully.`):alert(`Failed to flag comment.`))}onClick(e){let t=e.target;if(t.closest(A(`menu-trigger`))){e.stopPropagation(),this.toggleDropdown();return}let n=t.closest(A(`dropdown-item`));if(n){e.stopPropagation();let t=n.getAttribute(`data-action`),r=this.getAttribute(`comment-id`);t===`edit`&&r?(this.gridStore.replyingTo.value=null,this.gridStore.editingCommentId.value=r):t===`delete`?this.deleteComment():t===`flag`&&this.flagComment(),this.closeDropdown();return}if(t.closest(A(`dropdown`))){e.stopPropagation();return}if(!this.authStore.currentUser.value)return;let r=this.getAttribute(`comment-id`);r&&this.gridStore.comments.value.find(e=>e.id===r)?.status!==`deleted`&&(this.gridStore.replyingTo.value===r?this.gridStore.replyingTo.value=null:this.gridStore.replyingTo.value=r,this.expandText())}expandText(){let e=this.getElement(A(`text`));if(!this._expanded&&e){let t=e.offsetHeight;this._expanded=!0,this.render();let n=this.getElement(A(`text`));if(n){let e=n.scrollHeight;n.style.height=`${t}px`,n.style.overflow=`hidden`,n.offsetHeight,n.style.transition=`height var(--pop-duration-quick) var(--pop-ease-quick)`,n.style.height=`${e}px`,setTimeout(()=>{n.style.height=``,n.style.overflow=``},300)}}}disconnectedCallback(){this.closeDropdown(),this.stopTimeUpdates(),super.disconnectedCallback()}startTimeUpdates(){this.stopTimeUpdates();let e=this.getAttribute(`comment-id`);if(!e)return;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return;let n=()=>{let e=this.getElement(A(`timestamp`));e&&(e.textContent=Y(t.createdAt));let r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt))),i=6e4;i=r<6e4?5e3:r<36e5?6e4:18e5,this._timeUpdateTimer=setTimeout(n,i)},r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt)))<6e4?5e3:6e4;this._timeUpdateTimer=setTimeout(n,r)}stopTimeUpdates(){this._timeUpdateTimer&&=(clearTimeout(this._timeUpdateTimer),null)}setupEffects(){this.addEffect(()=>{this.setAttribute(`data-size`,this.gridStore.commentSize.value)}),this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=this.authStore.currentUser.value,n=this.gridStore.replyingTo.value,r=this.gridStore.editingCommentId.value,i=this.gridStore.scrollingCommentId.value;this.classList.toggle(`is-signed-in`,t!==null),this.classList.toggle(`is-replying`,e!==null&&n===e),this.classList.toggle(`is-editing`,e!==null&&r===e),this.gridStore.comments.value,this.render(),this.startTimeUpdates(),e&&i===e&&setTimeout(()=>{let t=this.shadowRoot?.querySelector(`#comment-${e}`);t?t.scrollIntoView({behavior:`smooth`,block:`center`}):this.scrollIntoView({behavior:`smooth`,block:`center`}),this.gridStore.scrollingCommentId.value=null},50)})}getTemplate(){let e=this.getAttribute(`comment-id`);if(!e)return``;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return``;let r=t.status===`deleted`,i=t.authorDeleted===!0,a=r||i,o=a?``:t.author?.image?`<img src="${t.author.image}" alt="${t.author.name??`User avatar`}" loading="lazy" />`:n(t.author?.name),s=this.gridStore.replyingTo.value,c=e!==null&&s===e,l=this.size,u=this.authStore.currentUser.value,d=u&&t.author&&u.id===t.author.id,f=u&&!r?`<div class="comment__menu">
             <button class="comment__menu-trigger" data-ref="menu-trigger" type="button">
               <svg
                 width="18"