Jump to content

User:Codehydro/Auto CSS image crop

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Codehydro (talk | contribs) at 21:25, 7 December 2014 (Created page with '<pre style="white-space: pre-wrap;">(outer = document.createElement("div")).style.CSSText="width:100px";document.body.appendChild(outer);widthNoScroll = outer.of...'). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.
(diff) ← Previous revision | Latest revision (diff) | Newer revision → (diff)
(outer = document.createElement("div")).style.CSSText="width:100px";document.body.appendChild(outer);widthNoScroll = outer.offsetWidth;outer.style.overflow = "scroll";(inner = document.createElement("div")).style.width = "100%";outer.appendChild(inner);scrollbarWidth = widthNoScroll - inner.offsetWidth;outer.parentNode.removeChild(outer);lastFile="";lastWidth="";ac=document.getElementById("autocrop");labels = ["Image","bSize","cWidth","cHeight","oTop","oLeft"];function automake(){at=document.getElementById("autotemp");at.innerText="<!--Crop template made using Codehydro's tool; See documentation at Template:CSS image crop-->{{CSS image crop\n| Image\t=\t"+lastFile;for(i=1;i<6;i++) at.innerText+="\n| "+labels[i]+"\t=\t"+cform.elements[i].value;at.innerText+="\n}}";}function updatecrop(){if(lastWidth == ic.naturalWidth){cform.elements[2].value = Math.min(parseInt(cform.elements[2].value),ic.naturalWidth);cform.elements[3].value = Math.min(parseInt(cform.elements[3].value),ic.naturalHeight);pc.style.width=(parseInt(cform.elements[2].value)+scrollbarWidth)+"px";pc.style.height=(parseInt(cform.elements[3].value)+scrollbarWidth)+"px";scrollSet();}}function lastPct(){if(lastWidth == ic.naturalWidth) {lastTopPct = pc.scrollTop/ic.naturalHeight;lastLeftPct = pc.scrollLeft/ic.naturalWidth;lastWidthPct = cform.elements[2].value/ic.naturalWidth;lastHeightPct = cform.elements[3].value/ic.naturalHeight;automake();}}function scrollFind(){if(lastWidth == ic.naturalWidth){pc.scrollTop = Math.min(ic.naturalHeight-cform.elements[3].value,pc.scrollTop);pc.scrollLeft = Math.min(ic.naturalWidth-cform.elements[2].value,pc.scrollLeft);cform.elements[4].value = pc.scrollTop;cform.elements[5].value=pc.scrollLeft;lastPct();}}function scrollSet(){if(lastWidth == ic.naturalWidth){cform.elements[4].value = Math.min(ic.naturalHeight,cform.elements[4].value);cform.elements[5].value = Math.min(ic.naturalWidth,cform.elements[5].value);pc.scrollTop=cform.elements[4].value;pc.scrollLeft=cform.elements[5].value;lastPct();}}function updateimage(){cform.elements[0].value=cform.elements[0].value.replace("File:","");cform.elements[1].value = parseInt(cform.elements[1].value) || lastWidth;if(cform.elements[0].value.length && cform.elements[1].value.length){if(lastFile == cform.elements[0].value){lastPct();ic.src=ic.src.replace(lastWidth+"px",cform.elements[1].value+"px");} else {lastTopPct = 0;lastLeftPct = 0;lastWidthPct = 1;lastHeightPct = 1;lastFile = cform.elements[0].value;load=new XMLHttpRequest();load.open('GET','../wiki/File:'+cform.elements[0].value,false);load.send();console.log('done');(temp=document.createElement('div')).innerHTML=load.responseText;imglink=temp.getElementsByClassName("mw-thumbnail-link");if(imglink.length){ic.src=imglink[0].href.replace(parseInt(imglink[0].innerText.replace(',',''))+"px",cform.elements[1].value+"px");} else {cform.elements[1].value = "WARNING: INVALID IMAGE";}}if(imglink.length){pc.innerHTML="<div id='precrop2' style='display:inline-block;padding-right:"+scrollbarWidth+"px;padding-bottom:"+scrollbarWidth+"px;'>"+ic.outerHTML+"</div>";pc2=document.getElementById("precrop2");pc.style=outerstyle;setTimeout(function(){cform.elements[2].value=Math.round(ic.naturalWidth*lastWidthPct);cform.elements[3].value = Math.round(ic.naturalHeight*lastHeightPct);cform.elements[4].value = Math.round(ic.naturalHeight*lastTopPct);cform.elements[5].value=Math.round(ic.naturalWidth*lastLeftPct);lastWidth = ic.naturalWidth;updatecrop();},99);}}}outerstyle='overflow:scroll;width:auto;height:auto;';ac.innerHTML="<style type='text/css'>input,cform{width:20em;}</style><form id='cform'><table><tr><td>Image:</td><td><input onblur='updateimage()'></td></tr><tr><td>bSize</td><td><input onblur='updateimage()'></td></tr><tr><td>cWidth</td><td><input onblur='updatecrop()'></td></tr><tr><td>cHeight</td><td><input onblur='updatecrop()'></td></tr><tr><td>oTop</td><td><input onblur='scrollSet()'></td></tr><tr><td>oLeft</td><td><input onblur='scrollSet()'></td></tr></table></form><div id='precrop' style='"+outerstyle+"' onscroll='scrollFind()'><img id='imgcrop' src='/media/wikipedia/commons/d/d2/Blank.png'/></div><pre id='autotemp'></pre>";pc=document.getElementById("precrop");ic=document.getElementById('imgcrop');