|
18 | 18 | } |
19 | 19 |
|
20 | 20 | myscript-math-web { |
21 | | - height: calc(100% - 60px); |
| 21 | + border: 1px solid #D7DDE3; |
| 22 | + height: calc(40% - 60px); |
| 23 | + margin: 20px 0; |
| 24 | + } |
| 25 | + #editor2 { |
| 26 | + background-color: rgba(215,221,227,.3); |
| 27 | + } |
| 28 | + .btn-container { |
| 29 | + text-align: center; |
22 | 30 | } |
23 | 31 | </style> |
24 | 32 |
|
|
29 | 37 | </head> |
30 | 38 |
|
31 | 39 | <body> |
32 | | - <nav> |
33 | | - <span> |
34 | | - <input type="text" class="input-field" id="importContentField" data-type="application/vnd.myscript.jiix" |
35 | | - placeholder="e.g. \sqrt {\dfrac {2} {3}}"/> |
36 | | - <button class="classic-btn" id="importContent">Import</button> |
37 | | - </span> |
38 | | - </nav> |
39 | 40 | <!-- Please change applicationkey and hmackey below with those send by mail during your registration. You can re-access them by connecting to your dashboard at developer.myscript.com with your myscript account --> |
40 | | - <myscript-math-web scheme="https" |
| 41 | + <myscript-math-web id="editor1" scheme="https" |
| 42 | + host="webdemoapi.myscript.com" |
| 43 | + applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60" |
| 44 | + hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad" |
| 45 | + mimetypes='["application/x-latex", "application/vnd.myscript.jiix"]' |
| 46 | + configuration='{ "recognitionParams" : { "v4": { "export": { "jiix" : { "strokes": "true"}}}}}' |
| 47 | + touch-action="none"> |
| 48 | + </myscript-math-web> |
| 49 | + <div class="btn-container"> |
| 50 | + <button class="classic-btn" id="importContent">Import</button> |
| 51 | + </div> |
| 52 | + <myscript-math-web id="editor2" scheme="https" |
41 | 53 | host="webdemoapi.myscript.com" |
42 | 54 | applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60" |
43 | 55 | hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad" |
44 | 56 | mimetypes='["application/x-latex", "application/vnd.myscript.jiix"]' |
45 | 57 | touch-action="none"> |
46 | 58 | </myscript-math-web> |
47 | 59 | <script> |
48 | | -const component = document.querySelector('myscript-math-web'); |
49 | | -const importContent = document.getElementById('importContentField'); |
| 60 | + const component1 = document.querySelector('#editor1'); |
| 61 | + const component2 = document.querySelector('#editor2'); |
| 62 | + |
| 63 | + let toImport = null; |
| 64 | + |
| 65 | + component1.addEventListener('exported', (event) => { |
| 66 | + const exports = event.detail.exports; |
| 67 | + if(exports && exports['application/vnd.myscript.jiix']) { |
| 68 | + toImport = exports['application/vnd.myscript.jiix']; |
| 69 | + } |
| 70 | + }); |
| 71 | + |
| 72 | + component2.addEventListener('exported', () => { |
| 73 | + if (toImport === null) { |
| 74 | + component2.clear(); |
| 75 | + } |
| 76 | + }); |
50 | 77 |
|
51 | | -document.getElementById('importContent').addEventListener('click', function () { |
52 | | - component.import_(importContent.value, importContent.dataset.type); |
53 | | -}); |
54 | | -</script> |
| 78 | + document.getElementById('importContent').addEventListener('click', () => { |
| 79 | + if(toImport !== null) { |
| 80 | + component2.clear(); |
| 81 | + if(component1.editor.isEmpty) { |
| 82 | + toImport = null; |
| 83 | + } else { |
| 84 | + component2.import_(toImport, 'application/vnd.myscript.jiix'); |
| 85 | + } |
| 86 | + } |
| 87 | + }); |
| 88 | + </script> |
55 | 89 | </body> |
56 | 90 |
|
57 | 91 | </html> |
0 commit comments