TYPO3 v15 dev-main snapshot ()

Resources/Public/JavaScript/element/qrcode-element.js

@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+import{property as d,state as h,customElement as b}from"lit/decorators.js";import{LitElement as y,html as s,nothing as f}from"lit";import v from"@typo3/core/ajax/ajax-request.js";import"@typo3/backend/element/spinner-element.js";import"@typo3/backend/element/icon-element.js";import"@typo3/backend/copy-to-clipboard.js";import{unsafeHTML as g}from"lit/directives/unsafe-html.js";import i from"~labels/backend.qrcode";var a=function(t,e,o,l){var c=arguments.length,r=c<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,o):l,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(t,e,o,l);else for(var m=t.length-1;m>=0;m--)(p=t[m])&&(r=(c<3?p(r):c>3?p(e,o,r):p(e,o))||r);return c>3&&r&&Object.defineProperty(e,o,r),r},u;(function(t){t[t.small=64]="small",t[t.medium=128]="medium",t[t.large=256]="large",t[t.mega=512]="mega"})(u||(u={}));let n=class extends y{constructor(){super(),this.content="",this.showDownload=!1,this.showUrl=!1,this.size=u.small,this.qrcodePreview=s`<typo3-backend-spinner size=large></typo3-backend-spinner>`,document.addEventListener("copy-to-clipboard-success",this.showCopySuccess.bind(this)),document.addEventListener("copy-to-clipboard-error",this.showCopyError.bind(this))}connectedCallback(){super.connectedCallback(),this.loadQrCode()}render(){return s`<div class=preview>${this.qrcodePreview}</div>${this.getUrlSection()} ${this.getControls()}`}createRenderRoot(){return this}getUrlSection(){if(!this.showUrl)return f;const e=i.get("qrcode.url"),o=i.get("qrcode.copyUrl");return s`<div class="form-group url-info-section"><label class=form-label>${e}</label><div class=input-group><input type=text class=form-control readonly .value=${this.content}><typo3-copy-to-clipboard text=${this.content} class="btn btn-default" silent><typo3-backend-icon identifier=actions-clipboard size=small></typo3-backend-icon>${o}</typo3-copy-to-clipboard></div></div>`}getControls(){if(!this.showDownload)return s`${f}`;const e=i.get("qrcode.format.png"),o=i.get("qrcode.format.svg"),l=i.get("qrcode.format"),c=i.get("qrcode.size"),r=i.get("qrcode.download");return s`<form name=qrcode-download method=POST action=${TYPO3.settings.ajaxUrls.qrcode_download}><div class=form-row><div class=form-group><input name=content type=hidden value=${this.content}> <label class=form-label>${l}</label> <select name=format class=form-select><option value=svg>${o}</option><option value=png>${e}</option></select></div><div class=form-group><label class=form-label>${c}</label> <select name=size class=form-select>${this.getSizeOptions()}</select></div><div class=form-group><button type=submit class="btn btn-primary">${r}</button></div></div></form>`}getSizeOptions(){return Object.entries(u).filter(([,e])=>typeof e=="number").map(([e,o])=>s`<option value=${e}>${o}x${o}</option>`)}async loadQrCode(){if(this.content===""){this.qrcodePreview=s`<typo3-backend-icon identifier=default-not-found size=small></typo3-backend-icon>`;return}await new v(TYPO3.settings.ajaxUrls.qrcode_generator).withQueryArguments({content:this.content,size:this.size}).get({cache:"no-cache"}).then(async e=>{this.qrcodePreview=s`${g(await e.resolve())}`})}showCopySuccess(){const e=this.querySelector(".url-info-section");e!==null&&(e.classList.add("copy-success"),setTimeout(()=>e.classList.remove("copy-success"),500))}showCopyError(){const e=this.querySelector(".url-info-section");e!==null&&(e.classList.add("copy-error"),setTimeout(()=>e.classList.remove("copy-error"),750))}};a([d({type:String,reflect:!0})],n.prototype,"content",void 0),a([d({type:Boolean,reflect:!0,attribute:"show-download"})],n.prototype,"showDownload",void 0),a([d({type:Boolean,reflect:!0,attribute:"show-url"})],n.prototype,"showUrl",void 0),a([d({type:String,reflect:!0})],n.prototype,"size",void 0),a([h()],n.prototype,"qrcodePreview",void 0),n=a([b("typo3-qrcode")],n);export{n as QrCodeElement};