[DEV] Add a customize glyph example

Francois-Xavier Gentilhomme · Francois-Xavier Gentilhomme · commit d1d2ed0039cc · 2017-08-31T16:15:54.000+02:00
diff --git a/docs/components/myscript-text-web/examples/experimental/customize_glyph.html b/docs/components/myscript-text-web/examples/experimental/customize_glyph.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <title>Customize style</title>
+
+    <link rel="stylesheet" href="../examples.css">
+
+    <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
+    <link rel="import" href="../../myscript-text-web.html">
+</head>
+
+<body>
+<!-- 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-text-web scheme="https"
+                   host="newcloud.myscript.com"
+                   applicationkey="7d223f9e-a3cb-4213-ba4b-85e930605f8b"
+                   hmackey="5ab1935e-529a-4d48-a695-158450e52b13">
+</myscript-text-web>
+<script>
+    const component = document.querySelector('myscript-text-web');
+    // Set the glyph color to the current theme
+    component.theme = Object.assign({}, component.theme, {
+        glyph: {
+            color: '#000000'
+        }
+    });
+</script>
+</body>
+
+</html>
diff --git a/docs/components/myscript-text-web/examples/index.html b/docs/components/myscript-text-web/examples/index.html
@@ -60,6 +60,13 @@ <h2>V3 - CDK v3.2</h2>
             <a href="v3/superimposed.html">Configuration and use superimposed - letters write on top of the others</a>
         </li>
     </ul>
+    <h2>Experimental</h2>
+    <div>Demonstration of existing technology still limited. May not work. Contact us if you are willing to use it.</div>
+    <ul>
+        <li>
+            <a href="experimental/customize_glyph.html">Customize glyph color</a>
+        </li>
+    </ul>
     <h2>Development</h2>
     <ul>
         <li>
diff --git a/examples/experimental/customize_glyph.html b/examples/experimental/customize_glyph.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <title>Customize style</title>
+
+    <link rel="stylesheet" href="../examples.css">
+
+    <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
+    <link rel="import" href="../../myscript-text-web.html">
+</head>
+
+<body>
+<!-- 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-text-web scheme="https"
+                   host="newcloud.myscript.com"
+                   applicationkey="7d223f9e-a3cb-4213-ba4b-85e930605f8b"
+                   hmackey="5ab1935e-529a-4d48-a695-158450e52b13">
+</myscript-text-web>
+<script>
+    const component = document.querySelector('myscript-text-web');
+    // Set the glyph color to the current theme
+    component.theme = Object.assign({}, component.theme, {
+        glyph: {
+            color: '#000000'
+        }
+    });
+</script>
+</body>
+
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -60,6 +60,13 @@ <h2>V3 - CDK v3.2</h2>
             <a href="v3/superimposed.html">Configuration and use superimposed - letters write on top of the others</a>
         </li>
     </ul>
+    <h2>Experimental</h2>
+    <div>Demonstration of existing technology still limited. May not work. Contact us if you are willing to use it.</div>
+    <ul>
+        <li>
+            <a href="experimental/customize_glyph.html">Customize glyph color</a>
+        </li>
+    </ul>
     <h2>Development</h2>
     <ul>
         <li>
