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

Commit 450f87a

Browse files
author
Francois-Xavier Gentilhomme
committed
[FIX] fixes issues on programmatic init
1 parent 11fbda9 commit 450f87a

File tree

2 files changed

+48
-53
lines changed

2 files changed

+48
-53
lines changed

‎demo/programmatic-init.html

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,44 +12,43 @@
1212
<link rel="stylesheet" href="demo.css">
1313
</head>
1414
<body touch-action="none">
15-
<div id="waiting">myscript-text-web will be loaded in 3 seconds with customs params.</div>
1615
<!-- 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 -->
1716
<myscript-text-web
1817
host="webdemoapi.myscript.com">
1918
</myscript-text-web>
2019
</body>
2120
<script>
22-
window.addEventListener("load", function (event) {
23-
window.setTimeout(function () {
24-
var waitingDiv = document.querySelector('#waiting');
25-
waitingDiv.parentNode.removeChild(waitingDiv);
26-
console.log("All resources finished loading! Starting to init myscript-text-web");
27-
var mycustomconfiguration = {
28-
// 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
29-
applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
30-
hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad',
31-
language: 'zh_CN'
32-
};
33-
var myscriptTextWebElement = document.querySelector('myscript-text-web');
34-
myscriptTextWebElement.unloaded = true;
35-
// Testing if attributes binding via DOM, setAttribute or direct object manipulation is working.
36-
myscriptTextWebElement.setAttribute('applicationkey', mycustomconfiguration.applicationKey);
37-
myscriptTextWebElement.hmackey = mycustomconfiguration.hmacKey;
38-
// Testing if options are taken into account
39-
myscriptTextWebElement.configuration = {
40-
timestampFloatPrecision: 2,
41-
recognitionParams: {
42-
v3: {
43-
textParameter: {
44-
language: 'fr_FR'
21+
window.addEventListener("load", function () {
22+
var configurationChanged = false;
23+
var myscriptTextWebElement = document.querySelector('myscript-text-web');
24+
myscriptTextWebElement.addEventListener("myscript-text-web-load", function () {
25+
if (!configurationChanged) {
26+
console.log("All resources finished loading! Starting to init myscript-text-web");
27+
var mycustomconfiguration = {
28+
// 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
29+
applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
30+
hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad',
31+
language: 'zh_CN'
32+
};
33+
// Testing if attributes binding via DOM, setAttribute or direct object manipulation is working.
34+
myscriptTextWebElement.setAttribute('applicationkey', mycustomconfiguration.applicationKey);
35+
myscriptTextWebElement.hmackey = mycustomconfiguration.hmacKey;
36+
// Testing if options are taken into account
37+
myscriptTextWebElement.configuration = {
38+
timestampFloatPrecision: 2,
39+
recognitionParams: {
40+
v3: {
41+
textParameter: {
42+
language: 'fr_FR'
43+
}
4544
}
4645
}
47-
}
48-
};
49-
myscriptTextWebElement.language = mycustomconfiguration.language;
50-
myscriptTextWebElement.unloaded = false;
51-
console.log("myscript-text-web should be displayed");
52-
}, 3000);
46+
};
47+
myscriptTextWebElement.language = mycustomconfiguration.language;
48+
myscriptTextWebElement.unloaded = true;
49+
}
50+
configurationChanged = true;
51+
});
5352
});
5453
</script>
5554
</html>

‎myscript-text-web.html

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -163,18 +163,16 @@
163163
}
164164
}
165165

166-
/**
167-
* @param myscriptTextWebElement
168-
*/
169-
function changeTextConfiguration(myscriptTextWebElement) {
170-
if (myscriptTextWebElement.myscriptcommonelement) {
171-
myscriptTextWebElement.myscriptcommonelement.configuration = buildTextConfiguration(myscriptTextWebElement);
172-
}
173-
}
174-
175166
function attachTextElementToDom(myscriptTextWebElement) {
176167
myscriptTextWebElement.myscriptcommonelement = textQsWrapper(myscriptTextWebElement).querySelector('myscript-common-element');
177168

169+
// Manage load events
170+
function loadListener(event) {
171+
LOG('text ' + event.type + ' event intercepted', event);
172+
myscriptTextWebElement.unloaded = false;
173+
myscriptTextWebElement.dispatchEvent(new CustomEvent(event.type.replace('myscript-common-element-', 'myscript-text-web-'), { detail: event.detail }));
174+
}
175+
178176
// Manage clear events
179177
function clearListener(event) {
180178
LOG('text ' + event.type + ' event intercepted', event);
@@ -198,6 +196,9 @@
198196
}
199197

200198
myscriptTextWebElement.currentListeners = {};
199+
['myscript-common-element-load'].forEach(function (type) {
200+
myscriptTextWebElement.currentListeners[type] = loadListener;
201+
});
201202
['myscript-common-element-result'].forEach(function (type) {
202203
myscriptTextWebElement.currentListeners[type] = resultListener;
203204
});
@@ -211,8 +212,6 @@
211212
Object.keys(myscriptTextWebElement.currentListeners).forEach(function (type) {
212213
myscriptTextWebElement.myscriptcommonelement.addEventListener(type, myscriptTextWebElement.currentListeners[type])
213214
});
214-
myscriptTextWebElement.configuration = buildTextConfiguration(myscriptTextWebElement);
215-
myscriptTextWebElement.unloaded = false;
216215
LOG('text-web attached');
217216
}
218217

@@ -221,7 +220,6 @@
221220
Object.keys(myscriptTextWebElement.currentListeners).forEach(function (type) {
222221
myscriptTextWebElement.myscriptcommonelement.removeEventListener(type, myscriptTextWebElement.currentListeners[type])
223222
});
224-
myscriptTextWebElement.unloaded = true;
225223
LOG('text-web detached');
226224
}
227225

@@ -343,7 +341,7 @@
343341
*/
344342
unloaded: {
345343
type: Boolean,
346-
value: false,
344+
value: true,
347345
notify: true,
348346
reflectToAttribute: true,
349347
observer: 'unloadedChanged'
@@ -694,23 +692,21 @@
694692
//-----------------------------------------------------------------------
695693
unloadedChanged: function (unloaded) {
696694
LOG('text unloaded changed', unloaded);
697-
if (this.myscriptcommonelement && !this.initializing && unloaded !== true) {
698-
this.result = {};
699-
this.candidates = [];
700-
this.resultlabel = undefined;
701-
this.myscriptcommonelement.unloaded = true;
702-
changeTextConfiguration(this);
703-
this.myscriptcommonelement.unloaded = false;
695+
this.result = {};
696+
this.candidates = [];
697+
this.resultlabel = undefined;
698+
buildTextConfiguration(this);
699+
if (unloaded === true) {
700+
if (this.myscriptcommonelement && !this.initializing) {
701+
this.myscriptcommonelement.unloaded = true;
702+
}
704703
}
705704
},
706705
// Will be renamed connected with pure custom element support
707706
attached: function () {
708707
this.initializing = true;
709708
LOG('text-web attached callback');
710709
attachTextElementToDom(this);
711-
// FIXME: Ugly hack to apply configuration
712-
this.myscriptcommonelement.unloaded = true;
713-
this.myscriptcommonelement.unloaded = false;
714710
this.initializing = false;
715711
},
716712
detached: function () {

0 commit comments

Comments
 (0)