109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
import Store from '../modules/store.js';
|
|
import text from '../modules/text.js';
|
|
|
|
class AppBase extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
this.text = text;
|
|
this.properties = {
|
|
color: '#324BFF',
|
|
};
|
|
this.store = new Store();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.store.subscribe(this.render.bind(this));
|
|
this.render();
|
|
}
|
|
|
|
renderOptions() {
|
|
const textList = this.store.getRecords();
|
|
return textList.map((item) => `<option value=${item.id}>${item.text}</option>`).join('\n');
|
|
}
|
|
|
|
render(action = 'INIT') {
|
|
if (![Store.actions.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INIT'].includes(action)) {
|
|
return; // Only render if content changed
|
|
}
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
#title {
|
|
height: 49px;;
|
|
margin-bottom: -12px;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
#description {
|
|
text-align: center;
|
|
height: 74px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
#list {
|
|
padding: 13px;
|
|
}
|
|
#list > option {
|
|
height: 40px;
|
|
align-content: center;
|
|
padding-left: 15px;
|
|
font-size: 18px;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
#list > option:checked {
|
|
background: ${this.properties.color} linear-gradient(0deg, ${this.properties.color} 0%, ${this.properties.color} 100%);
|
|
box-shadow: 0 0 10px 100px ${this.properties.color} inset;
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
#button-bar {
|
|
display: flex;
|
|
column-gap: 35px
|
|
}
|
|
#button-bar > custom-button:last-child {
|
|
margin-left: auto;
|
|
}
|
|
#undo-char {
|
|
margin-top: 3px;
|
|
}
|
|
</style>
|
|
<main-window width="900px" height="577px" gap="35px">
|
|
<h1 id="title">${this.text.title}</h1>
|
|
<p id="description">${this.text.description}</p>
|
|
<select id="list" multiple is="item-list">
|
|
${this.renderOptions()}
|
|
</select>
|
|
<span id="button-bar">
|
|
<custom-button action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="undo-char" width="21" height="19" viewBox="0 0 5.556 5.027">
|
|
<path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
|
|
<path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
|
|
</svg>
|
|
|
|
</custom-button>
|
|
<custom-button action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</custom-button>
|
|
<custom-button action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</custom-button>
|
|
</span>
|
|
</main-window>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('app-base', AppBase);
|
|
|