@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
210 lines (206 loc) • 8.08 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
import { r as registerInstance, j as iswa2010SWU, a as padArrayInner, c as padArray, h as hasSize, d as h, H as Host, e as getElement } from './index-BAJUTSOF.js';
import { c as convertExports, H as HomeIcon, C as ChevronUpIcon, A as ArrowLeftIcon, a as ArrowRightIcon, b as ArrowUpIcon, d as ArrowDownIcon } from './icons-CIRp6scd.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** 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 = convertExports.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(convertExports.key2id(lower1)) || hasSize(convertExports.key2id(lower2)));
if (!this.lower) {
r2 = 8;
}
else {
r1 = 8;
}
}
if (this.size == "small") {
this.hasMore = hasSize(convertExports.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(convertExports.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, { key: '6c40b2b9b9df3bb46a8cef15c8f18707ca69f10f', class: this.orientation + " " + this.size }, h("nav", { key: '562325db4ea158cea1dba3f577a4d4a35de01ccd' }, h("sgnw-button", { key: '2bc045419eb5257d45d92a3ae3af7601219f04cf', 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", { key: '6726d7c52afdfe5ff4edc034296488042b9b4bf1' }, this.palette.map(key => h("sgnw-palette-symbol", { symbol: key })))));
}
get el() { return getElement(this); }
static get watchers() { return {
"size": [{
"parseSizeProp": 0
}],
"group": [{
"watchGroup": 0
}],
"base": [{
"watchBase": 0
}],
"more": [{
"watchMore": 0
}],
"lower": [{
"watchLower": 0
}]
}; }
};
SgnwPalette.style = sgnwPaletteCss();
export { SgnwPalette as sgnw_palette };