| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Apache Annotator (incubating) demo</title> |
| <link rel="stylesheet" href="../style.css"/> |
| <style> |
| a[data-run-example]:before { |
| content: '📌 '; |
| } |
| |
| #source, #target { |
| padding: 1em; |
| border: 1px solid lightgrey; |
| background: white; |
| } |
| |
| #info { |
| height: 15em; |
| overflow: scroll; |
| background: white; |
| color: #666666; |
| resize: vertical; |
| } |
| |
| .columns { |
| background: aliceblue; |
| } |
| </style> |
| <script defer src="index.js"></script> |
| </head> |
| <body> |
| <header> |
| <h1>Apache Annotator <small>(incubating)</small></h1> |
| </header> |
| <nav> |
| <a href="../">← Back</a> |
| </nav> |
| <main> |
| <h1>Selector Demonstration</h1> |
| |
| <p>This page demonstrates Web Annotation |
| <a href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#selectors" target="_blank">Selectors</a>, |
| standardised JSON objects that describe a selection inside a document with sufficient information to find it back.</p> |
| <p>This demo’s source code can be found <a href="https://gitbox.apache.org/repos/asf?p=incubator-annotator.git;a=tree;hb=HEAD;f=web/demo">in the project repo</a> (also mirrored <a href="https://github.com/apache/incubator-annotator/tree/master/web/demo">on GitHub</a>)</p> |
| |
| <div class="columns full-width"> |
| <div class="column"> |
| <h2>Select text here</h2> |
| <p id="source">Hello, annotated world! To annotate, or not to annotate, that is the question.</p> |
| <p>Try selecting some text in this paragraph above. |
| 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> |
| </div> |
| <div class="column"> |
| <h2>Text is found here</h2> |
| <p id="target" contenteditable>Hello, annotated world! To annotate, or not to annotate, that is the question.</p> |
| <p>The selector is ‘anchored’ here: the segment it describes is found and highlighted.</p> |
| </div> |
| <div class="column" style="min-width: 20em;"> |
| <h2>The selector as JSON:</h2> |
| <pre id="info"></pre> |
| </div> |
| </div> |
| <p>Here are other selectors you can anchor in the text above:</p> |
| <ul> |
| <li><a href="#" data-run-example="0">An ambiguous selector (i.e. with multiple matches)</a> |
| <li> |
| <a href="#" data-run-example="1">RangeSelector</a> |
| (<a href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#range-selector" target="_blank">spec</a>) |
| <li> |
| <a href="#" data-run-example="2">Refining a selector using another selector</a> |
| (<a href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#refinement-of-selection" target="blank">spec</a>) |
| <li><a href="#" data-run-example="3">Any deeper nesting of the above</a> |
| </ul> |
| </main> |
| </body> |
| </html> |