summaryrefslogtreecommitdiff
path: root/data
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2015-07-19 05:12:06 +0200
committerYorhel <git@yorhel.nl>2015-07-19 05:12:06 +0200
commit195a729a3d254c1c0f4b0e374f23aec331baded5 (patch)
tree5a0b19b3332bddb90e6b639e11f275fc0aa369a9 /data
parent9da9c19cc2c74b019a827e759495c316030b8b0d (diff)
js: Change image viewer clicking behaviour
Clicking on the image will now switch to the next image, or close the viewer if there is no next. Clicking outside of the viewer will close the it.
Diffstat (limited to 'data')
-rw-r--r--data/script.js31
-rw-r--r--data/style.css16
2 files changed, 31 insertions, 16 deletions
diff --git a/data/script.js b/data/script.js
index dddc800c..db9e83e4 100644
--- a/data/script.js
+++ b/data/script.js
@@ -231,14 +231,16 @@ function ivInit() {
init++;
l[i].onclick = ivView;
}
- if(init && !byId('iv_view')) {
- addBody(tag('div', {id: 'iv_view','class':'hidden'},
- tag('b', {id:'ivimg'}, ''),
- tag('br', null),
- tag('a', {href:'#', id:'ivfull'}, ''),
- tag('a', {href:'#', onclick: ivClose, id:'ivclose'}, mt('_js_close')),
- tag('a', {href:'#', onclick: ivView, id:'ivprev'}, '« '+mt('_js_iv_prev')),
- tag('a', {href:'#', onclick: ivView, id:'ivnext'}, mt('_js_iv_next')+' »')
+ if(init && !byId('iv_overlay')) {
+ addBody(tag('div', {id:'iv_overlay','class':'hidden', onclick: ivClose},
+ tag('div', {id: 'iv_view', onclick: function(e) { e.stopPropagation() }},
+ tag('b', {id:'ivimg'}, ''),
+ tag('br', null),
+ tag('a', {href:'#', id:'ivfull'}, ''),
+ tag('a', {href:'#', onclick: ivClose, id:'ivclose'}, mt('_js_close')),
+ tag('a', {href:'#', onclick: ivView, id:'ivprev'}, '« '+mt('_js_iv_prev')),
+ tag('a', {href:'#', onclick: ivView, id:'ivnext'}, mt('_js_iv_next')+' »')
+ )
));
addBody(tag('b', {id:'ivimgload','class':'hidden'}, mt('_js_loading')));
}
@@ -248,6 +250,7 @@ function ivView(what) {
what = what && what.rel ? what : this;
var u = what.href;
var opt = what.rel.split(':');
+ var overlay = byId('iv_overlay');
var view = byId('iv_view');
var next = byId('ivnext');
var prev = byId('ivprev');
@@ -277,7 +280,6 @@ function ivView(what) {
var h = Math.floor(opt[1].split('x')[1]);
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+70 > wh) {
full.href = u;
setText(full, w+'x'+h);
@@ -296,23 +298,24 @@ function ivView(what) {
dw = dw < 200 ? 200 : dw;
// update document
- setClass(view, 'hidden', false);
- setContent(byId('ivimg'), tag('img', {src:u, onclick:ivClose,
+ setClass(overlay, 'hidden', false);
+ setContent(byId('ivimg'), tag('img', {src:u,
+ onclick: function() { next.rel ? ivView(next) : ivClose() },
onload: function() { setClass(byId('ivimgload'), 'hidden', true); },
style: 'width: '+w+'px; height: '+h+'px'
}));
view.style.width = dw+'px';
view.style.height = dh+'px';
view.style.left = ((ww - dw) / 2 - 10)+'px';
- view.style.top = ((wh - dh) / 2 + st - 20)+'px';
+ view.style.top = ((wh - dh) / 2)+'px';
byId('ivimgload').style.left = ((ww - 100) / 2 - 10)+'px';
- byId('ivimgload').style.top = ((wh - 20) / 2 + st)+'px';
+ byId('ivimgload').style.top = ((wh - 20) / 2 )+'px';
setClass(byId('ivimgload'), 'hidden', false);
return false;
}
function ivClose() {
- setClass(byId('iv_view'), 'hidden', true);
+ setClass(byId('iv_overlay'), 'hidden', true);
setClass(byId('ivimgload'), 'hidden', true);
setText(byId('ivimg'), '');
return false;
diff --git a/data/style.css b/data/style.css
index 2879a15c..39bd0da5 100644
--- a/data/style.css
+++ b/data/style.css
@@ -771,14 +771,25 @@ div.revision .item { text-align: center; }
/****** Image Viewer *****/
+div#iv_overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom; 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+}
div#iv_view {
- position: absolute;
+ position: fixed;
top: 0px;
left: 0px;
background: url($_boxbg$) repeat;
border: 1px solid $border$;
padding: 5px;
text-align: center;
+ z-index: 11;
}
#iv_view a { border: 0; font-weight: bold; font-size: 12px }
#iv_view img { cursor: pointer }
@@ -787,7 +798,7 @@ div#iv_view {
#ivprev { padding-right: 5px; }
#ivfull { float: left; padding-right: 10px; }
#ivimgload {
- position: absolute;
+ position: fixed;
display: block;
left: 0;
top: 0;
@@ -797,6 +808,7 @@ div#iv_view {
text-align: center;
border: 1px solid #ccc;
color: #000;
+ z-index: 12;
}