diff options
author | yorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b> | 2008-08-15 08:59:47 +0000 |
---|---|---|
committer | yorhel <yorhel@1fe2e327-d9db-4752-bcf7-ef0cb4a1748b> | 2008-08-15 08:59:47 +0000 |
commit | 72fef60681e4e3d6ab50aeaf3f235cbdc398b686 (patch) | |
tree | 54b5b378f3228af820e02c89d7e1d961fd18a7ee | |
parent | d0dd5ff69592ce332471c8ef49dd5bb3fd4ec3b2 (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_scr | 7 | ||||
-rw-r--r-- | static/files/def.js | 78 | ||||
-rw-r--r-- | static/files/dyna.js | 3 | ||||
-rw-r--r-- | 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"><- previous</a> -<a href="#" id="scrnext">next -></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"> </a>' + +'<a href="#" onclick="return scrClose()" id="scrclose">close</a>' + +'<a href="#" onclick="return scrView(this)" id="scrprev"><- previous</a>' + +'<a href="#" onclick="return scrView(this)" id="scrnext">next -></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; +} |