Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit 4275775

Browse files
ystreibelystreibel
committed
[DEV] Add new sample and fix superimposed
1 parent 3a75012 commit 4275775

File tree

4 files changed

+277
-181
lines changed

4 files changed

+277
-181
lines changed

‎demo/index.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@
2222
myscript-text-web {
2323
height: calc(100% - 60px);
2424
}
25-
paper-menu-button {
26-
padding: 0;
27-
width: 250px;
28-
}
2925
select {
3026
-webkit-appearance: none;
3127
-moz-appearance: none;
@@ -67,7 +63,8 @@
6763
host="webdemoapi.myscript.com"
6864
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
6965
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
70-
language="{{ language }}" unloaded>
66+
language="{{ language }}"
67+
unloaded>
7168
</myscript-text-web>
7269
</template>
7370
</body>

‎demo/superimposed.html

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<meta name="mobile-web-app-capable" content="yes">
77
<meta name="HandheldFriendly" content="true"/>
88

9-
<title>myscript-text demo</title>
9+
<title>MyScript text web demo</title>
1010

1111
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
12-
<link rel="import" href="../../iron-ajax/iron-ajax.html">
12+
<link rel="import" href="../../myscript-common-element/myscript-languages-element.html">
1313
<link rel="import" href="../myscript-text-web.html">
1414

1515
<style is="custom-style" include="iron-flex"></style>
@@ -22,13 +22,9 @@
2222
myscript-text-web {
2323
height: calc(100% - 60px);
2424
}
25-
myscript-text-web #ms-capture-canvas-0 {
25+
canvas.ms-capture-canvas.ms-canvas {
2626
background-color: rgba(255,255,255,0.50);
2727
}
28-
paper-menu-button {
29-
padding: 0;
30-
width: 250px;
31-
}
3228
select {
3329
-webkit-appearance: none;
3430
-moz-appearance: none;
@@ -51,20 +47,17 @@
5147
</style>
5248
<body touch-action="none" unresolved>
5349
<template id="app" is="dom-bind">
54-
<iron-ajax
55-
auto
56-
handle-as="json"
57-
url="languages.json"
58-
last-response="{{ languages }}"
59-
debounce-duration="300">
60-
</iron-ajax>
50+
<myscript-languages-element scheme="https"
51+
host="cloud-internal-stable.visionobjects.com"
52+
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d"
53+
languages="{{ languages }}">
54+
</myscript-languages-element>
6155
<div class="ooo-language-selector">
6256
<select onchange="select(this.value)">
6357
<template is="dom-repeat"
6458
id="languageList"
6559
items="[[ languages ]]"
66-
as="lang"
67-
filter="[[getLang(lang.value, availableLanguages)]]">
60+
as="lang">
6861
<option value="[[ lang.value ]]" selected="[[isSelected(lang.value, language)]]">[[ lang.description ]]</option>
6962
</template>
7063
</select>
@@ -73,34 +66,39 @@
7366
host="webdemoapi.myscript.com"
7467
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
7568
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
76-
inputmode="SUPERIMPOSED"
77-
recognitioncandidates="3"
78-
availablelanguages="{{ availableLanguages }}"
79-
language="{{ language }}">
69+
language="{{ language }}"
70+
textinputmode="SUPERIMPOSED"
71+
textcandidatelistsize="3">
8072
</myscript-text-web>
8173
</template>
8274
</body>
8375
<script>
8476
function select (lang) {
85-
document.getElementById('app').language = lang;
77+
var myscripttextweb = document.querySelector('myscript-text-web');
78+
myscripttextweb.unloaded = true;
79+
myscripttextweb.language = lang;
80+
myscripttextweb.unloaded = false;
8681
}
8782
(function (document) {
8883
'use strict';
8984
var template = document.querySelector('#app');
9085
template.addEventListener('template-bound', function () {
9186
console.log('Our app is ready to rock!');
9287
});
93-
template.getLang = function (lang, availableLanguages) {
94-
return availableLanguages.indexOf(lang) > -1;
95-
};
9688
template.isSelected = function (lang, language) {
97-
return lang === language;
89+
return lang === language;
9890
};
99-
10091
// See https://github.com/Polymer/polymer/issues/1381
10192
window.addEventListener('WebComponentsReady', function () {
10293
document.querySelector('body').removeAttribute('unresolved');
10394
});
95+
// Programmatic loading to set the default language
96+
window.addEventListener("load", function (event) {
97+
window.setTimeout(function () {
98+
document.querySelector('myscript-text-web').unloaded = false;
99+
}, 3000);
100+
});
101+
104102
})(document);
105103
</script>
106104
</html>

‎demo/text-properties.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
5+
<meta name="apple-mobile-web-app-capable" content="yes">
6+
<meta name="mobile-web-app-capable" content="yes">
7+
<meta name="HandheldFriendly" content="true"/>
8+
9+
<title>MyScript text web demo</title>
10+
11+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
12+
<link rel="import" href="../../myscript-common-element/myscript-languages-element.html">
13+
<link rel="import" href="../myscript-text-web.html">
14+
15+
<style is="custom-style" include="iron-flex"></style>
16+
</head>
17+
<style>
18+
body {
19+
margin: 0;
20+
height: 100vh;
21+
}
22+
myscript-text-web {
23+
height: calc(100% - 60px);
24+
}
25+
select {
26+
-webkit-appearance: none;
27+
-moz-appearance: none;
28+
width: auto;
29+
padding: .375rem 1.75rem .4375rem .75rem;
30+
color: #131F26;
31+
background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00LjQyMi4yNmMtLjIzMy0uMzM3LS42MS0uMzM3LS44NDQgMEwuMTc1IDUuMTdDLS4xNDIgNS42MjguMDQ4IDYgLjYxIDZoNi43OGMuNTU4IDAgLjc1NC0uMzcuNDM1LS44M0w0LjQyMi4yNnptLjAyIDEzLjQ3Yy0uMjM2LjM0Mi0uNjE4LjM0Ny0uODUuMDFMLjE2NyA4LjgxOEMtLjE0NiA4LjM2Ny4wNDggOCAuNjA4IDhoNi43ODNjLjU1OCAwIC43NTUuMzcuNDM3LjgzbC0zLjM4NSA0Ljl6IiBmaWxsPSIjMTMxRjI2Ii8+PC9nPjwvc3ZnPg==) right center no-repeat #fff;
32+
-webkit-appearance: none;
33+
appearance: none;
34+
height: 2.625rem;
35+
font: 400 1.125rem "Source Sans Pro",sans-serif;
36+
border: 1px solid #CED5D9;
37+
border-radius: 3px;
38+
-webkit-tap-highlight-color: transparent;
39+
}
40+
.ooo-language-selector {
41+
text-align: center;
42+
line-height: 60px;
43+
}
44+
</style>
45+
<body touch-action="none" unresolved>
46+
<template id="app" is="dom-bind">
47+
<myscript-languages-element scheme="https"
48+
host="cloud-internal-stable.visionobjects.com"
49+
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d"
50+
languages="{{ languages }}">
51+
</myscript-languages-element>
52+
<div class="ooo-language-selector">
53+
<select onchange="select(this.value)">
54+
<template is="dom-repeat"
55+
id="languageList"
56+
items="[[ languages ]]"
57+
as="lang">
58+
<option value="[[ lang.value ]]" selected="[[isSelected(lang.value, language)]]">[[ lang.description ]]</option>
59+
</template>
60+
</select>
61+
</div>
62+
<myscript-text-web id="text-input"
63+
host="webdemoapi.myscript.com"
64+
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
65+
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
66+
language="{{ language }}"
67+
resultdetail="CHARACTER"
68+
textcandidatelistsize="3"
69+
wordcandidatelistsize="3"
70+
wordpredictionlistsize="3"
71+
wordcompletionlistsize="3"
72+
charactercandidatelistsize="3"
73+
unloaded>
74+
</myscript-text-web>
75+
</template>
76+
</body>
77+
<script>
78+
function select (lang) {
79+
var myscripttextweb = document.querySelector('myscript-text-web');
80+
myscripttextweb.unloaded = true;
81+
myscripttextweb.language = lang;
82+
myscripttextweb.unloaded = false;
83+
}
84+
(function (document) {
85+
'use strict';
86+
var template = document.querySelector('#app');
87+
template.addEventListener('template-bound', function () {
88+
console.log('Our app is ready to rock!');
89+
});
90+
template.isSelected = function (lang, language) {
91+
return lang === language;
92+
};
93+
// See https://github.com/Polymer/polymer/issues/1381
94+
window.addEventListener('WebComponentsReady', function () {
95+
document.querySelector('body').removeAttribute('unresolved');
96+
});
97+
// Programmatic loading to set the default language
98+
window.addEventListener("load", function (event) {
99+
window.setTimeout(function () {
100+
document.querySelector('myscript-text-web').language = 'fr_FR';
101+
document.querySelector('myscript-text-web').unloaded = false;
102+
}, 3000);
103+
});
104+
105+
})(document);
106+
</script>
107+
</html>

0 commit comments

Comments
 (0)