export const __webpack_ids__=["37"];export const __webpack_modules__={54681:function(e,t,n){n.d(t,{Z:()=>s});var r=n(8081),o=n.n(r),i=n(23645),a=n.n(i)()(o());a.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let s=a.toString()},56980:function(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(14703);n(50272);var o=n(69535),i=n(8900);let MDNLoginButton=class MDNLoginButton extends(0,o.q)(r.oi){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(i.sA,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.dy)`<mdn-button href=${this._loginUrl}
      >${this.l10n`Login`}</mdn-button
    >`}};customElements.define("mdn-login-button",MDNLoginButton)},6067:function(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(35470),o=n(14703),i=n(51968),a=n(69535),s=n(61619),l=n(13117),d=n(15383),c=n(32533);n(4406),n(50272),n(74580),n(18103),n(4976),n(86499),n(56980),n(46907);let p="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,a.q)(o.oi){static styles=d.Z;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,i.V)();_shareModal=(0,i.V)();_reportModal=(0,i.V)();_user=new r.iQ(this,{task:async()=>await (0,l.s)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n`Do you really want to clear everything?`)&&e){e.clear(),this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
${t}
\`\`\``).filter(Boolean).join("\n\n");await navigator.clipboard.writeText(t)}}async _createPermalink(){let e=this._controller.value;if(e){let t=await fetch("/api/v1/play/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e.code)}),{id:n}=await t.json(),r=new URL(location.href);r.search=new URLSearchParams({id:n}).toString(),e.initialCode=e.code,this._permalink=r.toString(),history.replaceState(void 0,"",r),this.requestUpdate()}}async _copyPermalink(){this._permalink&&await navigator.clipboard.writeText(this._permalink)}_storeSession(){let e=this._controller.value;if(e){let{srcPrefix:t,initialCode:n,code:r}=e,o={srcPrefix:t,initialCode:n,code:r,autoRun:this._autoRun};sessionStorage.setItem(p,JSON.stringify(o))}}_loadSession(){let{srcPrefix:e,initialCode:t,code:n,autoRun:r}=u(JSON.parse(sessionStorage.getItem(p)||"{}")),o=this._controller.value;o&&(!1===r&&(this._autoRun=!1,o.runOnStart=!1,o.runOnChange=!1),o.srcPrefix=e,o.initialCode=t,o.code=n,this.requestUpdate())}async _loadFromUrl(){let e=this._controller.value;if(e){let t=new URLSearchParams(location.search),n=t.get("id"),r=t.get("state"),o=t.get("srcPrefix");n&&(this._gistId=n);let{srcPrefix:i,code:a}=await (n?this._sessionFromApi(n):r?this._sessionFromState(r):void 0)||{},s=o||i;if(void 0!==s&&void 0!==a&&(e.srcPrefix!==s||!m(e.initialCode,a))){try{if(!opener?.location?.origin||opener?.location?.origin!==location.origin)throw Error("origin doesn't match")}catch{this._autoRun=!1,e.runOnStart=!1,e.runOnChange=!1}e.srcPrefix=s,e.initialCode=a,e.code=a,this._storeSession()}this.requestUpdate()}}async _sessionFromApi(e){let t=await fetch(`/api/v1/play/${encodeURIComponent(e)}`);if(!t.ok)return void console.error(t.statusText);let n=new URL(location.href);return n.search=new URLSearchParams({id:e}).toString(),this._permalink=n.toString(),(0,s.z)("playground",{type:"load-shared"}),u(await t.json())}async _sessionFromState(e){let{state:t}=await (0,c.a)(e);return u(JSON.parse(t||"{}"))}_editorUpdate(){this._storeSession(),this.requestUpdate()}_reportOpen(){this._reportModal.value?.showModal()}_reportCancel(){this._reportModal.value?.close()}async _reportSubmit(){await fetch("/api/v1/play/flag",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:this._gistId,reason:this._reportModal.value?.querySelector("textarea")?.value})}),this._reportModal.value?.close()}connectedCallback(){super.connectedCallback(),this._user.run()}render(){let{code:e,initialCode:t}=this._controller.value??{},n=Object.values(e??{}).some(Boolean),r=Object.values(t??{}).some(Boolean),a=r&&!m(e,t);return(0,o.dy)`
      <div class="wrapper">
        <mdn-play-controller
          ${(0,i.i)(this._controller)}
          run-on-start
          run-on-change
        >
          <section>
            <aside>
              <h1>${this.l10n`Playground`}</h1>
              <menu>
                <mdn-button
                  variant="secondary"
                  @click=${this._format}
                  ?disabled=${!n}
                  >${this.l10n`Format`}</mdn-button
                >
                <mdn-button
                  variant="secondary"
                  @click=${this._run}
                  ?disabled=${!n}
                  >${this.l10n`Run`}</mdn-button
                >
                <mdn-button
                  variant="secondary"
                  @click=${this._share}
                  ?disabled=${!n}
                  >${this.l10n`Share`}</mdn-button
                >
                <mdn-button
                  variant="secondary"
                  @click=${this._clear}
                  ?disabled=${!(n||a)}
                  >${this.l10n`Clear`}</mdn-button
                >
                ${r?(0,o.dy)`<mdn-button
                      variant="secondary"
                      @click=${this._reset}
                      ?disabled=${!a}
                      >${this.l10n`Reset`}</mdn-button
                    >`:o.Ld}
              </menu>
            </aside>
            <details open>
              <summary>HTML</summary>
              <mdn-play-editor
                language="html"
                @update=${this._editorUpdate}
              ></mdn-play-editor>
            </details>
            <details open>
              <summary>CSS</summary>
              <mdn-play-editor
                language="css"
                @update=${this._editorUpdate}
              ></mdn-play-editor>
            </details>
            <details open>
              <summary>JAVASCRIPT</summary>
              <mdn-play-editor
                language="js"
                @update=${this._editorUpdate}
              ></mdn-play-editor>
            </details>
          </section>
          <section class="playground__runner-console">
            ${this._gistId?(0,o.dy)`<mdn-button @click=${this._reportOpen} variant="plain">
                  Seeing something inappropriate?
                </mdn-button>`:o.Ld}
            <mdn-play-runner></mdn-play-runner>
            <div class="playground__console">
              <div>${this.l10n`Console`}</div>
              <mdn-play-console></mdn-play-console>
            </div>
          </section>
          <mdn-placement-sidebar horizontal></mdn-placement-sidebar>
        </mdn-play-controller>
      </div>
      <mdn-modal ${(0,i.i)(this._shareModal)} class="share">
        <section>
          <h2>${this.l10n`Share Markdown`}</h2>
          <mdn-button variant="secondary" @click=${this._copyMarkdown}
            >${this.l10n`Copy markdown to clipboard`}</mdn-button
          >
        </section>
        <section>
          <h2>${this.l10n`Share your code via Permalink`}</h2>
          ${this._user.render({initial:()=>(0,o.dy)`<mdn-login-button></mdn-login-button>`,pending:()=>(0,o.dy)`<mdn-login-button></mdn-login-button>`,complete:e=>e.isAuthenticated?this._permalink&&!a?(0,o.dy)`
                      <input .value=${this._permalink} />
                      <mdn-button
                        variant="secondary"
                        @click=${this._copyPermalink}
                        >${this.l10n`Copy to clipboard`}</mdn-button
                      >
                    `:(0,o.dy)`<mdn-button @click=${this._createPermalink}
                      >${this.l10n`Create link`}</mdn-button
                    >`:(0,o.dy)`<mdn-login-button></mdn-login-button>`})}
        </section>
      </mdn-modal>
      <mdn-modal ${(0,i.i)(this._reportModal)} class="report">
        <section>
          <p>Report this malicious or inappropriate shared playground.</p>
          <label>
            Can you please share some details on what's wrong with this content:
            <textarea></textarea>
          </label>
        </section>
        <section>
          <mdn-button variant="secondary" @click=${this._reportCancel}
            >Cancel</mdn-button
          >
          <mdn-button @click=${this._reportSubmit}>Report</mdn-button>
        </section>
      </mdn-modal>
    `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function u(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},61619:function(e,t,n){n.d(t,{z:()=>o});var r=n(26362);function o(e,{type:t,label:n}){r.Z.recordElementClick({id:e,type:t,label:n})}},15383:function(e,t,n){n.d(t,{Z:()=>c});var r=n(14703),o=n(8081),i=n.n(o),a=n(23645),s=n.n(a),l=n(54681),d=s()(i());d.i(l.Z),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner" "left place";grid-template-columns:1fr 1fr;grid-template-rows:1fr min-content;height:100%}.wrapper section{display:flex;flex-direction:column;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 769px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.iv)([d.toString()])}};
//# sourceMappingURL=37.861b2d8a267c60ce.js.map