[incubator-annotator] 04/04: Export describeTextPosition & use it in demo

[gerben]

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 2ec7100003fdef3fbfb18ed25852535f8959f3d6
Author: Gerben <ger...@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) {