'+ '

'+ ''+ ''+ ''+ ''+icono('bajar')+''+ ''+ '

'+ ''+ ''+ '

'; imgEl=raiz.querySelector('.seom-visor__img'); contador=raiz.querySelector('.seom-visor__contador'); pie=raiz.querySelector('.seom-visor__pie'); btnAnt=raiz.querySelector('[data-accion="ant"]'); btnSig=raiz.querySelector('[data-accion="sig"]'); btnMas=raiz.querySelector('[data-accion="mas"]'); btnMenos=raiz.querySelector('[data-accion="menos"]'); btnBajar=raiz.querySelector('[data-accion="bajar"]'); raiz.addEventListener('click',alPulsar); raiz.addEventListener('keydown',alTeclear); raiz.addEventListener('wheel',alRodar,{passive:false}); raiz.addEventListener('pointerdown',alBajar); raiz.addEventListener('pointermove',alMover); raiz.addEventListener('pointerup',alSubir); raiz.addEventListener('pointercancel',alSubir); imgEl.addEventListener('load',function(){imgEl.classList.remove('cargando')}); } /* ------------------------------------------------------------------- zoom */ function aplicar(){ imgEl.style.transform=escala===1?'':'translate('+tx+'px,'+ty+'px) scale('+escala+')'; raiz.classList.toggle('ampliado',escala>1); btnMenos.disabled=escala<=1; btnMas.disabled=escala>=MAX; } function limitar(){ // Que la foto ampliada no se pueda sacar de la pantalla. var w=imgEl.offsetWidth*escala, h=imgEl.offsetHeight*escala; var r=raiz.getBoundingClientRect(); var bx=imgEl.offsetLeft, by=imgEl.offsetTop; // posición sin transformar var minX=Math.min(0,r.width-w)-bx, maxX=Math.max(0,r.width-w)-bx; var minY=Math.min(0,r.height-h)-by, maxY=Math.max(0,r.height-h)-by; if(w<=r.width) tx=(r.width-w)/2-bx; else tx=Math.max(minX,Math.min(maxX,tx)); if(h<=r.height) ty=(r.height-h)/2-by; else ty=Math.max(minY,Math.min(maxY,ty)); } function zoomA(nueva,cx,cy){ nueva=Math.max(1,Math.min(MAX,nueva)); if(nueva===1){escala=1;tx=0;ty=0;aplicar();return} var b=imgEl.getBoundingClientRect(); // con la transformación actual if(cx==null){cx=b.left+b.width/2;cy=b.top+b.height/2} // El punto de la foto bajo el cursor se queda bajo el cursor. var px=(cx-b.left)/escala, py=(cy-b.top)/escala; var bx=imgEl.offsetLeft, by=imgEl.offsetTop; var ox=b.left-tx-bx, oy=b.top-ty-by; // desplazamiento de la escena escala=nueva; tx=cx-px*escala-ox-bx; ty=cy-py*escala-oy-by; limitar(); aplicar(); } function alternarZoom(cx,cy){zoomA(escala>1?1:2.5,cx,cy)} /* ------------------------------------------------------------- navegación */ function mostrar(i){ if(!fotos.length) return; actual=(i+fotos.length)%fotos.length; var f=fotos[actual]; escala=1;tx=0;ty=0; imgEl.classList.add('cargando'); imgEl.src=f.src; imgEl.alt=f.titulo||''; aplicar(); contador.textContent=(actual+1)+' / '+fotos.length; pie.textContent=f.titulo||''; btnBajar.href=f.src; btnBajar.setAttribute('download',decodeURIComponent((f.src.split(/[?#]/)[0].split('/').pop())||'foto.jpg')); var varias=fotos.length>1; btnAnt.hidden=!varias; btnSig.hidden=!varias; // La siguiente y la anterior, ya pedidas. [actual+1,actual-1].forEach(function(j){if(varias){var p=new Image();p.src=fotos[(j+fotos.length)%fotos.length].src}}); } function abrir(lista,i,desde){ crear(); fotos=lista; origen=desde||document.activeElement; if(!raiz.parentNode) document.body.appendChild(raiz); document.documentElement.classList.add('seom-visor-abierto'); mostrar(i||0); requestAnimationFrame(function(){raiz.classList.add('abierto');raiz.focus()}); } function cerrar(){ if(!raiz||!raiz.parentNode) return; raiz.classList.remove('abierto'); document.documentElement.classList.remove('seom-visor-abierto'); raiz.parentNode.removeChild(raiz); imgEl.removeAttribute('src'); try{ if(origen&&origen.focus) origen.focus({preventScroll:true}) }catch(e){} origen=null; } /* ---------------------------------------------------------------- eventos */ var arrastre=null,toques={},pellizco=null,movido=false; function alPulsar(e){ var b=e.target.closest('[data-accion]'); if(b){ var acc=b.getAttribute('data-accion'); if(acc==='bajar') return; // el enlace descarga solo e.preventDefault(); if(acc==='cerrar') cerrar(); else if(acc==='ant') mostrar(actual-1); else if(acc==='sig') mostrar(actual+1); else if(acc==='mas') zoomA(escala*1.6); else if(acc==='menos') zoomA(escala/1.6); return; } if(movido){movido=false;return} // En la foto, amplía o vuelve; fuera de ella, sin ampliar, cierra. if(e.target===imgEl) alternarZoom(e.clientX,e.clientY); else if(escala===1) cerrar(); } function alTeclear(e){ var k=e.key; if(k==='Escape'){e.preventDefault();cerrar()} else if(k==='ArrowLeft'&&escala===1){e.preventDefault();mostrar(actual-1)} else if(k==='ArrowRight'&&escala===1){e.preventDefault();mostrar(actual+1)} else if(k==='+'||k==='='){e.preventDefault();zoomA(escala*1.6)} else if(k==='-'||k==='_'){e.preventDefault();zoomA(escala/1.6)} else if(k==='0'){e.preventDefault();zoomA(1)} else if(k==='Tab'){ // El foco no se sale del visor. var fs=[].filter.call(raiz.querySelectorAll('button,a[href]'),function(x){return !x.hidden&&!x.disabled&&visible(x)}); if(!fs.length) return; var p=fs[0],u=fs[fs.length-1]; if(e.shiftKey&&(document.activeElement===p||document.activeElement===raiz)){e.preventDefault();u.focus()} else if(!e.shiftKey&&document.activeElement===u){e.preventDefault();p.focus()} } } function alRodar(e){ e.preventDefault(); zoomA(escala*(e.deltaY<0?1.2:1/1.2),e.clientX,e.clientY); } function alBajar(e){ if(e.target.closest('[data-accion]')) return; toques[e.pointerId]={x:e.clientX,y:e.clientY}; var ids=Object.keys(toques); if(ids.length===2){ var a=toques[ids[0]],b=toques[ids[1]]; pellizco={d:Math.hypot(a.x-b.x,a.y-b.y),e:escala};arrastre=null;return; } arrastre={x:e.clientX,y:e.clientY,tx:tx,ty:ty,t:Date.now()};movido=false; try{raiz.setPointerCapture(e.pointerId)}catch(_){} } function alMover(e){ if(toques[e.pointerId]) toques[e.pointerId]={x:e.clientX,y:e.clientY}; if(pellizco){ var ids=Object.keys(toques); if(ids.length<2) return; var a=toques[ids[0]],b=toques[ids[1]]; zoomA(pellizco.e*Math.hypot(a.x-b.x,a.y-b.y)/pellizco.d,(a.x+b.x)/2,(a.y+b.y)/2); return; } if(!arrastre) return; var dx=e.clientX-arrastre.x, dy=e.clientY-arrastre.y; if(Math.abs(dx)>5||Math.abs(dy)>5) movido=true; if(escala>1){ raiz.classList.add('arrastrando'); tx=arrastre.tx+dx; ty=arrastre.ty+dy; limitar(); aplicar(); }else if(e.pointerType!=='mouse'){ imgEl.style.transform='translateX('+dx+'px)'; } } function alSubir(e){ delete toques[e.pointerId]; if(pellizco){ if(Object.keys(toques).length<2) pellizco=null; return } if(!arrastre) return; var dx=e.clientX-arrastre.x, dy=e.clientY-arrastre.y; raiz.classList.remove('arrastrando'); if(escala===1&&e.pointerType!=='mouse'){ imgEl.style.transform=''; if(Math.abs(dx)>50&&Math.abs(dx)>Math.abs(dy)) mostrar(actual+(dx<0?1:-1)); else if(dy>90&&Math.abs(dy)>Math.abs(dx)) cerrar(); } arrastre=null; } /* --------------------------------------------- clics en las galerías */ function arriba(){ // Dentro del iframe del contenido migrado, el visor se abre en la página. try{ if(window.parent&&window.parent!==window&&window.parent.seomVisor) return window.parent.seomVisor }catch(e){} return null; } document.addEventListener('click',function(e){ if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return; var a=e.target.closest&&e.target.closest('a[data-seom-galeria-enlace]'); if(!a) return; var g=a.closest('[data-seom-galeria]'); if(!g||!galeriaDeFotos(g)) return; var lista=fotosDe(g), i=-1; for(var j=0;j

Boletín del GEICAM: Número 20. Junio de 2007

Boletín del GEICAM: Número 20. Junio de 2007