Skip to content

Instantly share code, notes, and snippets.

@eliorsterling

eliorsterling/readingmode.js

Forked from luckyshot/readingmode.js
Created June 19, 2020 01:03
Show Gist options
  • Save eliorsterling/f957118c28dfd193518386347ad18cb1 to your computer and use it in GitHub Desktop.
Save eliorsterling/f957118c28dfd193518386347ad18cb1 to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklet: Readability (remove all styling from a website, optimize for reading and scroll to article). Also available as a Chrome Extension: https://chrome.google.com/webstore/detail/readingmode-lightest/peoapnglceoafojobbkpohnojniabmkd
Raw
readingmode.js
javascript:
/*! ReadingMode © Xavi Esteve */
(function(d) {
var el = d.getElementsByTagName("*");
var htmlDiv = d.createElement("div");
var readingModeMenu = d.createElement("div");
var title = d.title;
var rmSettings = {};
/* Remove all event listeners */
// d.querySelector("body").outerHTML = d.querySelector("body").outerHTML;
/* Remove everything in head */
d.head.innerHTML = '';
d.title = title;
/* Disable existing styles */
for (i = 0; i < d.styleSheets.length; i++) { d.styleSheets[i].disabled = true; }
for (i = 0; i < el.length; i++) { el[i].style.cssText = ""; }
/* Dark mode */
if (new Date().getHours() >= 21 || new Date().getHours() < 6) {
d.body.className = 'readingmode-dark';
}else{
d.body.className = "";
}
/* Add styles */
htmlDiv.innerHTML =
"<link href='https://fonts.googleapis.com/css?family=Quicksand:300,500,700' rel='stylesheet'> \
<link href='https://fonts.googleapis.com/css?family=Crimson+Text&display=swap' rel='stylesheet'> \
<style> \
* {position:static !important} \
footer,hr,nav,sidebar,aside,[class*=account],[class*=actions],[class*=alert],[class*=author],[class*=banner],[class*=breaking],[class*=carousel],[class*=cookie],[class*=engage],[class*=list],[class*=login],[class*=logo],[class*=menu],[class*=message],[class*=meta],[class*=nav],[class*=paywall],[class*=privacy],[class*=popup],[class*=recommend],[class*=related],[class*=search],[class*=share],[class*=skip],[class*=social],[class*=sponsored],[class*=subscribe],[class*=subscription],[class*=tags],[itemprop*=logo] {display:none} \
html,article,[class*=article],[class*=post],[class*=content],[itemprop*=articleBody],[itemprop*=headline] {display:block !important;} \
body {color:#1c1f29;background:#fafbfc;font-family:Quicksand,Rubik,BlinkMacSystemFont,Lato,'Segoe UI',sans-serif;font-weight:500;font-size:21px;line-height:1.9;margin:0 auto;padding:0 5% 100px 5%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;hyphens:auto;max-width:32em;letter-spacing: -.01em;transition:font-size .5s ease,max-width .5s ease,color 2s ease-out, background 2s ease-out;} \
::selection{background:#fff9b8;color:#000;} \
h1,h2,h3,h4,h5,h6 {color:#666;margin:0;padding:2em 0 .5em;font-family:sans-serif;font-weight:300 !important;line-height: 1.33;transition:color 2s ease-out} \
h1 {font-size:200%} \
h4,h5,h6 {font-size:90%;letter-spacing:.125em;text-transform:uppercase;} \
a {border-bottom:2px solid rgba(58, 85, 165, 0.1);color:inherit;text-decoration:none;} \
p {margin:0 0 1.66rem;letter-spacing:-.003em;} \
b,strong{color:#000;font-weight: normal !important;transition: color 2s ease-out;} \
a:hover {color: #3a55a5;} \
img,video,object,embed,canvas,svg,iframe {height:16px;width:16px;display:block;margin: 0 0 1.66rem} \
img:hover,video:hover,object:hover,embed:hover,canvas:hover,svg:hover,iframe:hover, \
img:focus,video:focus,object:focus,embed:focus,canvas:focus,svg:focus,iframe:focus {height:auto;width:auto;max-width:100%;} \
blockquote {position: relative !important;color: #6d6d6d;padding: 1em 20% 1em 0;font-size: 120%;font-family: sans-serif;font-style:italic;} \
figure {font-size: 70%;font-style: italic;} \
figcaption {opacity:.5} \
pre, code {background-color: #f2f9fa;border-radius:2px;color: #1f1e14;font-family: Fira Mono,monospace;font-size: 1rem;font-weight: 300;} \
pre {padding: 1em 0 1em 2em;line-height: 1.5;border-left: 5px solid #ebf1f2;} \
code {padding: 0.2em 0.3em;} \
table {width: 100%;text-align: left;padding: 2em 0;}tr td, tr th {border-bottom: 1px solid #8a8a8a21;vertical-align: top;padding: 5px;} \
body.readingmode-images img,body.readingmode-images video,body.readingmode-images object,body.readingmode-images embed,body.readingmode-images canvas,body.readingmode-images iframe {max-width:100%;height:auto;width:auto;display:inline-block;} \
textarea,input[type=text] {width: 100%;font-size: 1em;border: 1px solid rgba(125, 125, 125, 0.5);background: transparent;color: inherit; } \
fieldset {border: none;} \
#readingModeMenu {position: fixed !important; top: 0; right: 0;opacity:0.05;padding:20px;transition: opacity .5s ease;} \
#readingModeMenu:hover {opacity:1;} \
#readingModeMenu svg {opacity:.8;height: 32px;width: 32px;cursor: pointer;padding: 4px;margin-bottom: 16px;transition: opacity .5s ease;} \
#readingModeMenu svg:hover {opacity:1;height: 32px;width: 32px;cursor: pointer;padding: 4px;margin-bottom: 16px;} \
body.readingmode-dark {color: #ffa500;background: #000;} \
body.readingmode-dark b, body.readingmode-dark strong {color: #ffca69;} \
body.readingmode-dark h1, body.readingmode-dark h2, body.readingmode-dark h3, body.readingmode-dark h4, body.readingmode-dark h5,body.readingmode-dark h6 {color: #f12200} \
body.readingmode-dark img {background: #ffffffba;} \
body.readingmode-dark code, body.readingmode-dark pre {color: #ff6200;background: #111; border: none;} \
body.readingmode-dark #readingModeMenu svg {background:#7d0202;} \
body.readingmode-serif {max-width: 681px; font-family: 'Crimson Text',sans-serif; font-size: 24px; line-height: 139.5%;} \
body.readingmode-serif p {margin: 0 0 1.45rem;} \
</style>";
d.querySelector("head").appendChild(htmlDiv);
/* UI menu */
readingModeMenu.id = "readingModeMenu";
readingModeMenu.innerHTML = ' \
<svg data-action="font-family" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Font family</title><g id="ff" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M16.71875,5.375 L22.96875,21.875 C23.3437519,22.8541716 23.6458322,23.6041641 23.875,24.125 C24.0000006,24.4375016 24.3229141,24.6927073 24.84375,24.890625 C25.3645859,25.0885427 25.7499988,25.1875 26,25.1875 C26.0833338,25.1875 26.125,25.3854147 26.125,25.78125 C26.125,25.8645838 26.1041669,25.9687494 26.0625,26.09375 C23.9791563,25.9895828 22.8333344,25.9375 22.625,25.9375 C22.6041666,25.9375 21.3958453,25.9895828 19,26.09375 C18.9166663,26.0104163 18.8802083,25.838543 18.890625,25.578125 C18.9010417,25.317707 18.9479163,25.1875 19.03125,25.1875 C19.2812513,25.1875 19.5937481,25.1354172 19.96875,25.03125 C20.3437519,24.9270828 20.5624997,24.7916675 20.625,24.625 C20.6666669,24.4583325 20.6875,24.2916675 20.6875,24.125 C20.6875,23.8541653 20.651042,23.5364602 20.578125,23.171875 C20.505208,22.8072898 20.4375003,22.5208344 20.375,22.3125 L20.25,21.96875 L18.96875,18.4375 C18.9062497,18.3541663 18.8437503,18.3125 18.78125,18.3125 C17.9687459,18.2499997 16.2503659,18.3125 15.5,18.3125 L15.6325261,5.3 L16,5.3 C16.11229,5.3 16.297362,5.3 16.4431961,5.3 L16.71875,5.375 Z M15.5156992,16.716047 C16.4323705,16.716047 17.1770784,16.6875003 18.15625,16.625 L18.25,16.46875 L15.5903778,9.56587219 L15.5156992,16.716047 Z" id="A" fill="#000000" fill-rule="nonzero"></path><path d="M7.59800664,26.3 C7.43853741,26.3 7.29900392,26.2400006 7.17940199,26.12 C7.05980007,25.9999994 7,25.8600008 7,25.7 L7.05980066,25.37 L14.6245847,5.9 C14.784054,5.499998 15.0730876,5.3 15.4916944,5.3 L16,5.3 C16,5.3 15.6550516,5.63242654 15.6156006,6.85482788 L15.4916944,21.05 L10.7076412,21.05 L8.8538206,25.85 C8.81395329,25.9500005 8.73920321,26.0499995 8.62956811,26.15 C8.51993301,26.2500005 8.37541618,26.3 8.19601329,26.3 L7.59800664,26.3 Z M11,19.3 L15.5,19.3 L15.6096954,8.17344666 L11,19.3 Z" id="A" fill="#000000" fill-rule="nonzero"></path></g></svg> \
<svg data-action="size-increase" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Font size bigger</title><g id="fsi" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rubik-Light, Rubik, Helvetica, Arial" font-size="32" font-weight="300"><text id="A" fill="#000000"><tspan x="5.6" y="27">A</tspan></text></g></svg> \
<svg data-action="size-decrease" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Font size smaller</title><g id="fsd" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rubik-Light, Rubik, Helvetica, Arial" font-size="20" font-weight="300"><text id="A" fill="#000000"><tspan x="9.5" y="23">A</tspan></text></g></svg> \
<svg data-action="width-increase" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Increase width</title><g id="wi" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(2.000000, 5.000000)" fill="#000000"><rect x="0" y="0" width="28" height="1.5" rx="0.75"></rect><rect x="0" y="5" width="28" height="1.5" rx="0.75"></rect><rect x="0" y="10" width="28" height="1.5" rx="0.75"></rect><rect x="0" y="15" width="28" height="1.5" rx="0.75"></rect><rect x="0" y="20" width="28" height="1.5" rx="0.75"></rect></g></g></svg> \
<svg data-action="width-decrease" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Decrease width</title><g id="wd" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(7.000000, 5.000000)" fill="#000000"><rect x="5.68434189e-14" y="0" width="17.2839506" height="1.5" rx="0.75"></rect><rect x="5.68434189e-14" y="5" width="17.2839506" height="1.5" rx="0.75"></rect><rect x="5.68434189e-14" y="10" width="17.2839506" height="1.5" rx="0.75"></rect><rect x="5.68434189e-14" y="15" width="17.2839506" height="1.5" rx="0.75"></rect><rect x="5.68434189e-14" y="20" width="17.2839506" height="1.5" rx="0.75"></rect></g></g></svg> \
<svg data-action="night-mode" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Night mode</title><g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="M19.3029867,7.46700028 C15.7097069,10.1020721 14.5644866,13.0169966 15.5265425,16.2108768 C16.5265425,19.5307254 19.5989263,21.2911734 24.0265425,21.0307254 C19.7500984,28.0944505 9.75245733,26.0492768 7.52654254,19.5307254 C5.30062775,13.0121739 10.3029867,4.96700028 19.3029867,7.46700028 Z" id="Path-5" stroke="#000000"></path></g></svg> \
<svg data-action="toggle-media" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Toggle media</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(6.000000, 8.000000)" stroke="#000000" stroke-width="1.25"><rect x="0.75" y="0.75" width="18.5" height="15.5"></rect><circle cx="5.5" cy="5.5" r="2.5"></circle><polyline points="2 16 12.7368421 7 19 15.5"></polyline></g></g></svg> \
<svg data-action="toggle-fullscreen" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Full screen</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(9.000000, 9.000000)" stroke="#000000"><polyline points="0 4 0 3.55271368e-15 4 3.55271368e-15"></polyline><polyline stroke-width="1.5" points="0 5 0 4.4408921e-15 5 4.4408921e-15"></polyline><polyline stroke-width="1.5" transform="translate(11.500000, 2.500000) scale(-1, 1) translate(-11.500000, -2.500000) " points="9 5 9 4.4408921e-15 14 4.4408921e-15"></polyline><polyline stroke-width="1.5" transform="translate(2.500000, 11.500000) scale(1, -1) translate(-2.500000, -11.500000) " points="0 14 0 9 5 9"></polyline><polyline stroke-width="1.5" transform="translate(11.500000, 11.500000) scale(-1, -1) translate(-11.500000, -11.500000) " points="9 14 9 9 14 9"></polyline></g></g></svg> \
';
d.body.appendChild(readingModeMenu);
/* Event Listeners */
var readingModeButtonClick = function(e){
switch (this.dataset.action) {
case 'font-family':
d.body.className = d.body.className.indexOf('readingmode-serif') === -1 ? d.body.className + ' readingmode-serif' : d.body.className.replace(' readingmode-serif', '')
break;
case 'size-increase':
d.body.style.fontSize = d.body.style.fontSize ? (parseInt(d.body.style.fontSize) + 2) + 'px' : '23px';
break;
case 'size-decrease':
d.body.style.fontSize = d.body.style.fontSize ? (parseInt(d.body.style.fontSize) - 2) + 'px' : '19px';
break;
case 'width-increase':
d.body.style.maxWidth = d.body.style.maxWidth ? (parseInt(d.body.style.maxWidth) + 4) + 'em' : '34em';
break;
case 'width-decrease':
d.body.style.maxWidth = d.body.style.maxWidth ? (parseInt(d.body.style.maxWidth) - 4) + 'em' : '26em';
break;
case 'night-mode':
d.body.className = d.body.className.indexOf('readingmode-dark') === -1 ? d.body.className + ' readingmode-dark' : d.body.className.replace(' readingmode-dark', '');
break;
case 'toggle-media':
d.body.className = d.body.className.indexOf('readingmode-images') === -1 ? d.body.className + ' readingmode-images' : d.body.className.replace(' readingmode-images', '');
break;
case 'toggle-fullscreen':
window.innerHeight == screen.height ? d.exitFullscreen() : d.documentElement.requestFullscreen();
break;
default:
}
readingModeSave();
e.preventDefault();
};
d.querySelectorAll('#readingModeMenu svg').forEach(item => {
item.addEventListener("click", readingModeButtonClick);
});
/* Storage */
var readingModeSave = function(){
if (!isChrome){ return; }
// font-family
rmSettings.fontFamily = d.body.className.indexOf('readingmode-serif') === -1 ? false : true;
// font-size
rmSettings.fontSize = d.body.style.fontSize;
// width-increase
rmSettings.width = d.body.style.maxWidth;
// night-mode
rmSettings.nightMode = d.body.className.indexOf('readingmode-dark') === -1 ? false : true;
// toggle-media
rmSettings.toggleMedia = d.body.className.indexOf('readingmode-images') === -1 ? false : true;
// toggle-fullscreen
// rmSettings.fullScreen = window.innerHeight == screen.height ? false : true;
chrome.storage.sync.set({ rmSettings: JSON.stringify(rmSettings) }, function () {
});
};
var readingModeLoad = function(){
if (!isChrome) { return; }
chrome.storage.sync.get(['rmSettings'], function (result) {
console.log(result);
if (!result.rmSettings){
rmSettings = {
fontFamily: false,
fontSize: d.body.style.fontSize,
width: d.body.style.maxWidth,
nightMode: false,
toggleMedia: false,
// fullScreen: false
};
}else{
rmSettings = JSON.parse(result.rmSettings);
}
// font-family
d.body.className = rmSettings.fontFamily ? d.body.className + ' readingmode-serif' : d.body.className;
// font-size
d.body.style.fontSize = rmSettings.fontSize;
// width-increase
d.body.style.maxWidth = rmSettings.width;
// night-mode
d.body.className = rmSettings.nightMode ? d.body.className + ' readingmode-dark' : d.body.className;
// toggle-media
d.body.className = rmSettings.toggleMedia ? d.body.className + ' readingmode-images' : d.body.className;
// toggle-fullscreen
// rmSettings.fullScreen ? d.exitFullscreen() : d.documentElement.requestFullscreen();
});
};
var isChrome = function(){
return !!chrome;
};
/* Auto-scroll to main heading */
window.scrollTo(0, d.querySelector("h1").offsetTop);
readingModeLoad();
})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment