From 72fef60681e4e3d6ab50aeaf3f235cbdc398b686 Mon Sep 17 00:00:00 2001
From: yorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b>
Date: Fri, 15 Aug 2008 08:59:47 +0000
Subject: Further polishing of the screenshots feature: added loading
 indicator, link to full-size image when downscaled, and image viewer for the
 upload manager

git-svn-id: svn://vndb.org/vndb@87 1fe2e327-d9db-4752-bcf7-ef0cb4a1748b
---
 data/tpl/vnpage_scr    |  7 -----
 static/files/def.js    | 78 +++++++++++++++++++++++++++++++++-----------------
 static/files/dyna.js   |  3 +-
 static/files/style.css | 13 +++++++++
 4 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/data/tpl/vnpage_scr b/data/tpl/vnpage_scr
index 687e80db..0675d093 100644
--- a/data/tpl/vnpage_scr
+++ b/data/tpl/vnpage_scr
@@ -20,13 +20,6 @@
 <i style="font-size: 10px;">Items marked with a red X are flagged as NSFW.</i>
 [[ } ]]-
 
-<div id="scrView">
-<b id="scrimg"></b><br />
-<a href="#" onclick="return scrClose()" id="scrclose">close</a>
-<a href="#" id="scrprev">&lt;- previous</a>
-<a href="#" id="scrnext">next -&gt;</a>
-</div>
-
 [[ } else { ]]-
 <p>
  No screenshots have been uploaded yet for this visual novel.
diff --git a/static/files/def.js b/static/files/def.js
index 56b8d237..b9efaebb 100644
--- a/static/files/def.js
+++ b/static/files/def.js
@@ -240,28 +240,35 @@ function scrNsfwHid() {
     +(scrNsfwEnabled ? '<a href="javascript:scrNsfwHid()">Show</a> / hide' : 'Show / <a href="javascript:scrNsfwHid()">hide</a>')
     +' nsfw.';
 }
-function scrView() {
-  var u=this.href;
-  var r=this.rel;
-  var ol=x('screenshots').getElementsByTagName('a');
+function scrView(what) {
+  what = what && what.rel ? what : this;
+  var u=what.href;
+  var r=what.rel;
   d = x('scrView');
-  var l=[];
 
- // remove NSFW
-  for(i=0;i<ol.length;i++)
-    if(!scrNsfwEnabled || ol[i].className.indexOf('scr_nsfw')<0)
-      l[l.length] = ol[i];
+ // fix prev/next links (if any)
+  var ol=x('screenshots').getElementsByTagName('a');
+  if(ol.length > 0) {
+    var l=[];
+    for(i=0;i<ol.length;i++)
+      if(!scrNsfwEnabled || ol[i].className.indexOf('scr_nsfw')<0)
+        l[l.length] = ol[i];
 
- // fix prev/next links
-  for(i=0;i<l.length;i++)
-    if(l[i].href == u) {
-      x('scrnext').style.visibility = l[i+1] ? 'visible' : 'hidden';
-      x('scrnext').href = l[i+1] ? l[i+1].href : '#';
-      x('scrnext').rel = l[i+1] ? l[i+1].rel : '';
-      x('scrprev').style.visibility = l[i-1] ? 'visible' : 'hidden';
-      x('scrprev').href = l[i-1] ? l[i-1].href : '#';
-      x('scrprev').rel = l[i-1] ? l[i-1].rel : '';
-    }
+    ol=0;
+    for(i=0;i<l.length;i++)
+      if(l[i].href == u) {
+        ol=1;
+        x('scrnext').style.visibility = l[i+1] ? 'visible' : 'hidden';
+        x('scrnext').href = l[i+1] ? l[i+1].href : '#';
+        x('scrnext').rel = l[i+1] ? l[i+1].rel : '';
+        x('scrprev').style.visibility = l[i-1] ? 'visible' : 'hidden';
+        x('scrprev').href = l[i-1] ? l[i-1].href : '#';
+        x('scrprev').rel = l[i-1] ? l[i-1].rel : '';
+      }
+  } else
+    ol=0;
+  if(!ol)
+    x('scrnext').style.visibility = x('scrprev').style.visibility = 'hidden';
 
  // calculate dimensions
   var w = Math.floor(r.split('x')[0]);
@@ -269,26 +276,32 @@ function scrView() {
   var ww = typeof(window.innerWidth) == 'number' ? window.innerWidth : document.documentElement.clientWidth;
   var wh = typeof(window.innerHeight) == 'number' ? window.innerHeight : document.documentElement.clientHeight;
   var st = typeof(window.pageYOffset) == 'number' ? window.pageYOffset : document.body && document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
-  if(w+100 > ww || h+100 > wh) {
+  if(w+100 > ww || h+70 > wh) {
+    x('scrfull').href = u;
+    x('scrfull').innerHTML = w+'x'+h;
+    x('scrfull').style.visibility = 'visible';
     if(w/h > ww/wh) { // width++
       h *= (ww-100)/w;
       w = ww-100;
     } else { // height++
-      w *= (wh-100)/h;
-      h = wh-100;
+      w *= (wh-70)/h;
+      h = wh-70;
     }
-  }
+  } else
+    x('scrfull').style.visibility = 'hidden';
   var dw = w;
   var dh = h+20;
   dw = dw < 200 ? 200 : dw;
 
  // update document
   d.style.display = 'block';
-  x('scrimg').innerHTML = '<img src="'+u+'" onclick="scrClose()" style="width: '+w+'px; height: '+h+'px" />';
+  x('scrimg').innerHTML = '<img src="'+u+'" onclick="scrClose()" onload="document.getElementById(\'scrimgload\').style.top=\'-400px\'" style="width: '+w+'px; height: '+h+'px" />';
   d.style.width = dw+'px';
   d.style.height = dh+'px';
   d.style.left = ((ww - dw) / 2 - 10)+'px';
-  d.style.top = ((wh - dh) / 2 + st)+'px';
+  d.style.top = ((wh - dh) / 2 + st - 20)+'px';
+  x('scrimgload').style.left = ((ww - 100) / 2 - 10)+'px';
+  x('scrimgload').style.top = ((wh - 20) / 2 + st)+'px';
   return false;
 }
 function scrClose() {
@@ -396,11 +409,22 @@ DOMLoad(function() {
  // screenshots
   if(x('scrNsfwHid'))
     scrNsfwHid();
-  if(x('scrView')) {
+  if(x('screenshots')) {
     l=x('screenshots').getElementsByTagName('a');
     for(i=0;i<l.length;i++)
       l[i].onclick=scrView;
-    x('scrnext').onclick = x('scrprev').onclick = scrView;
+    var d = document.createElement('div');
+    d.id = 'scrView';
+    d.innerHTML = '<b id="scrimg"></b><br />'
+      +'<a href="#" id="scrfull">&nbsp;</a>'
+      +'<a href="#" onclick="return scrClose()" id="scrclose">close</a>'
+      +'<a href="#" onclick="return scrView(this)" id="scrprev">&lt;- previous</a>'
+      +'<a href="#" onclick="return scrView(this)" id="scrnext">next -&gt;</a>';
+    document.body.appendChild(d);
+    d = document.createElement('b');
+    d.id = 'scrimgload';
+    d.innerHTML = 'Loading...';
+    document.body.appendChild(d);
   }
 
  // spam protection on all forms
diff --git a/static/files/dyna.js b/static/files/dyna.js
index e9d1e917..01cd13b1 100644
--- a/static/files/dyna.js
+++ b/static/files/dyna.js
@@ -752,7 +752,8 @@ function scrCheckStatus() {
           scrL[i].width = l[s].getAttribute('width');
           scrL[i].height = l[s].getAttribute('height');
           x('scrTr'+i).getElementsByTagName('td')[0].innerHTML =
-            '<img src="'+scrURL(scrL[i].id, 't')+'" style="margin: 0; padding: 0; border: 0" />';
+             '<a href="'+scrURL(scrL[i].id, 'f')+'" rel="'+scrL[i].width+'x'+scrL[i].height+'" onclick="return scrView(this)">'
+            +'<img src="'+scrURL(scrL[i].id, 't')+'" style="margin: 0; padding: 0; border: 0" /></a>';
           scrGenerateTR(i);
           scrSer();
         }
diff --git a/static/files/style.css b/static/files/style.css
index 1da16c17..eca1ee82 100644
--- a/static/files/style.css
+++ b/static/files/style.css
@@ -651,6 +651,19 @@ div#scrView {
 #scrclose { float: right; padding-left: 10px; }
 #scrnext { padding-left: 5px; }
 #scrprev { padding-right: 5px; }
+#scrfull { float: left; padding-right: 10px; }
+#scrimgload {
+  display: block;
+  position: absolute;
+  left: -500px;
+  top: -50px;
+  width: 100px;
+  padding: 3px;
+  background-color: #f5f5f5;
+  text-align: center;
+  border: 1px solid #ccc;
+  color: #000;
+}
 
 
 
-- 
cgit v1.2.3