You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@annotator.apache.org by ge...@apache.org on 2020/11/20 12:26:32 UTC
[incubator-annotator] 09/19: Export describeTextPosition & use it
in demo
This is an automated email from the ASF dual-hosted git repository.
gerben pushed a commit to branch import-dom-seek
in repository https://gitbox.apache.org/repos/asf/incubator-annotator.git
commit 213c49e3a5259836a4aa01a7c683270ebc8e03c4
Author: Gerben <ge...@treora.com>
AuthorDate: Wed Nov 18 19:46:19 2020 +0100
Export describeTextPosition & use it in demo
---
packages/dom/src/index.ts | 1 +
web/demo/index.html | 9 +++++++++
web/demo/index.js | 14 +++++++++++---
3 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/packages/dom/src/index.ts b/packages/dom/src/index.ts
index 3d7ca58..cd7d2ea 100644
--- a/packages/dom/src/index.ts
+++ b/packages/dom/src/index.ts
@@ -21,4 +21,5 @@
export * from './css';
export * from './range';
export * from './text-quote';
+export * from './text-position';
export * from './highlight-range';
diff --git a/web/demo/index.html b/web/demo/index.html
index ad2d0a2..3ed0961 100644
--- a/web/demo/index.html
+++ b/web/demo/index.html
@@ -72,6 +72,15 @@ under the License.
Upon a change of selection, a
<a rel="external" href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#text-quote-selector" target="_blank">TextQuoteSelector</a>
will be created, that describes what was selected.</p>
+ <form id="form">
+ The selector can work either
+ <br/>
+ <input type="radio" name="describeMode" value="TextQuote" id="describeModeTextQuote" checked>
+ <label for="describeModeTextQuote">by quoting the selected text</label>; or
+ </br>
+ <input type="radio" name="describeMode" value="TextPosition" id="describeModeTextPosition">
+ <label for="describeModeTextPosition">by counting the selected characters’ position in the text</label>.
+ </form>
</div>
<div class="column">
<h2>Text is found here</h2>
diff --git a/web/demo/index.js b/web/demo/index.js
index cb96a40..842e074 100644
--- a/web/demo/index.js
+++ b/web/demo/index.js
@@ -18,12 +18,14 @@
* under the License.
*/
-/* global info, module, source, target */
+/* global info, module, source, target, form */
import {
makeCreateRangeSelectorMatcher,
createTextQuoteSelectorMatcher,
describeTextQuote,
+ createTextPositionSelectorMatcher,
+ describeTextPosition,
highlightRange,
} from '@annotator/dom';
import { makeRefinable } from '@annotator/selector';
@@ -88,13 +90,14 @@ function cleanup() {
while ((removeHighlight = cleanupFunctions.shift())) {
removeHighlight();
}
- target.normalize();
+ // target.normalize();
info.innerText = '';
}
const createMatcher = makeRefinable((selector) => {
const innerCreateMatcher = {
TextQuoteSelector: createTextQuoteSelectorMatcher,
+ TextPositionSelector: createTextPositionSelectorMatcher,
RangeSelector: makeCreateRangeSelectorMatcher(createMatcher),
}[selector.type];
@@ -126,12 +129,16 @@ async function anchor(selector) {
async function onSelectionChange() {
cleanup();
+ const describeMode = form.describeMode.value;
const scope = document.createRange();
scope.selectNodeContents(source);
const selection = document.getSelection();
for (let i = 0; i < selection.rangeCount; i++) {
const range = selection.getRangeAt(i);
- const selector = await describeTextQuote(range, scope);
+ const selector =
+ describeMode === 'TextPosition'
+ ? await describeTextPosition(range, scope)
+ : await describeTextQuote(range, scope);
await anchor(selector);
}
}
@@ -146,6 +153,7 @@ function onSelectorExampleClick(event) {
}
document.addEventListener('selectionchange', onSelectionChange);
+form.addEventListener('change', onSelectionChange);
document.addEventListener('click', onSelectorExampleClick);
if (module.hot) {