Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async loading #1

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Async loading #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1f2ef6d
Strict Javascript
peter-lyons-kehl Aug 23, 2018
70b9506
Script can be loaded as async
peter-lyons-kehl Aug 23, 2018
1e423bc
For upcoming demo with async script. Initially index-async.html is a …
peter-lyons-kehl Aug 23, 2018
4afb98d
Async demo. Added type="text/javascript" to standard index.html, too.
peter-lyons-kehl Aug 23, 2018
bf887cb
Replace my previous spaces with tabs. Code formatting.
peter-lyons-kehl Aug 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions demo/index-async.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
* {
border: 1px solid red;
padding: 0.2em 0.5em;
}

*:before {
content: attr(id);
color: red;
padding-right: 0.5em
}
</style>
</head>
<body>
This is how the script works:
<ol>
<li>Select any text on this page, even cross page elements</li>
<li>The hash will be updated with the encoded representaion of selection range: <code>#sel:xxxxxxxxxxxx</code></li>
<li>Reload the page, or copy the URL and open it in another tab or browser &mdash; once the page is loaded, the selection will be restored, and scrolled into view</li>
</ol>

<p>Pargraph 1</p>
<p>Pargraph 2. <span>Span with no ID inside</span></p>
<p>Pargraph 3</p>
<img src="https://imgs.xkcd.com/comics/hilighting.png" />
<p>Pargraph 4. <span id="span1">Span with ID inside.</span></p>
<div id="div1">
div
<p>Pargraph 5. <span id="span2">Span with ID inside.</span> Another text <em>with</em> <strong>different</strong> formatting.</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div style="height: 1000px"></div>
<p>Pargraph 6</p>
<div style="height: 1000px"></div>
<p>Pargraph 7</p>
<div style="height: 1000px"></div>
<p>Pargraph 8</p>
<!-- The only difference from index.html is async="true" (plus this comment).-->
<script src="../lib/LinkToSelection.js" async="true" type="text/javascript"></script>
</body>
</html>

2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<p>Pargraph 7</p>
<div style="height: 1000px"></div>
<p>Pargraph 8</p>
<script src="../lib/LinkToSelection.js"></script>
<script src="../lib/LinkToSelection.js" type="text/javascript"></script>
</body>
</html>

25 changes: 19 additions & 6 deletions lib/LinkToSelection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Copyright (C) 2016-2017 Igor Afanasyev, https://github.com/iafan/LinkToSelection
// Version: 0.3
"use strict";

(function() {
var HASH_PREFIX = 'sel:';
Expand Down Expand Up @@ -65,12 +66,16 @@
}

function encodePart(a, b) {
return b == 0 ? a : a + POS_SEPARATOR + b;
return b==0
? a
: a + POS_SEPARATOR + b;
}

function splitPathOnce(s) {
var i = s.indexOf(PATH_SEPARATOR);
return i == -1 ? [s, undefined] : [s.substr(0, i), s.substr(i + PATH_SEPARATOR.length)];
return i==-1
? [s, undefined]
: [s.substr(0, i), s.substr(i + PATH_SEPARATOR.length)];
}

function calculateSelection() {
Expand Down Expand Up @@ -127,12 +132,14 @@
function recreateSelection(s) {
var parts = s.split(RANGE_SEPARATOR);
var start = parts[0].split(POS_SEPARATOR);
var end = parts[1].split(POS_SEPARATOR);
var end = parts[1].split(POS_SEPARATOR);

var startContainer = findNode(document.body, start[0]);
var endContainer = end[0] == SELECTOR_SAME ? startContainer : findNode(document.body, end[0]);
var endContainer = end[0]==SELECTOR_SAME
? startContainer
: findNode(document.body, end[0]);
var startOffset = start[1] || 0;
var endOffset = end[1] || 0;
var endOffset = end[1] || 0;

var range = document.createRange();
range.setStart(startContainer, startOffset);
Expand Down Expand Up @@ -187,6 +194,7 @@
}

function onSelectionChange(e) {
// Developing in Firefox? Use console.log() but don't use debugger; statements directly here. Firefox 61 Debugger doesn't handle debugger; here well, and it clears the selection before calculateSelection()! However, OK to have debugger; in calculateSelection().
console.log('onSelectionChange()');
clearTimeout(selectionTimer);
selectionTimer = setTimeout(calculateSelection, SELECTION_TIMEOUT);
Expand Down Expand Up @@ -226,7 +234,12 @@
}

if (window.getSelection) {
window.addEventListener('DOMContentLoaded', domContentLoaded);
if( document.readyState==='loading' ) {
window.addEventListener('DOMContentLoaded', domContentLoaded);
}
else {
domContentLoaded();
}
} else {
console.warn('window.getSelection is not supported in this browser');
}
Expand Down