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

Commit 537ea7f

Browse files
RomainCscnRomainCscn
committed
[DEV] New interact example
1 parent 352e8a8 commit 537ea7f

File tree

6 files changed

+446
-96
lines changed

6 files changed

+446
-96
lines changed

‎docs/components/myscript-text-web/examples/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,20 @@ <h2>Non version specific features</h2>
6666
</svg>
6767
Get source code</a>
6868
</div>
69+
<p><strong>Interact</strong></p>
70+
<div class="center">
71+
<a href="non-version-specific/interact.html" class="btn">
72+
<svg class="icn">
73+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
74+
</svg>
75+
View example</a>
76+
<a href="https://github.com/MyScript/myscript-text-web/blob/master/examples/non-version-specific/interact.html"
77+
target="_blank" class="btn">
78+
<svg class="icn">
79+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
80+
</svg>
81+
Get source code</a>
82+
</div>
6983
<p><strong>Handle errors</strong></p>
7084
<div class="center">
7185
<a href="non-version-specific/handle_errors.html" class="btn">

‎docs/components/myscript-text-web/examples/non-version-specific/interact.html

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="mobile-web-app-capable" content="yes">
9+
<meta name="HandheldFriendly" content="true"/>
10+
11+
<title>Interact with your app</title>
12+
13+
<link rel="stylesheet" href="../examples.css">
14+
<style>
15+
* {
16+
font-family: "Source Sans Pro",sans-serif;
17+
}
18+
nav {
19+
height: 60px;
20+
display: flex;
21+
justify-content: space-between;
22+
}
23+
24+
nav span {
25+
display: flex;
26+
width: 100%;
27+
}
28+
29+
input {
30+
width: 100%;
31+
}
32+
33+
myscript-text-web {
34+
height: calc(100% - 60px);
35+
}
36+
37+
#question {
38+
font-size: 2em;
39+
background-color: #f5f5f5;
40+
margin: 0;
41+
padding: 10px 0 10px;
42+
border-bottom: 1px solid #D7DDE3;
43+
text-align: center;
44+
}
45+
#result {
46+
height: 100px;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
overflow: auto;
51+
}
52+
53+
#result span {
54+
font-size: xx-large;
55+
}
56+
#nextOne {
57+
text-align: center;
58+
height: 60px;
59+
}
60+
61+
#nextOne .btn {
62+
line-height: 30px;
63+
background-color: rgba(0,0,0,.08);
64+
display: inline-block;
65+
font-weight: 700;
66+
font-size: 24px;
67+
text-align: center;
68+
white-space: nowrap;
69+
color: #1a9fff;
70+
text-decoration: none;
71+
border: 2px solid transparent;
72+
border-radius: 3px;
73+
-ms-touch-action: manipulation;
74+
touch-action: manipulation;
75+
cursor: pointer;
76+
transition: all 125ms;
77+
padding: 4px 2px 4px 2px;
78+
}
79+
80+
#nextOne .icn {
81+
margin: 0 0px -2px 12px;
82+
}
83+
</style>
84+
85+
<!-- As web components are not fully support -->
86+
<script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
87+
<!-- myscript-common-element is import to be used later -->
88+
<link rel="import" href="../../myscript-text-web.html">
89+
</head>
90+
91+
<body>
92+
<svg style="display: none;">
93+
<symbol id="icn-play" viewBox="0 0 16 16">
94+
<path
95+
d="M13.153 8.589c.606-.325.603-.854 0-1.178L4.873 2.97C4.392 2.709 4 2.945 4 3.496v9.008c0 .55.39.787.874.527l8.28-4.442z"
96+
fill="currentColor" fill-rule="evenodd"></path>
97+
</symbol>
98+
</svg>
99+
<p id="question"></p>
100+
<div id="result"></div>
101+
<div id="nextOne"></div>
102+
<myscript-text-web scheme="https"
103+
host="webdemoapi.myscript.com"
104+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
105+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
106+
disableexportpanel="true">
107+
</myscript-text-web>
108+
<script>
109+
var editorElement = document.querySelector('myscript-text-web');
110+
var questionElement = document.getElementById('question');
111+
var resultElement = document.getElementById('result');
112+
var nextElement = document.getElementById('nextOne');
113+
114+
const countries = ['France', 'Italy', 'Spain', 'Argentina', 'Japan'];
115+
const capitals = ['Paris', 'Rome', 'Madrid', 'Buenos Aires', 'Tokyo'];
116+
117+
var randomNumber = Math.floor(Math.random() * countries.length);
118+
119+
questionElement.innerText = 'What is the capital of ' + countries[randomNumber] + '?';
120+
121+
editorElement.addEventListener('exported', function (evt) {
122+
var exports = evt.detail.exports;
123+
if (exports && exports['text/plain']) {
124+
exportedIsAnswer(exports);
125+
} else {
126+
resultElement.innerHTML = '';
127+
}
128+
});
129+
130+
nextElement.addEventListener('click', function () {
131+
changeQuestion();
132+
});
133+
134+
function exportedIsAnswer(exports) {
135+
if (exports['text/plain'] === capitals[randomNumber]) {
136+
resultElement.innerHTML = '<span> Yes, it is ' + exports['text/plain'] + '.</span>';
137+
resultElement.style.cssText = "color: green;";
138+
nextElement.innerHTML = '<a class="btn">Next question<svg class="icn"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icn-play"></use></svg></a>';
139+
} else {
140+
resultElement.innerHTML = '<span> No, it is not ' + exports['text/plain'] + '.</span>';
141+
resultElement.style.cssText = "color: red;";
142+
nextElement.innerHTML = '';
143+
}
144+
}
145+
146+
function changeQuestion() {
147+
countries.splice(randomNumber, 1);
148+
capitals.splice(randomNumber, 1);
149+
randomNumber = Math.floor(Math.random() * countries.length);
150+
questionElement.innerHTML = countries[randomNumber] ? 'What is the capital of ' + countries[randomNumber] + ' ?' : 'You won !';
151+
nextElement.innerHTML = '';
152+
editorElement.editor.clear();
153+
}
154+
155+
window.addEventListener('resize', function () {
156+
editorElement.editor.resize();
157+
});
158+
</script>
159+
</body>
160+
161+
</html>

‎docs/components/myscript-text-web/examples/v4/import_content.html

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<head>
5-
<!-- Those meta make the capture of handwriting inputs easier on mobile devices -->
6-
<meta charset="UTF-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8-
<meta name="apple-mobile-web-app-capable" content="yes">
9-
<meta name="mobile-web-app-capable" content="yes">
10-
<meta name="HandheldFriendly" content="true"/>
4+
<head>
5+
<!-- Those meta make the capture of handwriting inputs easier on mobile devices -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="mobile-web-app-capable" content="yes">
10+
<meta name="HandheldFriendly" content="true"/>
1111

12-
<title>Import content</title>
12+
<title>Import content</title>
1313

14-
<link rel="stylesheet" href="../examples.css">
15-
<style>
16-
nav {
17-
height: 60px;
18-
display: flex;
19-
justify-content: space-between;
20-
}
14+
<link rel="stylesheet" href="../examples.css">
15+
<style>
16+
nav {
17+
height: 60px;
18+
display: flex;
19+
justify-content: space-between;
20+
}
2121

22-
nav span {
23-
display: flex;
24-
width: 100%;
25-
}
22+
nav span {
23+
display: flex;
24+
width: 100%;
25+
}
2626

27-
input {
28-
width: 100%;
29-
}
27+
input {
28+
width: 100%;
29+
}
3030

31-
myscript-text-web {
32-
height: calc(100% - 60px);
33-
}
34-
</style>
31+
myscript-text-web {
32+
height: calc(100% - 60px);
33+
}
34+
</style>
3535

36-
<!-- As web components are not fully support -->
37-
<script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
38-
<!-- myscript-common-element is import to be used later -->
39-
<link rel="import" href="../../myscript-text-web.html">
40-
</head>
36+
<!-- As web components are not fully support -->
37+
<script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
38+
<!-- myscript-common-element is import to be used later -->
39+
<link rel="import" href="../../myscript-text-web.html">
40+
</head>
4141

42-
<body>
43-
<nav>
42+
<body>
43+
<nav>
4444
<span>
4545
<input type="text" id="importContentField" data-type="text/plain"
4646
placeholder="e.g. hello world"/>
4747
<button id="importContent">Import</button>
4848
</span>
49-
</nav>
50-
<!-- 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 -->
51-
<myscript-text-web scheme="https"
52-
host="webdemoapi.myscript.com"
53-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
54-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad">
55-
</myscript-text-web>
56-
<script>
57-
const component = document.querySelector('myscript-text-web');
58-
const importContent = document.getElementById('importContentField');
49+
</nav>
50+
<!-- 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 -->
51+
<myscript-text-web scheme="https"
52+
host="webdemoapi.myscript.com"
53+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
54+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad">
55+
</myscript-text-web>
56+
<script>
57+
const component = document.querySelector('myscript-text-web');
58+
const importContent = document.getElementById('importContentField');
5959

60-
document.getElementById('importContent').addEventListener('click', function () {
61-
component.importContent({ x: 50, y: 50 }, importContent.value, importContent.dataset.type);
62-
});
63-
</script>
64-
</body>
60+
document.getElementById('importContent').addEventListener('click', function () {
61+
component.importContent({ x: 50, y: 50 }, importContent.value, importContent.dataset.type);
62+
});
63+
</script>
64+
</body>
6565

6666
</html>

‎examples/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,20 @@ <h2>Non version specific features</h2>
6666
</svg>
6767
Get source code</a>
6868
</div>
69+
<p><strong>Interact</strong></p>
70+
<div class="center">
71+
<a href="non-version-specific/interact.html" class="btn">
72+
<svg class="icn">
73+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
74+
</svg>
75+
View example</a>
76+
<a href="https://github.com/MyScript/myscript-text-web/blob/master/examples/non-version-specific/interact.html"
77+
target="_blank" class="btn">
78+
<svg class="icn">
79+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
80+
</svg>
81+
Get source code</a>
82+
</div>
6983
<p><strong>Handle errors</strong></p>
7084
<div class="center">
7185
<a href="non-version-specific/handle_errors.html" class="btn">

0 commit comments

Comments
 (0)