1 |
|
2 |
|
3 | function receiveMessage(event) {
|
4 | M_in.push(event.data)
|
5 | m.redraw();
|
6 | if (event.origin === "http://localhost:5000"
|
7 | || event.origin === "https://sutton-signwriting.github.io/signmaker") {
|
8 |
|
9 | }
|
10 | }
|
11 |
|
12 | window.addEventListener("message", receiveMessage, false);
|
13 |
|
14 | var M_in = [];
|
15 | var M_out = [];
|
16 |
|
17 | function iframesize2style(val){
|
18 | return !val?'':val.split('x').map((num,i) => {
|
19 | switch(i) {
|
20 | case 0:
|
21 | return 'width:' + parseInt(num) + 'px;';
|
22 | case 1:
|
23 | return 'height:' + parseInt(num) + 'px;';
|
24 | default:
|
25 | return '';
|
26 | }
|
27 | }).join('')
|
28 | }
|
29 |
|
30 |
|
31 | var ST = ['server','iframesize','view'];
|
32 |
|
33 | var SS = ['server'];
|
34 |
|
35 |
|
36 |
|
37 | var S = {
|
38 | 'server': undefined,
|
39 | 'view': undefined,
|
40 | 'iframesize': undefined,
|
41 | 'ui': undefined,
|
42 | 'alphabet': undefined,
|
43 | 'fsw': undefined,
|
44 | 'swu': undefined,
|
45 | 'styling': undefined,
|
46 | 'grid': undefined,
|
47 | 'skin': undefined,
|
48 | 'tab': undefined
|
49 | }
|
50 |
|
51 |
|
52 | var SD = {
|
53 | 'server': {
|
54 | 'dot': './',
|
55 | 'local': window.location.origin + window.location.pathname.replace(/\/demo(\.html)?$/,"/"),
|
56 | 'public': 'https://sutton-signwriting.github.io/signmaker/'
|
57 |
|
58 | },
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 | 'view': {
|
65 | 'index.html': 'signmaker',
|
66 |
|
67 | 'README.html': 'read me',
|
68 | 'CHANGELOG.html': 'change log'
|
69 | },
|
70 | 'iframesize': {
|
71 | '400x200': 'tiny',
|
72 | '640x360': 'small',
|
73 | '1024x726': 'medium',
|
74 | '': 'full'
|
75 | },
|
76 | 'ui': {
|
77 | 'en': 'English',
|
78 | 'ase': 'ASL',
|
79 | 'ptBR': 'Portuguese'
|
80 | },
|
81 | 'alphabet': {
|
82 | 'iswa': 'ISWA 2010',
|
83 | 'ase': 'ASL'
|
84 | },
|
85 | 'fsw': {
|
86 | 'AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475': 'sign',
|
87 | 'AS15a21S15a07S21100S2df04S2df14M521x538S15a07494x488S15a21498x489S2df04498x517S2df14497x461S21100479x486': 'becomes',
|
88 | 'AS1f010S10018S20600M519x524S10018485x494S1f010490x494S20600481x476': "word"
|
89 | },
|
90 | 'swu': {
|
91 | 'đ ńńńĽńŠđ đ¤đ¤ŠńŠđŁľđ¤ńđ¤đŁ¤ńĽđ¤đ¤ńđŁŽđŁ': 'sign',
|
92 | 'đ ń˘ńńĄńĽńľđ đ¤đ¤Źńđ¤đŁşń˘đ¤đŁťńĽđ¤đ¤ńľđ¤đŁńĄđŁąđŁ¸': 'becomes',
|
93 | 'đ ń
¨ńńđ đ¤đ¤ńđŁˇđ¤ń
¨đŁźđ¤ńđŁłđŁŽ': 'word'
|
94 | },
|
95 | 'styling': {
|
96 | '-CZ2': 'colorize',
|
97 | '-CP10G_lightblue_Zx': 'complex'
|
98 | },
|
99 | 'grid': {
|
100 | '0': '0',
|
101 | '1': '1',
|
102 | '2': '2',
|
103 | },
|
104 | 'skin': {
|
105 | 'inverse': 'inverse',
|
106 | 'colorful': 'colorful'
|
107 | },
|
108 | 'tab': {
|
109 | 'more': 'more',
|
110 | 'png': 'png',
|
111 | 'svg': 'svg'
|
112 | }
|
113 | }
|
114 |
|
115 |
|
116 | function hash(){
|
117 | return "?" + Object.keys(S).map(key => {
|
118 | return S[key]?key+"="+S[key]:undefined
|
119 | }).filter(item => (item !== undefined)).join("&")
|
120 | }
|
121 |
|
122 | function hashSet(){
|
123 |
|
124 | history.pushState(null, null, document.location.pathname + '#' + hash());
|
125 |
|
126 | }
|
127 |
|
128 | function demohash(){
|
129 | return "?" + Object.keys(S).map(key => {
|
130 | return S[key]?key+"="+S[key]:undefined
|
131 | }).filter(item => (item !== undefined)).filter(item => !ST.includes(item.split("=")[0])).join("&")
|
132 | }
|
133 | window.onhashchange = hashChange;
|
134 | function hashChange(event){
|
135 | var parts;
|
136 | var hashed = {}
|
137 | var iloc = window.location.href.indexOf('#?');
|
138 | if (iloc>-1) {
|
139 | var hashes = decodeURI(window.location.href.slice(iloc + 2)).split('&');
|
140 | for(var i = 0; i < hashes.length; i++) {
|
141 | parts = hashes[i].split('=');
|
142 | if (parts[0]) hashed[parts[0]] = parts[1];
|
143 | }
|
144 | }
|
145 | if (hashed['server'] === undefined) { hashed['server'] = 'local';}
|
146 | if (hashed['iframesize'] === undefined) { hashed['iframesize'] = '400x200';}
|
147 | if (hashed['view'] === undefined) { hashed['view'] = 'index.html';}
|
148 | if (hashed['view'] == "README.html" || hashed['view'] == "CHANGELOG.html") {
|
149 | hashed['iframesize'] = '';
|
150 | }
|
151 | Object.keys(S).map(key => S[key] = hashed[key])
|
152 | }
|
153 | hashChange();
|
154 |
|
155 | var root = document.body
|
156 | var ButtonS = {
|
157 | view: function(vnode) {
|
158 | return m('button', {
|
159 | class: SS.includes(vnode.attrs.lookup)?(
|
160 | (S[vnode.attrs.lookup]==vnode.attrs.text)?'selected':''
|
161 | ):(
|
162 | (S[vnode.attrs.lookup]==vnode.attrs.value)?'selected':''
|
163 | ),
|
164 | onclick: function(e){
|
165 | if (!SS.includes(vnode.attrs.lookup)){
|
166 | S[vnode.attrs.lookup] = vnode.attrs.value;
|
167 | } else {
|
168 | S[vnode.attrs.lookup] = vnode.attrs.text;
|
169 | }
|
170 | if ((vnode.attrs.lookup == "fsw" || vnode.attrs.lookup == "swu") && vnode.attrs.value == ""){
|
171 | document.getElementById('signmaker').contentWindow.postMessage({'fsw':''})
|
172 | }
|
173 | if (vnode.attrs.lookup == "view"){
|
174 | if (vnode.attrs.value == "README.html" || vnode.attrs.value == "CHANGELOG.html") {
|
175 | S['iframesize'] = '';
|
176 | }
|
177 | }
|
178 | hashSet();
|
179 | }
|
180 | }, vnode.attrs.text)
|
181 | }
|
182 | }
|
183 | var ButtonM = {
|
184 | view: function(vnode) {
|
185 | return m('button', {
|
186 | onclick: function(e){
|
187 | var msg = {[vnode.attrs.state]: vnode.attrs.value};
|
188 | M_out.push(msg);
|
189 | document.getElementById('signmaker').contentWindow.postMessage(msg)
|
190 | m.redraw();
|
191 | }
|
192 | }, vnode.attrs.text)
|
193 | }
|
194 | }
|
195 | var IFrame = {
|
196 | view: function(vnode) {
|
197 | return m('iframe#signmaker', {
|
198 | style: vnode.attrs.style,
|
199 | src: vnode.attrs.src,
|
200 | onclick: function(e){
|
201 | console.log("touched");
|
202 | },
|
203 | onchange: function(e){
|
204 | console.log("changed")
|
205 | console.log(e)
|
206 | }
|
207 | })
|
208 | }
|
209 | }
|
210 | var Demo = {
|
211 | view: function() {
|
212 | return [
|
213 | m('h2','URL Parameters'),
|
214 | Object.keys(SD).map( key => {
|
215 | return m('span.boxed',[
|
216 | m('span',key),
|
217 | ST.includes(key)?'':m(ButtonS,{lookup: key,value:undefined,text:'none'}),
|
218 | Object.keys(SD[key]).map(name => {
|
219 | return m(ButtonS,{
|
220 | lookup:key,
|
221 | value:name,
|
222 | text: !SS.includes(key)?SD[key][name]:name
|
223 | })
|
224 | }),
|
225 | m('span.swu'," (" + (S[key]?S[key]:'') + ") ")
|
226 | ])
|
227 | }),
|
228 | m('div',{style:"clear:both;height:1%"}),
|
229 | m('hr'),
|
230 | m('pre', m('code.swu','<a href="' + SD['server'][S['server']] + S['view'] + "#" + demohash() + '">a link</a>')),
|
231 | m('a',{"style":"","href":SD['server'][S['server']] + S['view'] + "#" + demohash()},"a link"),
|
232 | m('pre', m('code.swu','<iframe ' + (S['iframesize']?('style:"' + iframesize2style(S['iframesize']) + '" '):'') + ' src:"' + SD['server'][S['server']] + S['view'] + "#" + demohash() + '"></iframe>')),
|
233 | m(IFrame,{
|
234 | "style": iframesize2style(S['iframesize']),
|
235 | src:SD['server'][S['server']] + S['view'] + '#' + demohash()
|
236 | }),
|
237 | m('hr'),
|
238 | m('h2',"Messages Received"),
|
239 | M_in.map((msg,i) => m("li.swu", JSON.stringify(msg))),
|
240 | m('hr'),
|
241 | m('h2',"Messages Sent"),
|
242 | M_out.map((msg,i) => m("li.swu", JSON.stringify(msg))),
|
243 | Object.keys(SD).filter(item => !ST.includes(item)).map( key => {
|
244 | return m('span.boxed',[
|
245 | m('span',key),
|
246 | m(ButtonM,{state: key,value:'',text:'none'}),
|
247 | Object.keys(SD[key]).map(name => {
|
248 | return m(ButtonM,{state:key,value:name,text:SD[key][name]})
|
249 | })
|
250 | ])
|
251 | }),
|
252 | m('div',{style:"clear:both;height:1%"}),
|
253 |
|
254 |
|
255 |
|
256 | ]
|
257 | }
|
258 | }
|
259 | m.mount(root, Demo); |
\ | No newline at end of file |