fix(examples): align with math jiix on MyScriptJS

steven.roulleau · steven.roulleau · commit 5f2372b46606 · 2018-12-05T11:23:46.000+01:00
diff --git a/src/demo-app/examples/index.html b/src/demo-app/examples/index.html
@@ -84,7 +84,7 @@ <h1>Examples</h1>
                     </div>
                     <p><strong>Handle Jiix import</strong></p>
                     <div class="center">
-                        <a href="non-version-specific/handle_exports.html" class="btn">
+                        <a href="v4/import_jiix_content.html" class="btn">
                             <svg class="icn">
                                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
                             </svg>
diff --git a/src/demo-app/examples/v4/import_jiix_content.html b/src/demo-app/examples/v4/import_jiix_content.html
@@ -18,7 +18,15 @@
             }
 
             myscript-math-web {
-                height: calc(100% - 60px);
+                border: 1px solid #D7DDE3;
+                height: calc(40% - 60px);
+                margin: 20px 0;
+            }
+            #editor2 {
+                background-color: rgba(215,221,227,.3);
+            }
+            .btn-container {
+                text-align: center;
             }
         </style>
 
@@ -29,29 +37,55 @@
     </head>
 
     <body>
-        <nav>
-            <span>
-                <input type="text" class="input-field" id="importContentField" data-type="application/vnd.myscript.jiix"
-                       placeholder="e.g. \sqrt {\dfrac {2} {3}}"/>
-                <button class="classic-btn" id="importContent">Import</button>
-            </span>
-        </nav>
         <!-- 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 -->
-        <myscript-math-web scheme="https"
+        <myscript-math-web id="editor1" scheme="https"
+                           host="webdemoapi.myscript.com"
+                           applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
+                           hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
+                           mimetypes='["application/x-latex", "application/vnd.myscript.jiix"]'
+                           configuration='{ "recognitionParams" : { "v4": { "export": { "jiix" : { "strokes": "true"}}}}}'
+                           touch-action="none">
+        </myscript-math-web>
+        <div class="btn-container">
+            <button class="classic-btn" id="importContent">Import</button>
+        </div>
+        <myscript-math-web id="editor2" scheme="https"
                            host="webdemoapi.myscript.com"
                            applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
                            hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
                            mimetypes='["application/x-latex", "application/vnd.myscript.jiix"]'
                            touch-action="none">
         </myscript-math-web>
         <script>
-const component = document.querySelector('myscript-math-web');
-const importContent = document.getElementById('importContentField');
+            const component1 = document.querySelector('#editor1');
+            const component2 = document.querySelector('#editor2');
+
+            let toImport = null;
+
+            component1.addEventListener('exported', (event) => {
+                const exports = event.detail.exports;
+                if(exports && exports['application/vnd.myscript.jiix']) {
+                    toImport = exports['application/vnd.myscript.jiix'];
+                }
+            });
+
+            component2.addEventListener('exported', () => {
+                if (toImport === null) {
+                    component2.clear();
+                }
+            });
 
-document.getElementById('importContent').addEventListener('click', function () {
-    component.import_(importContent.value, importContent.dataset.type);
-});
-</script>
+            document.getElementById('importContent').addEventListener('click', () => {
+                if(toImport !== null) {
+                    component2.clear();
+                    if(component1.editor.isEmpty) {
+                        toImport = null;
+                    } else {
+                        component2.import_(toImport, 'application/vnd.myscript.jiix');
+                    }
+                }
+            });
+        </script>
     </body>
 
 </html>
