- // ==UserScript==
- // @name Autosizer
- // @author Arve Bersvendsen, Edited version by shoust, should detect all images and resize.
- // @namespace http://virtuelvis.com/
- // @version 2.03
- // @description Enhance image viewing in Opera by adding five
- // different sizing modes to images: "Original",
- // "Shrink to Fit", "Maximize", "Fit to Width" and
- // "Fit to Height".
- // @ujs:category browser: enhancements
- // ==/UserScript==
- /*
- * Copyright © 2005 by Arve Bersvendsen
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License.
- *
- * This program is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
- * USA
- */
- //Updated to work for opera 9.5, now added small fix for 10.5
- (function(){if( document.body && document.getElementsByTagName('link')[0] && (document.getElementsByTagName('link')[0].getAttribute('href').match(/style[s]?\/image\.css$/) || !document.getElementsByTagName('head')[0]) ) {
- var allBodyParts = document.body.getElementsByTagName('*');
- var firstBodyChild = document.body.firstChild;
- if( ((allBodyParts.length==5 || allBodyParts.length==2) && firstBodyChild.tagName.match(/^(table|div)$/i) && (allBodyParts[1].tagName == 'IMG' || allBodyParts[4].tagName == 'IMG'))) {
- window.addEventListener('load', function(ev){
- if (document.body.childNodes.length != 1) return; // Not an image
- var ss = document.createElement("style");
- ss.setAttribute("type","text/css");
- ss.innerText = "* { box-sizing: border-box }";
- document.body.appendChild(ss);
- var d_im = document.createElement("img");
- d_im.src = document.images[0].src;
- var imd = document.createElement("div");
- imd.id="imgDiv";
- imd.style="width:100%;height:100%;position:absolute;max-height:100%";
- imd.appendChild(d_im);
- document.body.replaceChild(imd,document.body.firstChild);
- // begin:user settings
- // default mode between 0-4, corresponding to the five items in itemNames
- var default_mode = 2; // Default, 1=Shrink to Fit
- // indicator mode between 0-2
- // 0 = always on
- // 1 = on after mode_switch / page load
- // 2 = always off
- var default_indicator = 0;
- // when indicator mode=1, this setting controls indicator delay in ms
- this.indicator_delay = 750;
- // indicator colors and backgrounds. Uses CSS syntax
- var indicator_color= "#333";
- var indicator_hover_color = "red";
- var indicator_background = "#eee";
- var selector_background = "#f5f5f5";
- var selector_selected_background = "#fff";
- // Allow script to store settings in a cookie: true/false
- var cookie_allowed = true;
- // end:User settings
- // Default cookie lifetime = 24 hours
- var now = new Date();
- var cookieLifetime = new Date(now.getTime() + 1000 * 60 * 60 * 24);
- var itemNames = ["Original", "Shrink to Fit", "Maximize", "Fit to Width", "Fit to Height"];
- var fit_modes = [
- "cursor:crosshair;display:block; margin:auto auto", // no fit
- "display:block;max-width:100%;max-height:100%;margin:0 auto;cursor:crosshair", //fit to window
- "display:block;width:100%;height:auto;margin:auto;padding:0;cursor:crosshair", //fit to width
- "display:block;width:auto;height:100%;margin:0 auto;padding:0;cursor:crosshair;" //fit to height
- ]
- default_mode--;
- this.swapDirection = function(){
- self.sizing_mode -= 2;
- if (self.sizing_mode < 0) {
- self.sizing_mode = itemNames.length+self.sizing_mode;
- }
- }
- this.lastHeight=document.documentElement.offsetHeight;
- this.workerThread = function(){
- if (self.lastHeight != document.documentElement.offsetHeight) {
- self.reCenter();
- }
- self.lastHeight = document.documentElement.offsetHeight
- }
- this.selector_active=false;
- this.showMenu = function(){
- document.getElementById("mode_selector").style.display="block";
- document.getElementById("mode_indicator").style.display="block";
- document.getElementById("mode_indicator").innerHTML="Select";
- self.selector_active=true;
- return;
- }
- this.hideMenu = function(){
- self.selector_active=false;
- document.getElementById("mode_selector").style.display="none";
- document.getElementById("mode_indicator").innerHTML=itemNames[self.sizing_mode];
- if (self.indicator_mode == 1) {
- self.showIndicator();
- setTimeout(self.hideIndicator,self.indicator_delay);
- }
- return;
- }
- this.showIndicator = function(){
- document.getElementById('infopanel').style.display="block";
- document.getElementById("mode_indicator").style.visibility="visible";
- return;
- }
- this.hideIndicator = function(){
- if (!self.selector_active) {
- document.getElementById("mode_indicator").style.visibility="hidden";
- } else {
- setTimeout(self.hideIndicator,self.indicator_delay);
- }
- return;
- }
- this.changeIndicatorMode = function(){
- if (self.indicator_mode++ == 2) {
- self.indicator_mode = 0;
- }
- self.setCookie('indicatorMode',self.indicator_mode,cookieLifetime ,'/');
- switch (self.indicator_mode) {
- case 0:
- self.showIndicator();
- break;
- case 1:
- self.showIndicator();
- setTimeout(self.hideIndicator,self.indicator_delay);
- break;
- case 2:
- document.getElementsByTagName('infopanel').display="none";
- self.hideIndicator();
- break;
- default:
- break;
- }
- }
- this.setCookie = function(name, value, expires, path, domain, secure){
- // Don't try to set cookie if cookies are disallowed.
- if (!cookie_allowed) return;
- document.cookie = escape(name) + '=' + escape(value)
- + (expires ? '; EXPIRES=' + expires.toGMTString() : '')
- + (path ? '; PATH=' + path : '')
- + (domain ? '; DOMAIN=' + domain : '')
- + (secure ? '; SECURE' : '');
- }
- this.getCookie = function (name){
- var dc = document.cookie;
- var prefix = name + "=";
- var begin = dc.indexOf("; " + prefix);
- if (begin == -1){
- begin = dc.indexOf(prefix);
- if (begin != 0) return null;
- } else {
- begin += 2;
- }
- var end = document.cookie.indexOf(";", begin);
- if (end == -1){
- end = dc.length;
- }
- return unescape(dc.substring(begin + prefix.length, end));
- }
- // set sizing. 0 <= val <= 4
- this.setSizingMode = function(val){
- var info = document.getElementById("mode_indicator");
- var img = document.images[0];
- info.innerHTML = itemNames[val];
- if (val != 2 ) {
- if (val < 2 ) {
- img.style = fit_modes[val];
- self.reCenter();
- } else {
- img.style = fit_modes[val-1];
- self.reCenter();
- }
- } else {
- while (img.height==0) self.reCenter();
- if ((img.offsetWidth >= window.width) && (img.offsetHeight >= window.innerHeight)) {
- img.style = fit_modes[1];
- } else if ((img.width/img.height) < (window.innerWidth/window.innerHeight)){
- img.style = fit_modes[3];
- } else {
- img.style = fit_modes[2];
- }
- self.reCenter();
- //document.getElementsByTagName('html')[0].setAttribute('style','');
- }
- for (var i = itemNames.length-1; i > -1; i--) {
- document.getElementById("mode_selector").childNodes[i].style.background="transparent";
- }
- document.getElementById("mode_selector").childNodes[val].style.background=selector_selected_background;
- self.setCookie('sizingMode',self.sizing_mode,cookieLifetime ,'/');
- if (self.indicator_mode == 1) {
- self.showIndicator();
- setTimeout(self.hideIndicator,self.indicator_delay);
- }
- return;
- }
- this.reCenter = function(){
- // If documentElement.offsetHeight != window.innerHeight we are zoomed
- document.getElementById("imgDiv").style.paddingTop=0;
- if (document.documentElement.offsetHeight > document.images[0].offsetHeight)
- document.getElementById("imgDiv").style.paddingTop = ((document.documentElement.offsetHeight -document.images[0].offsetHeight)/2);
- document.body.className = document.body.className;
- return;
- }
- this.changeSizingMode = function(){
- if (++self.sizing_mode > 4) self.sizing_mode = 0;
- self.setCookie('sizingMode',self.sizing_mode,cookieLifetime ,'/');
- self.setSizingMode(self.sizing_mode);
- //document.getElementsByTagName('html')[0].setAttribute('style','');
- return;
- }
- document.documentElement.style="text-align:center;vertical-align:middle;padding: 0;margin: 0 auto;height:100%;width:100%;position:relative;min-height:100%;";
- document.body.style="margin:auto;padding:0;height:100%;width:100%;position:relative;";
- var inf = document.createElement("div");
- inf.id="infopanel";
- inf.style="float:right;line-height:1;width:7.1em;display:block;color:"+indicator_color+";margin:0;padding:0;height: 11.5em; position:fixed;right:0;top:0;font-family:Arial,sans-serif;font-size:11px;";
- var p = document.createElement("h2");
- p.style="float:right;padding:0.25em 0.5em;background:"+indicator_background+";font-weight:bold;font-size:1em;margin:0;text-align:right;width: 100%;";
- p.id="mode_indicator";
- var selector = document.createElement("ul");
- selector.style="display:none;background:"+selector_background+";margin:0;padding:0.1em;";
- selector.id="mode_selector";
- for (var i = itemNames.length-1; i >-1;i--) {
- var item = document.createElement("li");
- item.appendChild(document.createTextNode(itemNames[itemNames.length-i-1]));
- item.style="display:block;margin:0;padding:0.5em;text-align:left";
- item.addEventListener("mouseover",function(ev){
- event.target.style.color = indicator_hover_color;
- },false);
- item.addEventListener("mouseout",function(ev){
- event.target.style.color = indicator_color;
- },false);
- item.addEventListener("click",function(ev){
- self.sizing_mode = ev.target.sourceIndex-ev.target.parentElement.sourceIndex-1;
- self.setCookie('sizingMode',self.sizing_mode,cookieLifetime ,'/');
- self.setSizingMode(self.sizing_mode);
- document.getElementById("mode_indicator").innerHTML="Select";
- },false);
- selector.appendChild(item);
- }
- this.sizing_mode = parseInt(this.getCookie('sizingMode'));
- if((isNaN(this.sizing_mode)) || (this.sizing_mode == null)) this.sizing_mode=default_mode;
- this.indicator_mode = parseInt(this.getCookie('indicatorMode'));
- if((isNaN(this.indicator_mode)) || (this.indicator_mode == null)) this.indicator_mode=default_indicator;
- var self=this;
- if (self.indicator_mode == 2) {
- inf.style.display="none";
- }
- inf.appendChild(p);
- inf.appendChild(selector);
- document.body.appendChild(inf);
- this.setSizingMode(self.sizing_mode);
- document.images[0].addEventListener("click",function(e){
- if (e.shiftKey) {
- self.swapDirection();
- }
- self.changeSizingMode();
- },false);
- inf.addEventListener("mouseover",function(e){
- self.showMenu();
- },false);
- inf.addEventListener("mouseout",function(e){
- self.hideMenu();
- },false);
- document.addEventListener("resize",function(){
- self.setSizingMode(self.sizing_mode);
- },false);
- document.onkeypress=function(e){
- switch (e.keyCode) {
- // 'b' or 'B': change indicator mode: Always, sometimes, never
- case 66:
- case 98:
- self.changeIndicatorMode();
- break;
- // 'm' or 'M': next sizing mode
- case 77:
- case 109:
- self.changeSizingMode();
- break;
- // 'n' or 'N': previous sizing mode
- case 78:
- case 110:
- self.swapDirection();
- self.changeSizingMode();
- break;
- case 42:
- case 43:
- case 45:
- case 48:
- case 54:
- case 57:
- setTimeout(self.reCenter,1);
- break;
- default:
- break;
- }
- }
- self.lastHeight = document.documentElement.offsetHeight
- var f = setInterval(self.workerThread,50);
- }, false);
- }
- }})()