From 1c99dc66b66f38f2b7d26d79db3824728edaf531 Mon Sep 17 00:00:00 2001
From: ccd0 <admin@containerchan.org>
Date: Wed, 11 Mar 2015 16:30:31 -0700
Subject: [PATCH] Website: Load hover preview as needed with JS.

---
 template.jst | 38 ++++++++++++++++++++++++--------------
 web.css      |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/template.jst b/template.jst
index 8c587593a..39b594507 100644
--- a/template.jst
+++ b/template.jst
@@ -16,21 +16,31 @@
 </div>
 </div>
 <a class="screenshot" href="img/screenshot.png"><img src="img/screenshot.png" alt="screenshot"></a>
-<span class="hover"><img src="img/screenshot.png" alt="preview"></span>
-<%=
-  content
-    .match(/<\/h1>([^]*)<h2 id="more-information"/)[1]
-    .replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<span class="hover"><img src="$2" alt="preview"></span>')
-%>
+<%= content.match(/<\/h1>([^]*)<h2 id="more-information"/)[1] %>
 <script>
-var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]');
-for (var i = 0; i < links.length; i++) {
-  links[i].addEventListener('click', function(e) {
-    if (window.chrome && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.button === 0) {
-      chrome.webstore.install();
-      e.preventDefault();
-    }
-  }, false);
+function imagePreview() {
+  this.removeEventListener('mouseover', imagePreview, false);
+  var img = new Image();
+  img.src = this.href;
+  img.alt = 'preview';
+  var span = document.createElement('span');
+  span.className = 'hover';
+  span.appendChild(img);
+  this.appendChild(span);
+}
+function storeInstall(e) {
+  if (!e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.button === 0) {
+    chrome.webstore.install();
+    e.preventDefault();
+  }
+}
+for (var i = 0; i < document.links.length; i++) {
+  var link = document.links[i];
+  if (/\.png$/.test(link.pathname) && !link.querySelector('.hover')) {
+    link.addEventListener('mouseover', imagePreview, false);
+  } else if (window.chrome && link.host === 'chrome.google.com') {
+    link.addEventListener('click', storeInstall, false);
+  }
 }
 </script>
 </body></html>
diff --git a/web.css b/web.css
index 8af3b827c..2a0a3da07 100644
--- a/web.css
+++ b/web.css
@@ -45,7 +45,7 @@ a.screenshot > img {
 span.hover {
   display: none;
 }
-a:hover + span.hover {
+a:hover > span.hover {
   display: block;
   position: fixed;
   top: 0;