luckyshot/readingmode.js

## readingmode.js
javascript:
/*! ReadingMode © Xavi Esteve */
(function (d) {
	var el = d.getElementsByTagName("*");
	var htmlDiv = d.createElement("div");
	var readingModeMenu = d.createElement("div");
	var readingModeAlert = d.createElement("div");
	var title = d.title;
	var rmSettings = {};

	/* Loading twice reloads page */
	if (document.body.classList.contains('readingmode')) {
		location.href = location.href;
		return;
	}
	d.body.classList.add('readingmode');

	/* 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 = ""; }

	/* Remove all event listeners */
	// d.querySelector("body").outerHTML = d.querySelector("body").outerHTML;

	/* Remove script tags */
	// var ss = d.getElementsByTagName('script');
	// for (var i = (ss.length - 1); i >= 0; i--) {
	// 	ss[i].parentNode.removeChild(ss[i]);
	// }

	/* Remove old HTML tags if table-based layout detected */
	if (!!document.querySelector('body>table')){
		document.body.innerHTML = document.body.innerHTML.replace(/(<\/?)(table|font).*>/g, '$1div>');
	}

	/* Add styles */
	htmlDiv.innerHTML = `
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik&family=Merriweather&family=Quicksand&family=Zilla+Slab&display=swap" rel="stylesheet">
<style>

/* Theme: Light Grey */
body {
	--colorBackground: #fafbfc;
	--colorText: #3e4852;
	--colorScrollThumb: #90A4AE;
	--colorLinkHover: #3a55a5;
	--colorLinkBorder: rgba(58, 85, 165, 0.1);
	--colorSelectionText: #000;
	--colorSelectionBackground: #fff9b8;
	--colorTextStrong: #000;
	--colorHeading: #666;
	--colorCodeBackground: #f2f9fa;
	--colorCodeText: #1f1e14;
	--colorCodeBorder: #ebf1f2;
	--colorBlockquote: #6d6d6d;
	--colorTableBorder: #8a8a8a21;
	--transitionDuration: 0.5s;
}

/* Theme: Light Paper */
.readingmode-theme-2 {
	--colorBackground: #fff;
    --colorText: #000;
}

/* Theme: Light Wood */
.readingmode-theme-3 {
	--colorBackground: #f5eddd;
	--colorText: #000;
	--colorCodeBackground: #fff9b8;
	--colorCodeBorder: #ded9a2;
	--colorBlockquote: #5d4a3c;
}

/* Theme: Dark Red */
/*
--colorBackground: #000;
--colorScrollThumb: #444;
--colorText: #f54704;
--colorTextStrong: #fd4728;
--colorLinkBorder: #f122005c;
--colorHeading: #f55d04;
--colorCodeBackground: #111;
--colorCodeText: #ff6200;
--colorCodeBorder: #2a0101;
--colorBlockquote: #fd4728;
--colorLinkHover: #ff8c79;
--colorSelectionText: #fd4728;
--colorSelectionBackground: #7d0202;
*/

/* Theme: Dark Orange */
.readingmode-theme-4,
.readingmode-theme-5,
.readingmode-theme-6  {
	--colorScrollThumb: #444;
	--colorHeading: #f55d04;
	--colorCodeBackground: #111;
	--colorCodeText: #ff6200;
	--colorCodeBorder: #2a0101;
	--colorBlockquote: #fd4728;
	--colorSelectionText: #ff6200;
	--colorSelectionBackground: #340303;
	--colorTableBorder: #8a8a8a21;

	--colorText: #ffa565;
	--colorTextStrong: #ff8606;
	--colorBackground: #0f0c0c;
	--colorLinkBorder: #3e371d;
	--colorLinkHover: #ff7c00;

}
	.readingmode-theme-4 #readingModeMenu svg,
	.readingmode-theme-5 #readingModeMenu svg,
	.readingmode-theme-6 #readingModeMenu svg {
		filter: invert(100%)
	}
	.readingmode-theme-4 img,
	.readingmode-theme-5 img,
	.readingmode-theme-6 img,
	.readingmode-theme-4 video,
	.readingmode-theme-5 video,
	.readingmode-theme-6 video {
		filter: brightness(0.5);
		opacity:0.6;
	}
		.readingmode-theme-4 img:hover,
		.readingmode-theme-5 img:hover,
		.readingmode-theme-6 img:hover,
		.readingmode-theme-4 video:hover,
		.readingmode-theme-5 video:hover,
		.readingmode-theme-6 video:hover {
			filter: none;opacity: 1;
		}

/* Theme: Dark Green */
.readingmode-theme-5 {
    --colorBackground: #000;
    --colorScrollThumb: #059b00;
    --colorText: #0cf504;
    --colorTextStrong: #baffb2;
    --colorLinkBorder: #00f1363b;
    --colorHeading: #059b00;
    --colorCodeBackground: #111;
    --colorCodeText: #c1ff00;
    --colorCodeBorder: #343434;
    --colorBlockquote: #baffb2;
    --colorLinkHover: #c1ff00;
    --colorSelectionText: #c1ff00;
	--colorSelectionBackground: #059b00;
}

/* Theme: Dark Blue */
.readingmode-theme-6 {
	--colorText: #d9dad3;
	--colorTextStrong: #fff;
	--colorBackground: #131623;
	--colorLinkHover: #3a55a5;
	--colorLinkBorder: #3a55a5;
	--colorHeading: #3a55a5;
	--colorCodeBackground: #1a1e2a;
	--colorCodeBorder: #3a55a5;
	--colorCodeText: #8f9dc8;
	--colorBlockquote: #698bed;
	--colorSelectionText: #90a4ae;
    --colorSelectionBackground: #3a55a5;
}

/* Font family */
.readingmode-family-1 {
	font-family:Quicksand,Rubik,BlinkMacSystemFont,Lato,'Segoe UI',sans-serif;
}
.readingmode-family-2 {
	font-family:Rubik,BlinkMacSystemFont,Lato,'Segoe UI',sans-serif;
}
.readingmode-family-3 {
	font-family: 'Zilla Slab',serif;
}
	.readingmode-family-3 blockquote,
	.readingmode-family-4 blockquote {
		font-family: inherit;
	}
.readingmode-family-4 {
	font-family: Merriweather,serif;
}

/* Line */
.readingmode-line-2 {
	line-height: 1.4;
}
.readingmode-line-3 {
	line-height: 1.66;
}

/* Letter spacing */
.readingmode-letter-2 {
	letter-spacing: -.01em;
}
.readingmode-letter-3 {
	letter-spacing: -.05em;
}


html {scroll-behavior: smooth;}
* {position:static !important}

footer,hr,nav,sidebar,aside,
.ad,.advertisement,
[class*=account],[class*=actions],[class*=alert],[class*=aside],[class*=author],[class*=banner],[class*=breaking],[class*=carousel],[class*=cta],[class*=cookie],[class*=disclaimer],[class*=engage],[class*=form],[class*=list],[class*=login],[class*=logo],[class*=menu],[class*=message],[class*=meta],[class*=nav],[class*=newsletter],[class*=paywall],[class*=privacy],[class*=popup],[class*=recommend],[class*=related],[class*=search],[class*=share],[class*=skip],[class*=social],[class*=sponsor],[class*=sponsored],[class*=subscribe],[class*=subscription],[class*=tags],
[itemprop*=logo] {display:none}

html,body,article,
[class*=article],[class*=content],[class*=body],[class*=page],[class*=post],
[itemprop*=articleBody],[itemprop*=headline] {display:block !important;}

body {color:var(--colorText);background:var(--colorBackground);font-family:Quicksand,Rubik,BlinkMacSystemFont,Lato,'Segoe UI',sans-serif;font-weight:500;font-size:21px;line-height:1.9;margin:0 auto;padding:2em 5% 50vh 5%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;hyphens:auto;max-width:32em;overflow-x: hidden}
body.readingmode {transition:font-size .5s ease, max-width .5s ease, color var(--transitionDuration) ease-out, background var(--transitionDuration) ease-out;}
h1,h2,h3,h4,h5,h6 {color:var(--colorHeading);margin:0;padding:2em 0 .5em;font-family:sans-serif;font-weight:300 !important;line-height: 1.33;transition:color var(--transitionDuration) ease-out;}
h1 {font-size:200%}
h4,h5,h6 {font-size:90%;letter-spacing:.125em;text-transform:uppercase;}
a {border-bottom:2px solid var(--colorLinkBorder);color:inherit;text-decoration:none;}
p {margin:0 0 1.66rem;}
b,strong{color:var(--colorTextStrong);font-weight: normal !important;transition: color var(--transitionDuration) ease-out;}
a:hover {color: var(--colorLinkHover);}
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: var(--colorBlockquote);padding: 1em 0;font-size: 120%;font-family: sans-serif;font-style:italic;}
figure {font-size: 70%;font-style: italic;}
figcaption {opacity:.5}
center {text-align: left;}
pre, code {background-color: var(--colorCodeBackground);border-radius:2px;color: var(--colorCodeText);font-family: 'Fira Mono',monospace;font-size: 1rem;font-weight: 300;white-space: break-spaces;}
pre {padding: 1em 0 1em 2em;line-height: 1.5;border-left: 5px solid var(--colorCodeBorder);}
code {padding: 0.2em 0.3em;}
table {width: 100%;text-align: left;padding: 2em 0;}
tr td, tr th {border-bottom: 1px solid var(--colorTableBorder);vertical-align: top;padding: 5px;}
tr th, tr:first-child td {opacity: 0.5;}
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.1;font-family:sans-serif !important;font-size: 1rem !important;line-height:1 !important;letter-spacing:normal !important;padding:20px;transition: opacity .5s ease;width: 96px;}
#readingModeMenu:hover {opacity:1;}
#readingModeMenu svg {opacity:.7;height: 32px;width: 32px;cursor: pointer;padding: 4px;margin-bottom: 16px;transition: opacity .5s ease; display: inline-block;}
#readingModeMenu svg:hover {opacity:1;}

mark,::selection{background:var(--colorSelectionBackground);color:var(--colorSelectionText);}

body::-webkit-scrollbar {width: 7px;}
body { scrollbar-width: thin; scrollbar-color: var(--colorScrollThumb) transparent; }
body::-webkit-scrollbar-track {background: transparent;}
body::-webkit-scrollbar-thumb {background-color: var(--colorScrollThumb);}


#readingModeAlert {position: fixed; top: 0; right: 50%;}
#readingModeAlert.hide {display: none}

	</style>`;
	d.querySelector("head").appendChild(htmlDiv);

	/* UI menu */
	readingModeMenu.id = "readingModeMenu";
	readingModeMenu.innerHTML = `

	<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>

	<svg data-action="theme" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Color theme</title><g id="theme"><circle cx="11.5" cy="19.5" r="3.875" stroke="black" stroke-width="1.25"/><circle cx="20.5" cy="19.5" r="3.875" fill="#838383" fill-opacity="0.67" stroke="black" stroke-width="1.25"/><circle cx="15.9" cy="11.8" r="3.875" fill="#838383" fill-opacity="0.33" stroke="black" stroke-width="1.25"/></g></svg>

	<svg data-action="family" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Font family</title><g id="family" clip-path="url(#clip0)"><path id="a" d="M15.1528 14.18C14.5768 14.18 14.0428 14.06 13.5508 13.82C13.0588 13.58 12.6628 13.256 12.3628 12.848C12.0748 12.44 11.9308 11.99 11.9308 11.498C11.9308 10.706 12.2488 10.058 12.8848 9.554C13.5328 9.05 14.4028 8.726 15.4948 8.582L18.3388 8.186V7.556C18.3388 6.896 18.1348 6.392 17.7268 6.044C17.3308 5.684 16.7188 5.504 15.8908 5.504C15.2788 5.504 14.7748 5.624 14.3788 5.864C13.9948 6.104 13.7488 6.392 13.6408 6.728C13.5928 6.872 13.5328 6.974 13.4608 7.034C13.4008 7.082 13.3168 7.106 13.2088 7.106H12.9568C12.8488 7.106 12.7528 7.07 12.6688 6.998C12.5968 6.914 12.5608 6.818 12.5608 6.71C12.5608 6.446 12.6808 6.14 12.9208 5.792C13.1608 5.432 13.5328 5.12 14.0368 4.856C14.5408 4.592 15.1588 4.46 15.8908 4.46C17.1748 4.46 18.0868 4.766 18.6268 5.378C19.1668 5.99 19.4368 6.734 19.4368 7.61V13.604C19.4368 13.724 19.4008 13.82 19.3288 13.892C19.2568 13.964 19.1608 14 19.0408 14H18.7348C18.6148 14 18.5188 13.964 18.4468 13.892C18.3748 13.82 18.3388 13.724 18.3388 13.604V12.758C18.0748 13.154 17.6848 13.49 17.1688 13.766C16.6648 14.042 15.9928 14.18 15.1528 14.18ZM15.3328 13.136C16.2088 13.136 16.9288 12.848 17.4928 12.272C18.0568 11.696 18.3388 10.868 18.3388 9.788V9.176L16.0168 9.5C15.0328 9.632 14.2888 9.86 13.7848 10.184C13.2808 10.508 13.0288 10.916 13.0288 11.408C13.0288 11.96 13.2568 12.386 13.7128 12.686C14.1808 12.986 14.7208 13.136 15.3328 13.136Z" fill="black"/><path id="a_2" d="M18.6188 15.1154C19.7726 14.5769 20.9495 14.3077 22.1495 14.3077C23.1957 14.3077 23.9803 14.5462 24.5034 15.0231C25.0418 15.5 25.3111 16.2692 25.3111 17.3308V22.7308H26.6957V24H24.0188L23.9265 22.5923H23.8572C23.0265 23.5308 22.0418 24 20.9034 24C19.9803 24 19.2726 23.7692 18.7803 23.3077C18.288 22.8308 18.0418 22.1769 18.0418 21.3462C18.0418 19.2846 19.6803 18.2538 22.9572 18.2538H23.9265V17.2846C23.9265 16.7308 23.7649 16.3077 23.4418 16.0154C23.1341 15.7231 22.6341 15.5769 21.9418 15.5769C20.9265 15.5769 19.8188 15.8462 18.6188 16.3846V15.1154ZM22.7265 19.5231C20.6034 19.5231 19.5418 20.1 19.5418 21.2538C19.5418 21.7462 19.6803 22.1154 19.9572 22.3615C20.2495 22.6077 20.6649 22.7308 21.2034 22.7308C22.188 22.7308 23.0957 22.2615 23.9265 21.3231V19.5231H22.7265Z" fill="black"/><path id="a_3" d="M11.2986 18.672C10.6146 18.936 10.0326 19.194 9.5526 19.446C9.0846 19.698 8.7066 19.95 8.4186 20.202C8.1306 20.454 7.9206 20.706 7.7886 20.958C7.6686 21.21 7.6086 21.468 7.6086 21.732C7.6086 22.128 7.7406 22.452 8.0046 22.704C8.2686 22.956 8.6166 23.082 9.0486 23.082C9.3606 23.082 9.6486 23.004 9.9126 22.848C10.1886 22.692 10.4286 22.482 10.6326 22.218C10.8366 21.942 10.9986 21.624 11.1186 21.264C11.2386 20.892 11.2986 20.502 11.2986 20.094V18.672ZM11.2986 17.898V17.16C11.2986 15.696 10.6746 14.964 9.4266 14.964C9.2226 14.964 9.0486 14.982 8.9046 15.018C8.7606 15.054 8.6406 15.114 8.5446 15.198C8.4486 15.282 8.3586 15.402 8.2746 15.558C8.2026 15.714 8.1306 15.906 8.0586 16.134C7.9266 16.482 7.7946 16.716 7.6626 16.836C7.5426 16.944 7.3626 16.998 7.1226 16.998C6.5226 16.998 6.2226 16.698 6.2226 16.098C6.2226 15.522 6.5286 15.078 7.1406 14.766C7.7526 14.442 8.6226 14.28 9.7506 14.28C10.9506 14.28 11.8026 14.496 12.3066 14.928C12.8106 15.348 13.0626 16.068 13.0626 17.088V21.12C13.0626 22.488 13.3326 23.172 13.8726 23.172C14.0406 23.172 14.2026 23.154 14.3586 23.118C14.5146 23.07 14.6466 22.956 14.7546 22.776L15.0066 23.208C14.8626 23.484 14.5986 23.718 14.2146 23.91C13.8306 24.09 13.4286 24.18 13.0086 24.18C12.4806 24.18 12.0846 24.012 11.8206 23.676C11.5686 23.34 11.4426 22.866 11.4426 22.254H11.3526C11.0406 22.842 10.6086 23.31 10.0566 23.658C9.5046 23.994 8.8926 24.162 8.2206 24.162C7.4646 24.162 6.8706 23.97 6.4386 23.586C6.0066 23.202 5.7906 22.686 5.7906 22.038C5.7906 21.75 5.8386 21.474 5.9346 21.21C6.0426 20.946 6.2106 20.694 6.4386 20.454C6.6666 20.214 6.9666 19.98 7.3386 19.752C7.7106 19.512 8.1666 19.272 8.7066 19.032L11.2986 17.898Z" fill="black"/></g><defs><clipPath id="clip0"><rect width="32" height="32" fill="white"/></clipPath></defs></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 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="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 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="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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rubik-Light, Rubik, Helvetica, Arial" font-size="20" font-weight="300"><text fill="#000000"><tspan x="9.5" y="23">A</tspan></text></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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rubik-Light, Rubik, Helvetica, Arial" font-size="32" font-weight="300"><text fill="#000000"><tspan x="5.6" y="27">A</tspan></text></g></svg>

	<svg data-action="line" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Line height</title><g id="line"><circle cx="16" cy="21" r="1.5" fill="black"/><circle cx="16" cy="10" r="1.5" fill="black"/></g></svg>

	<svg data-action="letter" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Letter spacing</title><g id="letter"><g id="Group 6"><circle cx="10.5" cy="15.5" r="1.5" fill="black"/><circle cx="21.5" cy="15.5" r="1.5" fill="black"/></g></g></svg>
	`;
	d.body.appendChild(readingModeMenu);


	readingModeAlert.id = "readingModeAlert";
	d.body.appendChild(readingModeAlert);


	/* Table Of Contents */
	// TODO: Although I'm not sure it'll be useful
	// var toc = d.createElement('ul');
	// toc.id = 'readingModeToc';
	// var headings = d.querySelectorAll('h2,h3').forEach(item => {
	// 	var li = d.createElement('a');
	// 	li.innerHTML = item.innerText;
	// 	li.href = '#' + item.innerText.replace(/ /g, "_");
	// 	toc.appendChild(li);
	// 	// TODO: h2>a link
	//  // TODO: h2|h3 indentation
	// });
	// d.body.appendChild(toc);


	var _cycleClass = function(cssClass, max){
		max = max || 3;
		let body = d.querySelector('body');
		for (let i = body.classList.length - 1; i >= 0; i--) {
			const className = body.classList[i];
			if (className.startsWith('readingmode-' + cssClass + '-')) {
				let number = parseInt(className.replace(/[^0-9]*/, '')) + 1;
				if (number > max){ number = 1; }
				body.classList.remove(className);
				body.classList.add('readingmode-' + cssClass + '-' + number);
				return number;
			}
		}
		body.classList.add('readingmode-' + cssClass + '-2');
		return 1;
	};

	var _alert = function(msg){
		var alert = d.querySelector('#readingModeAlert');
		alert.innerHTML = msg;
		alert.classList.remove('hide');
		setTimeout(function(){
			alert.classList.add('hide');
		}, 1000);
	};


	/* Event Listeners */
	var readingModeButtonClick = function (e) {
		_alert(this.dataset.action);
		switch (this.dataset.action) {
			case 'toggle-media':
				d.body.classList.toggle('readingmode-images');
				break;
			case 'toggle-fullscreen':
				window.innerHeight == screen.height ? d.exitFullscreen() : d.documentElement.requestFullscreen();
				break;
			case 'family':
				rmSettings.family = _cycleClass('family', 4);
				break;
			case 'theme':
				rmSettings.theme = _cycleClass('theme', 6);
				break;
			case 'width-increase':
				var mw = parseInt(d.body.style.maxWidth);
				d.body.style.maxWidth = mw ? (mw + 2) + 'em' : '34em';
				break;
			case 'width-decrease':
				var mw = parseInt(d.body.style.maxWidth);
				d.body.style.maxWidth = mw ? (mw - 2) + 'em' : '26em';
				break;
			case 'size-increase':
				var fs = parseInt(d.body.style.fontSize);
				d.body.style.fontSize = fs ? (fs + Math.round(fs / 10)) + 'px' : '23px';
				break;
			case 'size-decrease':
				var fs = parseInt(d.body.style.fontSize);
				d.body.style.fontSize = fs ? (fs - Math.round(fs / 10)) + 'px' : '19px';
				break;
			case 'line':
				rmSettings.line = _cycleClass('line');
				break;
			case 'letter':
				rmSettings.letter = _cycleClass('letter');
				break;
			default:
		}
		readingModeSave();
		e.preventDefault();
	};
	d.querySelectorAll('#readingModeMenu svg').forEach(item => {
		item.addEventListener("click", readingModeButtonClick);
	});


	/* Storage */
	var readingModeSave = function () {
		if (!isChrome) { return; }

		// toggle-fullscreen
		// rmSettings.fullScreen = window.innerHeight == screen.height ? false : true;
		// toggle-media
		rmSettings.toggleMedia = d.body.classList.contains('readingmode-images') ? true : false;
		// width
		rmSettings.width = d.body.style.maxWidth;
		// font-size
		rmSettings.fontSize = d.body.style.fontSize;

		chrome.storage.sync.set({ rmSettings: JSON.stringify(rmSettings) }, function () {
			console.log('Minimal Reading Mode: Saved (sync)!', rmSettings);
		});
		// Fallback to local for Chromium browsers
		chrome.storage.local.set({ rmSettings: JSON.stringify(rmSettings) }, function () {
			console.log('Minimal Reading Mode: Saved (local)!', rmSettings);
		});
	};


	var readingModeLoad = function () {
		if (!isChrome) {
			console.log('Minimal Reading Mode: Not Chrome, storage is not available')
			return;
		}

		chrome.storage.sync.get(['rmSettings'], function (result) {

			if (!result){
				chrome.storage.local.get(['rmSettings'], function (result) {
					readingModeLoadSettings(JSON.parse(result.rmSettings));
					console.log('Minimal Reading Mode: Loaded (local)');
				});
				return true;
			}

			if (!result.rmSettings) {
				result.rmSettings = {
					// fullScreen: false,
					toggleMedia: false,
					family: 1,
					theme: 1,
					fontSize: d.body.style.fontSize,
					width: d.body.style.maxWidth,
					line: 1,
					letter: 1,
				};
			} else {
				result.rmSettings = JSON.parse(result.rmSettings);
				console.log('Minimal Reading Mode: Loaded (sync)');
			}
			readingModeLoadSettings(result.rmSettings);
		});
	};


	var readingModeLoadSettings = function(rmSettings){
		// toggle-fullscreen
		// rmSettings.fullScreen ? d.exitFullscreen() : d.documentElement.requestFullscreen();
		// toggle-media
		if (rmSettings.toggleMedia) { d.body.classList.add('readingmode-images'); }
		// family
		if (rmSettings.family) { d.body.classList.add('readingmode-family-' + rmSettings.family); }
		// theme
		if (rmSettings.theme) { d.body.classList.add('readingmode-theme-' + rmSettings.theme); }
		// width
		d.body.style.maxWidth = rmSettings.width;
		// font-size
		d.body.style.fontSize = rmSettings.fontSize;
		// line
		if (rmSettings.line) { d.body.classList.add('readingmode-line-' + rmSettings.line); }
		// letter
		if (rmSettings.letter) { d.body.classList.add('readingmode-letter-' + rmSettings.letter); }

		console.log('Minimal Reading Mode: Loaded!', rmSettings);
	};

	var isChrome = function () {
		return !!chrome;
	};


	readingModeLoad();

	/* Auto-scroll to main heading */
	if (window.pageYOffset < 100 && !!d.querySelector("h1")){
		setTimeout(function(){
			window.scrollTo(0, d.querySelector("h1").offsetTop);
		}, 200);
	}

})(document);