@sutton-signwriting/sgnw-components
Version:
a javascript package of web components for use with the SignWriting script.
212 lines (207 loc) • 7.95 kB
JavaScript
/*!
* The Sutton SignWriting Web Components
*/
'use strict';
var index = require('./index-bYThyFO7.js');
var icons = require('./icons-CMQ-MKwR.js');
const fswPaletteCss = () => `.sc-fsw-palette-h{width:100%;height:100%;display:flex}.sc-fsw-palette-h nav.sc-fsw-palette{height:100%;width:100%;flex:0 0 10%;display:flex;align-items:center}.sc-fsw-palette-h nav.sc-fsw-palette fsw-button.sc-fsw-palette,.sc-fsw-palette-h nav.sc-fsw-palette div.sc-fsw-palette{flex:25%;height:100%;width:100%;margin:1%}.sc-fsw-palette-h main.sc-fsw-palette{flex:0 0 90%;width:100%;height:100%;display:grid}.horizontal.sc-fsw-palette-h{flex-direction:row}.horizontal.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:column}.horizontal.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(10,1fr)}.horizontal.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-columns:repeat(16,1fr)}.vertical.sc-fsw-palette-h{flex-direction:column}.vertical.sc-fsw-palette-h nav.sc-fsw-palette{flex-direction:row}.vertical.sc-fsw-palette-h main.sc-fsw-palette{grid-auto-flow:column}.vertical.small.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.medium.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(10,1fr)}.vertical.large.sc-fsw-palette-h main.sc-fsw-palette{grid-template-rows:repeat(16,1fr)}`;
const FswPalette = class {
constructor(hostRef) {
index.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 = index.iswa2010FSW;
/** 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 = index.padArrayInner(keys, 10, 16);
}
keys = index.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 = index.padArrayInner(keys, 10, 16);
}
keys = index.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 = 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 = (index.hasSize(icons.convertExports.key2id(lower1)) || index.hasSize(icons.convertExports.key2id(lower2)));
if (!this.lower) {
r2 = 8;
}
else {
r1 = 8;
}
}
if (this.size == "small") {
this.hasMore = index.hasSize(icons.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(key);
}
}
if (this.size != "large") {
keys = index.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 (index.h(index.Host, { key: 'daf9f849406f889c8e248bbd31ad959399b146d6', class: this.orientation + " " + this.size }, index.h("nav", { key: '44db475c1b05e9eba9b3c6140d76db96e43918e0' }, index.h("fsw-button", { key: '127f68408c406871a8e0cb6a2a50c3ab2f7c021f', svg: icons.HomeIcon, onClick: () => { this.group = null; } }), this.group ? index.h("fsw-button", { svg: icons.ChevronUpIcon, onClick: () => {
if (this.base) {
this.base = null;
this.more = null;
}
else {
this.group = null;
}
} }) : index.h("div", null), this.hasMore ? index.h("fsw-button", { svg: this.more ? icons.ArrowLeftIcon : icons.ArrowRightIcon, onClick: () => { this.more = !this.more; } }) : (this.size == "small" ? index.h("div", null) : null), this.hasLower ? index.h("fsw-button", { svg: this.lower ? icons.ArrowUpIcon : icons.ArrowDownIcon, onClick: () => { this.lower = !this.lower; } }) : (this.size != "large" ? index.h("div", null) : null)), index.h("main", { key: '3994c70708d811621084a62e4a0532a1f489022d' }, this.palette.map(key => index.h("fsw-palette-symbol", { symbol: key })))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"size": [{
"parseSizeProp": 0
}],
"group": [{
"watchGroup": 0
}],
"base": [{
"watchBase": 0
}],
"more": [{
"watchMore": 0
}],
"lower": [{
"watchLower": 0
}]
}; }
};
FswPalette.style = fswPaletteCss();
exports.fsw_palette = FswPalette;