☰

4chan Image Browser

Opens current thread Images in 4chan into a popup viewer

目前为 2014-05-23 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name       4chan Image Browser
  3. // @namespace  IdontKnowWhatToDoWithThis
  4. // @description Opens current thread Images in 4chan into a popup viewer
  5. // @match   http*://*.4chan.org/*/res/*
  6. // @match   http*://*.4chan.org/*/thread/*
  7. // @version 5.1
  8. // @copyright  2013+, Gyst
  9. // ==/UserScript==
  10. /*jshint multistr:true */
  11. /*jshint browser:true */
  12. /*jshint smarttabs:true */
  13. /* jshint -W099 */
  14. /* jshint -W015 */
  15. /*global Main:false */
  16.  
  17.  
  18.  
  19. //cookieInfo
  20. var INDEX_KEY = "imageBrowserIndexCookie";
  21. var THREAD_KEY = "imageBrowserThreadCookie";
  22. var WIDTH_KEY = "imageBrowserWidthCookie";
  23. var HEIGHT_KEY = "imageBrowserHeightCookie";
  24.  
  25. //IDs for important elements
  26. var VIEW_ID = "mainView";
  27. var IMG_ID = "mainImg";
  28. var IMG_TABLE_ID = "imageAlignmentTable";
  29. var TOP_LAYER_ID = "viewerTopLayer";
  30.  
  31.  
  32. //for holding img srcs and a pointer for traversing
  33. var postData = [];
  34. var linkIndex = 0;
  35.  
  36. //set up the div and image for the popup
  37. var mainView;
  38. var mainImg;
  39. var innerTD;
  40. var topLayer;
  41. var customStyle;
  42. var textWrapper;
  43.  
  44. var leftArrow;
  45. var rightArrow;
  46.  
  47.  
  48. var bottomMenu;
  49.  
  50. var canPreload = false;
  51. var shouldFitImage = false;
  52.  
  53.  
  54. var mouseTimer;
  55.  
  56. var lastMousePos = {x: 0, y: 0};
  57.  
  58.  
  59.  
  60.  
  61. //keycode object.  Better than remembering what each code does.
  62. var keys = {38: 'up', 40: 'down', 37: 'left', 39: 'right', 27: 'esc', 86:'v'};
  63.  
  64. //styles for added elements
  65.  
  66. var STYLE_TEXT ='\
  67.     div.reply.highlight{z-index:100 !important;position:fixed !important; top:1%;left:1%;}\
  68.     body{overflow:hidden !important;}\
  69.     #quote-preview{z-index:100;} \
  70.     a.quotelink, div.viewerBacklinks a.quotelink{color:#5c5cff !important;}\
  71.     a.quotelink:hover, div.viewerBacklinks a:hover{color:red !important;}\
  72.     #'+IMG_ID+'{display:block !important; margin:auto;max-width:100%;height:auto;-webkit-user-select: none;cursor:pointer;}\
  73.     #'+VIEW_ID+'{\
  74.         background-color:rgba(0,0,0,0.9);\
  75.         z-index:10;	\
  76.         position:fixed;	\
  77.         top:0;left:0;bottom:0;right:0;	\
  78.         overflow:auto;\
  79.         text-align:center;\
  80.         -webkit-user-select: none;\
  81.     }\
  82.     #'+IMG_TABLE_ID+' {width: 100%;height:100%;padding:0;margin:0;border-collapse:collapse;}\
  83.     #'+IMG_TABLE_ID+' td {text-align: center; vertical-align: middle; padding:0;margin:0;}\
  84.     #'+TOP_LAYER_ID+'{position:fixed;top:0;bottom:0;left:0;right:0;z-index:20;opacity:0;visibility:hidden;transition:all .25s ease;}\
  85.     .viewerBlockQuote{color:white;}\
  86.     #viewerTextWrapper{max-width:60em;display:inline-block; color:gray;-webkit-user-select: all;}\
  87.     .bottomMenuShow{visibility:visible;}\
  88.     #viewerBottomMenu{box-shadow: -1px -1px 5px #888888;font-size:20px;padding:5px;background-color:white;position:fixed;bottom:0;right:0;z-index:200;}\
  89.     .hideCursor{cursor:none !important;}\
  90.     .hidden{visibility:hidden}\
  91.     .displayNone{display:none;}\
  92.     .pagingButtons{font-size:100px;color:white;text-shadow: 1px 1px 10px #27E3EB;z-index: 11;top: 50%;position: absolute;margin-top: -57px;width:100px;cursor:pointer;-webkit-user-select: none;}\
  93.     .pagingButtons:hover{color:#27E3EB;text-shadow: 1px 1px 10px #000}\
  94.     #previousImageButton{left:0;text-align:left;}\
  95.     #nextImageButton{right:0;text-align:right;}\
  96.     @-webkit-keyframes flashAnimation{0%{ text-shadow: none;}100%{text-shadow: 0px 0px 5px lightblue;}}\
  97.     .flash{-webkit-animation: flashAnimation .5s alternate infinite  linear;}\
  98.     ';
  99.  
  100. //Build the open button
  101. var openBttn = document.createElement('button');
  102. openBttn.style.position = 'fixed';
  103. openBttn.style.bottom = '0';
  104. openBttn.style.right = '0';
  105. openBttn.innerHTML = "Open Viewer";
  106. openBttn.addEventListener('click',buildPopup, false);
  107. document.body.appendChild(openBttn);
  108.  
  109.  
  110.  
  111. /* Builds the popup and adds it to the page*/
  112. function buildPopup(){
  113.     console.log("Building 4chan Image Viewer");
  114.  
  115.     var currentThreadId = document.getElementsByClassName('thread')[0].id;
  116.  
  117.     //check if its the last thread opened, if so, remember where the index was.
  118.     if(getPersistentValue(THREAD_KEY) === currentThreadId){
  119.         linkIndex = parseInt(getPersistentValue(INDEX_KEY)); 
  120.     }else{
  121.         linkIndex = 0;
  122.         setPersistentValue(INDEX_KEY,0);
  123.     }
  124.     
  125.    //set thread id
  126.     setPersistentValue(THREAD_KEY,currentThreadId);
  127.     
  128.     //reset post array
  129.     postData.length=0;
  130.  
  131.     
  132. 	//add keybinding listener
  133.     window.addEventListener('keydown',arrowKeyListener,false);
  134.     
  135.     window.addEventListener('mousemove',menuWatcher,false);
  136.     
  137.     //grab postContainers
  138.     var posts = document.getElementById('delform').getElementsByClassName('postContainer');
  139.     
  140.     //get image links and post messages from posts
  141.     var plength = posts.length;
  142.     for(var i = 0; i < plength; ++i){
  143.         
  144.         var file = posts[i].getElementsByClassName('file')[0];
  145.         if(file){
  146.             var currentLink = file.getElementsByClassName('fileThumb')[0].href;
  147.             if(!currentLink){continue;}
  148.             var type = getElementType(currentLink);
  149.             var currentPostBlock = posts[i].getElementsByClassName('postMessage')[0];
  150. 			var currentPostBacklinks = posts[i].getElementsByClassName('backlink')[0];
  151.             
  152. 			var blockQuote = document.createElement('blockQuote');
  153. 			var backlinks = document.createElement('div');
  154. 			
  155. 			if(currentPostBlock){
  156. 				blockQuote.className = currentPostBlock.className + ' viewerBlockQuote';
  157. 				blockQuote.innerHTML = currentPostBlock.innerHTML;
  158.                 add4chanListenersToLinks(blockQuote.getElementsByClassName('quotelink'));
  159. 			
  160. 			}
  161. 			if(currentPostBacklinks){
  162. 				backlinks.className = currentPostBacklinks.className + ' viewerBacklinks';
  163. 				backlinks.innerHTML = currentPostBacklinks.innerHTML;
  164. 				add4chanListenersToLinks(backlinks.getElementsByClassName('quotelink'));
  165. 			}
  166. 			
  167. 			postData.push({'imgSrc':currentLink,'type':type,'mBlock':blockQuote,'backlinks':backlinks});
  168.         }
  169.     }
  170.  
  171.         
  172.  
  173.     //build wrapper
  174.     mainView = document.createElement('div');
  175.     mainView.id = VIEW_ID;
  176.     mainView.addEventListener('click',confirmExit, false);
  177.     
  178.     document.body.appendChild(mainView);
  179.     //set up table for centering the content.  Seriously, the alternatives are worse.
  180.     mainView.innerHTML = '<table id="'+IMG_TABLE_ID+'"><tr><td></td></tr></table>';
  181. 	innerTD = mainView.getElementsByTagName('td')[0];
  182.     
  183.  
  184.     
  185.     //build image tag
  186.     mainImg = document.createElement(postData[linkIndex].type);
  187.     mainImg.src= postData[linkIndex].imgSrc;
  188.     mainImg.id = IMG_ID;
  189. 	mainImg.classList.add("hideCursor");
  190.     mainImg.autoplay = true;
  191.     mainImg.controls = false;
  192.     mainImg.loop = true;
  193.     
  194.     innerTD.appendChild(mainImg);
  195.     
  196.     mainImg.addEventListener('click',clickImg,false);
  197. 	mainImg.onload = function(){
  198. 		if(shouldFitImage){ fitHeightToScreen();}
  199. 	};
  200.  
  201.    
  202.    
  203.     //start preloading to next image index
  204.     canPreload = true;
  205.     setTimeout(function(){runImagePreloading(1);},100);
  206.    
  207.  
  208.     
  209.     //add quote block/backlinks(first image always has second post quote)
  210.     textWrapper = document.createElement('div');
  211.     textWrapper.addEventListener('click',eventStopper,false);
  212.     textWrapper.id = 'viewerTextWrapper';
  213.     textWrapper.appendChild(postData[linkIndex].backlinks);
  214. 	textWrapper.appendChild(postData[linkIndex].mBlock);
  215. 	innerTD.appendChild(textWrapper);
  216.     
  217.  
  218.     //build top layer
  219.     topLayer = document.createElement('div');
  220.     topLayer.innerHTML = "&nbsp;";
  221.     topLayer.id=TOP_LAYER_ID;
  222.     
  223.     document.body.appendChild(topLayer);
  224.     
  225.  
  226.     //build custom style tag
  227.     customStyle = document.createElement('style');
  228.     customStyle.innerHTML = STYLE_TEXT;
  229.     document.body.appendChild(customStyle);
  230.     
  231.     //build bottom menu
  232.     var formHtml = '<label><input id="'+WIDTH_KEY+'" type="checkbox" checked="checked" />Fit Image to Width</label>\
  233.                     <span>|</span>\
  234.                     <label><input id="'+HEIGHT_KEY+'" type="checkbox" />Fit Image to Height</label>\
  235.                     ';
  236.     bottomMenu = document.createElement('form');
  237.     bottomMenu.id = "viewerBottomMenu";
  238.     bottomMenu.className = 'hidden';
  239.     bottomMenu.innerHTML = formHtml;
  240.     document.body.appendChild(bottomMenu);
  241.     bottomMenu.addEventListener('click',menuClickHandler,false);
  242.     menuInit();
  243.     
  244.     //build arrow buttons
  245.     leftArrow = document.createElement("div");
  246.     leftArrow.innerHTML = '<span>&#9001;</span>';
  247.     leftArrow.id = "previousImageButton";
  248.     leftArrow.classList.add("pagingButtons","hidden");
  249.     
  250.     rightArrow = document.createElement("div");
  251.     rightArrow.innerHTML = '<span>&#9002;</span>';
  252.     rightArrow.id = "nextImageButton";
  253.     rightArrow.classList.add("pagingButtons","hidden");
  254.     
  255.     leftArrow.addEventListener('click',function(event){event.stopImmediatePropagation();previousImg();},false);
  256.     rightArrow.addEventListener('click',function(event){event.stopImmediatePropagation();nextImg();},false);
  257.     mainView.appendChild(leftArrow);
  258.     mainView.appendChild(rightArrow);
  259.     
  260.     
  261.     //some fixes for weird behaviors
  262. 	innerTD.style.outline = '0';
  263. 	innerTD.tabIndex = 1;
  264.     innerTD.focus();
  265.     
  266.  
  267. }
  268.  
  269. function menuInit(){
  270.     var menuControls = bottomMenu.getElementsByTagName('input');
  271.     for(var i = 0; i < menuControls.length; ++i){
  272.         var input = menuControls[i];
  273.         var cookieValue = getPersistentValue(input.id);
  274.         
  275.         
  276.         if(cookieValue === 'true'){
  277.             input.checked = true;
  278.         }else if(cookieValue === 'false'){
  279.             input.checked = false;
  280.         }
  281.         input.parentElement.classList.toggle('flash',input.checked);
  282.         switch(input.id){
  283.          case WIDTH_KEY:
  284.                 setFitToScreenWidth(input.checked);
  285.                 break;
  286.                 
  287.          case HEIGHT_KEY:  
  288.                 setFitToScreenHeight(input.checked);
  289.                 break;
  290.         }
  291.         
  292.  
  293.         
  294.     }
  295.     
  296. }
  297.  
  298.  
  299. function menuClickHandler(){
  300.     var menuControls = bottomMenu.getElementsByTagName('input');
  301.     
  302.     
  303.     for(var i = 0; i < menuControls.length; ++i){
  304.         var input = menuControls[i];
  305.         
  306.         switch(input.id){
  307.          case WIDTH_KEY:
  308.                 setFitToScreenWidth(input.checked);
  309.                 break;
  310.                 
  311.          case HEIGHT_KEY:  
  312.                 setFitToScreenHeight(input.checked);
  313.                 break;
  314.         }
  315.         
  316.         input.parentElement.classList.toggle('flash',input.checked);
  317.         
  318.         setPersistentValue(input.id,input.checked);
  319.         
  320.     }
  321.  
  322. }
  323.  
  324. function windowClick(event){
  325.     event.preventDefault();
  326.     event.stopImmediatePropagation();
  327.     nextImg();
  328.     
  329. }
  330.  
  331. function add4chanListenersToLinks(linkCollection){
  332.     for(var i = 0; i < linkCollection.length; ++i){
  333.        	//These are the functions that 4chan uses
  334.         linkCollection[i].addEventListener("mouseover", Main.onThreadMouseOver, false); 
  335. 		linkCollection[i].addEventListener("mouseout", Main.onThreadMouseOut, false);
  336.  
  337.     }
  338.     
  339. }
  340.  
  341.  
  342.  
  343. /* Event function for determining behavior of viewer keypresses */
  344. function arrowKeyListener(evt){
  345.  
  346.     switch(keys[evt.keyCode]){
  347.         case 'right':	
  348.             nextImg();
  349.             break;
  350.             
  351.         case 'left':	
  352.             previousImg();
  353.             break;
  354.  
  355.         case 'esc':		
  356.             clearDiv();
  357.             break;
  358.     }
  359.  
  360. }
  361.  
  362.  
  363. /* preloads images starting with the index provided */
  364. function runImagePreloading(index){
  365.  
  366.     if(index < postData.length){
  367.  
  368.         if(canPreload){
  369.             var newImage = document.createElement(postData[index].type);
  370.         	//load the next image after this one loads
  371.             newImage.onload = function(){
  372.                 runImagePreloading(index+1);
  373.             };
  374.             newImage.onerror = function(){
  375.                 runImagePreloading(index+1);
  376.             };
  377.             
  378.             newImage.src = postData[index].imgSrc;
  379.         
  380.         }
  381.         
  382.  
  383.     }
  384. }
  385.  
  386.  
  387.  
  388. /* Sets the img and message to the next one in the list*/
  389. function nextImg(){
  390.  
  391. 	if(linkIndex === postData.length - 1){
  392.         topLayer.style.background = 'linear-gradient(to right,rgba(0,0,0,0) 90%,rgba(125,185,232,1) 100%)';
  393.         topLayer.style.opacity = '.5';
  394. 		topLayer.style.visibility = "visible";
  395.  
  396. 		setTimeout(function(){
  397.     		topLayer.style.opacity = '0';
  398. 			setTimeout(function(){topLayer.style.visibility = "hidden";},200);
  399. 		}, 500);
  400. 		return;
  401. 	}
  402. 	else{
  403. 		changeData(1);
  404. 	}
  405. }
  406.  
  407. /* Sets the img and message to the previous one in the list*/
  408. function previousImg(){
  409.  
  410. 	if(linkIndex === 0){
  411. 		
  412.         topLayer.style.background = 'linear-gradient(to left,rgba(0,0,0,0) 90%,rgba(125,185,232,1) 100%)';
  413.         topLayer.style.opacity = '.5';
  414. 		topLayer.style.visibility = "visible";
  415.  
  416. 		setTimeout(function(){
  417.     		topLayer.style.opacity = '0';
  418. 			setTimeout(function(){topLayer.style.visibility = "hidden";},200);
  419. 		}, 500);
  420.  
  421.         return;
  422. 	}
  423. 	else{
  424.         changeData(-1);
  425.  
  426. 	}
  427. }
  428.  
  429. function changeData(delta){
  430.     linkIndex = linkIndex + delta;
  431.  
  432.     if(postData[linkIndex].type !== mainImg.tagName){
  433.         mainImg = replaceElement(mainImg,postData[linkIndex].type);   
  434.     }
  435.     
  436.     mainImg.src = postData[linkIndex].imgSrc;
  437.  
  438.     textWrapper.replaceChild(postData[linkIndex].backlinks,postData[linkIndex - delta].backlinks);
  439.     textWrapper.replaceChild(postData[linkIndex].mBlock,postData[linkIndex - delta].mBlock);
  440.  
  441.     mainView.scrollTop = 0;
  442.  
  443.     setPersistentValue(INDEX_KEY,linkIndex);
  444. }
  445.  
  446. function getElementType(src){
  447.     if(src.match(/\.(?:(?:webm)|(?:ogg)|(?:mp4))$/)){
  448.         return 'VIDEO';
  449.     }else{
  450.         return 'IMG';
  451.     }
  452. }
  453.  
  454. function replaceElement(element,newType){
  455.     var newElement = document.createElement(newType);
  456.     
  457.     newElement.className = element.className;
  458.     newElement.id = element.id;
  459.     newElement.style = element.style;
  460.     newElement.autoplay = element.autoplay;
  461.     newElement.controls = element.controls;
  462.     newElement.loop = element.loop;
  463.     
  464.     newElement.addEventListener('click',clickImg,false);
  465. 	newElement.onload = function(){
  466. 		if(shouldFitImage){ fitHeightToScreen();}
  467. 	};
  468.     element.parentElement.insertBefore(newElement,element);
  469.     element.parentElement.removeChild(element);
  470.     return newElement;
  471. }
  472.  
  473.  
  474.  
  475. /* Function for handling click image events*/
  476. function clickImg(event){
  477.     
  478.     event.stopPropagation();
  479.     nextImg();
  480.  
  481. }
  482.  
  483. function eventStopper(event){
  484.     if(event.target.nodeName !== 'A'){
  485.         event.stopPropagation();
  486.     }
  487.    
  488. }
  489.  
  490. function confirmExit(){
  491.     if(window.confirm('Exit Viewer?')){
  492.         clearDiv();
  493.     }
  494.  
  495. }
  496.  
  497. /* Removes the popup and other things added by the build method*/
  498. function clearDiv(){
  499.     window.removeEventListener('keydown',arrowKeyListener);
  500.     window.removeEventListener('mousemove',menuWatcher);
  501.     document.body.removeChild(topLayer);
  502.     document.body.removeChild(mainView);
  503.     document.body.removeChild(customStyle);
  504.     document.body.removeChild(bottomMenu);
  505.     document.body.style.overflow="auto";
  506.     canPreload = false;
  507.  
  508. }
  509.  
  510.  
  511.  
  512.  
  513. /*Mouse-move Handler that watches for when menus should appear and mouse behavior*/
  514. function menuWatcher(event) {  
  515.  
  516.     var height_offset = window.innerHeight - bottomMenu.offsetHeight;
  517.     var width_offset = window.innerWidth - bottomMenu.offsetWidth;
  518.     var center = window.innerHeight / 2;
  519.     var halfArrow = leftArrow.offsetHeight / 2;
  520.     
  521.     if(event.clientX >= width_offset && event.clientY >= height_offset){
  522.     	bottomMenu.className='bottomMenuShow';   
  523.     }else if(bottomMenu.className==='bottomMenuShow'){
  524.     	bottomMenu.className ='hidden';
  525.     }    
  526. 	
  527.     if((event.clientX <= (100) || event.clientX >= (window.innerWidth-100)) && 
  528.        (event.clientY <= (center + halfArrow) && event.clientY >= (center - halfArrow))){
  529.         rightArrow.classList.remove('hidden');
  530.         leftArrow.classList.remove('hidden');
  531.     }else{
  532.         rightArrow.classList.add('hidden');
  533.         leftArrow.classList.add('hidden');
  534.     }
  535.  
  536. 	//avoids chrome treating mouseclicks as mousemoves
  537.     if(event.clientX !== lastMousePos.x && event.clientY !== lastMousePos.y){
  538.     	//mouse click moves to next image when invisible
  539. 		mainImg.classList.remove('hideCursor');
  540.         
  541.         window.clearTimeout(mouseTimer);
  542.         document.body.removeEventListener('click',windowClick,true);
  543.         document.body.classList.remove('hideCursor');
  544.         if(event.target.id === mainImg.id){
  545.             //hide cursor if it stops, show if it moves
  546.             mouseTimer = window.setTimeout(function(){
  547.                         mainImg.classList.add('hideCursor');
  548.                         document.body.classList.add('hideCursor');
  549.                         document.body.addEventListener('click',windowClick,true);
  550.                         
  551.                     }, 200);
  552.         }
  553.  
  554.         
  555.  
  556.     }
  557.  
  558.     lastMousePos.x = event.clientX;
  559.     lastMousePos.y = event.clientY;
  560.         
  561. }
  562.  
  563. /*Stores a key value pair as a cookie*/
  564. function setPersistentValue(key, value){
  565.  
  566.     document.cookie = key + '='+value;
  567.  
  568. }
  569.  
  570. /* Retrieves a cookie value via its key*/
  571. function getPersistentValue(key){
  572.     var cookieMatch = document.cookie.match(new RegExp(key+'\\s*=\\s*([^;]+)'));
  573.     if(cookieMatch){
  574. 		return cookieMatch[1];
  575.     }else{
  576.     	return null;   
  577.     }
  578.  
  579.  
  580. }
  581.  
  582.  
  583. function setFitToScreenHeight(shouldFitImage){
  584. 	if(shouldFitImage){
  585.         fitHeightToScreen();
  586.     }else{
  587.         mainImg.style.maxHeight = '';
  588.     }
  589. }
  590. function setFitToScreenWidth(shouldFitImage){
  591.  
  592.     mainImg.style.maxWidth = shouldFitImage ? '100%' : 'none';
  593.  
  594. }
  595.  
  596.  
  597. /* Fits image to screen height*/
  598. function fitHeightToScreen(){
  599.  
  600.     //sets the changeable properties to the image's real size
  601.     var height = mainImg.naturalHeight;
  602.     mainImg.style.maxHeight = height + 'px';
  603.  
  604.     //actually tests if it is too high including padding
  605.     var heightDiff = (mainImg.clientHeight > height)?
  606.         mainImg.clientHeight - mainView.clientHeight:
  607.     	height -  mainView.clientHeight;
  608.  
  609.     if(heightDiff > 0){      
  610.         mainImg.style.maxHeight = (height - heightDiff) + 'px';
  611.     }else{
  612.     	mainImg.style.maxHeight = height + 'px';	
  613.     }
  614. }