@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
355 lines (354 loc) • 9.12 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
//
import { Component, Element, Prop, State, Watch, Listen, Host, h } from '@stencil/core';
import { swu2key, key2id, key2swu } from '@sutton-signwriting/core/convert/convert';
import { iswa2010SWU, padArray, padArrayInner, hasSize } from '../../global/global';
import { HomeIcon, ChevronUpIcon, ArrowUpIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon } from '../../global/icons';
export class SgnwPalette {
constructor() {
/** 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 = 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(key2id(lower1)) || hasSize(key2id(lower2)));
if (!this.lower) {
r2 = 8;
}
else {
r1 = 8;
}
}
if (this.size == "small") {
this.hasMore = hasSize(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(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 })))));
}
static get is() { return "sgnw-palette"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() { return {
"$": ["sgnw-palette.css"]
}; }
static get styleUrls() { return {
"$": ["sgnw-palette.css"]
}; }
static get properties() { return {
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"horizontal\" | \"vertical\"",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "orientation of palette"
},
"attribute": "orientation",
"reflect": false,
"defaultValue": "\"vertical\""
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"small\" | \"medium\" | \"large\"",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "size of palette"
},
"attribute": "size",
"reflect": false,
"defaultValue": "\"small\""
},
"alphabet": {
"type": "string",
"mutable": false,
"complexType": {
"original": "object | string",
"resolved": "object | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "set of symbols"
},
"attribute": "alphabet",
"reflect": false,
"defaultValue": "iswa2010SWU"
},
"group": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "top level symbol selection"
},
"attribute": "group",
"reflect": true,
"defaultValue": "null"
},
"base": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "mid level symbol selection"
},
"attribute": "base",
"reflect": true,
"defaultValue": "null"
},
"more": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "flag for small palette"
},
"attribute": "more",
"reflect": true,
"defaultValue": "false"
},
"lower": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "flag for small and medium palette"
},
"attribute": "lower",
"reflect": true,
"defaultValue": "false"
}
}; }
static get states() { return {
"palette": {}
}; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "size",
"methodName": "parseSizeProp"
}, {
"propName": "group",
"methodName": "watchGroup"
}, {
"propName": "base",
"methodName": "watchBase"
}, {
"propName": "more",
"methodName": "watchMore"
}, {
"propName": "lower",
"methodName": "watchLower"
}]; }
static get listeners() { return [{
"name": "paletteSymbolClick",
"method": "paletteSymbolClickHandler",
"target": undefined,
"capture": false,
"passive": false
}]; }
}