FileMaster

Edit File: sc-dialog.js

import{h}from"@stencil/core";import{__}from"@wordpress/i18n";import{animateTo,stopAnimations}from"../../../functions/animate";import{getAnimation,setDefaultAnimation}from"../../../functions/animation-registry";import{lockBodyScrolling,unlockBodyScrolling}from"../../../functions/scroll";export class ScDialog{constructor(){this.boundHandleDocumentKeyDown=e=>this.handleDocumentKeyDown(e),this.open=!1,this.label="",this.noHeader=!1,this.hasFooter=!1}async show(){this.open||(this.open=!0)}async hide(){this.open&&(this.open=!1)}requestClose(e){if(this.scRequestClose.emit(e).defaultPrevented){const e=getAnimation(this.el,"dialog.denyClose");animateTo(this.panel,e.keyframes,e.options)}else this.hide()}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}handleDocumentKeyDown(e){"Escape"===e.key&&this.open&&this.requestClose("keyboard")}async handleOpenChange(){if(this.open){this.scShow.emit(),document.addEventListener("keydown",this.boundHandleDocumentKeyDown),lockBodyScrolling(this.el);const e=this.el.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([stopAnimations(this.dialog),stopAnimations(this.overlay)]),this.dialog.hidden=!1,requestAnimationFrame((()=>{this.scInitialFocus.emit().defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")}));const o=getAnimation(this.el,"dialog.show"),t=getAnimation(this.el,"dialog.overlay.show");await Promise.all([animateTo(this.panel,o.keyframes,o.options),animateTo(this.overlay,t.keyframes,t.options)]),this.scAfterShow.emit()}else{this.scHide.emit(),await Promise.all([stopAnimations(this.dialog),stopAnimations(this.overlay)]);const e=getAnimation(this.el,"dialog.hide"),o=getAnimation(this.el,"dialog.overlay.hide");await Promise.all([animateTo(this.panel,e.keyframes,e.options),animateTo(this.overlay,o.keyframes,o.options)]),this.dialog.hidden=!0,unlockBodyScrolling(this.el);const t=this.originalTrigger;"function"==typeof(null==t?void 0:t.focus)&&setTimeout((()=>t.focus())),document.removeEventListener("keydown",this.boundHandleDocumentKeyDown),this.scAfterHide.emit()}}componentDidLoad(){this.hasFooter=!!this.el.querySelector('[slot="footer"]'),this.dialog.hidden=!this.open,this.open&&(document.addEventListener("keydown",this.boundHandleDocumentKeyDown),lockBodyScrolling(this.el))}disconnectedCallback(){document.removeEventListener("keydown",this.boundHandleDocumentKeyDown),unlockBodyScrolling(this.el)}render(){return h("div",{key:"f10398d88a10fca883e49ad33a58c78c9c2703ea",part:"base",ref:e=>this.dialog=e,class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.hasFooter},onKeyDown:e=>this.handleKeyDown(e)},h("div",{key:"fe58143d804106605151c8af9a710b439bfee407",part:"overlay",class:"dialog__overlay",onClick:e=>{e.preventDefault(),e.stopImmediatePropagation(),this.requestClose("overlay")},ref:e=>this.overlay=e,tabindex:"-1"}),h("div",{key:"517d766eb0a3c08a14bf85f9b4bac8406581db70",part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader||this.label,"aria-labelledby":!this.noHeader||"title",ref:e=>this.panel=e,tabindex:"0"},!this.noHeader&&h("header",{key:"a769746d0fea2ed8047b1867bd27ee186eaf8a00",part:"header",class:"dialog__header"},h("h2",{key:"4becd4dd79384169f4ea5d8d9278eeb4b0037840",part:"title",class:"dialog__title",id:"title"},h("slot",{key:"fb1871b630a7c61b19484af20ce1f10c59f609fd",name:"label"}," ",this.label.length>0?this.label:String.fromCharCode(65279)," ")),h("sc-button",{key:"9a0df427f42124090640515b8dc36994bdac7c8f",class:"dialog__close",type:"text",circle:!0,part:"close-button",exportparts:"base:close-button__base",onClick:e=>{e.preventDefault(),e.stopImmediatePropagation(),this.requestClose("close-button")}},h("sc-icon",{key:"8cd1f430691f3f92f6782777eab677ab2b8e044e",name:"x",label:__("Close","surecart")}))),h("div",{key:"63628efa0c475816a8dfc2ba878c056e88f817b9",part:"body",class:"dialog__body"},h("slot",{key:"66bbe40459ca7c99970f241bae999e49e288ca77"})),h("footer",{key:"48406ef09f60488508013c233754de65fbfb0c1a",part:"footer",class:"dialog__footer"},h("slot",{key:"1e44bc2a3ea558d50b2d63347b5ad49217693076",name:"footer"}))))}static get is(){return"sc-dialog"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-dialog.scss"]}}static get styleUrls(){return{$:["sc-dialog.css"]}}static get properties(){return{open:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods."},attribute:"open",reflect:!0,defaultValue:"false"},label:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."},attribute:"label",reflect:!0,defaultValue:"''"},noHeader:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog."},attribute:"no-header",reflect:!0,defaultValue:"false"}}}static get states(){return{hasFooter:{}}}static get events(){return[{method:"scRequestClose",name:"scRequestClose",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Request close event"},complexType:{original:"'close-button' | 'keyboard' | 'overlay'",resolved:'"close-button" | "keyboard" | "overlay"',references:{}}},{method:"scShow",name:"scShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scAfterShow",name:"scAfterShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scHide",name:"scHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scAfterHide",name:"scAfterHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scInitialFocus",name:"scInitialFocus",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}}]}static get elementRef(){return"el"}static get watchers(){return[{propName:"open",methodName:"handleOpenChange"}]}}setDefaultAnimation("dialog.show",{keyframes:[{opacity:0,transform:"scale(0.8)"},{opacity:1,transform:"scale(1)"}],options:{duration:150,easing:"ease"}}),setDefaultAnimation("dialog.hide",{keyframes:[{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.8)"}],options:{duration:150,easing:"ease"}}),setDefaultAnimation("dialog.denyClose",{keyframes:[{transform:"scale(1)"},{transform:"scale(1.02)"},{transform:"scale(1)"}],options:{duration:150}}),setDefaultAnimation("dialog.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:150}}),setDefaultAnimation("dialog.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:150}});

Back