Skip to content

Instantly share code, notes, and snippets.

@kidanger
Last active December 19, 2018 15:44
Show Gist options
  • Save kidanger/38845cc16206c544905933545639cae4 to your computer and use it in GitHub Desktop.
Save kidanger/38845cc16206c544905933545639cae4 to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name ipol-cart
// @namespace http://tampermonkey.net/
// @version 0.1
// @description add a cart to store IPOL images
// @author kidanger
// @match https://ipolcore.ipol.im/demo/clientApp/demo.html*
// @grant none
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==
(function() {
//'use strict';
var css = document.createElement('style');
var t = '\
.gallery{position:relative;width:auto;height:200px}\
.gallery .index{padding:0;margin:0;width:11em;list-style:none}\
.gallery .index li{margin:0;padding:0}\
.gallery .index a{display:block;background-color:#eee;border:1px solid #fff;text-decoration:none;width:13em;padding:5px}\
.gallery .index a span{display:block;position:absolute;left:-9999px;top:0;padding-left:2em}\
.gallery .index li:first-child a span{left:12em;z-index:99}\
.gallery .index a:hover{ border: 1px solid #888888;}\
.gallery .index a:hover span{left:12em;z-index:100}\
.gallery .index a span img{ width: 150%; }';
var tcss = document.createTextNode(t);
css.appendChild(tcss);
document.head.appendChild(css);
var cart_div = null;
function remove_img(img) {
if (!localStorage.getItem('list')){
window.localStorage.setItem('list', JSON.stringify([]));
}
var list = JSON.parse(localStorage.getItem('list'));
while (list.indexOf(img) >= 0) {
list.splice(list.indexOf(img), 1);
}
window.localStorage.setItem('list', JSON.stringify(list));
console.log(list);
}
function add_img(img) {
if (!localStorage.getItem('list')){
window.localStorage.setItem('list', JSON.stringify([]));
}
var list = JSON.parse(localStorage.getItem('list'));
list.push(img);
window.localStorage.setItem('list', JSON.stringify(list));
console.log(list);
}
function show_cart(div) {
div.innerHTML = '';
div.className = 'gallery';
div.style = 'height:290px';
var ul = document.createElement('ul');
ul.className = 'index';
var list = JSON.parse(localStorage.getItem('list'));
for (var i in list) {
var imgsrc = list[i];
var li = document.createElement('li');
var a = document.createElement('a');
a.onclick = function(imgsrc) { return function() {
console.log(imgsrc);
remove_img(imgsrc);
show_cart(div);
}}(imgsrc);
var t = document.createTextNode(imgsrc);
a.appendChild(t);
var span = document.createElement('span');
var img = document.createElement('img');
img.src = imgsrc;
img.style = 'width:100%';
span.appendChild(img);
a.appendChild(span);
li.appendChild(a);
ul.appendChild(li);
}
div.appendChild(ul);
}
waitForKeyElements(".gallery-item-selector", function (item) {
item = item[0];
console.log(item);
var a = document.createElement('a');
var linkText = document.createTextNode(" add");
a.appendChild(linkText);
a.onclick = function() {
var img = $('.gallery-0-blob-left')[0];
add_img(img.src);
if (cart_div !== null) {
show_cart(cart_div);
}
};
item.appendChild(a);
var a2 = document.createElement('a');
var linkText2 = document.createTextNode(" rm");
a2.appendChild(linkText2);
a2.onclick = function() {
var img = $('.gallery-0-blob-left')[0];
remove_img(img.src);
if (cart_div !== null) {
show_cart(cart_div);
}
};
item.appendChild(a2);
});
waitForKeyElements('.result_0', function (item) {
item = item[0];
var a = document.createElement('a');
var linkText = document.createTextNode("show cart");
a.appendChild(linkText);
a.onclick = function() {
if (cart_div == null) {
var d = document.createElement('div');
cart_div = d;
item.appendChild(d);
show_cart(cart_div);
a.innerHTML = 'hide cart';
} else {
item.removeChild(cart_div);
cart_div = null;
a.innerHTML = 'show cart';
}
};
item.appendChild(a);
console.log(item);
});
})();
@gfacciol
Copy link

gfacciol commented Dec 18, 2018

Instructions to install in the browser. (from @kidanger)

Install tampermonkey on chrome, on the gist click "raw" and it should propose to install the script.
On ipol, run a demo, and in the result gallery there should be "buttons" add and rm for each image. And a link "show cart" below the gallery. In the cart gallery, clicking on an image removed it (it does not uses the ipol gallery JavaScript unfortunately, their code is complex)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment