[DEV] Examples improvements

RomainCscn · RomainCscn · commit 88f446281ee7 · 2018-01-02T09:54:34.000+01:00
diff --git a/examples/examples.css b/examples/examples.css
@@ -1,6 +1,7 @@
 body {
     margin: 0;
     height: 100vh;
+    font-family: "Source Sans Pro",sans-serif;
 }
 
 myscript-text-web {
@@ -11,6 +12,90 @@ myscript-text-candidates {
     font-size: x-large;
 }
 
+select {
+    width: auto;
+    padding: 0 36px 0 12px;
+    color: #131F26;
+    background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00LjQyMi4yNmMtLjIzMy0uMzM3LS42MS0uMzM3LS44NDQgMEwuMTc1IDUuMTdDLS4xNDIgNS42MjguMDQ4IDYgLjYxIDZoNi43OGMuNTU4IDAgLjc1NC0uMzcuNDM1LS44M0w0LjQyMi4yNnptLjAyIDEzLjQ3Yy0uMjM2LjM0Mi0uNjE4LjM0Ny0uODUuMDFMLjE2NyA4LjgxOEMtLjE0NiA4LjM2Ny4wNDggOCAuNjA4IDhoNi43ODNjLjU1OCAwIC43NTUuMzcuNDM3LjgzbC0zLjM4NSA0Ljl6IiBmaWxsPSIjMTMxRjI2Ii8+PC9nPjwvc3ZnPg==) right center no-repeat #fff;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2.625rem;
+    font: 600 16px "Source Sans Pro",sans-serif;
+    border: 1px solid #CED5D9;
+    border-radius: 3px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+select:focus {
+    padding: 0 35px 0 11px;
+    outline: 0;
+    border: 2px solid #1a9fff;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
+}
+
+.classic-btn {
+    height: 36px;
+    line-height: 30px;
+    padding: 0 .75em 2px;
+    font-weight: 700;
+    font-size: 18px;
+    color: #fff;
+    background: #1a9fff;
+    box-shadow: 0 2px 8px -2px rgba(0,0,0,.2);
+    cursor: pointer;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    text-decoration: none;
+    border: 2px solid transparent;
+    border-radius: 3px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    transition: all 125ms;
+}
+
+.classic-btn:active {
+    color: #fff;
+    text-decoration: none;
+    background: #0065b8;
+    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
+}
+
+.classic-btn:disabled {
+    pointer-events: none;
+    cursor: default;
+    background-color: #ececec;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+
+.input-field {
+    height: 48px;
+    padding: 2px 15px 2px;
+    font: inherit;
+    font-weight: 600;
+    border-radius: 3px;
+    -webkit-appearance: none;
+    color: #060607;
+    background: #fff none;
+    border: 1px solid #d2d6d7;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,.08);
+    transition: border-color 125ms;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.input-field:focus {
+    outline: 0;
+    padding: 1px 14px;
+    border: 2px solid #1a9fff;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
+}
+
 /* Index page style */
 
 .svg-icn {
diff --git a/examples/non-version-specific/custom_controls.html b/examples/non-version-specific/custom_controls.html
@@ -15,6 +15,7 @@
         <style>
             nav {
                 line-height: 52px;
+                padding: 0 12px;
             }
 
             myscript-text-web {
@@ -30,11 +31,11 @@
 
     <body>
         <nav>
-            <button onclick="myscriptTextWeb.undo()">undo</button>
-            <button onclick="myscriptTextWeb.redo()">redo</button>
-            <button onclick="myscriptTextWeb.clear()">clear</button>
-            <button onclick="myscriptTextWeb.exportContent()">export</button>
-            <button onclick="myscriptTextWeb.convert()">convert</button>
+            <button class="classic-btn" onclick="myscriptTextWeb.undo()">undo</button>
+            <button class="classic-btn" onclick="myscriptTextWeb.redo()">redo</button>
+            <button class="classic-btn" onclick="myscriptTextWeb.clear()">clear</button>
+            <button class="classic-btn" onclick="myscriptTextWeb.exportContent()">export</button>
+            <button class="classic-btn" onclick="myscriptTextWeb.convert()">convert</button>
         </nav>
         <paper-toast class="fit-top"></paper-toast>
         <!-- 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 -->
diff --git a/examples/non-version-specific/customize_style.html b/examples/non-version-specific/customize_style.html
@@ -17,6 +17,8 @@
                 height: 60px;
                 display: flex;
                 justify-content: space-between;
+                align-items: center;
+                padding: 0 12px;
             }
 
             nav span {
diff --git a/examples/non-version-specific/interact.html b/examples/non-version-specific/interact.html
@@ -12,26 +12,17 @@
 
     <link rel="stylesheet" href="../examples.css">
     <style>
-        * {
-          font-family: "Source Sans Pro",sans-serif;
-        }
-        nav {
-            height: 60px;
-            display: flex;
-            justify-content: space-between;
-        }
-
-        nav span {
-            display: flex;
-            width: 100%;
+        myscript-text-web {
+            height: calc(100% - 60px);
         }
 
-        input {
-            width: 100%;
+        .nextOne {
+            text-align: center;
+            height: 60px;
         }
 
-        myscript-text-web {
-            height: calc(100% - 60px);
+        #nextButton .icn {
+            margin: 0 -6px -4px 6px;
         }
 
         #question {
@@ -42,6 +33,7 @@
             border-bottom: 1px solid #D7DDE3;
             text-align: center;
         }
+
         #result {
             height: 100px;
             display: flex;
@@ -53,33 +45,6 @@
         #result span {
             font-size: xx-large;
         }
-        #nextOne {
-            text-align: center;
-            height: 60px;
-        }
-
-        #nextOne .btn {
-            line-height: 30px;
-            background-color: rgba(0,0,0,.08);
-            display: inline-block;
-            font-weight: 700;
-            font-size: 24px;
-            text-align: center;
-            white-space: nowrap;
-            color: #1a9fff;
-            text-decoration: none;
-            border: 2px solid transparent;
-            border-radius: 3px;
-            -ms-touch-action: manipulation;
-            touch-action: manipulation;
-            cursor: pointer;
-            transition: all 125ms;
-            padding: 4px 2px 4px 2px;
-        }
-
-        #nextOne .icn {
-            margin: 0 0px -2px 12px;
-        }
     </style>
 
     <!-- As web components are not fully support -->
@@ -99,18 +64,23 @@
 </svg>
 <p id="question"></p>
 <div id="result"></div>
-<div id="nextOne"></div>
+<div id= 'nextDiv' class="nextOne"></div>
     <myscript-text-web scheme="https"
                        host="webdemoapi.myscript.com"
                        applicationkey="7d223f9e-a3cb-4213-ba4b-85e930605f8b"
                        hmackey="5ab1935e-529a-4d48-a695-158450e52b13"
                        touch-action="none">
     </myscript-text-web>
 <script>
+    const nextButton = document.createElement('button');
+    nextButton.id = 'nextButton';
+    nextButton.classList.add('classic-btn');
+    nextButton.innerHTML = 'Next question<svg class="icn"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icn-play"></use></svg>';
+
     var editorElement = document.querySelector('myscript-text-web');
     var questionElement = document.getElementById('question');
     var resultElement = document.getElementById('result');
-    var nextElement = document.getElementById('nextOne');
+    var nextDivElement = document.getElementById('nextDiv');
 
     const countries = ['France', 'Italy', 'Spain', 'Argentina', 'Japan'];
     const capitals = ['Paris', 'Rome', 'Madrid', 'Buenos Aires', 'Tokyo'];
@@ -128,19 +98,18 @@
         }
     });
 
-    nextElement.addEventListener('click', function () {
+    nextButton.addEventListener('click', function () {
         changeQuestion();
     });
-
     function exportedIsAnswer(exports) {
         if (exports['text/plain'] === capitals[randomNumber]) {
             resultElement.innerHTML = '<span> Yes, it is ' + exports['text/plain'] + '.</span>';
             resultElement.style.cssText = "color: green;";
-            nextElement.innerHTML = '<a class="btn">Next question<svg class="icn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use></svg></a>';
+            nextDivElement.appendChild(nextButton);
         } else {
             resultElement.innerHTML = '<span> No, it is not ' + exports['text/plain'] + '.</span>';
             resultElement.style.cssText = "color: red;";
-            nextElement.innerHTML = '';
+            nextDivElement.innerHTML = '';
         }
     }
 
@@ -149,7 +118,7 @@
         capitals.splice(randomNumber, 1);
         randomNumber = Math.floor(Math.random() * countries.length);
         questionElement.innerHTML = countries[randomNumber] ? 'What is the capital of ' + countries[randomNumber] + ' ?' : 'You won !';
-        nextElement.innerHTML = '';
+        nextDivElement.innerHTML = '';
         editorElement.editor.clear();
     }
 
diff --git a/examples/v4/import_content.html b/examples/v4/import_content.html
@@ -14,18 +14,18 @@
     <link rel="stylesheet" href="../examples.css">
     <style>
         nav {
-            height: 60px;
             display: flex;
             justify-content: space-between;
+            align-items: center;
         }
 
-        nav span {
-            display: flex;
-            width: 100%;
+        input {
+            flex-grow: 1;
+            margin: 12px;
         }
 
-        input {
-            width: 100%;
+        button {
+            margin-right: 12px;
         }
 
         myscript-text-web {
@@ -42,11 +42,9 @@
 
 <body>
 <nav>
-            <span>
-                <input type="text" id="importContentField" data-type="text/plain"
-                       placeholder="e.g. hello world"/>
-                <button id="importContent">Import</button>
-            </span>
+        <input type="text" class="input-field" id="importContentField" data-type="text/plain"
+               placeholder="e.g. hello world"/>
+        <button class="classic-btn" id="importContent">Import</button>
 </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-text-web scheme="https"
diff --git a/myscript-text-web.html b/myscript-text-web.html
@@ -750,7 +750,6 @@
             static _generateTextConfiguration(configuration, language, mimetypes, disablesmartguide, disablesmartguidefadeout, smartguidefadeoutduration, textinputmode, resultdetail, contenttypes, subsetknowledges, userlkwords, userresources, textcandidatelistsize, wordcandidatelistsize, wordpredictionlistsize, wordcompletionlistsize, charactercandidatelistsize, enableoutoflexicon, discardcasevariations, discardaccentuationvariations, glyphdistortion, enabletagger, spellingdistortion) {
                 // FIXME: find a way to do a proper deep merge
                 const conf = Object.assign({}, configuration);
-                console.log(conf);
                 if (!conf.recognitionParams) {
                     conf.recognitionParams = {};
                 }
@@ -843,7 +842,7 @@
             }
 
             _buildConfiguration() {
-                if (this.disablesmartguide === false) {
+                if (this.disablesmartguide === false && this.apiversion !== 'V3') {
                     this.disableconvertcontrol = true;
                     this.disableclearcontrol = true;
                     this.disableexportpanel = true;

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,8 @@`
`17`	`17`	`height: 60px;`
`18`	`18`	`display: flex;`
`19`	`19`	`justify-content: space-between;`
	`20`	`+ align-items: center;`
	`21`	`+ padding: 0 12px;`
`20`	`22`	`}`
`21`	`23`
`22`	`24`	`nav span {`