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

Commit 3452945

Browse files
RomainCscnRomainCscn
committed
[DEV] Examples for Polymer 3
1 parent 3139925 commit 3452945

21 files changed

+656
-495
lines changed

‎examples/dev/debug.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313

1414
<link rel="stylesheet" href="../examples.css">
1515

16-
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
17-
<script src="pepjs/dist/pep.min.js"></script>
16+
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1817
<script type="module" src="../../myscript-text-web.js"></script>
1918
</head>
2019

‎examples/dev/get_stats.html

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,39 @@
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>Get statistics</title>
12+
<title>Get statistics</title>
1313

14-
<link rel="stylesheet" href="../examples.css">
14+
<link rel="stylesheet" href="../examples.css">
1515

16-
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
17-
<script src="pepjs/dist/pep.min.js"></script>
18-
<script type="module" src="@polymer/paper-toast/paper-toast.js"></script>
19-
<script type="module" src="../../myscript-text-web.js"></script>
20-
</head>
16+
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
17+
<script type="module" src="../../node_modules/@polymer/paper-toast/paper-toast.js"></script>
18+
<script type="module" src="../../myscript-text-web.js"></script>
19+
</head>
2120

22-
<body>
23-
<paper-toast id="result" class="fit-top"></paper-toast>
24-
<!-- 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 -->
25-
<myscript-text-web scheme="https"
26-
host="webdemoapi.myscript.com"
27-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
28-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
29-
touch-action="none">
30-
</myscript-text-web>
31-
<script type="module">
32-
import '@polymer/paper-toast/paper-toast.js';
33-
import '../../myscript-text-web.js';
34-
const paperToast = document.querySelector('paper-toast');
35-
document.querySelector('myscript-text-web').addEventListener('changed', (event) => {
36-
paperToast.text = `Stats for this input are : ${JSON.stringify(event.target.getStats())}`;
37-
paperToast.fitIn = paperToast.show();
38-
});
21+
<body>
22+
<paper-toast id="result" class="fit-top"></paper-toast>
23+
<!-- 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 -->
24+
<myscript-text-web scheme="https"
25+
host="webdemoapi.myscript.com"
26+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
27+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
28+
touch-action="none">
29+
</myscript-text-web>
30+
<script>
31+
const paperToast = document.querySelector('paper-toast');
32+
document.querySelector('myscript-text-web').addEventListener('changed', (event) => {
33+
paperToast.text = `Stats for this input are : ${JSON.stringify(event.target.getStats())}`;
34+
paperToast.fitIn = paperToast.show();
35+
});
3936
</script>
40-
</body>
37+
</body>
4138

4239
</html>

‎examples/experimental/customize_glyph.html

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,39 @@
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>Customize style</title>
12+
<title>Customize style</title>
1313

14-
<link rel="stylesheet" href="../examples.css">
14+
<link rel="stylesheet" href="../examples.css">
1515

16-
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
17-
<script src="pepjs/dist/pep.min.js"></script>
18-
<script type="module" src="../../myscript-text-web.js"></script>
19-
</head>
16+
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
17+
<script type="module" src="../../myscript-text-web.js"></script>
18+
</head>
2019

21-
<body>
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 scheme="https"
24-
host="webdemoapi.myscript.com"
25-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
26-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
27-
touch-action="none">
28-
</myscript-text-web>
29-
<script type="module">
30-
import '../../myscript-text-web.js';
31-
const component = document.querySelector('myscript-text-web');
32-
// Set the glyph color to the current theme
33-
component.theme = Object.assign({}, component.theme, {
34-
glyph: {
35-
color: '#000000'
36-
}
37-
});
20+
<body>
21+
<!-- 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 -->
22+
<myscript-text-web scheme="https"
23+
host="webdemoapi.myscript.com"
24+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
25+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
26+
touch-action="none">
27+
</myscript-text-web>
28+
<script>
29+
const component = document.querySelector('myscript-text-web');
30+
// Set the glyph color to the current theme
31+
component.theme = Object.assign({}, component.theme, {
32+
glyph: {
33+
color: '#000000'
34+
}
35+
});
3836
</script>
39-
</body>
37+
</body>
4038

4139
</html>

‎examples/non-version-specific/change_language.html

Lines changed: 55 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,65 @@
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>Change language</title>
12+
<title>Change language</title>
1313

14-
<link rel="stylesheet" href="../examples.css">
15-
<style>
16-
myscript-text-web {
17-
height: calc(100% - 2.625rem);
18-
}
19-
nav {
20-
height: 60px;
21-
display: flex;
22-
justify-content: center;
23-
align-content: center;
24-
align-items: center;
25-
}
26-
</style>
27-
28-
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
29-
<script src="pepjs/dist/pep.min.js"></script>
30-
<script type="module" src="myscript-common-element/myscript-languages-element.js"></script>
31-
<script type="module" src="../../myscript-text-web.js"></script>
32-
</head>
14+
<link rel="stylesheet" href="../examples.css">
15+
<style>
16+
myscript-text-web {
17+
height: calc(100% - 2.625rem);
18+
}
3319

34-
<body>
35-
<nav>
36-
<myscript-languages-element scheme="https"
37-
host="webdemoapi.myscript.com"
38-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
39-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
40-
select>
41-
</myscript-languages-element>
42-
</nav>
43-
<myscript-text-web scheme="https"
44-
host="webdemoapi.myscript.com"
45-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
46-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
47-
touch-action="none">
48-
</myscript-text-web>
49-
<script type="module">
50-
import 'myscript-common-element/myscript-languages-element.js';
51-
import '../../myscript-text-web.js';
52-
window.addEventListener('load', () => {
53-
const textElement = document.querySelector('myscript-text-web');
54-
const langElement = document.querySelector('myscript-languages-element');
55-
langElement.addEventListener('change', (evt) => {
56-
const lang = evt.detail.find(language => language.selected === true).value;
57-
if (textElement.configuration && (lang !== textElement.language)) {
58-
textElement.unloaded = true;
59-
textElement.language = evt.detail.find(language => language.selected === true).value;
60-
textElement.unloaded = false;
20+
nav {
21+
height: 60px;
22+
display: flex;
23+
justify-content: center;
24+
align-content: center;
25+
align-items: center;
6126
}
62-
})
63-
});
27+
</style>
28+
29+
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
30+
<script type="module" src="../../node_modules/myscript-common-element/myscript-languages-element.js"></script>
31+
<script type="module" src="../../myscript-text-web.js"></script>
32+
</head>
33+
34+
<body>
35+
<nav>
36+
<myscript-languages-element scheme="https"
37+
host="webdemoapi.myscript.com"
38+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
39+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
40+
select>
41+
</myscript-languages-element>
42+
</nav>
43+
<myscript-text-web scheme="https"
44+
host="webdemoapi.myscript.com"
45+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
46+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
47+
touch-action="none">
48+
</myscript-text-web>
49+
<script>
50+
window.addEventListener('load', () => {
51+
const textElement = document.querySelector('myscript-text-web');
52+
const langElement = document.querySelector('myscript-languages-element');
53+
langElement.addEventListener('change', (evt) => {
54+
const lang = evt.detail.find(language => language.selected === true).value;
55+
if (textElement.configuration && (lang !== textElement.language)) {
56+
textElement.unloaded = true;
57+
textElement.language = evt.detail.find(language => language.selected === true).value;
58+
textElement.unloaded = false;
59+
}
60+
})
61+
});
6462
</script>
65-
</body>
63+
</body>
6664

6765
</html>

‎examples/non-version-specific/custom_controls.html

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,59 @@
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>Custom controls</title>
12+
<title>Custom controls</title>
1313

14-
<link rel="stylesheet" href="../examples.css">
15-
<style>
16-
nav {
17-
line-height: 52px;
18-
padding: 0 12px;
19-
}
14+
<link rel="stylesheet" href="../examples.css">
15+
<style>
16+
nav {
17+
line-height: 52px;
18+
padding: 0 12px;
19+
}
2020

21-
myscript-text-web {
22-
height: calc(100% - 52px);
23-
}
24-
</style>
21+
myscript-text-web {
22+
height: calc(100% - 52px);
23+
}
24+
</style>
2525

26-
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
27-
<script src="pepjs/dist/pep.min.js"></script>
28-
<script type="module" src="@polymer/paper-toast/paper-toast.js"></script>
29-
<script type="module" src="../../myscript-text-web.js"></script>
30-
</head>
26+
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
27+
<script type="module" src="../../node_modules/@polymer/paper-toast/paper-toast.js"></script>
28+
<script type="module" src="../../myscript-text-web.js"></script>
29+
</head>
3130

32-
<body>
33-
<nav>
34-
<button class="classic-btn" onclick="myscriptTextWeb.undo()">undo</button>
35-
<button class="classic-btn" onclick="myscriptTextWeb.redo()">redo</button>
36-
<button class="classic-btn" onclick="myscriptTextWeb.clear()">clear</button>
37-
<button class="classic-btn" onclick="myscriptTextWeb.export_()">export</button>
38-
<button class="classic-btn" onclick="myscriptTextWeb.convert()">convert</button>
39-
</nav>
40-
<paper-toast class="fit-top"></paper-toast>
41-
<!-- 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 -->
42-
<myscript-text-web scheme="https"
43-
host="webdemoapi.myscript.com"
44-
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
45-
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
46-
ondemand
47-
disablecontrols
48-
touch-action="none">
49-
</myscript-text-web>
50-
<script type="module">
51-
import '@polymer/paper-toast/paper-toast.js';
52-
import '../../myscript-text-web.js';
53-
const myscriptTextWeb = document.querySelector('myscript-text-web');
54-
const paperToast = document.querySelector('paper-toast');
55-
myscriptTextWeb.addEventListener('exported', (event) => {
56-
paperToast.text = `Recognition object contains : ${JSON.stringify(event.detail)}`;
57-
paperToast.fitIn = paperToast.show();
58-
});
31+
<body>
32+
<nav>
33+
<button class="classic-btn" onclick="myscriptTextWeb.undo()">undo</button>
34+
<button class="classic-btn" onclick="myscriptTextWeb.redo()">redo</button>
35+
<button class="classic-btn" onclick="myscriptTextWeb.clear()">clear</button>
36+
<button class="classic-btn" onclick="myscriptTextWeb.export_()">export</button>
37+
<button class="classic-btn" onclick="myscriptTextWeb.convert()">convert</button>
38+
</nav>
39+
<paper-toast class="fit-top"></paper-toast>
40+
<!-- 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 -->
41+
<myscript-text-web scheme="https"
42+
host="webdemoapi.myscript.com"
43+
applicationkey="515131ab-35fa-411c-bb4d-3917e00faf60"
44+
hmackey="54b2ca8a-6752-469d-87dd-553bb450e9ad"
45+
ondemand
46+
disablecontrols
47+
touch-action="none">
48+
</myscript-text-web>
49+
<script>
50+
const myscriptTextWeb = document.querySelector('myscript-text-web');
51+
const paperToast = document.querySelector('paper-toast');
52+
myscriptTextWeb.addEventListener('exported', (event) => {
53+
paperToast.text = `Recognition object contains : ${JSON.stringify(event.detail)}`;
54+
paperToast.fitIn = paperToast.show();
55+
});
5956
</script>
60-
</body>
57+
</body>
6158

6259
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy