Magnifier Settings Template

by Alice Farmer

HTML

<div id="thingifier">
	<div id="thingifier-options">
    	<ul>
        	<li><input type="checkbox" id="thingifier-unhide-spoilers"> Unhide spoilers</li>
            <li><input type="checkbox" id="thingifier-fixed-navbar"> Fixed navbar</li>
            <li><input type="checkbox" id="thingifier-pagination"> Add page selector to top of page</li>
            <li><input type="checkbox" id="thingifier-bbcode-buttons"> Add quick reply and post page bbcode buttons</li>
            <li><input type="checkbox" id="thingifier-quote-to-quickreply"> Quote to quick reply instead of new post page</li>
            <li><input type="checkbox" id="thingifier-quote-move-quickreply"> Move quick reply to under quoted post</li>
            <li><input type="checkbox" id="thingifier-magnifier" tooltip="Press Z or middle mouse click"> Magnifier on reader and image pages</li>
            <li><input type="range" id="thingifier-font-size" min="1" max="5"> Change font size <input type="button" id="thingifier-reset-font" value="Reset Font Size"></li>
            <li><a href="http://dynasty-scans.com/forum/posts?user_id=${yourid}" id="thingifier-ownposts"> Your posts</a></li>
            <li><input type="text" id="useridinput"><input type="button" value="Submit user id" id="useridsubmit"></li>
            <li><input type="button" id="thingifier-clear" value="Clear stored data"></li>
        </ul>
    </div>
    <div id="thingified-toggle"><input type="button" id="thingifier-toggle-button" value="X"></div>
</div>

<i class="thingifier-icon" id="magnifier-submenu-toggle"></i>
<div id="magnifier-settings">
    <div id="thingifier-magnifier-menu">
        <h3><i class="thingifier-icon"></i> Magnifier Settings</h3>
        Size: <input type="number" id="sizenum"><input type="text" list="measurements" id="sizemeasure" pattern="vh|vw|vmin|vmax|%|px"><br>
        Minimum Size: <input type="number" id="minsizenum"><input type="text" list="measurements" id="minsizemeasure"...

CSS

#thingifier *, * { padding: 0; margin: 0; }
#thingifier {
	float: left;
	z-index: 1000000;
    max-width: 340px;
    max-height: 255px !important;
}
#thingifier, #magnifier-settings, #magnifier-submenu-toggle {
    top: 25%;
    position: fixed;
}
#thingifier-options {
	border: 1px solid black;
	padding: 8px;
	background: aliceblue;
	border-bottom-right-radius: 6px;
	border-left-width: 0;
}
#thingifier-options ul { list-style-type: none; margin-left: -4px;}
#thingifier-options ul > li {  vertical-align: middle; }
#thingifier ul li input { padding-right: 4px; }
#thingifier-font-size { width: 96px; }
#thingifier-toggle-button {
	position: absolute;
	top: 0;
	left: calc(100% - 1px);
	width: 24px;
	height: 24px;
	border: 1px solid black;
	background-color: aliceblue;
	color: red;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	border-left-width: 0;
}
.spoilers-disabled {
	background: #666 none repeat scroll 0% 0%;
	color: #fff;
}
.navbar-fixed {
	position: fixed;
	z-index: 1000;
	width: 1210px;
}
.pull-right-fixed, .nav-collapse-fixed {
	float: right;
}
.nav-padding {
	height: 60px;
	width: 1210px;
}
.forum_post_one {
	font-size: 10px !important;
	line-height: 12px !important;
}
.forum_post_two {
	font-size: 12px !important;
	line-height: 15px !important;
}
.forum_post_three {
	font-size: 16px !important;
	line-height: 19px !important;
}
.forum_post_four {
	font-size: 20px !important;
	line-height: 23px !important;
}
.forum_post_five {
	font-size: 25px !important;
	line-height: 28px !important;
}
#thingifier-bbcode {
	margin-bottom: 6px;
}
#thingifier-quickreply {
	width: 100% !important;
	background-color: aliceblue !important;
	display: inline-block;
	padding: 4px;
	padding-bottom: 8px;
	border-radius: 8px;
	margin-bottom: 6px;
}
#magnifier {
	visibility: hidden;
	min-width: 256px;
	min-height: 256px;
	width: 25vmin;
	height: 25vmin;
	position: absolute;
	border: 1px solid grey;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius:...

JavaScript

var magSizeRes = '25',//GM_getValue('magSizeRes', '25'),
magSizeMeasure = 'vmin',//GM_getValue('magSizeMeasure', 'vmin'),
magMinSizeRes = '256',//GM_getValue('magSizeRes', '256'),
magMinSizeMeasure = 'px',//GM_getValue('magSizeMeasure', 'px'),
magZoomFactor = '500', //GM_getValue('magZoomFactor', '500'),
magBorder = '50%';//GM_getValue('magBorder', '50%');

$("#magnifier-settings").fadeToggle(0);
if (magBorder === '50%') {
    $('#circularborder').click();
} else {
    $('#squareborder').click();
}
$('i#magnifier-submenu-toggle').click(function() {
    $("#magnifier-settings").fadeToggle(350);
    $('#sizenum').val(magSizeRes);
    $('#sizemeasure').val(magSizeMeasure);
    $('#minsizenum').val(magMinSizeRes);
    $('#zoomfactor').val(magZoomFactor);
    $('#minsizemeasure').val(magMinSizeMeasure);
});
$('#forcircle').click(function() {
	$('#circularborder').click();
});
$('#forsquare').click(function() {
	$('#squareborder').click();
});
$('#magnifier-menu-submit').click(function() {
	var ferror = "",
    border,
    sizemeasure,
    minsizemeasure,
    size,
    minsize,
    zoomfactor;
	if ($('#circularborder').is(':checked')) {
    	border = "round";
    } else {
    	border = "square";
    }
    //Size number
    if ($('#sizenum').val().toString().match(/\d/g) !== null) {
		size = $('#sizenum').val();
    } else {
    	ferror += "Please use a number for the size!\n";
    }
    //Size measurement type
    if (measurecheck($('#sizemeasure').val())) {
		sizemeasure = $('#sizemeasure').val();
    } else {
    	ferror += "Please use a valid type for the size!\n";
    }
    //Minimum size number
	if ($('#minsizenum').val().toString().match(/\d/g) !== null) {
		minsize = $('#minsizenum').val();
    } else {
    	ferror += "Please use a number for the minimum size!\n";
    }
    //Minimum size measurement type
    if (measurecheck($('#minsizemeasure').val())) {
    	minsizemeasure = $('#minsizemeasure').val();
    } else {
    	ferror += "Please use a valid type for...