@sutton-signwriting/signmaker
Version:
Create and edit signs using Formal SignWriting in ASCII (FSW) or SignWriting in Unicode (SWU)
259 lines (248 loc) ⢠7.96 kB
JavaScript
// Receive Signal
function receiveMessage(event) {
M_in.push(event.data)
m.redraw();
if (event.origin === "http://localhost:5000"
|| event.origin === "https://sutton-signwriting.github.io/signmaker") {
// inspect event.data
}
}
// event listener for message event
window.addEventListener("message", receiveMessage, false);
var M_in = [];
var M_out = [];
function iframesize2style(val){
return !val?'':val.split('x').map((num,i) => {
switch(i) {
case 0:
return 'width:' + parseInt(num) + 'px;';
case 1:
return 'height:' + parseInt(num) + 'px;';
default:
return '';
}
}).join('')
}
//ST state terminals are not hashes for a link or iframe
var ST = ['server','iframesize','view'];
//SS state split, where key is a reference to a value
var SS = ['server'];
//S values are saved by value
// values are hashed to demo a link and iframe
var S = {
'server': undefined,
'view': undefined,
'iframesize': undefined,
'ui': undefined,
'alphabet': undefined,
'fsw': undefined,
'swu': undefined,
'styling': undefined,
'grid': undefined,
'skin': undefined,
'tab': undefined
}
// state defaults
var SD = {
'server': {
'dot': './',
'local': window.location.origin + window.location.pathname.replace(/\/demo(\.html)?$/,"/"),
'public': 'https://sutton-signwriting.github.io/signmaker/'
// 'backup': ''
},
// 'mode': {
// 'svg': 'svg',
// 'png': 'png',
//
// },
'view': {
'index.html': 'signmaker',
// 'text.html': 'signtext',
'README.html': 'read me',
'CHANGELOG.html': 'change log'
},
'iframesize': {
'400x200': 'tiny',
'640x360': 'small',
'1024x726': 'medium',
'': 'full'
},
'ui': {
'en': 'English',
'ase': 'ASL',
'ptBR': 'Portuguese'
},
'alphabet': {
'iswa': 'ISWA 2010',
'ase': 'ASL'
},
'fsw': {
'AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475': 'sign',
'AS15a21S15a07S21100S2df04S2df14M521x538S15a07494x488S15a21498x489S2df04498x517S2df14497x461S21100479x486': 'becomes',
'AS1f010S10018S20600M519x524S10018485x494S1f010490x494S20600481x476': "word"
},
'swu': {
'đ ńńńĽńŠđ đ¤đ¤ŠńŠđŁľđ¤ńđ¤đŁ¤ńĽđ¤đ¤ńđŁŽđŁ': 'sign',
'đ ń˘ńńĄńĽńľđ đ¤đ¤Źńđ¤đŁşń˘đ¤đŁťńĽđ¤đ¤ńľđ¤đŁńĄđŁąđŁ¸': 'becomes',
'đ ń
¨ńńđ đ¤đ¤ńđŁˇđ¤ń
¨đŁźđ¤ńđŁłđŁŽ': 'word'
},
'styling': {
'-CZ2': 'colorize',
'-CP10G_lightblue_Zx': 'complex'
},
'grid': {
'0': '0',
'1': '1',
'2': '2',
},
'skin': {
'inverse': 'inverse',
'colorful': 'colorful'
},
'tab': {
'more': 'more',
'png': 'png',
'svg': 'svg'
}
}
//find state key for value
function hash(){
return "?" + Object.keys(S).map(key => {
return S[key]?key+"="+S[key]:undefined
}).filter(item => (item !== undefined)).join("&")
}
function hashSet(){
// history.replaceState(null, null, document.location.pathname + '#' + hash);
history.pushState(null, null, document.location.pathname + '#' + hash());
// window.location.hash = hash;
}
function demohash(){
return "?" + Object.keys(S).map(key => {
return S[key]?key+"="+S[key]:undefined
}).filter(item => (item !== undefined)).filter(item => !ST.includes(item.split("=")[0])).join("&")
}
window.onhashchange = hashChange;
function hashChange(event){
var parts;
var hashed = {}
var iloc = window.location.href.indexOf('#?');
if (iloc>-1) {
var hashes = decodeURI(window.location.href.slice(iloc + 2)).split('&');
for(var i = 0; i < hashes.length; i++) {
parts = hashes[i].split('=');
if (parts[0]) hashed[parts[0]] = parts[1];
}
}
if (hashed['server'] === undefined) { hashed['server'] = 'local';}
if (hashed['iframesize'] === undefined) { hashed['iframesize'] = '400x200';}
if (hashed['view'] === undefined) { hashed['view'] = 'index.html';}
if (hashed['view'] == "README.html" || hashed['view'] == "CHANGELOG.html") {
hashed['iframesize'] = '';
}
Object.keys(S).map(key => S[key] = hashed[key])
}
hashChange();
var root = document.body
var ButtonS = {
view: function(vnode) {
return m('button', {
class: SS.includes(vnode.attrs.lookup)?(
(S[vnode.attrs.lookup]==vnode.attrs.text)?'selected':''
):(
(S[vnode.attrs.lookup]==vnode.attrs.value)?'selected':''
),
onclick: function(e){
if (!SS.includes(vnode.attrs.lookup)){
S[vnode.attrs.lookup] = vnode.attrs.value;
} else {
S[vnode.attrs.lookup] = vnode.attrs.text;
}
if ((vnode.attrs.lookup == "fsw" || vnode.attrs.lookup == "swu") && vnode.attrs.value == ""){
document.getElementById('signmaker').contentWindow.postMessage({'fsw':''})
}
if (vnode.attrs.lookup == "view"){
if (vnode.attrs.value == "README.html" || vnode.attrs.value == "CHANGELOG.html") {
S['iframesize'] = '';
}
}
hashSet();
}
}, vnode.attrs.text)
}
}
var ButtonM = {
view: function(vnode) {
return m('button', {
onclick: function(e){
var msg = {[vnode.attrs.state]: vnode.attrs.value};
M_out.push(msg);
document.getElementById('signmaker').contentWindow.postMessage(msg)
m.redraw();
}
}, vnode.attrs.text)
}
}
var IFrame = {
view: function(vnode) {
return m('iframe#signmaker', {
style: vnode.attrs.style,
src: vnode.attrs.src,
onclick: function(e){
console.log("touched");
},
onchange: function(e){
console.log("changed")
console.log(e)
}
})
}
}
var Demo = {
view: function() {
return [
m('h2','URL Parameters'),
Object.keys(SD).map( key => {
return m('span.boxed',[
m('span',key),
ST.includes(key)?'':m(ButtonS,{lookup: key,value:undefined,text:'none'}),
Object.keys(SD[key]).map(name => {
return m(ButtonS,{
lookup:key,
value:name,
text: !SS.includes(key)?SD[key][name]:name
})
}),
m('span.swu'," (" + (S[key]?S[key]:'') + ") ")
])
}),
m('div',{style:"clear:both;height:1%"}),
m('hr'),
m('pre', m('code.swu','<a href="' + SD['server'][S['server']] + S['view'] + "#" + demohash() + '">a link</a>')),
m('a',{"style":"","href":SD['server'][S['server']] + S['view'] + "#" + demohash()},"a link"),
m('pre', m('code.swu','<iframe ' + (S['iframesize']?('style:"' + iframesize2style(S['iframesize']) + '" '):'') + ' src:"' + SD['server'][S['server']] + S['view'] + "#" + demohash() + '"></iframe>')),
m(IFrame,{
"style": iframesize2style(S['iframesize']),
src:SD['server'][S['server']] + S['view'] + '#' + demohash()
}),
m('hr'),
m('h2',"Messages Received"),
M_in.map((msg,i) => m("li.swu", JSON.stringify(msg))),
m('hr'),
m('h2',"Messages Sent"),
M_out.map((msg,i) => m("li.swu", JSON.stringify(msg))),
Object.keys(SD).filter(item => !ST.includes(item)).map( key => {
return m('span.boxed',[
m('span',key),
m(ButtonM,{state: key,value:'',text:'none'}),
Object.keys(SD[key]).map(name => {
return m(ButtonM,{state:key,value:name,text:SD[key][name]})
})
])
}),
m('div',{style:"clear:both;height:1%"}),
// m('iframe',{"style":"width:200px;height:400px", src:T['server'] + "#" + demohash()}),
// m('iframe',{src:T['server'] + "#" + demohash()})
]
}
}
m.mount(root, Demo);