content/demo/index.html - incubator-annotator-website - Git at Google

 <!--
 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.

 SPDX-FileCopyrightText: The Apache Software Foundation
 SPDX-License-Identifier: Apache-2.0
 -->
 <!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="main.js"></script>
 </head>
 <body>
   <header>
     <h1><a href="https://annotator.apache.org">Apache Annotator</a> <small>(incubating)</small></h1>
   </header>
   <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">in the project repo</a> (also mirrored <a href="https://github.com/apache/incubator-annotator/tree/main/web">on GitHub</a>)</p>

     <div class="columns full-width">
       <div class="column">
         <h2>Select text here</h2>
         <p id="source" contenteditable>Hello, <em>annotated world!</em> 🙂 <b>To annotate, or <em>not</em> to annotate</b>, 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>
           <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>
         <p id="target" contenteditable><em>Hello, annotated</em> world! 🙂 To annotate, or not to annotate, <b><em>that</em> is the question.</b></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>
	<!--
	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.

	SPDX-FileCopyrightText: The Apache Software Foundation
	SPDX-License-Identifier: Apache-2.0
	-->
	<!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="main.js"></script>
	</head>
	<body>
	<header>
	<h1><a href="https://annotator.apache.org">Apache Annotator</a> <small>(incubating)</small></h1>
	</header>
	<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">in the project repo</a> (also mirrored <a href="https://github.com/apache/incubator-annotator/tree/main/web">on GitHub</a>)</p>

	<div class="columns full-width">
	<div class="column">
	<h2>Select text here</h2>
	<p id="source" contenteditable>Hello, <em>annotated world!</em> 🙂 <b>To annotate, or <em>not</em> to annotate</b>, 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>
	<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>
	<p id="target" contenteditable><em>Hello, annotated</em> world! 🙂 To annotate, or not to annotate, <b><em>that</em> is the question.</b></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>