NetNewsWire/Multiplatform/Shared/Article/main_multiplatform.js

499 lines
13 KiB
JavaScript

var activeImageViewer = null;
class ImageViewer {
constructor(img) {
this.img = img;
this.loadingInterval = null;
this.activityIndicator = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiNjY2NjY2MiIHRyYW5zZm9ybT0icm90YXRlKDMwIDY0IDY0KSIvPjxwYXRoIGQ9Ik01OS42IDBoOHY0MGgtOFYweiIgZmlsbD0iI2NjY2NjYyIgdHJhbnNmb3JtPSJyb3RhdGUoNjAgNjQgNjQpIi8+PHBhdGggZD0iTTU5LjYgMGg4djQwaC04VjB6IiBmaWxsPSIjY2NjY2NjIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiNjY2NjY2MiIHRyYW5zZm9ybT0icm90YXRlKDEyMCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiNiMmIyYjIiIHRyYW5zZm9ybT0icm90YXRlKDE1MCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiM5OTk5OTkiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiM3ZjdmN2YiIHRyYW5zZm9ybT0icm90YXRlKDIxMCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiM2NjY2NjYiIHRyYW5zZm9ybT0icm90YXRlKDI0MCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiM0YzRjNGMiIHRyYW5zZm9ybT0icm90YXRlKDI3MCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiMzMzMzMzMiIHRyYW5zZm9ybT0icm90YXRlKDMwMCA2NCA2NCkiLz48cGF0aCBkPSJNNTkuNiAwaDh2NDBoLThWMHoiIGZpbGw9IiMxOTE5MTkiIHRyYW5zZm9ybT0icm90YXRlKDMzMCA2NCA2NCkiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDY0IDY0OzMwIDY0IDY0OzYwIDY0IDY0OzkwIDY0IDY0OzEyMCA2NCA2NDsxNTAgNjQgNjQ7MTgwIDY0IDY0OzIxMCA2NCA2NDsyNDAgNjQgNjQ7MjcwIDY0IDY0OzMwMCA2NCA2NDszMzAgNjQgNjQiIGNhbGNNb2RlPSJkaXNjcmV0ZSIgZHVyPSIxMDgwbXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9nPjwvc3ZnPg==";
}
isLoaded() {
return this.img.classList.contains("nnwLoaded");
}
clicked() {
this.showLoadingIndicator();
if (this.isLoaded()) {
this.showViewer();
} else {
var callback = () => {
if (this.isLoaded()) {
clearInterval(this.loadingInterval);
this.showViewer();
}
}
this.loadingInterval = setInterval(callback, 100);
}
}
cancel() {
clearInterval(this.loadingInterval);
this.hideLoadingIndicator();
}
showViewer() {
this.hideLoadingIndicator();
var canvas = document.createElement("canvas");
var pixelRatio = window.devicePixelRatio;
do {
canvas.width = this.img.naturalWidth * pixelRatio;
canvas.height = this.img.naturalHeight * pixelRatio;
pixelRatio--;
} while (pixelRatio > 0 && canvas.width * canvas.height > 16777216)
canvas.getContext("2d").drawImage(this.img, 0, 0, canvas.width, canvas.height);
const rect = this.img.getBoundingClientRect();
const message = {
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
imageTitle: this.img.title,
imageURL: canvas.toDataURL(),
};
var jsonMessage = JSON.stringify(message);
window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage);
}
hideImage() {
this.img.style.opacity = 0;
}
showImage() {
this.img.style.opacity = 1
}
showLoadingIndicator() {
var wrapper = document.createElement("div");
wrapper.classList.add("activityIndicatorWrap");
this.img.parentNode.insertBefore(wrapper, this.img);
wrapper.appendChild(this.img);
var activityIndicatorImg = document.createElement("img");
activityIndicatorImg.classList.add("activityIndicator");
activityIndicatorImg.style.opacity = 0;
activityIndicatorImg.src = this.activityIndicator;
wrapper.appendChild(activityIndicatorImg);
activityIndicatorImg.style.opacity = 1;
}
hideLoadingIndicator() {
var wrapper = this.img.parentNode;
if (wrapper.classList.contains("activityIndicatorWrap")) {
var wrapperParent = wrapper.parentNode;
wrapperParent.insertBefore(this.img, wrapper);
wrapperParent.removeChild(wrapper);
}
}
static init() {
cancelImageLoad();
// keep track of when an image has finished downloading for ImageViewer
document.querySelectorAll("img").forEach(element => {
element.onload = function() {
this.classList.add("nnwLoaded");
}
});
// Add the click listener for images
window.onclick = function(event) {
if (event.target.matches("img") && !event.target.classList.contains("nnw-nozoom")) {
if (activeImageViewer && activeImageViewer.img === event.target) {
cancelImageLoad();
} else {
cancelImageLoad();
activeImageViewer = new ImageViewer(event.target);
activeImageViewer.clicked();
}
}
}
}
}
function cancelImageLoad() {
if (activeImageViewer) {
activeImageViewer.cancel();
activeImageViewer = null;
}
}
function hideClickedImage() {
if (activeImageViewer) {
activeImageViewer.hideImage();
}
}
// Used to animate the transition from a fullscreen image
function showClickedImage() {
if (activeImageViewer) {
activeImageViewer.showImage();
}
window.webkit.messageHandlers.imageWasShown.postMessage("");
}
function showFeedInspectorSetup() {
document.getElementById("nnwImageIcon").onclick = function(event) {
window.webkit.messageHandlers.showFeedInspector.postMessage("");
}
}
function linkHover() {
window.onmouseover = function(event) {
var closestAnchor = event.target.closest('a')
if (closestAnchor) {
window.webkit.messageHandlers.mouseDidEnter.postMessage(closestAnchor.href);
}
}
window.onmouseout = function(event) {
var closestAnchor = event.target.closest('a')
if (closestAnchor) {
window.webkit.messageHandlers.mouseDidExit.postMessage(closestAnchor.href);
}
}
}
function postRenderProcessing() {
ImageViewer.init();
showFeedInspectorSetup();
linkHover();
}
function makeHighlightRect({left, top, width, height}, offsetTop=0, offsetLeft=0) {
const overlay = document.createElement('a');
Object.assign(overlay.style, {
position: 'absolute',
left: `${Math.floor(left + offsetLeft)}px`,
top: `${Math.floor(top + offsetTop)}px`,
width: `${Math.ceil(width)}px`,
height: `${Math.ceil(height)}px`,
backgroundColor: 'rgba(200, 220, 10, 0.4)',
pointerEvents: 'none'
});
return overlay;
}
function clearHighlightRects() {
let container = document.getElementById('nnw:highlightContainer')
if (container) container.remove();
}
function highlightRects(rects, clearOldRects=true, makeHighlightRect=makeHighlightRect) {
const article = document.querySelector('article');
let container = document.getElementById('nnw:highlightContainer');
article.style.position = 'relative';
if (container && clearOldRects)
container.remove();
container = document.createElement('div');
container.id = 'nnw:highlightContainer';
article.appendChild(container);
const {top, left} = article.getBoundingClientRect();
return Array.from(rects, rect =>
container.appendChild(makeHighlightRect(rect, -top, -left))
);
}
FinderResult = class {
constructor(result) {
Object.assign(this, result);
}
range() {
const range = document.createRange();
range.setStart(this.node, this.offset);
range.setEnd(this.node, this.offsetEnd);
return range;
}
bounds() {
return this.range().getBoundingClientRect();
}
rects() {
return this.range().getClientRects();
}
highlight({clearOldRects=true, fn=makeHighlightRect} = {}) {
highlightRects(this.rects(), clearOldRects, fn);
}
scrollTo() {
scrollToRect(this.bounds(), this.node);
}
toJSON() {
return {
rects: Array.from(this.rects()),
bounds: this.bounds(),
index: this.index,
matchGroups: this.match
};
}
toJSONString() {
return JSON.stringify(this.toJSON());
}
}
Finder = class {
constructor(pattern, options) {
if (!pattern.global) {
pattern = new RegExp(pattern, 'g');
}
this.pattern = pattern;
this.lastResult = null;
this._nodeMatches = [];
this.options = {
rootSelector: '.articleBody',
startNode: null,
startOffset: null,
}
this.resultIndex = -1
Object.assign(this.options, options);
this.walker = document.createTreeWalker(this.root, NodeFilter.SHOW_TEXT);
}
get root() {
return document.querySelector(this.options.rootSelector)
}
get count() {
const node = this.walker.currentNode;
const index = this.resultIndex;
this.reset();
let result, count = 0;
while ((result = this.next())) ++count;
this.resultIndex = index;
this.walker.currentNode = node;
return count;
}
reset() {
this.walker.currentNode = this.options.startNode || this.root;
this.resultIndex = -1;
}
[Symbol.iterator]() {
return this;
}
next({wrap = false} = {}) {
const { startNode } = this.options;
const { pattern, walker } = this;
let { node, matchIndex = -1 } = this.lastResult || { node: startNode };
while (true) {
if (!node)
node = walker.nextNode();
if (!node) {
if (!wrap || this.resultIndex < 0) break;
this.reset();
continue;
}
let nextIndex = matchIndex + 1;
let matches = this._nodeMatches;
if (!matches.length) {
matches = Array.from(node.textContent.matchAll(pattern));
nextIndex = 0;
}
if (matches[nextIndex]) {
this._nodeMatches = matches;
const m = matches[nextIndex];
this.lastResult = new FinderResult({
node,
offset: m.index,
offsetEnd: m.index + m[0].length,
text: m[0],
match: m,
matchIndex: nextIndex,
index: ++this.resultIndex,
});
return { value: this.lastResult, done: false };
}
this._nodeMatches = [];
node = null;
}
return { value: undefined, done: true };
}
/// TODO Call when the search text changes
retry() {
if (this.lastResult) {
this.lastResult.offsetEnd = this.lastResult.offset;
}
}
toJSON() {
const results = Array.from(this);
}
}
function scrollParent(node) {
let elt = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
while (elt) {
if (elt.scrollHeight > elt.clientHeight)
return elt;
elt = elt.parentElement;
}
}
function scrollToRect({top, height}, node, pad=20, padBottom=60) {
const scrollToTop = top - pad;
let scrollBy = scrollToTop;
if (scrollToTop >= 0) {
const visible = window.visualViewport;
const scrollToBottom = top + height + padBottom - visible.height;
// The top of the rect is already in the viewport
if (scrollToBottom <= 0 || scrollToTop === 0)
// Don't need to scroll up--or can't
return;
scrollBy = Math.min(scrollToBottom, scrollBy);
}
scrollParent(node).scrollBy({ top: scrollBy });
}
function withEncodedArg(fn) {
return function(encodedData, ...rest) {
const data = encodedData && JSON.parse(atob(encodedData));
return fn(data, ...rest);
}
}
function escapeRegex(s) {
return s.replace(/[.?*+^$\\()[\]{}]/g, '\\$&');
}
class FindState {
constructor(options) {
let { text, caseSensitive, regex } = options;
if (!regex)
text = escapeRegex(text);
const finder = new Finder(new RegExp(text, caseSensitive ? 'g' : 'ig'));
this.results = Array.from(finder);
this.index = -1;
this.options = options;
}
get selected() {
return this.index > -1 ? this.results[this.index] : null;
}
toJSON() {
return {
index: this.index > -1 ? this.index : null,
results: this.results,
count: this.results.length
};
}
selectNext(step=1) {
const index = this.index + step;
const result = this.results[index];
if (result) {
this.index = index;
result.highlight();
result.scrollTo();
}
return result;
}
selectPrevious() {
return this.selectNext(-1);
}
}
CurrentFindState = null;
const ExcludeKeys = new Set(['top', 'right', 'bottom', 'left']);
updateFind = withEncodedArg(options => {
// TODO Start at the current result position
// TODO Introduce slight delay, cap the number of results, and report results asynchronously
let newFindState;
if (!options || !options.text) {
clearHighlightRects();
return
}
try {
newFindState = new FindState(options);
} catch (err) {
clearHighlightRects();
throw err;
}
if (newFindState.results.length) {
let selected = CurrentFindState && CurrentFindState.selected;
let selectIndex = 0;
if (selected) {
let {node: currentNode, offset: currentOffset} = selected;
selectIndex = newFindState.results.findIndex(r => {
if (r.node === currentNode) {
return r.offset >= currentOffset;
}
let relation = currentNode.compareDocumentPosition(r.node);
return Boolean(relation & Node.DOCUMENT_POSITION_FOLLOWING);
});
}
newFindState.selectNext(selectIndex+1);
} else {
clearHighlightRects();
}
CurrentFindState = newFindState;
return btoa(JSON.stringify(CurrentFindState, (k, v) => (ExcludeKeys.has(k) ? undefined : v)));
});
selectNextResult = withEncodedArg(options => {
if (CurrentFindState)
CurrentFindState.selectNext();
});
selectPreviousResult = withEncodedArg(options => {
if (CurrentFindState)
CurrentFindState.selectPrevious();
});
function endFind() {
clearHighlightRects()
CurrentFindState = null;
}