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; var totalPixels = 0; do { canvas.width = this.img.naturalWidth * pixelRatio; canvas.height = this.img.naturalHeight * pixelRatio; totalPixels = canvas.width * canvas.height; pixelRatio--; } while (pixelRatio > 0 && totalPixels > 16777216) // If the totalPixels is still too big to draw on a canvas, scale it down if (totalPixels > 16777216) { var adjustment = 1 - ((totalPixels - 16777216) / totalPixels); canvas.width = canvas.width * adjustment; canvas.height = canvas.height * adjustment; } 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 postRenderProcessing() { ImageViewer.init(); showFeedInspectorSetup(); } function onResize() { const meta = document.querySelector("meta[name=viewport]"); if (!meta) return; const originalContent = meta.content; meta.setAttribute("content", originalContent + ", maximum-scale=1.0"); meta.setAttribute("content", originalContent); } window.addEventListener("resize", onResize); 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; }