@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
171 lines (167 loc) • 8.39 kB
JavaScript
import{p as e,w as t,h as p,c as o,L as i}from"./pb-mixin-886ece32.js";import{t as a}from"./pb-i18n-4cc00bfe.js";import"./paper-listbox-5f5d1cec.js";import"./iron-form-dfb3e3b1.js";import"./paper-checkbox-645e1077.js";import"./paper-inky-focus-behavior-fa16796b.js";class n extends(e(i)){static get properties(){return Object.assign(Object.assign({},super.properties),{},{error:{type:String},url:{type:String},templates:{type:Array},odds:{type:Array}})}constructor(){super(),this.templates=[],this.odds=[]}connectedCallback(){super.connectedCallback()}firstUpdated(){const e=this.shadowRoot.getElementById("form"),p=this.shadowRoot.getElementById("defaultView"),o=this.shadowRoot.getElementById("index"),i=this.shadowRoot.getElementById("template");this.subscribeTo("pb-i18n-update",e=>{const t=this.shadowRoot.querySelector("#defaultView paper-listbox");let p=t.selected;t.selected=void 0,t.selected=p;const o=this.shadowRoot.querySelector("#index paper-listbox");p=o.selected,o.selected=void 0,o.selected=p},[]),t("pb-page-ready",e=>{let t;t=this.minApiVersion("1.0.0")?e.endpoint+"/api/templates":e.endpoint+"/modules/lib/components-list-templates.xql",fetch(t,{method:"GET",mode:"cors",credentials:"same-origin"}).then(e=>e.json()).then(e=>{this.templates=e}),t=this.minApiVersion("1.0.0")?e.endpoint+"/api/odd":e.endpoint+"/modules/lib/components-list-odds.xql",fetch(t,{method:"GET",mode:"cors",credentials:"same-origin"}).then(e=>e.json()).then(e=>{this.odds=e});const p=this.shadowRoot.querySelector("form");this.minApiVersion("1.0.0")?p.action=e.endpoint+"/api/apps/generate":p.action=e.endpoint+"/modules/components-generate.xql"}),e.addEventListener("iron-form-presubmit",(function(){const e=p.selectedItem.getAttribute("value");this.request.body["default-view"]=e,this.request.body.index=o.selectedItem.getAttribute("value"),this.request.body.template=i.selectedItem.getAttribute("value")})),e.addEventListener("iron-form-response",e=>{console.log(e),e.detail.completes.then(e=>{this.emitTo("pb-end-update");const t=e.parseResponse();if(console.log("<pb-edit-app> Received response: %o",t),t.target){const e=window.location.href.replace(/^(.*)\/tei-publisher\/.*/,"$1");this.url=`${e}/${this.shadowRoot.querySelector("paper-input[name=abbrev]").value}`,this.error=null}else this.error=t.description;this.shadowRoot.getElementById("dialog").open()})}),e.addEventListener("iron-form-error",e=>{this.emitTo("pb-end-update"),console.log("<pb-edit-app> Received response: %o",e.detail.request.response),this.error=e.detail.request.response.description,this.shadowRoot.getElementById("dialog").open()}),e.addEventListener("iron-form-invalid",()=>this.emitTo("pb-end-update"))}_doSubmit(){this.emitTo("pb-start-update");this.shadowRoot.getElementById("form").submit()}render(){return p`
<iron-form id="form">
<form method="POST" accept="application/json" enctype="application/json">
<fieldset>
<legend>${a("document.selectODD")}</legend>
${this.odds.map(e=>p`<paper-checkbox name="odd" value="${e.name}">${e.label}</paper-checkbox>`)}
</fieldset>
<paper-input
name="uri"
type="url"
required
placeholder="https://e-editiones.org/apps/my-simple-app"
label="${a("appgen.uri")}"
auto-validate
></paper-input>
<paper-input
id="abbrev"
name="abbrev"
pattern="[a-zA-Z0-9-_]+"
required
placeholder="${a("appgen.abbrev.placeholder")}"
label="${a("appgen.abbrev.label")}"
auto-validate
></paper-input>
<paper-input
name="data-collection"
pattern="[a-zA-Z0-9-_/]+"
placeholder="data"
label="${a("appgen.collection")}"
auto-validate
></paper-input>
<paper-input
name="title"
required
placeholder="${a("appgen.title.label")}"
label="${a("appgen.title.help")}"
></paper-input>
<fieldset>
<legend>${a("appgen.template.help")}</legend>
<paper-dropdown-menu
id="template"
label="${a("appgen.template.label")}"
name="template"
>
<paper-listbox
slot="dropdown-content"
class="dropdown-content"
attr-for-selected="value"
selected="view.html"
>
${this.templates.map(e=>p`<paper-item value="${e.name}">${e.title}</paper-item>`)}
</paper-listbox>
</paper-dropdown-menu>
</fieldset>
<fieldset>
<legend>${a("appgen.view.help")}</legend>
<paper-dropdown-menu
id="defaultView"
label="${a("appgen.label")}"
name="default-view"
>
<paper-listbox
slot="dropdown-content"
class="dropdown-content"
selected="div"
attr-for-selected="value"
>
<paper-item value="div">${a("appgen.view.div")}</paper-item>
<paper-item value="page">${a("appgen.view.page")}</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</fieldset>
<fieldset>
<legend>${a("appgen.index.help")}</legend>
<paper-dropdown-menu id="index" label="${a("appgen.index.label")}" name="index">
<paper-listbox
slot="dropdown-content"
class="dropdown-content"
selected="tei:div"
attr-for-selected="value"
>
<paper-item value="tei:div">${a("appgen.index.index-div")}</paper-item>
<paper-item value="tei:text">${a("appgen.index.index-text")}</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</fieldset>
<fieldset>
<legend>${a("appgen.account.user")}</legend>
<paper-input
name="owner"
required
placeholder="${a("login.user")}"
label="${a("appgen.account.owner")}"
auto-validate
></paper-input>
<paper-input
name="password"
type="password"
required
placeholder="${a("login.password")}"
label="${a("appgen.account.password")}"
auto-validate
></paper-input>
</fieldset>
<paper-button id="submit" ="${this._doSubmit}"
><iron-icon icon="save"></iron-icon> ${a("appgen.submit")}</paper-button
>
</form>
</iron-form>
<paper-dialog id="dialog">
<h2>${a("appgen.dialog.title")}</h2>
<div id="dialogContent">
${this.error?p`<div id="error">${this.error}</div>`:p`<a href="${this.url}" target="_blank">
<paper-button
><iron-icon icon="icons:open-in-new"></iron-icon> ${a("appgen.open")}</paper-button
>
</a>
<p>${a("appgen.success")}</p>`}
</div>
<div class="buttons">
<paper-button dialog-dismiss autofocus>${a("dialogs.close")}</paper-button>
</div>
</paper-dialog>
`}static get styles(){return o`
:host {
display: block;
}
paper-dropdown-menu {
width: 100%;
max-width: 864px;
}
fieldset {
margin-top: 16px;
margin-bottom: 16px;
padding: 0;
border: 0;
}
legend {
color: #909090;
}
paper-checkbox {
display: block;
margin-left: 20px;
margin-top: 10px;
}
paper-dialog {
min-width: 420px;
max-width: 640px;
min-height: 128px;
}
paper-dialog h2 {
background-color: #607d8b;
padding: 16px 8px;
margin-top: 0;
color: #f0f0f0;
}
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.content a {
display: block;
flex: 1 0;
}
`}}customElements.define("pb-edit-app",n);export{n as PbEditApp};