Get rid of popup on cover arts

lib/javascript/base.js

@@ -86,13 +86,6 @@ function reloadRedirect(target) {
     window.location = target;
 } // reloadRedirect
 
-// popupWindow
-// Loads the specified URL in a new window.  Used for art.
-function popupWindow(url) {
-        var newWindow = window.open(url, "ampache_art", "menubar=no,toolbar=no,location=no,directories=no");
-        if (window.focus) { newWindow.focus(); }
-} // popupWindow
-
 // This is kind of ugly.  Let's not mess with it too much.
 function check_inline_song_edit(type, song) {
         var target = type + '_select_' + song;

modules/tinybox/tinybox.css

@@ -0,0 +1,12 @@
+.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
+.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
+.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
+.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
+.tclose:hover {background-position:0 -30px}
+
+#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
+#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
+#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
+#bluemask {background:#4195aa}
+#frameless {padding:0}
+#frameless .tclose {left:6px}

modules/tinybox/tinybox.js

@@ -0,0 +1,134 @@
+TINY={};
+
+TINY.box=function(){
+	var j,m,b,g,v,p=0;
+	return{
+		show:function(o){
+			v={opacity:70,close:1,animate:1,fixed:1,mask:1,maskid:'',boxid:'',topsplit:2,url:0,post:0,height:0,width:0,html:0,iframe:0};
+			for(s in o){v[s]=o[s]}
+			if(!p){
+				j=document.createElement('div'); j.className='tbox';
+				p=document.createElement('div'); p.className='tinner';
+				b=document.createElement('div'); b.className='tcontent';
+				m=document.createElement('div'); m.className='tmask';
+				g=document.createElement('div'); g.className='tclose'; g.v=0;
+				document.body.appendChild(m); document.body.appendChild(j); j.appendChild(p); p.appendChild(b);
+				m.onclick=g.onclick=TINY.box.hide; window.onresize=TINY.box.resize
+			}else{
+				j.style.display='none'; clearTimeout(p.ah); if(g.v){p.removeChild(g); g.v=0}
+			}
+			p.id=v.boxid; m.id=v.maskid; j.style.position=v.fixed?'fixed':'absolute';
+			if(v.html&&!v.animate){
+				p.style.backgroundImage='none'; b.innerHTML=v.html; b.style.display='';
+				p.style.width=v.width?v.width+'px':'auto'; p.style.height=v.height?v.height+'px':'auto'
+			}else{
+				b.style.display='none'; 
+				if(!v.animate&&v.width&&v.height){
+					p.style.width=v.width+'px'; p.style.height=v.height+'px'
+				}else{
+					p.style.width=p.style.height='100px'
+				}
+			}
+			if(v.mask){this.mask(); this.alpha(m,1,v.opacity)}else{this.alpha(j,1,100)}
+			if(v.autohide){p.ah=setTimeout(TINY.box.hide,1000*v.autohide)}else{document.onkeyup=TINY.box.esc}
+		},
+		fill:function(c,u,k,a,w,h){
+			if(u){
+				if(v.image){
+					var i=new Image(); i.onload=function(){w=w||i.width; h=h||i.height; TINY.box.psh(i,a,w,h)}; i.src=v.image
+				}else if(v.iframe){
+					this.psh('<iframe src="'+v.iframe+'" width="'+v.width+'" frameborder="0" height="'+v.height+'"></iframe>',a,w,h)
+				}else{
+					var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
+					x.onreadystatechange=function(){
+						if(x.readyState==4&&x.status==200){p.style.backgroundImage=''; TINY.box.psh(x.responseText,a,w,h)}
+					};
+					if(k){
+    	            	x.open('POST',c,true); x.setRequestHeader('Content-type','application/x-www-form-urlencoded'); x.send(k)
+					}else{
+       	         		x.open('GET',c,true); x.send(null)
+					}
+				}
+			}else{
+				this.psh(c,a,w,h)
+			}
+		},
+		psh:function(c,a,w,h){
+			if(typeof c=='object'){b.appendChild(c)}else{b.innerHTML=c}
+			var x=p.style.width, y=p.style.height;
+			if(!w||!h){
+				p.style.width=w?w+'px':''; p.style.height=h?h+'px':''; b.style.display='';
+				if(!h){h=parseInt(b.offsetHeight)}
+				if(!w){w=parseInt(b.offsetWidth)}
+				b.style.display='none'
+			}
+			p.style.width=x; p.style.height=y;
+			this.size(w,h,a)
+		},
+		esc:function(e){e=e||window.event; if(e.keyCode==27){TINY.box.hide()}},
+		hide:function(){TINY.box.alpha(j,-1,0,3); document.onkeypress=null; if(v.closejs){v.closejs()}},
+		resize:function(){TINY.box.pos(); TINY.box.mask()},
+		mask:function(){m.style.height=this.total(1)+'px'; m.style.width=this.total(0)+'px'},
+		pos:function(){
+			var t;
+			if(typeof v.top!='undefined'){t=v.top}else{t=(this.height()/v.topsplit)-(j.offsetHeight/2); t=t<20?20:t}
+			if(!v.fixed&&!v.top){t+=this.top()}
+			j.style.top=t+'px'; 
+			j.style.left=typeof v.left!='undefined'?v.left+'px':(this.width()/2)-(j.offsetWidth/2)+'px'
+		},
+		alpha:function(e,d,a){
+			clearInterval(e.ai);
+			if(d){e.style.opacity=0; e.style.filter='alpha(opacity=0)'; e.style.display='block'; TINY.box.pos()}
+			e.ai=setInterval(function(){TINY.box.ta(e,a,d)},20)
+		},
+		ta:function(e,a,d){
+			var o=Math.round(e.style.opacity*100);
+			if(o==a){
+				clearInterval(e.ai);
+				if(d==-1){
+					e.style.display='none';
+					e==j?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
+				}else{
+					if(e==m){
+						this.alpha(j,1,100)
+					}else{
+						j.style.filter='';
+						TINY.box.fill(v.html||v.url,v.url||v.iframe||v.image,v.post,v.animate,v.width,v.height)
+					}
+				}
+			}else{
+				var n=a-Math.floor(Math.abs(a-o)*.5)*d;
+				e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
+			}
+		},
+		size:function(w,h,a){
+			if(a){
+				clearInterval(p.si); var wd=parseInt(p.style.width)>w?-1:1, hd=parseInt(p.style.height)>h?-1:1;
+				p.si=setInterval(function(){TINY.box.ts(w,wd,h,hd)},20)
+			}else{
+				p.style.backgroundImage='none'; if(v.close){p.appendChild(g); g.v=1}
+				p.style.width=w+'px'; p.style.height=h+'px'; b.style.display=''; this.pos();
+				if(v.openjs){v.openjs()}
+			}
+		},
+		ts:function(w,wd,h,hd){
+			var cw=parseInt(p.style.width), ch=parseInt(p.style.height);
+			if(cw==w&&ch==h){
+				clearInterval(p.si); p.style.backgroundImage='none'; b.style.display='block'; if(v.close){p.appendChild(g); g.v=1}
+				if(v.openjs){v.openjs()}
+			}else{
+				if(cw!=w){p.style.width=(w-Math.floor(Math.abs(w-cw)*.6)*wd)+'px'}
+				if(ch!=h){p.style.height=(h-Math.floor(Math.abs(h-ch)*.6)*hd)+'px'}
+				this.pos()
+			}
+		},
+		top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
+		width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
+		height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
+		total:function(d){
+			var b=document.body, e=document.documentElement;
+			return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
+			Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
+		}
+	}
+}();

templates/header.inc.php

@@ -43,6 +43,7 @@ if (Config::get('use_rss')) { ?>
 </head>
 <body>
 <script src="<?php echo $web_path; ?>/modules/prototype/prototype.js" language="javascript" type="text/javascript"></script>
+<script src="<?php echo $web_path; ?>/modules/tinybox/tinybox.js" language="javascript" type="text/javascript"></script>
 <script src="<?php echo $web_path; ?>/lib/javascript/base.js" language="javascript" type="text/javascript"></script>
 <script src="<?php echo $web_path; ?>/lib/javascript/ajax.js" language="javascript" type="text/javascript"></script>
 <!-- rfc3514 implementation -->

templates/show_album.inc.php

@@ -35,8 +35,8 @@ $title .= ' - ' . $album->f_artist_link;
     if ($album->name != T_('Unknown (Orphaned)')) {
         $name = '[' . $album->f_artist . '] ' . scrub_out($album->full_name);
 
-            $aa_url = $web_path . "/image.php?id=" . $album->id . "&type=popup&sid=" . session_id();
+            $aa_url = $web_path . "/image.php?id=" . $album->id . "&sid=" . session_id();
-            echo "<a target=\"_blank\" href=\"$aa_url\" onclick=\"popupWindow('$aa_url'); return false;\">";
+            echo "<a href=\"$aa_url\" onClick=\"TINY.box.show({image:'$aa_url',boxid:'frameless',animate:true}); return false;\">";
             echo "<img src=\"" . $web_path . "/image.php?id=" . $album->id . "&amp;thumb=2\" alt=\"".$name."\" title=\"".$name."\" height=\"128\" width=\"128\" />";
             echo "</a>\n";
     }

templates/show_lyrics_song.inc.php

@@ -30,7 +30,7 @@ $artist = scrub_out(UI::truncate($song->f_artist_full));
 <div class="np_group">
   <?php if (Config::get('show_album_art')) { ?>
   <div class="np_cell cel_albumart">
-    <a target="_blank" href="<?php echo $web_path; ?>/image.php?id=<?php echo $song->album; ?>&amp;type=popup&amp;sid=<?php echo session_id(); ?>" onclick="popupWindow('<?php echo $web_path; ?>/image.php?id=<?php echo $song->album; ?>&amp;type=popup&amp;sid=<?php echo session_id(); ?>'); return false;">
+    <a href="<?php echo $web_path; ?>/image.php?id=<?php echo $song->album; ?>&amp;sid=<?php echo session_id(); ?>" onclick="TINY.box.show({image:'<?php echo $web_path; ?>/image.php?id=<?php echo $song->album; ?>&amp;sid=<?php echo session_id(); ?>',boxid:'frameless',animate:true}); return false;">
       <img align="middle" src="<?php echo $web_path; ?>/image.php?id=<?php echo $song->album; ?>&amp;thumb=1&amp;sid=<?php echo session_id(); ?>" alt="<?php echo scrub_out($song->f_album_full); ?>" title="<?php echo scrub_out($song->f_album_full); ?>" height="75" width="75" />
     </a>
   </div>

templates/show_now_playing_row.inc.php

@@ -65,7 +65,7 @@
 <?php if (Art::is_enabled()) { ?>
 <div class="np_group" id="np_group_3">
   <div class="np_cell cel_albumart">
-      <a target="_blank" href="<?php echo $web_path; ?>/image.php?id=<?php echo $media->album; ?>&amp;type=popup" onclick="popupWindow('<?php echo $web_path; ?>/image.php?id=<?php echo $media->album; ?>&amp;type=popup'); return false;">
+      <a href="<?php echo $web_path; ?>/image.php?id=<?php echo $media->album; ?>" onclick="TINY.box.show({image:'<?php echo $web_path; ?>/image.php?id=<?php echo $media->album; ?>',boxid:'frameless',animate:true}); return false;">
         <img align="middle" src="<?php echo $web_path; ?>/image.php?id=<?php echo $media->album; ?>&amp;thumb=1&amp;sid=<?php echo session_id(); ?>" alt="<?php echo scrub_out($media->f_album_full); ?>" title="<?php echo scrub_out($media->f_album_full); ?>" height="80" width="80" />
       </a>
   </div>

templates/stylesheets.inc.php

@@ -33,4 +33,5 @@ if (is_rtl(Config::get('lang'))
 <?php
 }
 ?>
+<link rel="stylesheet" href="<?php echo $web_path; ?>/modules/tinybox/tinybox.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="<?php echo $web_path; ?>/templates/print.css" type="text/css" media="print" />