@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
239 lines (234 loc) • 7.93 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as convert, H as HomeIcon, C as ChevronUpIcon, A as ArrowLeftIcon, a as ArrowRightIcon, b as ArrowUpIcon, d as ArrowDownIcon } from './icons.js';
import { d as iswa2010SWU, p as padArrayInner, b as padArray, h as hasSize } from './global.js';
import { d as defineCustomElement$3 } from './sgnw-button2.js';
import { d as defineCustomElement$2 } from './sgnw-palette-symbol2.js';
const sgnwPaletteCss = ".sc-sgnw-palette-h{width:100%;height:100%;display:flex}.sc-sgnw-palette-h nav.sc-sgnw-palette{height:100%;width:100%;flex:0 0 10%;display:flex;align-items:center}.sc-sgnw-palette-h nav.sc-sgnw-palette fsw-button.sc-sgnw-palette,.sc-sgnw-palette-h nav.sc-sgnw-palette div.sc-sgnw-palette{flex:25%;height:100%;width:100%;margin:1%}.sc-sgnw-palette-h main.sc-sgnw-palette{flex:0 0 90%;width:100%;height:100%;display:grid}.horizontal.sc-sgnw-palette-h{flex-direction:row}.horizontal.sc-sgnw-palette-h nav.sc-sgnw-palette{flex-direction:column}.horizontal.small.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.medium.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.large.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-columns:repeat(16,1fr)}.vertical.sc-sgnw-palette-h{flex-direction:column}.vertical.sc-sgnw-palette-h nav.sc-sgnw-palette{flex-direction:row}.vertical.sc-sgnw-palette-h main.sc-sgnw-palette{grid-auto-flow:column}.vertical.small.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(10,1fr)}.vertical.medium.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(10,1fr)}.vertical.large.sc-sgnw-palette-h main.sc-sgnw-palette{grid-template-rows:repeat(16,1fr)}";
const SgnwPalette$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
/** orientation of palette */
this.orientation = "vertical";
this.major = 10;
this.minor = 3;
this.total = 30;
/** size of palette */
this.size = "small";
/** set of symbols */
this.alphabet = iswa2010SWU;
/** top level symbol selection */
this.group = null;
/** mid level symbol selection */
this.base = null;
/** flag for small palette */
this.more = false;
this.hasMore = false;
/** flag for small and medium palette */
this.lower = false;
this.hasLower = false;
this.palette = [];
}
parseSizeProp(newValue) {
switch (newValue) {
case "large":
this.major = 16;
this.minor = 6;
break;
case "medium":
this.major = 10;
this.minor = 6;
break;
case "small":
default:
this.major = 10;
this.minor = 3;
break;
}
this.total = this.major * this.minor;
}
watchGroup() {
if (this.group == null && this.base != null) {
this.base = null;
}
else {
this.setPalette();
}
}
watchBase() {
this.setPalette();
}
watchMore() {
this.setPalette();
}
watchLower() {
this.setPalette();
}
getPaletteAll() {
let keys = Object.keys(this.alphabet);
if (this.size == 'large') {
keys = padArrayInner(keys, 10, 16);
}
keys = padArray(keys, this.total);
this.more = false;
this.hasMore = false;
this.lower = false;
this.hasLower = false;
return keys;
}
getPaletteGroup() {
let keys = this.alphabet[this.group];
if (this.size == 'large') {
keys = padArrayInner(keys, 10, 16);
}
keys = padArray(keys, this.total);
if (keys.length > this.total) {
this.hasMore = true;
if (!this.more) {
keys = keys.slice(0, this.total);
}
else {
keys = keys.slice(this.total, this.total * 2);
}
}
else {
this.more = false;
this.hasMore = false;
}
this.lower = false;
this.hasLower = false;
return keys;
}
getPaletteBase() {
const base = convert.swu2key(this.base).slice(0, 4);
let key;
const lower1 = base + "08";
const lower2 = base + "18";
const more1 = base + "30";
let r1 = 0;
let r2 = 16;
let f1 = 0;
let f2 = 6;
if (this.size != "large") {
this.hasLower = (hasSize(convert.key2id(lower1)) || hasSize(convert.key2id(lower2)));
if (!this.lower) {
r2 = 8;
}
else {
r1 = 8;
}
}
if (this.size == "small") {
this.hasMore = hasSize(convert.key2id(more1));
if (!this.more) {
f2 = 3;
}
else {
f1 = 3;
}
}
let keys = [];
for (var f = f1; f < f2; f++) {
for (var r = r1; r < r2; r++) {
key = base + f + r.toString(16);
keys.push(convert.key2swu(key));
}
}
if (this.size != "large") {
keys = padArrayInner(keys, 8, 10);
}
return keys;
}
setPalette() {
let palette;
switch (true) {
case !this.group:
palette = this.getPaletteAll();
break;
case !!this.group && !!this.base:
palette = this.getPaletteBase();
break;
case !!this.group:
palette = this.getPaletteGroup();
break;
}
this.palette = [...palette];
}
paletteSymbolClickHandler(event) {
switch (true) {
case !this.group:
this.group = event.detail;
break;
case !!this.group && !!this.base:
break;
case !!this.group:
this.base = event.detail;
this.more = false;
}
}
componentWillLoad() {
if (typeof this.alphabet == "string") {
this.alphabet = JSON.parse(this.alphabet);
}
this.parseSizeProp(this.size);
this.setPalette();
}
render() {
return (h(Host, { class: this.orientation + " " + this.size }, h("nav", null, h("sgnw-button", { svg: HomeIcon, onClick: () => { this.group = null; } }), this.group ? h("sgnw-button", { svg: ChevronUpIcon, onClick: () => {
if (this.base) {
this.base = null;
this.more = null;
}
else {
this.group = null;
}
} }) : h("div", null), this.hasMore ? h("sgnw-button", { svg: this.more ? ArrowLeftIcon : ArrowRightIcon, onClick: () => { this.more = !this.more; } }) : (this.size == "small" ? h("div", null) : null), this.hasLower ? h("sgnw-button", { svg: this.lower ? ArrowUpIcon : ArrowDownIcon, onClick: () => { this.lower = !this.lower; } }) : (this.size != "large" ? h("div", null) : null)), h("main", null, this.palette.map(key => h("sgnw-palette-symbol", { symbol: key })))));
}
get el() { return this; }
static get watchers() { return {
"size": ["parseSizeProp"],
"group": ["watchGroup"],
"base": ["watchBase"],
"more": ["watchMore"],
"lower": ["watchLower"]
}; }
static get style() { return sgnwPaletteCss; }
}, [2, "sgnw-palette", {
"orientation": [1],
"size": [1],
"alphabet": [1],
"group": [1537],
"base": [1537],
"more": [1540],
"lower": [1540],
"palette": [32]
}, [[0, "paletteSymbolClick", "paletteSymbolClickHandler"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["sgnw-palette", "sgnw-button", "sgnw-palette-symbol"];
components.forEach(tagName => { switch (tagName) {
case "sgnw-palette":
if (!customElements.get(tagName)) {
customElements.define(tagName, SgnwPalette$1);
}
break;
case "sgnw-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "sgnw-palette-symbol":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const SgnwPalette = SgnwPalette$1;
const defineCustomElement = defineCustomElement$1;
export { SgnwPalette, defineCustomElement };