Humble XMLHttpRequest image parser.

viewer.js

var IMAGE_PER_SET = 10;

function getParameterByName(name) {
  var match = RegExp("[?&]" + name + "=([^&]*)").exec(window.location.search);
  return match && decodeURIComponent(match[1].replace(/\+/g, " ").replace("\u200E", ""));
}
function makeRequest(method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onreadystatechange = function () {
    if (this.readyState != 4 || this.status != 200) {
      return;
    }
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}
function loadStorage(keyName, urlPath, loaded) {
  if (!window.localStorage.getItem(keyName)) {
    makeRequest("GET", urlPath, function (err, data) {
      if (err) {
        throw err;
      }
      var keyCollection = {};
      var item = [];
      var array = data.split("\n");
      for (var index = 0; index < array.length; index++) {
        item = array[index].split(",");
        if (item[0] !== "") {
          keyCollection[item[0].split(".")[0]] = item;
        }
      }
      window.localStorage.setItem(keyName, JSON.stringify(keyCollection));
      loaded(keyCollection);
    });
  } else {
    loaded(JSON.parse(window.localStorage.getItem(keyName)));
  }
}
function relatePageFile(file, callback) {
  loadStorage("content", "/files/indexed-pixnet.txt", function (data) {
    window.randomPick = data[Object.keys(data)[Math.floor(Math.random() * Object.keys(data).length)]];
    document.getElementById("more").innerHTML = '<h2>Isn\'t satisfied? How about <em><a id="numbre" href="' + window.location.pathname + "?file=pixnet-" + window.randomPick[0] + '">try this one?</a></em></h2>';
    loadStorage("collection", "/files/indexed-pixnet-collection.txt", function (collection) {
      file = file.replace("pixnet-", "").split(".")[0];
      if (typeof data[file] !== "undefined") {
        var set = collection[parseInt(data[file][1], 10)];
        if (typeof set !== "undefined") {
          if (set[2] != "") {
            set[2] = set[2] + " &sdot; ";
          }
          var x = document.getElementsByClassName("post-head")[0];
          x.innerHTML = x.innerHTML + '<h2 class="post-categories">In: <a href="/viewer/?set=' + set[0] + '">' + set[2] + set[1] + "</a></h2>";
          callback(set);
        }
      }
    });
  });
}
function renderPageFile(file, callback) {
  var body = document.getElementById("viewer");
  document.getElementsByClassName("post-title")[0].innerHTML = "Viewer: " + '<a href="' + window.location + '">' + file + "</a>";
  document.title = document.title.replace("Viewer", "Viewer: " + file);
  body.innerHTML = '<p>You are viewing <a href="' + window.location.origin + "/files/" + file + '">' + file + "</a>. Which isn't a image type.You need to <em>click it</em>. File availability is not guaranteed.</p>";
  if (["jpg", "jpeg", "gif", "png"].indexOf(file.split(".").pop()) >= 0) {
    body.innerHTML =
      '<div id="' + file + '" class="box"><a href="' + window.location.origin + "/files/" + file + '"><img class="gallery_image" src="' + window.location.origin + "/files/" + file + '?source=viewer" alt="' + file + '"></a></div>';
  }
  callback("gallery_image");
}
function computeSet(set, callback) {
  if (!window.localStorage.getItem("__CACHED__." + set)) {
    loadStorage("content", "/files/indexed-pixnet.txt", function (data) {
      loadStorage("collection", "/files/indexed-pixnet-collection.txt", function (collection) {
        if (typeof collection[set] !== "undefined" && typeof collection[set][3] !== "undefined") {
          var array = collection[set][3].split(";");
          var computed = [];
          for (var index = 0; index < array.length; index++) {
            if (typeof data[parseInt(array[index], 10)] !== "undefined") {
              computed.push(data[parseInt(array[index], 10)]);
            }
          }
          var resource = {
            currentSet: collection[set],
            items: computed,
          };
          window.localStorage.setItem("__CACHED__." + set, JSON.stringify(resource));
          callback(resource);
        } else {
          callback(null);
        }
      });
    });
  } else {
    callback(JSON.parse(window.localStorage.getItem("__CACHED__." + set)));
  }
}
function renderPageSet(set, callback) {
  computeSet(set, function (resource) {
    if (typeof resource === "undefined" && resource.items.length <= 0) {
      return;
    }
    loadStorage("collection", "/files/indexed-pixnet-collection.txt", function (collection) {
      window.randomPick = collection[Object.keys(collection)[Math.floor(Math.random() * Object.keys(collection).length)]];
      document.getElementById("more").innerHTML = '<h2>Isn\'t satisfied? How about <em><a id="numbre" href="' + window.location.pathname + "?set=" + window.randomPick[0] + '">try this one?</a></em></h2>';
    });
    var body = document.getElementById("viewer");
    var title = document.getElementsByClassName("post-title")[0];
    var baseSet = window.location.origin + "/viewer/" + "?set=" + resource.currentSet[0];
    console.log(baseSet);
    var total_page = Math.ceil(resource.items.length / window.IMAGE_PER_SET);
    var page = getParameterByName("page");
    var src = "";
    document.title = document.title.replace("Viewer", "Set: " + resource.currentSet[1]);
    title.innerHTML = "Set: " + '<a href="' + baseSet + '">' + resource.currentSet[1] + "</a>";
    if (resource.currentSet[2] != "") {
      document.getElementsByClassName("post-head")[0].innerHTML = document.getElementsByClassName("post-head")[0].innerHTML + '<h2 class="post-categories">In: ' + resource.currentSet[2] + "</h2>";
    }
    if (page === null) {
      body.innerHTML = "<ol></ol>";
      for (var page = 1; page <= total_page; page++) {
        src = '<li><a href="' + baseSet + "&page=" + page + '">' + resource.currentSet[1] + "</a> (Page: " + page + "/" + total_page + ")</li>";
        body.getElementsByTagName("ol")[0].innerHTML = body.getElementsByTagName("ol")[0].innerHTML + src;
      }
      callback("gallery_image");
      return;
    }
    if (page > 0 && page <= total_page) {
      console.log(page > 0);
      window.ImgPointer = (parseInt(page, 10) - 1) * window.IMAGE_PER_SET;
      document.title = document.title.replace(resource.currentSet[1], resource.currentSet[1] + " (Page: " + page + "/" + total_page + ")");
      title.innerHTML = title.innerHTML + " (Page: " + page + "/" + total_page + ")";
      title.getElementsByTagName("a")[0].attributes.href = title.getElementsByTagName("a")[0].attributes.href + "&page=" + page;
      body.innerHTML = "";
      var count = 0;
      for (var index = (parseInt(page, 10) - 1) * window.IMAGE_PER_SET; index < resource.items.length; index++) {
        src = "pixnet-" + resource.items[index][0];
        body.innerHTML =
          body.innerHTML + '<div id="' + src + '" class="box"><a href="' + window.location.origin + "/viewer/?file=" + src + '"><img class="gallery_image" src="' + window.location.origin + "/files/" + src + '" alt="' + src + '"></a></div>';
        count++;
        if (count >= window.IMAGE_PER_SET) {
          break;
        }
      }
      var pageNav = '<h3 id="page_nav">';
      if (page != 1) {
        pageNav = pageNav + '<a href="' + baseSet + "&page=" + (parseInt(page, 10) - 1) + '">Previous Page</a>';
      }
      pageNav = pageNav + '<a href="' + baseSet + '">Back to Main</a>';
      if (page != total_page) {
        pageNav = pageNav + '<a href="' + baseSet + "&page=" + (parseInt(page, 10) + 1) + '">Next Page</a>';
      }
      pageNav = pageNav + "</h3>";
      body.innerHTML = body.innerHTML + pageNav;
    } else {
      body.innerHTML = 'Page not found, but set is indexed. <a href="' + baseSet + '">Go back to main set?</a>';
    }
    callback("gallery_image");
    return;
  });
}
function addImageSearch(classElement, withinNum) {
  var array = document.getElementsByClassName(classElement);
  var numStart = typeof window.ImgPointer !== "undefined" ? parseInt(window.ImgPointer, 10) : 0;
  for (var index = 0; index < array.length; index++) {
    parent = array[index].parentElement.parentElement;
    if (array[index].src != "" || typeof array[index].src != undefined) {
      parent.innerHTML =
        parent.innerHTML +
        '<div class="searchbyimage inline"><a href="https://tineye.com/search?url=' +
        array[index].src +
        '" target="_blank" rel="nofollow">Search this on TinEye</a><a href="https://www.google.com/searchbyimage?image_url=' +
        array[index].src +
        '" target="_blank" rel="nofollow">Search this on Google Image</a></div>';
    }
    if (withinNum === true) {
      var num = numStart + parseInt(index, 10) + 1;
      parent.innerHTML = '<div class="num" id="' + num + '">' + num + "</div>" + parent.innerHTML;
    }
  }
}
window.onload = function () {
  if (window.location.pathname == "/viewer/") {
    var file = getParameterByName("file");
    var set = getParameterByName("set");
    if (file != null && file != "") {
      file = file.split("/").pop();
      renderPageFile(file, function (targetClass) {
        addImageSearch(targetClass);
      });
      relatePageFile(file, function (set) {
        computeSet(set[0], function (resource) {
          file = file.replace("pixnet-", "");
          for (var pointer = 0; pointer < resource.items.length; pointer++) {
            if (resource.items[pointer][0] === file) {
              var anchor = document.getElementsByClassName("post-categories")[0].getElementsByTagName("a")[0];
              anchor.attributes.href.value = anchor.attributes.href.value + "&page=" + Math.ceil((pointer + 1) / window.IMAGE_PER_SET) + "#pixnet-" + file;
              break;
            }
          }
        });
      });
    } else if (set != null && set != "") {
      set = set.split("/").pop();
      renderPageSet(set, function (targetClass) {
        addImageSearch(targetClass, true);
      });
    }
  }
};