Operaで画像を一覧するブックマークレット その２

前回のを少し変えて、ZOOM時の
右クリックで縮小サイズか、元のサイズor画面に収まるサイズで中央に
指定された縮小サイズの移動時だけ、位置を記憶するようにしました。
javascript:(function()%7Bvar%20openImg%20=%20function()%20%7B%0A%09this.has_links%20=%20%7B%7D;%0A%09this.has_url%20%20%20=%20%7B%7D;%0A%09this.reg%20%20%20%20%20%20%20=%20new%20RegExp();%0A%09this.win%20%20%20%20%20%20%20=%20window.open('');%0A%09this.num_size%20%20=%20'100px';%0A%09this.doc,%20this.elm_sct,%20this.area,%20this.zoom,%20this.elm_put_key;%0A%09var%20_this%20=%20this;%0A%09var%20num%20=%200;%0A%09var%20doc;%0A%09if(this.win)%20%7B%0A%09%09doc%20=%20_this.win.document;%0A%09%09_this.doc%20%20%20%20%20%20%20=%20_this.win.document;%0A%09%09_this.zoom%20%20%20%20%20%20=%20wheelZoom(_this.win);%0A%09%09_this.doc.title%20=%20'PicList%20-%20'%20+%20document.title;%0A%09%09_this.doc.body.appendChild(_this.creElm('style',%20%7Btype:%20'text/css',%20innerHTML:%0A%09%09%09%09'body%7Bwidth:100%25;height:100%25;overflow:auto;background:#333;margin:0;text-align:center;%7D'%20+%0A%09%09%09%09'div.opt%7Bmargin:5px;background:#000;position:fixed;z-index:99999999;padding:5px;opacity:0.8;border-radius:10px;%7D'%20+%0A%09%09%09%09'div#area-view%7Bwidth:100%25;position:absolute;top:50px;%7D'%20+%0A%09%09%09%09'button%7Bbackground:#ccc;border:none;border-radius:10px;cursor:pointer;margin:2px;%7D'%20+%0A%09%09%09%09'button:hover%7Bbackground:#ff0;%7D'%20+%0A%09%09%09%09'form%7Bmargin:0;display:inline;%7D'%20+%0A%09%09%09%09'a%7Bword-wrap:break-word;padding:3px;display:inline-block;margin:5px;border:1px%20solid%20#ccc;text-decoration:none;padding:3px;border-radius:5px;%7D'%20+%0A%09%09%09%09'a%20div%7Btext-align:left;margin-top:1px;padding:2px;font-size:11px;background:#000;color:#aaa;%7D'%0A%09%09%09%09%7D%0A%09%09%09)%0A%09%09);%0A%09%09var%20elm%20%20%20%20%20%20%20%20%20=%20_this.creElm('div',%20%7BclassName:%20'opt'%7D);%0A%09%09elm.appendChild(_this.creElm('button',%20%7BinnerHTML:%20'TEXT',%20onclick:%20function()%20%7B_this.checkFrames(1)%7D%7D));%0A%09%09elm.appendChild(_this.creElm('button',%20%7BinnerHTML:%20'IMG',%20onclick:%20function()%20%7B_this.checkFrames(2)%7D%7D));%0A%09%09elm.appendChild(_this.creElm('button',%20%7BinnerHTML:%20'LINK',%20onclick:%20function()%20%7B_this.checkFrames(3)%7D%7D));%0A%09%09elm.appendChild(_this.creElm('button',%20%7BinnerHTML:%20'ZOOM',%20onclick:%20function()%20%7B_this.wheelZoom()%7D%7D));%0A%09%09elm.appendChild(_this.creElm('button',%20%7BinnerHTML:%20'CLEAR',%20onclick:%20function()%20%7B_this.areaClear()%7D%7D));%0A%0A%09%09_this.elm_sct%20=%20_this.creElm('select',%20%7Bonchange:%20function()%20%7B_this.num_size%20=%20this.value%7D%7D);%0A%09%09elm.appendChild(_this.elm_sct);%0A%0A%09%09var%20elm_f%20%20%20%20%20%20%20%20%20=%20_this.creElm('form',%20%7Bonsubmit:%20function()%20%7Breturn%20_this.searchText()%7D%7D);%0A%09%09_this.elm_put_key%20=%20_this.creElm('input',%20%7Btype:%20'text'%7D);%0A%09%09elm_f.appendChild(_this.elm_put_key);%0A%09%09elm_f.appendChild(_this.creElm('button',%20%7Btype:%20'submit',%20innerHTML:%20'Search'%7D));%0A%09%09elm.appendChild(elm_f);%0A%0A%09%09_this.doc.body.appendChild(elm);%0A%09%09_this.area%20=%20_this.creElm('div',%20%7Bid:%20'area-view'%7D);%0A%09%09_this.doc.body.appendChild(_this.area);%0A%09%09_this.setSize();%0A%09%7D;%0A%7D;%0AopenImg.prototype%20=%20%7B%0A%09setSize:%20function()%20%7B%0A%09%09var%20num;%0A%09%09for(var%20i%20=%200;%20i%20%3C%2010;%20i%20++)%20%7B%0A%09%09%09num%20=%20(i%20+%201)%20*%2050;%0A%09%09%09this.elm_sct.options%5Bi%5D%20=%20new%20Option(num,%20num%20+%20'px');%0A%09%09%7D;%0A%09%09this.elm_sct.options%5B10%5D%20=%20new%20Option('original',%20'auto');%0A%09%09this.elm_sct.selectedIndex%20=%201;%0A%09%7D,%0A%09searchText:%20function()%20%7B%0A%09%09this.has_url%20%20%20%20%20%20%20%20=%20%7B%7D;%0A%09%09this.area.innerHTML%20=%20'';%0A%09%09this.reg.compile(this.elm_put_key.value.replace(/(%5B-()%5C%5B%5C%5D.%5E%7B%7D%5C%5C?*+/$%5D)/g,%20'%5C%5C$1').replace(/%5Cs+/g,%20'%5C.*'),%20'ig');%0A%09%09for(var%20i%20in%20this.has_links)%20%7B%0A%09%09%09if(i.search(this.reg)%20%3E=%200%20%7C%7C%20(typeof%20this.has_links%5Bi%5D%20==%20'string'%20&&%20this.has_links%5Bi%5D.search(this.reg)%20%3E=%200))%20%7B%0A%09%09%09%09this.has_url%5Bi%5D%20=%20this.has_links%5Bi%5D;%0A%09%09%09%7D;%0A%09%09%7D;%0A%09%09this.append();%0A%09%09return%20false;%0A%09%7D,%0A%09wheelZoom:%20function()%20%7B%0A%09%09var%20obj%20%20%20%20%20%20=%20this.doc.images;%0A%09%09var%20obj_f%20%20%20%20=%20this.doc.createDocumentFragment();%0A%09%09var%20elm,%20num_size;%0A%09%09for(var%20i%20=%200;%20i%20%3C%20obj.length;%20i%20++)%20%7B%0A%09%09%09elm%20%20%20%20%20%20=%20obj%5Bi%5D.cloneNode(true);%0A%09%09%09num_size%20=%20(this.num_size%20==%20'auto')?%20obj%5Bi%5D.naturalWidth:%20this.num_size;%0A%09%09%09with(elm.style)%20%7B%0A%09%09%09%09width%20=%20num_size;%0A%09%09%09%09top%20%20%20=%20obj%5Bi%5D.offsetTop;%0A%09%09%09%09left%20%20=%20obj%5Bi%5D.offsetLeft;%0A%09%09%09%7D;%0A%09%09%09elm.value%20=%20obj%5Bi%5D.offsetTop%20+%20';'%20+%20obj%5Bi%5D.offsetLeft;%0A%09%09%09this.zoom.attach(elm,%20num_size,%20this.area);%0A%09%09%09obj_f.appendChild(elm);%0A%09%09%7D;%0A%09%09this.area.innerHTML%20=%20'';%0A%09%09this.area.appendChild(obj_f);%0A%09%7D,%0A%09areaClear:%20function()%20%7B%0A%09%09this.has_links%20%20%20%20%20%20=%20%7B%7D;%0A%09%09this.has_url%20%20%20%20%20%20%20%20=%20%7B%7D;%0A%09%09this.area.innerHTML%20=%20'';%0A%09%7D,%0A%09checkFrames:%20function(num)%20%7B%0A%09%09this.has_url%20=%20%7B%7D;%0A%09%09this.setDoc(document,%20num);%0A%09%09this.checkFrames2(document,%20num);%0A%09%09this.append();%0A%09%7D,%0A%09checkFrames2:%20function(obj,%20num)%20%7B%0A%09%09try%20%7B%0A%09%09%09var%20obj_f%20=%20obj.frames;%0A%09%09%09var%20obj_d;%0A%09%09%09for(var%20i%20=%200;%20i%20%3C%20obj_f.length;%20i%20++)%20%7B%0A%09%09%09%09try%20%7B%0A%09%09%09%09%09obj_d%20=%20(obj_f%5Bi%5D.document)?%20obj_f%5Bi%5D.document:%20obj_f%5Bi%5D.contentWindow.document;%0A%09%09%09%09%09this.setDoc(obj_d,%20num);%0A%09%09%09%09%09this.checkFrames2(obj_d,%20num);%0A%09%09%09%09%7D%20catch(e)%20%7B%7D;%0A%09%09%09%7D;%0A%09%09%7D%20catch(e)%20%7B%0A%09%09%7D;%0A%09%7D,%0A%09setDoc:%20function(obj,%20num)%20%7B%0A%09%09switch(num)%20%7B%0A%09%09%09case%201:%09this.getLinks(obj.body.innerHTML.replace(/%3Cbr%5C/*%3E/ig,%20'%5Cn').replace(/%3C%5B%5E%3E%5D*%3E/g,%20'').match(/%5B%5E%5Cs%22=%5D*%5C/%5C/.*%5C.(jpg%7Cjpeg%7Cgif%7Cpng%7Cbmp)%5Cs/ig),%20num);%20break;%0A%09%09%09case%202:%09this.getLinks(obj.images,%20num);%20break;%0A%09%09%09case%203:%09this.getLinks(obj.links,%20num);%0A%09%09%7D;%0A%09%7D,%0A%09getLinks:%20function(obj,%20num)%20%7B%0A%09%09if(!obj)%20return;%0A%09%09var%20str_text,%20str_alt;%0A%09%09for(var%20i%20=%200;%20i%20%3C%20obj.length;%20i%20++)%20%7B%0A%09%09%09str_text%20=%20num%20==%201%20?%20(!/https:%7Cfile:/i.test(obj%5Bi%5D))%20?%20obj%5Bi%5D.replace(/%5B%5E/%5D*%5C/%5C//,%20'http://')%20:%20obj%5Bi%5D%20:%20num%20==%202?%20obj%5Bi%5D.src%20:%20obj%5Bi%5D.href;%0A%09%09%09if(num%20%3C%203%20%7C%7C%20/%5C.(jpg%7Cjpeg%7Cgif%7Cpng%7Cbmp)/ig.test(str_text))%20%7B%0A%09%09%09%09if(!this.has_links%5Bstr_text%5D)%20%7B%0A%09%09%09%09%09str_alt%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20=%20obj%5Bi%5D.alt%20%7C%7C%20obj%5Bi%5D.title%20%7C%7C%20true;%0A%09%09%09%09%09this.has_url%5Bstr_text%5D%20%20%20=%20str_alt;%0A%09%09%09%09%09this.has_links%5Bstr_text%5D%20=%20str_alt;%0A%09%09%09%09%7D;%0A%09%09%09%7D;%0A%09%09%7D;%0A%09%7D,%0A%09append:%20function()%20%7B%0A%09%09var%20_this%20=%20this;%0A%09%09var%20elm_a,%20elm_i,%20elm_d;%0A%09%09for(var%20i%20in%20this.has_url)%20%7B%0A%09%09%09elm_i%20=%20this.creElm('img',%20%7Bsrc:%20i%7D,%20%7Bwidth:%20this.num_size%7D);%0A%09%09%09(function(elm,%20str_url,%20str_alt)%20%7B%0A%09%09%09%09elm.onload%20=%20function()%20%7B%0A%09%09%09%09%09elm_a%20=%20_this.creElm('a',%20%7Btarget:%20'_blank',%20href:%20str_url%7D,%20%7Bwidth:%20(_this.num_size%20==%20'auto'?%20elm.naturalWidth:%20_this.num_size)%7D);%0A%09%09%09%09%09elm_d%20=%20_this.creElm('div',%20%7BinnerHTML:%20str_url.replace(/.*%5C/(%5B%5E?%5D*).*/,%20'$1%3Cbr%3E%5B')%20+%20this.naturalWidth%20+%20'%C3%97'%20+%20this.naturalHeight%20+%20(typeof%20str_alt%20==%20'string'%20?%20'%5D%3Cbr%3E'%20+%20str_alt:%20'%5D')%7D);%0A%09%09%09%09%09elm_a.appendChild(this);%0A%09%09%09%09%09elm_a.appendChild(elm_d);%0A%09%09%09%09%09_this.area.appendChild(elm_a);%0A%09%09%09%09%7D;%0A%09%09%09%09elm.onerror%20=%20function()%20%7Belm.parentNode.removeChild(elm)%7D;%0A%09%09%09%7D)(elm_i,%20i,%20this.has_url%5Bi%5D);%0A%09%09%7D;%0A%09%7D,%0A%09creElm:%20function(str_name,%20has_but,%20has_css)%20%7B%0A%09%09var%20elm%20=%20this.doc.createElement(str_name);%0A%09%09for(var%20i%20in%20has_but)%20elm%5Bi%5D%20=%20has_but%5Bi%5D;%0A%09%09for(i%20in%20has_css)%20elm.style%5Bi%5D%20=%20has_css%5Bi%5D;%0A%09%09return%20elm;%0A%09%7D%0A%7D;%0Afunction%20wheelZoom(win)%20%7B%0A%09_zoom%20=%20function()%20%7B%0A%09%09this.win%20=%20win;%0A%09%09this.boo%20=%20(/object/i.test(typeof(document.onmousewheel)))%20?%20true%20:%20false;%0A%09%09this.z%20%20%20=%201;%0A%09%09this.n%20%20%20=%2030;%0A%09%09this.win.document.addEventListener('contextmenu',%20function(evt)%20%7Bevt.preventDefault()%7D,%20false);%0A%0A%09%7D;%0A%09_zoom.prototype%20=%20%7B%0A%09%09remove:%20function()%20%7B%0A%09%09%09if(parseInt(this.style.top)%20+%20this.offsetHeight%20%20%3C=%200)%20this.style.top%20=%2020%20-%20this.offsetHeight;%0A%09%09%09if(parseInt(this.style.left)%20+%20this.offsetWidth%20%20%3C=%200)%20this.style.left=%2020%20-%20this.offsetWidth;%0A%09%09%7D,%0A%09%09move:%20function(evt,%20elm)%20%7B%0A%09%09%09evt.preventDefault();%0A%09%09%09elm.style.left%20=%20parseInt(evt.pageX)%20-%20this.d_x;%0A%09%09%09elm.style.top%20%20=%20parseInt(evt.pageY)%20-%20this.d_y;%0A%09%09%7D,%0A%09%09attach:%20function(elm,%20str_size,%20elm_area)%20%7B%0A%09%09%09var%20_this%20=%20this;%0A%09%09%09var%20num_s,%20num_t,%20num_l;%0A%09%09%09var%20num_w,%20num_h,%20p_x,%20p_y;%0A%09%09%09var%20arr_pos,%20num_area_w,%20num_area_h;%0A%09%09%09var%20_move%20=%20function(e)%20%7B_this.move(e,%20elm)%7D;%0A%09%09%09elm.style.position%20=%20'absolute';%0A%09%09%09elm.addEventListener('mousedown',%20function(evt)%20%7B%0A%09%09%09%09evt.preventDefault();%0A%09%09%09%09this.style.zIndex%20=%20++%20_this.z;%0A%09%09%09%09if(evt.button%20==%200)%20%7B%0A%09%09%09%09%09_this.d_x%20=%20parseInt(evt.pageX)%20-%20parseInt(this.offsetLeft);%0A%09%09%09%09%09_this.d_y%20=%20parseInt(evt.pageY)%20-%20parseInt(this.offsetTop);%0A%09%09%09%09%09_this.win.document.body.addEventListener('mousemove',%20_move,%20false);%0A%09%09%09%09%09_this.win.document.body.addEventListener('mouseup',%20function(e)%20%7B%0A%09%09%09%09%09%09if(elm.style.width%20==%20str_size)%20elm.value%20=%20%5Belm.style.top,%20elm.style.left%5D.join(';');%0A%09%09%09%09%09%09_this.win.document.body.removeEventListener('mousemove',%20_move,%20false);%0A%09%09%09%09%09%09_this.win.document.body.removeEventListener('mouseup',%20arguments.callee,%20false);%0A%09%09%09%09%09%7D,%20false);%0A%09%09%09%09%7D%20else%20if(evt.button%20==%202)%20%7B%0A%09%09%09%09%09if(this.style.width%20%3E%20str_size)%20%7B%0A%09%09%09%09%09%09arr_pos%20%20%20%20%20%20%20%20%20%20%20=%20this.value.split(';');%0A%09%09%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09%09%09this.style.width%20%20=%20str_size;%0A%09%09%09%09%09%09this.style.top%20%20%20%20=%20arr_pos%5B0%5D;%0A%09%09%09%09%09%09this.style.left%20%20%20=%20arr_pos%5B1%5D;%0A%09%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09%09num_area_w%20=%20_this.win.document.body.offsetWidth%20-%2050;%0A%09%09%09%09%09%09num_area_h%20=%20_this.win.document.body.offsetHeight%20-%20100;%0A%09%09%09%09%09%09if(this.naturalWidth%20%3E%20this.naturalHeight)%20%7B%0A%09%09%09%09%09%09%09if(this.naturalWidth%20%3E%20num_area_w)%20%7B%0A%09%09%09%09%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09%09%09%09%09this.style.width%20%20=%20num_area_w;%0A%09%09%09%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09%09%09%09this.style.width%20%20=%20'auto';%0A%09%09%09%09%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09%09%09%09%7D;%0A%09%09%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09%09%09if(this.naturalHeight%20%3E%20num_area_h)%20%7B%0A%09%09%09%09%09%09%09%09this.style.width%20%20=%20'auto';%0A%09%09%09%09%09%09%09%09this.style.height%20=%20num_area_h;%0A%09%09%09%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09%09%09%09this.style.width%20%20=%20'auto';%0A%09%09%09%09%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09%09%09%09%7D;%0A%09%09%09%09%09%09%7D;%0A%09%09%09%09%09%09if(this.offsetHeight%20%3E%20num_area_h)%20%7B%0A%09%09%09%09%09%09%09this.style.width%20%20=%20'auto';%0A%09%09%09%09%09%09%09this.style.height%20=%20num_area_h;%0A%09%09%09%09%09%09%7D;%0A%09%0A%09%09%09%09%09%09this.style.top%20%20=%20((num_area_h%20-%20this.offsetHeight)%20/%202)%20+%20_this.win.document.body.scrollTop%20+%2020;%0A%09%09%09%09%09%09this.style.left%20=%20((num_area_w%20-%20this.offsetWidth)%20/%202)%20+%20_this.win.document.body.scrollLeft%20+%2030;%0A%09%09%09%09%09%7D;%0A%09%09%09%09%7D;%0A%09%09%09%7D,%20false);%0A%09%09%09elm.ondblclick%20=%20function()%20%7B%0A%09%09%09%09%09num_w%20=%20this.offsetWidth;%0A%09%09%09%09%09num_h%20=%20this.offsetHeight;%0A%09%09%09%09%09if(this.style.width%20==%20str_size)%20this.style.width%20=%20this.naturalWidth;%0A%09%09%09%09%09else%20this.style.width%20=%20str_size;%0A%09%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09%09p_x%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20=%20this.offsetWidth%20-%20num_w;%0A%09%09%09%09%09p_y%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20=%20this.offsetHeight%20-%20num_h;%0A%09%09%09%09%09if(this.style.width%20==%20str_size)%20%7B%0A%09%09%09%09%09%09arr_pos%20%20%20%20%20%20%20%20%20=%20this.value.split(';');%0A%09%09%09%09%09%09this.style.top%20%20=%20arr_pos%5B0%5D;%0A%09%09%09%09%09%09this.style.left%20=%20arr_pos%5B1%5D;%0A%09%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09%09this.style.top%20%20=%20this.offsetTop%20-%20p_y%20/%202;%0A%09%09%09%09%09%09this.style.left%20=%20this.offsetLeft%20-%20p_x%20/%202;%0A%09%09%09%09%09%7D;%0A%09%09%09%09%09_this.remove.call(this);%0A%09%09%09%7D;%0A%09%09%09elm.onmouseover%20%20=%20function()%20%7B_this.flag%20=%20true%7D;%0A%09%09%09elm.onmouseout%20%20%20=%20function()%20%7B_this.flag%20=%20false%7D;%0A%09%09%09elm.addEventListener(this.boo%20?%20'mousewheel'%20:%20'DOMMouseScroll',%20function(evt)%20%7B%0A%09%09%09%09if(!_this.flag)%20return;%0A%09%09%09%09evt.preventDefault();%0A%09%09%09%09num_t%20=%20this.offsetTop;%0A%09%09%09%09num_l%20=%20this.offsetLeft;%0A%09%09%09%09if(_this.boo)%20%7B%0A%09%09%09%09%09num_s%20=%20(evt.wheelDelta%20%3E%200)%20?%20_this.n%0A%09%09%09%09%09%09%09:%20(evt.wheelDelta%20%3C%200%20&&%20this.offsetWidth%20-%20_this.n%20%3E%2010)%20?%20-%20_this.n%0A%09%09%09%09%09%09%09:%20null;%0A%09%09%09%09%7D%20else%20%7B%0A%09%09%09%09%09num_s%20=%20(evt.detail%20%3C%200)%20?%20_this.n%0A%09%09%09%09%09%09%09:%20(evt.detail%20%3E%200%20&&%20this.offsetWidth%20-%20_this.n%20%3E%2010)%20?%20-%20_this.n%0A%09%09%09%09%09%09%09:%20null;%0A%09%09%09%09%7D;%0A%09%09%09%09if(!num_s)%20return;%0A%09%09%09%09this.style.width%20%20=%20this.clientWidth%20+%20num_s;%0A%09%09%09%09this.style.height%20=%20'auto';%0A%09%09%09%09this.style.top%20%20%20%20=%20num_t%20-%20num_s%20/%202;%0A%09%09%09%09this.style.left%20%20%20=%20num_l%20-%20num_s%20/%202;%0A%09%09%09%09_this.remove.call(this);%0A%09%09%09%7D,%20false);%0A%09%09%7D%0A%09%7D;%0A%09return%20new%20_zoom();%0A%7D;%0Anew%20openImg();%0A%7D)();

2012/06/15更新

バージョンが12.00になり、イベントが増えたのか
ドラッグ＆ドロップの挙動がおかしくなったので更新しました。