added jiix import example

torebo · torebo · commit 14e10eb706b1 · 2018-10-24T09:39:52.000+02:00
diff --git a/src/demo-app/examples/index.html b/src/demo-app/examples/index.html
@@ -82,6 +82,20 @@ <h1>Examples</h1>
                             </svg>
                             Get source code</a>
                     </div>
+                    <p><strong>Handle Jiix import</strong></p>
+                    <div class="center">
+                        <a href="non-version-specific/handle_exports.html" class="btn">
+                            <svg class="icn">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
+                            </svg>
+                            View example</a>
+                        <a href="https://github.com/MyScript/myscript-math-web/blob/master/examples/v4/import_jiix_content.html"
+                           target="_blank" class="btn">
+                            <svg class="icn">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
+                            </svg>
+                            Get source code</a>
+                    </div>
                     <p><strong>Customize the style</strong></p>
                     <div class="center">
                         <a href="non-version-specific/customize_style.html" class="btn">
diff --git a/src/demo-app/examples/v4/import_jiix_content.html b/src/demo-app/examples/v4/import_jiix_content.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <!-- Those meta make the capture of handwriting inputs easier on mobile devices -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="HandheldFriendly" content="true"/>
+
+        <title>Import Jiix content</title>
+
+        <link rel="stylesheet" href="../examples.css">
+        <style>
+            input {
+                margin: 6px;
+            }
+
+            myscript-math-web {
+                height: calc(100% - 60px);
+            }
+        </style>
+
+        <!-- As web components are not fully support -->
+        <script src="../../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+        <!-- myscript-common-element is import to be used later -->
+        <script type="module" src="../../../../myscript-math-web.js"></script>
+    </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"
+                           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');
+
+document.getElementById('importContent').addEventListener('click', function () {
+    component.import_(importContent.value, importContent.dataset.type);
+});
+</script>
+    </body>
+
+</html>
