- // ==UserScript==
- // @name Image Viewer
- // @namespace https://gist.github.com/bradenbest/04bd0fc2d57ec650449f
- // @version 1.6.1
- // @description inject this script into any page, and right-click on the image you want to view full-size
- // @copyright 2014 - 2017, Braden Best
- //
- // @match *
- // ==/UserScript==
-
- const firefox = /Firefox/i.test(navigator.userAgent);
-
- function mk_node({
- name = "span",
- props = [],
- styles = [],
- events = [],
- extra = null
- } = {}){
- let el = document.createElement(name);
-
- props.forEach(function([name, value]){
- el[name] = value;
- });
-
- styles.forEach(function([name, value]){
- el.style[name] = value;
- });
-
- events.forEach(function([name, callback]){
- el.addEventListener(name, function(ev){
- callback(ev, el);
- });
- });
-
- if(extra)
- extra(el);
-
- return el;
- }
-
- function mk_img(url){
- return mk_node({
- name: "img",
- props: [
- ["src", url],
- ["className", "img_viewer"],
- ["draggable", "false"],
- ["dragging", 0],
- ["mousepos", [0,0]],
- ["tabIndex", 0]
- ],
- styles: [
- ["position", "absolute"],
- ["left", "0px"],
- ["top", (80 + document.body.scrollTop) + "px"],
- ["zIndex", "2147483647"]
- ],
- events: [
- ["mousedown", function(ev, self){
- self.dragging = firefox
- ? !self.dragging
- : 1;
-
- self.mousepos[0] = (ev.clientX || ev.pageX);
- self.mousepos[1] = (ev.clientY || ev.pageY);
- }],
- ["mouseup", function(unused, self){
- if(firefox)
- return false;
-
- self.dragging = 0;
- }],
- ["mousemove", function(ev, self){
- let curX = (ev.clientX || ev.pageX);
- let curY = (ev.clientY || ev.pageY);
- let diffX = curX - self.mousepos[0];
- let diffY = curY - self.mousepos[1];
-
- if(!self.dragging || (!diffX && !diffY))
- return false;
-
- self.mousepos = [curX, curY];
- self.style.left = parseInt(self.style.left) + diffX + "px";
- self.style.top = parseInt(self.style.top) + diffY + "px";
- }],
- ["keydown", function(ev, self){
- let dispatch = ({
- "ArrowUp": ["height", -10],
- "ArrowDown": ["height", +10],
- "ArrowLeft": ["width", -10],
- "ArrowRight": ["width", +10]
- })[ev.key] || ["width", 0];
-
- self[dispatch[0]] = +self[dispatch[0]] + dispatch[1];
- }]
- ]
- });
- }
-
- function mk_img_helper({img, img_helper_link}){
- let el = mk_node({
- name: "div",
- props: [
- ["innerHTML", "Click here to close image"],
- ["className", "img_viewer"]
- ],
- styles: [
- ["position", "fixed"],
- ["left", "0px"],
- ["top", "0px"],
- ["margin", "0"],
- ["padding", "5px 0"],
- ["width", "100%"],
- ["height", "50px"],
- ["background", "#fff"],
- ["borderBottom", "1px solid #ccc"],
- ["color", "#000"],
- ["fontSize", "12px"],
- ["textAlign", "center"],
- ["zIndex", "2147483647"]
- ],
- events: [
- ["click", function(unused, unused2){
- document.body.removeChild(img);
- document.body.removeChild(el);
- document.body.removeChild(img_helper_link);
- }]
- ]
- });
-
- return el;
- }
-
- function mk_img_helper_link(url){
- return mk_node({
- name: "a",
- props: [
- ["innerHTML", "Direct URL"],
- ["href", url],
- ["target", "_blank"],
- ["className", "img_viewer"]
- ],
- styles: [
- ["margin", "0"],
- ["padding", "0"],
- ["background", "#fff"],
- ["borderBottom", "1px solid #ccc"],
- ["display", "block"],
- ["width", "100%"],
- ["height", "20px"],
- ["position", "fixed"],
- ["left", "0"],
- ["top", "50px"],
- ["fontSize", "12px"],
- ["textAlign", "center"],
- ["zIndex", "2147483647"]
- ]
- });
- }
-
- function mk_img_group(url){
- let img = mk_img(url);
- let img_helper_link = mk_img_helper_link(url);
- let img_helper = mk_img_helper({img, img_helper_link});
-
- [img, img_helper, img_helper_link].forEach(function(node){
- document.body.appendChild(node);
- });
-
- return { img, img_helper, img_helper_link };
- }
-
- function clear(){
- [...document.querySelectorAll(".img_viewer")]
- .forEach(function(viewer){
- document.body.removeChild(viewer);
- });
- }
-
- function init(){
- [...document.querySelectorAll("img")].forEach(function(img){
- img.addEventListener("contextmenu", function(ev){
- mk_img_group(img.src);
- ev.preventDefault();
- });
- });
-
- document.body.addEventListener("mouseup", function(ev){
- if(firefox)
- return false;
-
- [...document.querySelectorAll(".img_viewer")]
- .forEach(function(viewer){
- viewer.dragging = 0;
- });
- });
-
- document.body.addEventListener("keydown", function(ev){
- let dispatch = ({
- "Escape": clear,
- "Control": init
- })[ev.key] || (()=>null);
-
- dispatch();
- });
- }
-
- init();
- console.log("Image Viewer started up.");
- console.log("Try right-clicking an image");