summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoryorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b>2008-08-15 08:59:47 +0000
committeryorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b>2008-08-15 08:59:47 +0000
commit72fef60681e4e3d6ab50aeaf3f235cbdc398b686 (patch)
tree54b5b378f3228af820e02c89d7e1d961fd18a7ee
parentd0dd5ff69592ce332471c8ef49dd5bb3fd4ec3b2 (diff)
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
-rw-r--r--data/tpl/vnpage_scr7
-rw-r--r--static/files/def.js78
-rw-r--r--static/files/dyna.js3
-rw-r--r--static/files/style.css13
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;
+}