// ==UserScript==
// @name Reverse TinEye Image Search
// @namespace AmineKudo
// @description Dragging any image allows you to do a TinEye image search.
// @include *
// @exclude *www.google.*/imghp*
// @exclude *www.google.*/search?*site=imghp&*
// @exclude *www.google.*/search?tbs=sbi:*
// @grant none
// @version 1.00
// ==/UserScript==
if (!document || !document.body || top !== self) return;
/*=============*\
|* CONSTANTS *|
\*=============*/
var CONSTANT = {
incorrectTimeout: 2000, //Milliseconds
};
var EL = {
body: document.body,
head: document.getElementsByTagName('head')[0],
zone: null, //Set later
form: null, //Set later
message: null, //Set later
};
var VAR = {
dragImgSrc: null, //String
dontHide: false, //Bool
draggedOver: false, //Bool
};
var MESSAGE = {
drop: "Drop image here!",
incorrect: "This is not a valid image.",
oldBrowser: "You browser is too old and cannot use FileReader HTML5 API, please uninstall this userscript",
};
var URL = {
imageSearch: "https://www.tineye.com/search?url=",
formSearch: "https://www.tineye.com/search",
};
/*=============*\
|* CHECKS *|
\*=============*/
if(!window.FileReader) {
alert(MESSAGE.oldBrowser);
return;
}
/*=============*\
|* FUNCTIONS *|
\*=============*/
function getId(id) {
return document.getElementById(id);
}
function createEl(elementName, id /*optional*/, attrArr /*optional*/) {
var el = document.createElement(elementName);
if (id) {
el.id = id;
}
if (attrArr) {
try{
for (var attr in attrArr) {
el.setAttribute(attr, attrArr[attr]);
}
}catch(e){alert("Attributes are set wrong: "+e);}
}
return el;
}
function fileNameFromFileUrl (url) {
var index = url.lastIndexOf("/");
if (index == -1) {return url;}
return url.substr(index + 1);
}
function fixDataUrl(dataURL) {
return dataURL.substr(dataURL.indexOf(",") + 1)
.replace(/\//gm, "_").replace(/\+/gm, "-");
}
/*=============*\
|* HTML *|
\*=============*/
function addDropZone() {
EL.zone = createEl("div", "userscripts-dropzone");
EL.body.appendChild(EL.zone);
EL.message = createEl("div", "userscripts-dropzone-message");
EL.zone.appendChild(EL.message);
attachDragEvents(false);
}
/*=============*\
|* CSS *|
\*=============*/
(function(){
var CSS = {
"#userscripts-dropzone" : {
"margin" : "0",
"height" : "50px",
"width" : "100%",
"-webkit-user-select" : "none",
"-moz-user-select" : "none",
"user-select" : "none",
"position" : "fixed",
"top" : "-140px",
"left" : "0px",
"background" : "#f0f0f0",
"box-shadow" : "0 0px 10px rgba(0,0,0,0.8)",
"box-sizing" : "border-box",
"-webkit-box-sizing" : "border-box",
"-moz-box-sizing" : "border-box",
"z-index" : "10000000",
"-moz-transition-property" : "top",
"-moz-transition-duration" : "0.2s",
"-moz-transition-timing-function" : "ease-out",
"-webkit-transition-property" : "top",
"-webkit-transition-duration" : "0.2s",
"-webkit-transition-timing-function" : "ease-out",
"transition-property" : "top",
"transition-duration" : "0.2s",
"transition-timing-function" : "ease-out",
},
"#userscripts-dropzone.show" : {
"top" : "0px",
},
"#userscripts-dropzone-message": {
"text-align" : "center",
"font-size" : "18px !important",
"font-weight" : "bold !important",
"font-family" : "Arial, san-serif !important",
"color" : "black !important",
"padding" : "15px",
},
},
cssString = "",
propString = "",
eachSelector = "",
style = createEl("style");
for(var selector in CSS) {
eachSelector = CSS[selector];
propString = "";
for(var property in eachSelector) {
propString += property + ":" + eachSelector[property] + ";";
}
cssString += selector + "{" + propString + "}";
}
style.appendChild(document.createTextNode(cssString));
EL.head.appendChild(style);
})();
/*=============*\
|* FUNCTIONS *|
\*=============*/
function openSearchUrl(url) {
var fileName = fileNameFromFileUrl(url);
// Check if real file
if (fileName.indexOf(".") === -1) {
displayIncorrectFile();
return;
}
var tehUrl = URL.imageSearch + escape(url);
window.open(tehUrl, "_blank");
hide();
}
function displayIncorrectFile() {
VAR.dontHide = true;
EL.message.innerHTML = MESSAGE.incorrect;
setTimeout(function(){
VAR.dontHide = false;
hide();
}, CONSTANT.incorrectTimeout);
}
function processDrop(event) {
try{
var dt = event.dataTransfer,
link = dt.getData("Text"),
imgUrl = VAR.dragImgSrc,
files = dt.files,
file = null,
i = 0;
if (imgUrl != null) {
clearImageSource();
openSearchUrl(imgUrl);
} else if (link != "") {
console.log(link)
openSearchUrl(link);
} else if (files.length > 0) {
for (; i < files.length; i++) {
file = files[i];
var reader = new FileReader();
reader.file = file;
reader.addEventListener("loadend", processFile, false);
try {
reader.readAsDataURL(file);
}catch(error) {
displayIncorrectFile();
if (console && console.log) {
console.log(error);
}
}
}
} else {
displayIncorrectFile();
if (console && console.log) {
console.log("Not an image",event);
}
}
stopBrowser(event);
}catch(e){alert(e)}
}
function processFile(event) {
event.currentTarget.removeEventListener('loadend', processFile, false);
if (this.result == "") {
displayIncorrectFile();
return;
}
var dataUrl = fixDataUrl(this.result),
fileName = this.file.name;
setImageForm(dataUrl, fileName);
EL.form.submit();
hide();
this.file = null;
setImageForm("", "");
// Fixes Chrome's form searching
var counter = parseInt(EL.form.getAttribute('counter')) + 1;
EL.form.setAttribute('counter', counter);
EL.form.action = EL.form.getAttribute('origAction') + counter;
}
function setImageForm(dataUrl, fileName) {
if (EL.form) {
getId('userscripts-form-data-url').setAttribute('value', dataUrl);
getId('userscripts-form-filename').setAttribute('value', fileName);
return;
}
EL.form = createEl("form", "userscripts-form-image-search", {
enctype: 'multipart/form-data',
method: 'POST',
target: '_blank',
action: (URL.formSearch + '?d=0'),
origAction: (URL.formSearch + '?d'),
counter: 0,
});
var field1 = createEl("input", 'userscripts-form-data-url', {
type: 'hidden',
name: 'image',
value: dataUrl
}),
field2 = createEl("input", null, {
type: 'hidden',
name: 'btnG',
value: 'Search'
}),
field3 = createEl("input", 'userscripts-form-filename', {
type: 'hidden',
name: 'filename',
value: fileName
}),
field4 = createEl("input", null, {
type: 'hidden',
name: 'hl',
value: 'en'
});
EL.form.appendChild(field1);
EL.form.appendChild(field2);
EL.form.appendChild(field3);
EL.form.appendChild(field4);
EL.zone.appendChild(EL.form);
}
/*=============*\
|* EVENTS *|
\*=============*/
function detachDragEvents() {
document.removeEventListener("dragstart", processDragStart, false);
document.removeEventListener("dragenter", processDragEnter, false);
document.addEventListener("dragend", clearImageSource, false);
document.addEventListener("mouseover", mouseMove, false);
EL.zone.addEventListener("dragover", dragOverZone, false);
EL.zone.addEventListener("dragleave", dragOutZone, false);
EL.zone.addEventListener("drop", processDrop, false);
}
function attachDragEvents(shouldRemoveEvents) {
document.addEventListener("dragenter", processDragEnter, false);
document.addEventListener("dragstart", processDragStart, false);
if (!shouldRemoveEvents) {
document.removeEventListener("dragend", clearImageSource, false);
document.removeEventListener("mouseover", mouseMove, false);
EL.zone.removeEventListener("dragover", dragOverZone, false);
EL.zone.removeEventListener("dragleave", dragOutZone, false);
EL.zone.removeEventListener("drop", processDrop, false);
}
}
function stopBrowser(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragOverZone(event){
VAR.draggedOver = true;
stopBrowser(event);
}
function dragOutZone(event){
VAR.draggedOver = false;
stopBrowser(event);
}
function mouseMove(e) {
if (VAR.draggedOver) {
return;
}
if (EL.zone.className === "show") {
hide();
} else {
attachDragEvents();
}
}
function processDragStart(event) {
var el = event.target;
if (el.tagName === "IMG") {
VAR.dragImgSrc = el.src;
} else {
var imgs = el.getElementsByTagName('img');
if (imgs.length > 0) {
VAR.dragImgSrc = imgs[0].src;
} else {
if (el.tagName !== "A" || el.getAttribute("href") == "") {
detachDragEvents();
return;
}
}
}
show();
}
function processDragEnter(event) {
if (VAR.dragImgSrc != null || event.dataTransfer.getData('Text') == "") {
show();
} else {
detachDragEvents();
}
}
/*=============*\
|* MISC *|
\*=============*/
function clearImageSource(event) {
VAR.dragImgSrc = null;
hide();
}
function show() {
if (EL.zone.className === "show") {
return;
}
EL.message.innerHTML = MESSAGE.drop;
detachDragEvents();
EL.zone.className = "show";
}
function hide() {
if (EL.zone.className === "") {
return;
}
attachDragEvents();
if (VAR.dontHide) {
return;
}
VAR.draggedOver = false;
EL.zone.className = "";
}
/*=============*\
|* START *|
\*=============*/
addDropZone();
