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

Commit fd21a3c

Browse files
RomainCscnRomainCscn
committed
[DEV] Add build and app for examples
1 parent 2f7f803 commit fd21a3c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+18650
-2567
lines changed

‎analysis.json

Lines changed: 2730 additions & 2366 deletions
Large diffs are not rendered by default.

‎build/docs/analysis.json

Lines changed: 10870 additions & 0 deletions
Large diffs are not rendered by default.

‎build/docs/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
4+
5+
<title>demo</title>
6+
<meta name="description" content="demo description">
7+
8+
<!-- See https://goo.gl/OOhYW5 -->
9+
<link rel="manifest" href="manifest.json">
10+
<link rel="stylesheet" href="src/demo-app/examples/examples.css">
11+
12+
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
13+
14+
<script type="module" src="src/demo-app/docs.js"></script>
15+
</head>
16+
<body>
17+
<docs-app></docs-app>
18+
19+
20+
</body></html>

‎build/docs/myscript-text-exports.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
/* eslint-disable class-methods-use-this,no-undef,no-param-reassign,no-underscore-dangle */
2+
import { html, PolymerElement } from "./node_modules/@polymer/polymer/polymer-element.js";
3+
/**
4+
`myscript-text-exports` is a component to display `myscript-text-web` exports candidates.
5+
6+
<myscript-text-exports
7+
exports="myscript-text-web.exports">
8+
</myscript-text-exports>
9+
10+
Custom property | Description | Default
11+
----------------|-------------|----------
12+
`--myscript-text-exports-color` | Text candidates color | #1580CD
13+
`--myscript-text-exports-background-color` | Text candidates background color | #EDF0F2
14+
`--myscript-text-exports-selected-color` | Selected candidate color | #FFFFFF
15+
`--myscript-text-exports-selected-background-color` | Selected candidate background color | #1580CD
16+
`--myscript-text-exports-predicted-color` | Candidate predicted part color | #73818C
17+
`--myscript-text-exports-completed-color` | Candidate completed part color | #1A9FFF
18+
*/
19+
20+
class MyScriptTextExports extends PolymerElement {
21+
static get template() {
22+
return html`
23+
<style>
24+
:host {
25+
--myscript-text-exports-color: #1580CD;
26+
--myscript-text-exports-background-color: #EDF0F2;
27+
--myscript-text-exports-selected-color: #FFFFFF;
28+
--myscript-text-exports-selected-background-color: #1580CD;
29+
--myscript-text-exports-predicted-color: #73818C;
30+
--myscript-text-exports-completed-color: #1A9FFF;
31+
32+
--myscript-text-candidate: {
33+
padding: .5rem .75rem;
34+
margin: 0 .125rem;
35+
border-radius: 3px;
36+
cursor: pointer;
37+
flex: 0 0 auto;
38+
};
39+
40+
box-sizing: border-box;
41+
display: flex;
42+
flex-direction: column;
43+
align-items: stretch;
44+
color: var(--myscript-text-exports-color);
45+
min-height: 60px;
46+
}
47+
48+
#plaintext {
49+
flex-grow: 2;
50+
text-align: center;
51+
overflow: auto;
52+
padding: 5px 0;
53+
}
54+
55+
#candidates {
56+
display: flex;
57+
align-items: center;
58+
overflow: auto;
59+
padding: 5px 0;
60+
}
61+
62+
.text {
63+
color: var(--myscript-text-exports-color);
64+
background-color: var(--myscript-text-exports-background-color);
65+
@apply --myscript-text-candidate;
66+
}
67+
68+
.text[selected] {
69+
color: var(--myscript-text-exports-selected-color);
70+
background: var(--myscript-text-exports-selected-background-color);
71+
}
72+
73+
.candidate[selected] * {
74+
color: inherit;
75+
background-color: inherit;
76+
}
77+
78+
.char.predicted {
79+
color: var(--myscript-text-exports-predicted-color, #73818C);
80+
}
81+
82+
.char.completed {
83+
color: var(--myscript-text-exports-completed-color, #1A9FFF);
84+
}
85+
</style>
86+
87+
<div id="plaintext">{{ _getPlainText(exports) }}</div>
88+
<div id="candidates">
89+
<template is="dom-if" if="[[ exports.CANDIDATES ]]">
90+
<!--WARN: templates needs to be inline to avoid carriage return after span-->
91+
<template is="dom-repeat" id="textCandidateList" items="[[ exports.CANDIDATES.textSegmentResult.candidates ]]" as="textCandidate" index-as="textIndex">
92+
<span class\$="text {{ _getCandidateFlags(candidate) }}" selected\$="[[ _isSelected(textIndex, exports.CANDIDATES.textSegmentResult.selectedCandidateIdx) ]]" on-tap="_select">
93+
<template is="dom-if" if="[[ !textCandidate.children ]]">
94+
{{ textCandidate.label }}
95+
</template>
96+
<template is="dom-if" if="[[ textCandidate.children ]]"><!--WARN: templates needs to be inline to avoid carriage return after span-->
97+
<template is="dom-repeat" id="wordCandidateList" items="[[ _getChildCandidates(textCandidate, exports, 'text') ]]" as="wordCandidate">
98+
<span class\$="word {{ _getCandidateFlags(wordCandidate) }}">
99+
<template is="dom-if" if="[[ !wordCandidate.children ]]">
100+
{{ wordCandidate.label }}
101+
</template>
102+
<template is="dom-if" if="[[ wordCandidate.children ]]">
103+
<template is="dom-repeat" id="charCandidateList" items="[[ _getChildCandidates(wordCandidate, exports, 'word') ]]" as="charCandidate"><span class\$="char {{ _getCandidateFlags(charCandidate) }}">{{ charCandidate.label }}</span></template>
104+
</template>
105+
</span>
106+
</template>
107+
</template>
108+
</span>
109+
</template>
110+
</template>
111+
</div>`;
112+
}
113+
114+
static get is() {
115+
return 'myscript-text-exports';
116+
}
117+
118+
static get properties() {
119+
return {
120+
/**
121+
* Exports result.
122+
* @attribute exports
123+
* @type {Object<String, Object>}.
124+
*/
125+
exports: {
126+
type: Object,
127+
notify: true
128+
}
129+
};
130+
}
131+
132+
_getPlainText(exports) {
133+
if (exports) {
134+
if (exports.TEXT) {
135+
return exports.TEXT;
136+
}
137+
138+
return exports['text/plain'];
139+
}
140+
141+
return undefined;
142+
}
143+
/**
144+
* Select a new candidate
145+
* @param e
146+
*/
147+
148+
149+
_select(e) {
150+
const exports = this.exports;
151+
152+
if (exports.CANDIDATES) {
153+
exports.CANDIDATES.textSegmentResult.selectedCandidateIdx = e.model.textIndex;
154+
exports.TEXT = exports.CANDIDATES.textSegmentResult.candidates[exports.CANDIDATES.textSegmentResult.selectedCandidateIdx].label;
155+
}
156+
157+
this.exports = {};
158+
this.exports = exports;
159+
this.dispatchEvent(new CustomEvent('change', {
160+
detail: {
161+
exports
162+
}
163+
}));
164+
}
165+
166+
_isSelected(index, selectedIndex) {
167+
return index === selectedIndex;
168+
}
169+
170+
_getChildSegments(candidate, exports, type) {
171+
const segments = [];
172+
173+
function addSegment(child, segment) {
174+
if (segment.inkRanges === child.inkRanges) {
175+
segment.selectedCandidateIdx = child.selectedCandidateIdx;
176+
segments.push(segment);
177+
}
178+
}
179+
180+
if (candidate.children) {
181+
candidate.children.forEach((child, index) => {
182+
if (type === 'text' && exports && exports.CANDIDATES && exports.CANDIDATES.wordSegments && exports.CANDIDATES.wordSegments.length > -1) {
183+
exports.CANDIDATES.wordSegments.forEach(segment => addSegment(child, segment));
184+
} else if (type === 'word' && exports && exports.CANDIDATES && exports.CANDIDATES.charSegments && exports.CANDIDATES.charSegments.length > -1) {
185+
if (!child.inkRanges) {
186+
segments.push({
187+
candidates: [{
188+
label: candidate.label.charAt(index),
189+
flags: candidate.flags
190+
}],
191+
selectedCandidateIdx: 0
192+
});
193+
} else {
194+
exports.CANDIDATES.charSegments.forEach(segment => addSegment(child, segment));
195+
}
196+
}
197+
});
198+
}
199+
200+
return segments;
201+
}
202+
203+
_getChildCandidates(candidate, exports, type) {
204+
return this._getChildSegments(candidate, exports, type).map(segment => segment.candidates[segment.selectedCandidateIdx]);
205+
}
206+
207+
_getCandidateFlags(candidate) {
208+
if (candidate && candidate.flags) {
209+
return candidate.flags.join(' ').toLowerCase();
210+
}
211+
212+
return '';
213+
}
214+
215+
}
216+
217+
customElements.define(MyScriptTextExports.is, MyScriptTextExports);

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