| <!-- |
| Licensed 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> |
| <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="https://unpkg.com/awsm.css/dist/awsm.min.css"> |
| <style> |
| blockquote { |
| font-style: italic; |
| } |
| a[href^="#selector"]:before { |
| content: '📌'; |
| font-size: 75%; |
| } |
| mark { |
| background-color: rgba(255, 255, 0, 0.5); |
| outline: 0.1px solid rgba(255, 100, 0, 0.8); |
| } |
| #parsed { |
| height: 15rem; |
| overflow: scroll; |
| } |
| </style> |
| <main> |
| <h1>Selector Demonstration</h1> |
| <p>This page demonstrates |
| <a |
| href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#selectors" |
| target="_blank">Selectors</a>. |
| <h2>Fragments</h2> |
| <p>Linking to this page with a selector fragment causes the matching text to |
| be highlighted in the following paragraphs: |
| <blockquote id="corpus"> |
| <p>Hello, annotated world! |
| <p>To annotate, or not to annotate, that is the question. |
| </blockquote> |
| <p>Try some examples: |
| <ul> |
| <li> |
| <a href="#selector(type=RangeSelector,startSelector=selector(type=TextQuoteSelector,exact=ann),endSelector=selector(type=TextQuoteSelector,exact=!))">RangeSelector</a> |
| (<a href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#range-selector" target="_blank">spec</a>) |
| <li> |
| <a href="#selector(type=TextQuoteSelector,exact=annotated%20world,refinedBy=selector(type=TextQuoteSelector,exact=tat))">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="#selector(type=TextQuoteSelector,exact=not)">Multiple matches</a> (but overlapping matches currently mess up the highlighter) |
| <li><a href="#selector(type=TextQuoteSelector,exact=To%20annotate%2C%20or%20not%20to%20annotate%2C,refinedBy=selector(type=RangeSelector,startSelector=selector(type=TextQuoteSelector,exact=To%20annotate,refinedBy=selector(type=TextQuoteSelector,exact=annotate)),endSelector=selector(type=TextQuoteSelector,exact=not%20to%20annotate,refinedBy=selector(type=TextQuoteSelector,exact=%20to)),refinedBy=selector(type=TextQuoteSelector,exact=o)))">Any deeper nesting of the above</a> |
| </ul> |
| <p>Below, the same paragraphs are presented again. Selecting some of the text |
| creates a |
| <a |
| href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#text-quote-selector" |
| target="_blank">TextQuoteSelector</a> |
| that matches the selection <em>unambiguously</em> within the context of |
| the paragraphs. |
| <blockquote id="selectable"> |
| <p>Hello, annotated world! |
| <p>To annotate, or not to annotate, that is the question. |
| </blockquote> |
| <p>Here is the selector in JSON format: |
| <pre><code id="parsed"></code></pre> |
| </main> |
| <script src="/demo.js"></script> |
