gallery-view-bookmarklet.js

javascript:(function(){ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(e(q){e m(q){3.U=q;3.g=3.U.1f;3.o=3.g.1Y;3.R={17:1Z,1p:s,};3.B;3.t=[];3.K={};3.7=3.g.k("1b");3.7.4.1a="1c";3.7.4.H="M";3.7.4.1g="N";3.7.4.1r="N";3.7.4.1k="19%";3.7.4.1j="19%";3.7.4.1i="1V";3.7.4.1S="O";3.7.4.v="0";3.7.4.F="0";3.7.4.D="0";3.7.4.1h="#1U";3.7.1l=0;3.15=[];3.8=3.g.k("1b");3.8.4.1a="1c";3.7.4.H="M";3.8.4.1g="N";3.8.4.1r="N";3.8.4.1k="20";3.8.4.1j="1Q";3.8.4.1i="21";3.8.4.v="0";3.8.4.F="0";3.8.4.D="0";3.8.4.1h="#1P";3.8.1l=0;3.y=3.g.k("1e");3.y.4.v="1G 1J";3.y.4.F="0";3.y.4.D="1F";3.8.j(3.y);3.z=3.g.k("A");3.z.14="1I:";3.z.T("1D",e(6){b 5=l;5.X();6.f();6.V()});3.y.j(3.z);3.h=3.g.k("W");3.h.4.H="M";3.h.4.v="O";3.h.4.F="0";3.h.4.D="0";3.h.4.1o="1K";3.h.4.1s="1O";3.z.j(3.h);3.P=3.g.k("1N");3.P.4.v="0.1M O";3.y.j(3.P);3.G=-1}m.p.18=e(6){b 5=l;b f=1A;c(6.w===27){5.1E();f=s}c(f){6.f();6.V()}};m.p.l=e(){b 5=3;b Z=[];1W.p.1n.2g(3.g.22("*"),e(d){c(d.2k==="W"){c(d.1m<5.R.17||d.1m<5.R.17){E}c(5.K[d.n]){E}b 9=1f.k("W");9.n=d.n;9.J=d.J;9.S=d.S;5.t.Y(9);5.K[d.n]=s;E}b 1q=5.U.2i(d,1C);b x=1q.2o;c(x&&/^2p\\(([\'"]|(?![\'"]))(.*)\\1\\)$/i.2m(x)){x=2h.$2;c(5.K[x]){E}b 9=5.g.k("W");9.n=x;9.28="26";(5.R.1p?Z:5.t).Y(9);5.K[x]=s}});5.t=5.t.29(Z);5.t.1n(e(d,1t,2e){b 9=d;9.4.H="1d";9.4.v="O";9.4.F="0";9.4.D="0";9.4.1o="19%";9.4.1s="2b";b u=5.g.k("1e");u.4.H="1d-M";u.4.v="0.2l";u.4.F="0";u.4.D="0";b r=5.g.k("a");r.14=d.n;r.2c="1v";r.T("1D",e(6){5.1z(1t);6.f();6.V()});r.j(d);5.15.Y(r);r.j(9);u.j(r);5.7.j(u)});5.o.T("L",5.18);5.o.j(5.7);5.7.11();5.B="16"};m.p.1E=e(){c(3.B!=="16")E;3.o.1w("L",3.18);3.7.2d.1u(3.7);q.l=1C};m.p.12=e(6){b 5=l;b f=1A;c(6.w===2f||6.w===2a){5.Q(1y.24(5.G-1,0));f=s}10 c(6.w===23||6.w===25){5.Q(1y.2n(5.G+1,5.t.2j-1));f=s}10 c(6.w===13||6.1L===1H){5.X();f=s}10 c(6.w===27){5.1B();f=s}c(f){6.f();6.V()}};m.p.Q=e(I){3.G=I;b C=3.t[I];3.h.n=C.n;3.h.J=C.J;3.h.S=C.S;3.P.1X=C.J;3.z.14=C.n;3.o.j(3.8)};m.p.1z=e(I){3.Q(I);3.o.T("L",3.12);3.o.j(3.8);3.8.11();3.B="1x"};m.p.1B=e(){c(3.B!=="1x")E;3.o.1w("L",3.12);3.o.1u(3.8);3.15[3.G].11();3.B="16"};m.p.X=e(){3.U.1R(3.h.n,"1v")};c(!q.l){b l=q.l=1T m(q);l.l()}})(q);',62,150,'|||this|style|that|event|_galleryViewWrapper|_singleViewWrapper|img||var|if|elem|function|preventDefault|_doc|_singleViewImg||appendChild|createElement|galleryView|GalleryView|src|_body|prototype|window|anchor|true|_imgList|figure|margin|keyCode|bgImgSrc|_singleViewFigure|_singleViewAnchor||_currentView|refImg|padding|return|border|_singleViewImgIndex|display|refIndex|alt|_imgUrlList|keypress|block|0px|auto|_singleViewFigCaption|singleViewSetImage|_options|title|addEventListener|_window|stopPropagation|IMG|fullView|push|bgImgList|else|focus|_singleViewKeyListener||href|_galleryAnchors|gallery|ignoreSmallImageThreshold|_galleryViewKeyListener|100|position|DIV|fixed|inline|FIGURE|document|top|backgroundColor|zIndex|height|width|tabindex|offsetWidth|forEach|maxWidth|bgImagesAtLast|styles|left|maxHeight|index|removeChild|_blank|removeEventListener|single|Math|singleView|false|singleViewStop|null|click|galleryViewStop|1em|5vh|32|javascript|5vw|80vw|which|5em|FIGCAPTION|80vh|ccc|100vh|open|overflow|new|aaa|2147483646|Array|textContent|body|64|100vw|2147483647|getElementsByTagName|39|max|40|background||className|concat|38|200px|target|parentNode|array|37|call|RegExp|getComputedStyle|length|nodeName|2em|test|min|backgroundImage|url'.split('|'),0,{})) })(); 

gallery-view.js

(function(window){
  function GalleryView(window) {
    this._window = window;
    this._doc = this._window.document;
    this._body = this._doc.body;

    // common variables
    this._options = {
      ignoreSmallImageThreshold: 64,
      bgImagesAtLast: true,
    };
    this._currentView;
    this._imgList = [];
    this._imgUrlList = {};

    // gray background
    this._galleryViewWrapper = this._doc.createElement("DIV");
    this._galleryViewWrapper.style.position = "fixed";
    this._galleryViewWrapper.style.display = "block";
    this._galleryViewWrapper.style.top = "0px";
    this._galleryViewWrapper.style.left = "0px";
    this._galleryViewWrapper.style.width = "100%";
    this._galleryViewWrapper.style.height = "100%";
    this._galleryViewWrapper.style.zIndex = "2147483646"; // max - 1
    this._galleryViewWrapper.style.overflow = "auto";
    this._galleryViewWrapper.style.margin = "0";
    this._galleryViewWrapper.style.border = "0";
    this._galleryViewWrapper.style.padding = "0";
    this._galleryViewWrapper.style.backgroundColor = "#aaa";
    this._galleryViewWrapper.tabindex = 0;

    this._galleryAnchors = [];

    // gray background
    this._singleViewWrapper = this._doc.createElement("DIV");
    this._singleViewWrapper.style.position = "fixed";
    this._galleryViewWrapper.style.display = "block";
    this._singleViewWrapper.style.top = "0px";
    this._singleViewWrapper.style.left = "0px";
    this._singleViewWrapper.style.width = "100vw";
    this._singleViewWrapper.style.height = "100vh";
    this._singleViewWrapper.style.zIndex = "2147483647"; // max
    this._singleViewWrapper.style.margin = "0";
    this._singleViewWrapper.style.border = "0";
    this._singleViewWrapper.style.padding = "0";
    this._singleViewWrapper.style.backgroundColor = "#ccc";
    this._singleViewWrapper.tabindex = 0;

    // figure
    this._singleViewFigure = this._doc.createElement("FIGURE");
    this._singleViewFigure.style.margin = "5vh 5vw";
    this._singleViewFigure.style.border = "0";
    this._singleViewFigure.style.padding = "1em";
    this._singleViewWrapper.appendChild(this._singleViewFigure);

    // anchor
    this._singleViewAnchor = this._doc.createElement("A");
    this._singleViewAnchor.href = "javascript:";
    this._singleViewAnchor.addEventListener("click", function (event) {
      var that = galleryView;
      that.fullView();
      event.preventDefault();
      event.stopPropagation();
    });
    this._singleViewFigure.appendChild(this._singleViewAnchor);

    // image
    this._singleViewImg = this._doc.createElement("IMG");
    this._singleViewImg.style.display = "block";
    this._singleViewImg.style.margin = "auto";
    this._singleViewImg.style.border = "0";
    this._singleViewImg.style.padding = "0";
    this._singleViewImg.style.maxWidth = "80vw";
    this._singleViewImg.style.maxHeight = "80vh";
    this._singleViewAnchor.appendChild(this._singleViewImg);

    // image caption
    this._singleViewFigCaption = this._doc.createElement("FIGCAPTION");
    this._singleViewFigCaption.style.margin = "0.5em auto";
    this._singleViewFigure.appendChild(this._singleViewFigCaption);

    this._singleViewImgIndex = -1;
  }

  GalleryView.prototype._galleryViewKeyListener = function (event) {
    var that = galleryView;
    var preventDefault = false;
    if (event.keyCode === 27) { // esc
      that.galleryViewStop();
      preventDefault = true;
    }
    if (preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    }
  };

  GalleryView.prototype.galleryView = function () {
    var that = this;
    // generate the image list
    // place background images at last
    var bgImgList = [];
    Array.prototype.forEach.call(this._doc.getElementsByTagName("*"), function (elem) {
      if (elem.nodeName === "IMG") {
        if (elem.offsetWidth < that._options.ignoreSmallImageThreshold || elem.offsetWidth < that._options.ignoreSmallImageThreshold) {
          return;
        }
        if (that._imgUrlList[elem.src]) {
          return;
        }
        var img = document.createElement("IMG");
        img.src = elem.src;
        img.alt = elem.alt;
        img.title = elem.title;
        that._imgList.push(img);
        that._imgUrlList[elem.src] = true;
        return;
      }
      var styles = that._window.getComputedStyle(elem, null);
      var bgImgSrc = styles.backgroundImage;
      if (bgImgSrc && /^url\((['"]|(?!['"]))(.*)\1\)$/i.test(bgImgSrc)) {
        bgImgSrc = RegExp.$2;
        if (that._imgUrlList[bgImgSrc]) {
          return;
        }
        var img = that._doc.createElement("IMG");
        img.src = bgImgSrc;
        img.className = "background";
        (that._options.bgImagesAtLast ? bgImgList : that._imgList).push(img);
        that._imgUrlList[bgImgSrc] = true;
      }
    });
    that._imgList = that._imgList.concat(bgImgList);

    that._imgList.forEach(function (elem, index, array) {
      var img = elem;
      img.style.display = "inline";
      img.style.margin = "auto";
      img.style.border = "0";
      img.style.padding = "0";
      img.style.maxWidth = "100%";
      img.style.maxHeight = "200px";
      
      var figure = that._doc.createElement("FIGURE");
      figure.style.display = "inline-block";
      figure.style.margin = "0.2em";
      figure.style.border = "0";
      figure.style.padding = "0";

      var anchor = that._doc.createElement("a");
      anchor.href = elem.src;
      anchor.target = "_blank";
      anchor.addEventListener("click", function (event) {
        that.singleView(index);
        event.preventDefault();
        event.stopPropagation();
      });
      anchor.appendChild(elem);
      that._galleryAnchors.push(anchor);

      anchor.appendChild(img);
      figure.appendChild(anchor);
      that._galleryViewWrapper.appendChild(figure);
    });

    that._body.addEventListener("keypress", that._galleryViewKeyListener);
    that._body.appendChild(that._galleryViewWrapper);
    that._galleryViewWrapper.focus();
    that._currentView = "gallery";
  };

  GalleryView.prototype.galleryViewStop = function () {
    if (this._currentView !== "gallery") return;
    this._body.removeEventListener("keypress", this._galleryViewKeyListener);
    this._galleryViewWrapper.parentNode.removeChild(this._galleryViewWrapper);
    window.galleryView = null;
  };

  GalleryView.prototype._singleViewKeyListener = function (event) {
//     console.log("onkeypress handler: \n"
//       + "keyCode property: " + event.keyCode + "\n"
//       + "which property: " + event.which + "\n"
//       + "charCode property: " + event.charCode + "\n"
//       + "Character Key Pressed: " + String.fromCharCode(event.charCode) + "\n"
//     );
    var that = galleryView;
    var preventDefault = false;
    if (event.keyCode === 37 || event.keyCode === 38) { // left, up
      that.singleViewSetImage(Math.max(that._singleViewImgIndex - 1, 0));
      preventDefault = true;
    } else if (event.keyCode === 39 || event.keyCode === 40) { // right, down
      that.singleViewSetImage(Math.min(that._singleViewImgIndex + 1, that._imgList.length - 1));
      preventDefault = true;
    } else if (event.keyCode === 13 || event.which === 32) { // enter, space
      that.fullView();
      preventDefault = true;
    } else if (event.keyCode === 27) { // esc
      that.singleViewStop();
      preventDefault = true;
    }
    if (preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    }
  };

  GalleryView.prototype.singleViewSetImage = function (refIndex) {
    this._singleViewImgIndex = refIndex;
    var refImg = this._imgList[refIndex];
    this._singleViewImg.src = refImg.src;
    this._singleViewImg.alt = refImg.alt;
    this._singleViewImg.title = refImg.title;
    this._singleViewFigCaption.textContent = refImg.alt;
    this._singleViewAnchor.href = refImg.src;
    this._body.appendChild(this._singleViewWrapper);
  };

  GalleryView.prototype.singleView = function (refIndex) {
    this.singleViewSetImage(refIndex);
    this._body.addEventListener("keypress", this._singleViewKeyListener);
    this._body.appendChild(this._singleViewWrapper);
    this._singleViewWrapper.focus();
    this._currentView = "single";
  };

  GalleryView.prototype.singleViewStop = function () {
    if (this._currentView !== "single") return;
    this._body.removeEventListener("keypress", this._singleViewKeyListener);
    this._body.removeChild(this._singleViewWrapper);
    this._galleryAnchors[this._singleViewImgIndex].focus();
    this._currentView = "gallery";
  };
  
  GalleryView.prototype.fullView = function () {
    this._window.open(this._singleViewImg.src, "_blank");
  };

  // flush to the window namespace
  if (!window.galleryView) {
    var galleryView = window.galleryView = new GalleryView(window);
    galleryView.galleryView();
  }
})(window);