diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 6730a6ea0..f2fd4d24e 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -1,11 +1,20 @@ +// These mouse functions are used by NetNewsWire for Mac to display link previews function mouseDidEnterLink(anchor) { window.webkit.messageHandlers.mouseDidEnter.postMessage(anchor.href); } - function mouseDidExitLink(anchor) { window.webkit.messageHandlers.mouseDidExit.postMessage(anchor.href); } +// Add the mouse listeners for the above functions +function linkHover() { + document.querySelectorAll("a").forEach(element => { + element.addEventListener("mouseenter", function() { mouseDidEnterLink(this) }); + element.addEventListener("mouseleave", function() { mouseDidExitLink(this) }); + }); +} + +// Here we are making iframes responsive. Particularly useful for inline Youtube videos. function wrapFrames() { document.querySelectorAll("iframe").forEach(element => { var wrapper = document.createElement("div"); @@ -15,19 +24,15 @@ function wrapFrames() { }); } +// Strip out all styling so that we have better control over layout function stripStyles() { document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove()); document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => element.removeAttribute("style")); } -function linkHover() { - var anchors = document.getElementsByTagName("a"); - for (var i = 0; i < anchors.length; i++) { - anchors[i].addEventListener("mouseenter", function() { mouseDidEnterLink(this) }); - anchors[i].addEventListener("mouseleave", function() { mouseDidExitLink(this) }); - } -} - +// Add the playsinline attribute to any HTML5 videos that don't have it. +// Without this attribute videos may autoplay and take over the whole screen +// on an iphone when viewing an article. function inlineVideos() { document.querySelectorAll("video").forEach(element => { element.setAttribute("playsinline", true) @@ -41,6 +46,7 @@ function error() { function render(data) { document.getElementsByTagName("style")[0].innerHTML = data.style; document.body.innerHTML = data.body; + window.scrollTo(0, 0); wrapFrames()