| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> |
| <title>Apache Annotator (incubating)</title> |
| <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" /> |
| <style> |
| * { |
| box-sizing: border-box; |
| } |
| .highlighted { |
| background-color: rgba(255, 255, 120, 0.5); |
| outline: 0.1px solid rgba(255, 100, 0, 0.8); |
| } |
| #debug { |
| color: #666; |
| background: #f8f8f8; |
| padding: 2em; |
| height: 19.3em; |
| overflow-y: scroll; |
| resize: vertical; |
| } |
| #debug.error { |
| color: red; |
| } |
| #selectable, #corpus { |
| display: inline-block; |
| padding: 1em; |
| line-height: 1.4em; |
| font-size: 18px; |
| font-family: sans-serif; |
| border: 1px solid lightgrey; |
| } |
| a[href^="#selector"]:before { |
| content: '📌'; |
| font-size: 75% |
| } |
| </style> |
| <script src="demo.js"></script> |
| </head> |
| |
| <body> |
| <div class="ui borderless stackable top attached main menu"> |
| <div class="ui container"> |
| <h2 class="header item"> |
| <a href="../">Apache Annotator <em style="font-size: 14px; margin-left: 1em">(incubating)</em></a> |
| </h2> |
| |
| <div class="right menu"> |
| <a class="active item" href="demo"><span class="ui positive button">Demo!</span></a> |
| <a class="item" rel="external" href="https://www.npmjs.com/org/annotator">NPM</a> |
| <a class="item" rel="external" href="https://github.com/apache?q=annotator#org-repositories">Code</a> |
| <a class="item" rel="external" href="https://github.com/apache/incubator-annotator/issues">Issues</a> |
| <a class="item" rel="external" href="https://github.com/apache/incubator-annotator/wiki">Wiki</a> |
| <a class="item" rel="external" href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/">Mailing List</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic segment container"> |
| <p> |
| This page demonstrates |
| <a href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#selectors" |
| target="_blank">Selectors</a>. |
| Try selecting some text in the first paragraph below! In the second paragraph, the selector is 'anchored', |
| i.e. text it refers to is found and highlighted, and on the right the selector is displayed in JSON format. |
| </p> |
| </div> |
| |
| <div class="ui doubling stackable grid container"> |
| <div class="four wide column"> |
| <h4>Select text here</h4> |
| <p id="selectable">Hello, annotated world! To annotate, or not to annotate, that is the question.</p> |
| </div> |
| |
| <div class="four wide column"> |
| <h4>Text is found here</h4> |
| <p id="corpus">Hello, annotated world! To annotate, or not to annotate, that is the question.</p> |
| </div> |
| |
| <div class="eight wide column"> |
| <h4>JSON output</h4> |
| <pre id="debug"></pre> |
| </div> |
| </div> |
| |
| <div class="ui basic segment container"> |
| <p> |
| 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. |
| The selector is serialised and shown the window location, |
| <a rel="external" |
| href="https://www.w3.org/TR/2017/NOTE-selectors-states-20170223/#frags" |
| target="_blank">as the fragment identifier</a>. |
| </p> |
| <p>Other selectors you can try:</p> |
| <ul> |
| <li> |
| <a href="#selector(type=RangeSelector,startSelector=selector(type=TextQuoteSelector,exact=ann),endSelector=selector(type=TextQuoteSelector,exact=!))">RangeSelector</a> |
| (<a rel="external" |
| href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#range-selector" target="_blank">spec</a>) |
| </li> |
| <li> |
| <a href="#selector(type=TextQuoteSelector,exact=annotated%20world,refinedBy=selector(type=TextQuoteSelector,exact=tat))">Refining |
| a selector using another selector</a> |
| (<a rel="external" |
| href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#refinement-of-selection" target="blank">spec</a>) |
| </li> |
| <li><a href="#selector(type=TextQuoteSelector,exact=not)">Multiple matches</a> (but overlapping matches currently mess up the highlighter)</li> |
| <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></li> |
| </ul> |
| </div> |
| |
| <footer class="ui bottom attached segment"> |
| <div class="ui container"> |
| <div class="ui equal height divided stackable grid"> |
| <div class="four wide column"> |
| <a class="ui left floated medium image" href="https://apache.org/" target="_blank"> |
| <img src="https://incubator.apache.org/images/incubator_feather_egg_logo_sm.png" alt="logo of the Apache Incubator" /> |
| </a> |
| <p> |
| <em>Copyright © 2016-2018 The Apache Software Foundation, Licensed under |
| the <a href="https://www.apache.org/licenses/LICENSE-2.0" rel="license external">Apache License, Version 2.0</a>. |
| | |
| <a rel="external" href="https://www.apache.org/foundation/policies/privacy">Privacy Policy</a> |
| </em> |
| </p> |
| </div> |
| <div class="nine wide column"> |
| <p> |
| <em>Apache Annotator is an effort undergoing incubation at <a target="_blank" href="https://apache.org/">The Apache Software Foundation (ASF)</a> sponsored by the Apache Incubator PMC. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</em></p> |
| <p><em>Apache®, the names of Apache projects, and the feather logo are either <a rel="external" href="https://www.apache.org/foundation/marks/list/">registered trademarks or trademarks</a> of the Apache Software Foundation in the United States and/or other countries.</em></p> |
| </div> |
| <div class="three wide column"> |
| <h4 class="header">The <abbr title="Apache Software Foundation">ASF</abbr></h4> |
| <div class="ui link list"> |
| <a class="item" rel="external" href="https://incubator.apache.org/">Apache Incubator</a> |
| <a class="item" rel="external" href="https://www.apache.org/">About the ASF</a> |
| <a class="item" rel="external" href="https://www.apache.org/events/current-event">Events</a> |
| <a class="item" rel="external" href="https://www.apache.org/foundation/thanks.html">Thanks</a> |
| <a class="item" rel="external" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a> |
| <a class="item" rel="external" href="https://www.apache.org/security/">Security</a> |
| <a class="item" rel="external" href="https://www.apache.org/licenses/">License</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| </body> |
| </html> |
