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

Commit 19b9f67

Browse files
author
Francois-Xavier Gentilhomme
committed
[DEV] Refactor demo
1 parent 4634b7b commit 19b9f67

17 files changed

+175
-380
lines changed

‎bower.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@
3232
"myscript-common-element": "https://scm.corp.myscript.com/scm/ws/webcomponents-myscript-common-element.git#2.0.0-alpha1"
3333
},
3434
"devDependencies": {
35-
"iron-component-page": "PolymerElements/iron-component-page#1.1.x",
36-
"iron-ajax": "PolymerElements/iron-ajax#1.2.x"
35+
"iron-component-page": "PolymerElements/iron-component-page#1.1.x"
3736
},
3837
"resolutions": {
3938
"myscript": "https://scm.corp.myscript.com/scm/ws/myscriptjs.git#2.0.0-alpha1",

‎demo/index.html

Lines changed: 20 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
body {
1818
margin: 0;
1919
height: 100vh;
20+
text-align: center;
21+
line-height: 60px;
2022
}
2123

2224
myscript-text-web {
@@ -38,69 +40,38 @@
3840
border-radius: 3px;
3941
-webkit-tap-highlight-color: transparent;
4042
}
41-
42-
.ooo-language-selector {
43-
text-align: center;
44-
line-height: 60px;
45-
}
4643
</style>
47-
<body touch-action="none" unresolved>
48-
<template id="app" is="dom-bind">
49-
<div id="waiting">myscript-text-web will be loaded in 3 seconds with customs params.</div>
44+
<body touch-action="none">
5045
<myscript-languages-element scheme="https"
5146
host="cloud-internal-stable.visionobjects.com"
52-
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d"
53-
languages="{{ languages }}">
47+
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d">
5448
</myscript-languages-element>
55-
<div class="ooo-language-selector">
56-
<select onchange="select(this.value)">
57-
<template is="dom-repeat"
58-
id="languageList"
59-
items="[[ languages ]]"
60-
as="lang">
61-
<option value="[[ lang.value ]]" selected="[[isSelected(lang.value, language)]]">[[ lang.description ]]</option>
62-
</template>
63-
</select>
64-
</div>
49+
<select id="languageList" onchange="select(this.value)" disabled></select>
6550
<myscript-text-web
66-
unloaded
6751
id="text-input"
6852
host="webdemoapi.myscript.com"
6953
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
7054
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
71-
language="{{ language }}">
55+
language="fr_FR">
7256
</myscript-text-web>
73-
</template>
7457
</body>
7558
<script>
76-
window.addEventListener("load", function (event) {
77-
function select(lang) {
78-
var myscriptTextWebElement = document.querySelector('myscript-text-web');
79-
80-
myscriptTextWebElement.unloaded = true;
81-
myscriptTextWebElement.language = lang;
82-
myscriptTextWebElement.unloaded = false;
83-
}
59+
var myscriptTextWebElement = document.querySelector('myscript-text-web');
60+
var currentLanguage = myscriptTextWebElement.getAttribute('language');
8461

85-
var template = document.querySelector('#app');
86-
template.addEventListener('template-bound', function () {
87-
console.log('Our app is ready to rock!');
88-
});
89-
template.isSelected = function (lang, language) {
90-
return lang === language;
91-
};
92-
// See https://github.com/Polymer/polymer/issues/1381
93-
window.addEventListener('WebComponentsReady', function () {
94-
document.querySelector('body').removeAttribute('unresolved');
95-
// Programmatic loading to set the default language
96-
window.setTimeout(function () {
97-
var waitingDiv = document.querySelector('#waiting');
98-
waitingDiv.parentNode.removeChild(waitingDiv);
99-
console.log("All resources finished loading! Starting to init myscript-text-web");
100-
select('fr_FR');
101-
console.log("myscript-text-web should be displayed");
102-
}, 3000);
62+
var languageSelect = document.getElementById('languageList');
63+
document.querySelector('myscript-languages-element').addEventListener('myscript-languages-element-result', function (evt) {
64+
evt.detail.forEach(function (language) {
65+
var selected = currentLanguage === language.value;
66+
languageSelect.options[languageSelect.options.length] = new Option(language.description, language.value, selected, selected);
10367
});
68+
languageSelect.disabled = false;
10469
});
70+
71+
function select(lang) {
72+
myscriptTextWebElement.unloaded = true;
73+
myscriptTextWebElement.language = lang;
74+
myscriptTextWebElement.unloaded = false;
75+
}
10576
</script>
10677
</html>

‎demo/language-init.html

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,23 @@
1111
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1212
<link rel="import" href="../../myscript-common-element/myscript-languages-element.html">
1313
<link rel="import" href="../myscript-text-web.html">
14-
15-
<style is="custom-style" include="iron-flex"></style>
1614
</head>
1715
<style>
1816
body {
1917
margin: 0;
2018
height: 100vh;
2119
}
20+
2221
myscript-text-web {
23-
height: calc(100% - 60px);
24-
}
25-
paper-menu-button {
26-
padding: 0;
27-
width: 250px;
28-
}
29-
select {
30-
-webkit-appearance: none;
31-
-moz-appearance: none;
32-
width: auto;
33-
padding: .375rem 1.75rem .4375rem .75rem;
34-
color: #131F26;
35-
background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00LjQyMi4yNmMtLjIzMy0uMzM3LS42MS0uMzM3LS44NDQgMEwuMTc1IDUuMTdDLS4xNDIgNS42MjguMDQ4IDYgLjYxIDZoNi43OGMuNTU4IDAgLjc1NC0uMzcuNDM1LS44M0w0LjQyMi4yNnptLjAyIDEzLjQ3Yy0uMjM2LjM0Mi0uNjE4LjM0Ny0uODUuMDFMLjE2NyA4LjgxOEMtLjE0NiA4LjM2Ny4wNDggOCAuNjA4IDhoNi43ODNjLjU1OCAwIC43NTUuMzcuNDM3LjgzbC0zLjM4NSA0Ljl6IiBmaWxsPSIjMTMxRjI2Ii8+PC9nPjwvc3ZnPg==) right center no-repeat #fff;
36-
-webkit-appearance: none;
37-
appearance: none;
38-
height: 2.625rem;
39-
font: 400 1.125rem "Source Sans Pro",sans-serif;
40-
border: 1px solid #CED5D9;
41-
border-radius: 3px;
42-
-webkit-tap-highlight-color: transparent;
43-
}
44-
.ooo-language-selector {
45-
text-align: center;
46-
line-height: 60px;
22+
height: 100%;
4723
}
4824
</style>
49-
<body touch-action="none" unresolved>
50-
<template id="app" is="dom-bind">
25+
<body touch-action="none">
5126
<myscript-text-web id="text-input"
5227
host="webdemoapi.myscript.com"
5328
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
5429
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
5530
language="fr_FR">
5631
</myscript-text-web>
57-
</template>
5832
</body>
5933
</html>

‎demo/programmatic-init.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@
1111
<link rel="import" href="../myscript-text-web.html">
1212
<link rel="stylesheet" href="demo.css">
1313
</head>
14-
<body touch-action="none" unresolved>
15-
<div id="waiting">myscript-text-web will be loaded in 3 seconds with customs params.</div>
16-
17-
<!-- 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 -->
18-
<myscript-text-web unloaded host="webdemoapi.myscript.com">
19-
</myscript-text-web>
14+
<body touch-action="none">
15+
<div id="waiting">myscript-text-web will be loaded in 3 seconds with customs params.</div>
16+
<!-- 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 -->
17+
<myscript-text-web
18+
host="webdemoapi.myscript.com">
19+
</myscript-text-web>
20+
</body>
2021
<script>
2122
window.addEventListener("load", function (event) {
2223
window.setTimeout(function () {
@@ -30,6 +31,7 @@
3031
language: 'zh_CN'
3132
};
3233
var myscriptTextWebElement = document.querySelector('myscript-text-web');
34+
myscriptTextWebElement.unloaded = true;
3335
// Testing if attributes binding via DOM, setAttribute or direct object manipulation is working.
3436
myscriptTextWebElement.setAttribute('applicationkey', mycustomconfiguration.applicationKey);
3537
myscriptTextWebElement.hmackey = mycustomconfiguration.hmacKey;
@@ -50,6 +52,5 @@
5052
}, 3000);
5153
});
5254
</script>
53-
</body>
5455
</html>
5556

‎demo/stats.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@
1818
}
1919
</style>
2020
<body touch-action="none">
21-
<paper-toast id="result" class="fit-top"></paper-toast>
22-
<!-- 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 -->
23-
<myscript-text-web
24-
host="webdemoapi.myscript.com"
25-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
26-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad">
27-
</myscript-text-web>
21+
<paper-toast id="result" class="fit-top"></paper-toast>
22+
<!-- 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 -->
23+
<myscript-text-web
24+
host="webdemoapi.myscript.com"
25+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
26+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad">
27+
</myscript-text-web>
28+
</body>
2829
<script>
2930
document.querySelector('myscript-text-web').addEventListener('myscript-text-web-change', function (event) {
3031
const paperToast = document.querySelector('#result');
3132
paperToast.text = 'Stats for this input are : ' + JSON.stringify(document.querySelector('myscript-text-web').getStats());
3233
paperToast.fitIn = paperToast.show();
3334
});
3435
</script>
35-
</body>
3636
</html>

‎demo/superimposed.html

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
body {
1919
margin: 0;
2020
height: 100vh;
21+
text-align: center;
22+
line-height: 60px;
2123
}
2224
myscript-text-web {
2325
height: calc(100% - 60px);
@@ -40,65 +42,39 @@
4042
border-radius: 3px;
4143
-webkit-tap-highlight-color: transparent;
4244
}
43-
.ooo-language-selector {
44-
text-align: center;
45-
line-height: 60px;
46-
}
4745
</style>
48-
<body touch-action="none" unresolved>
49-
<template id="app" is="dom-bind">
46+
<body touch-action="none">
5047
<myscript-languages-element scheme="https"
5148
host="cloud-internal-stable.visionobjects.com"
52-
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d"
53-
languages="{{ languages }}">
49+
applicationKey="a8f991e2-994d-4f36-b61d-55f7ddf6f85d">
5450
</myscript-languages-element>
55-
<div class="ooo-language-selector">
56-
<select onchange="select(this.value)">
57-
<template is="dom-repeat"
58-
id="languageList"
59-
items="[[ languages ]]"
60-
as="lang">
61-
<option value="[[ lang.value ]]" selected="[[isSelected(lang.value, language)]]">[[lang.description]]</option>
62-
</template>
63-
</select>
64-
</div>
51+
<select id="languageList" onchange="select(this.value)" disabled></select>
6552
<myscript-text-web id="text-input"
6653
host="webdemoapi.myscript.com"
6754
applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81"
6855
hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"
69-
language="{{ language }}"
56+
language="fr_FR"
7057
textinputmode="SUPERIMPOSED"
7158
textcandidatelistsize="3">
7259
</myscript-text-web>
73-
</template>
7460
</body>
7561
<script>
76-
function select (lang) {
77-
var myscripttextweb = document.querySelector('myscript-text-web');
78-
myscripttextweb.unloaded = true;
79-
myscripttextweb.language = lang;
80-
myscripttextweb.unloaded = false;
81-
}
82-
(function (document) {
83-
'use strict';
84-
var template = document.querySelector('#app');
85-
template.addEventListener('template-bound', function () {
86-
console.log('Our app is ready to rock!');
87-
});
88-
template.isSelected = function (lang, language) {
89-
return lang === language;
90-
};
91-
// See https://github.com/Polymer/polymer/issues/1381
92-
window.addEventListener('WebComponentsReady', function () {
93-
document.querySelector('body').removeAttribute('unresolved');
94-
});
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);
62+
var myscriptTextWebElement = document.querySelector('myscript-text-web');
63+
var currentLanguage = myscriptTextWebElement.getAttribute('language');
64+
65+
var languageSelect = document.getElementById('languageList');
66+
document.querySelector('myscript-languages-element').addEventListener('myscript-languages-element-result', function (evt) {
67+
evt.detail.forEach(function (language) {
68+
var selected = currentLanguage === language.value;
69+
languageSelect.options[languageSelect.options.length] = new Option(language.description, language.value, selected, selected);
10070
});
71+
languageSelect.disabled = false;
72+
});
10173

102-
})(document);
74+
function select(lang) {
75+
myscriptTextWebElement.unloaded = true;
76+
myscriptTextWebElement.language = lang;
77+
myscriptTextWebElement.unloaded = false;
78+
}
10379
</script>
10480
</html>

0 commit comments

Comments
 (0)