Hover cover follows mouse

classes/text.class.php

@@ -732,7 +732,7 @@ class Text {
                 }
                 $Str .= '"';
                 if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-                  $Str .= " onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($Group['WikiImage'], 'thumb')."\" onmouseleave=\"ungetCover(event)\"";
+                  $Str .= ' data-cover="'.ImageTools::process($Group['WikiImage'], 'thumb').'"';
                 }
                 $Name = empty($Group['Name']) ? (empty($Group['NameRJ']) ? $Group['NameJP'] : $Group['NameRJ']) : $Group['Name'];
                 $Str .= '>'.$Name.'</a>';

sections/artist/artist.php

@@ -206,7 +206,7 @@ foreach ($TorrentList as $Group) {
 
     $DisplayName .= "<a href=\"torrents.php?id=$GroupID\" class=\"tooltip\" title=\"View torrent group\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
@@ -312,7 +312,7 @@ foreach ($TorrentList as $Group) {
 
     $DisplayName .= "<a class=\"torrent_name\" href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;

sections/better/covers.php

@@ -52,7 +52,7 @@ foreach ($Results as $Result) {
 
   $DisplayName = "<a href=\"torrents.php?id=$ID\" class=\"tooltip\" title=\"View torrent group\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$Name</a>";
   if ($Year > 0) {

sections/better/screenshots.php

@@ -50,7 +50,7 @@ foreach ($Results as $Result) {
 
   $DisplayName = "<a href=\"torrents.php?id=$ID\" class=\"tooltip\" title=\"View torrent group\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$LangName</a>";
   if ($Year > 0) {

sections/bookmarks/torrents.php

@@ -66,7 +66,7 @@ foreach ($GroupIDs as $GroupID) {
 
   $DisplayName .= '<a href="torrents.php?id='.$GroupID.'" ';
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $DisplayName .= ' class="tooltip" title="View torrent group" dir="ltr">'.$GroupName.'</a>';
   if ($GroupYear > 0) {
@@ -132,7 +132,7 @@ foreach ($GroupIDs as $GroupID) {
 
     $DisplayName .= '<a href="torrents.php?id='.$GroupID.'" ';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
     $DisplayName .=' class="tooltip" title="View torrent group" dir="ltr">'.$GroupName.'</a>';
 

sections/collages/torrent_collage.php

@@ -71,7 +71,7 @@ foreach ($GroupIDs as $GroupID) {
 
   $DisplayName .= "<a href=\"torrents.php?id=$GroupID\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
   }
   $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
   $DisplayName .= "dir=\"ltr\">$GroupName</a>";

sections/index/private.php

@@ -153,7 +153,7 @@ if (count($Freeleeches)) {
     $DisplayTime = '('.str_replace(['year','month','week','day','hour','min','Just now','s',' '],['y','M','w','d','h','m','0m'],time_diff($ExpiryTime, 1, false)).') ';
     $DisplayName = '<a href="torrents.php?torrentid='.$ID.'"';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= " onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($Image, 'thumb')."\" onmouseleave=\"ungetCover(event)\"";
+      $DisplayName .= ' data-cover="'.ImageTools::process($Image, 'thumb').'"';
     }
     $DisplayName .= '>'.$Name.'</a>';
 ?>

sections/requests/requests.php

@@ -497,7 +497,7 @@ View::show_header($Title, 'requests');
     $ArtistLink = Artists::display_artists($ArtistForm, true, true);
     $FullName = "$ArtistLink<a href=\"requests.php?action=view&amp;id=$RequestID\"><span ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $FullName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($Request['Image']).'" onmouseleave="ungetCover(event)" ';
+      $FullName .= 'data-cover="'.ImageTools::process($Request['Image']).'" ';
     }
     $FullName .= "dir=\"ltr\">$Title</span></a>";
 

sections/rules/ratio.php

@@ -117,7 +117,7 @@ $GB = 1024*1024*1024;
         <br />
         <br />
         <div style="text-align: center;">
-        <img style="vertical-align: middle;" src="<?=ImageTools::process('https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=%5Ctextrm%7B%28maximum+required+ratio%29+%2A+%281-%5Cfrac%7Bseeding%7D%7Bsnatched%7D%29%7D&ext=.png')?>" alt="required ratio = (maximum required ratio) * (1 - (seeding / snatched))" />
+        <img style="vertical-align: middle;" class="tex_img" src="<?=ImageTools::process('https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=%5Ctextrm%7B%28maximum+required+ratio%29+%2A+%281-%5Cfrac%7Bseeding%7D%7Bsnatched%7D%29%7D&ext=.png')?>" alt="required ratio = (maximum required ratio) * (1 - (seeding / snatched))" />
         </div>
         <br />
         <br />

sections/snatchlist/snatchlist.php

@@ -41,7 +41,7 @@ View::show_header('Snatch List');
 foreach ($Torrents as $Torrent) {
   $DisplayName = "<a href=\"torrents.php?id=$Torrent[ID]&torrentid=$Torrent[TorrentID]\" ";
   if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-    $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($Torrent['WikiImage'], 'thumb').'" onmouseleave="ungetCover(event)" ';
+    $DisplayName .= 'data-cover="'.ImageTools::process($Torrent['WikiImage'], 'thumb').'" ';
   }
   $DisplayName .= "dir=\"ltr\">$Torrent[Name]</a>";
 

sections/top10/torrents.php

@@ -467,7 +467,7 @@ function generate_torrent_table($Caption, $Tag, $Details, $Limit) {
 
     $DisplayName .= "<a href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID\" class=\"tooltip\" title=\"View torrent\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
 
 

sections/torrents/browse.php

@@ -524,7 +524,7 @@ View::show_header('Browse Torrents', 'browse');
     $CoverArt = $GroupInfo['WikiImage'];
     $DisplayName .= "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($CoverArt, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($CoverArt, 'thumb').'" ';
     }
     $DisplayName .= "dir=\"ltr\">$GroupName</a>";
     if ($GroupYear) {
@@ -643,7 +643,7 @@ $ShowGroups = !(!empty($LoggedUser['TorrentGrouping']) && $LoggedUser['TorrentGr
     $CoverArt = $GroupInfo['WikiImage'];
     $DisplayName .= "<a class=\"torrent_name\" href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($CoverArt, 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+      $DisplayName .= 'data-cover="'.ImageTools::process($CoverArt, 'thumb').'" ';
     }
     $DisplayName .= "dir=\"ltr\">$GroupName</a>";
     if (isset($GroupedCategories[$CategoryID - 1])) {

sections/torrents/notify.php

@@ -265,7 +265,7 @@ if (empty($Results)) {
       }
       $DisplayName .= "<a href=\"torrents.php?id=$GroupID&amp;torrentid=$TorrentID#torrent$TorrentID\" ";
       if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-         $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($GroupInfo['WikiImage'], 'thumb')."\" onmouseleave=\"ungetCover(event)\" ";
+         $DisplayName .= 'data-cover="'.ImageTools::process($GroupInfo['WikiImage'], 'thumb').'" ';
       }
       $DisplayName .= "class=\"tooltip\" title=\"View torrent\" dir=\"ltr\">" . $GroupInfo['Name'] . '</a>';
 

sections/torrents/user.php

@@ -509,7 +509,7 @@ foreach ($Categories as $CatKey => $CatName) {
     $DisplayName = Artists::display_artists($Artists);
     $DisplayName .= '<a href="torrents.php?id='.$GroupID.'&amp;torrentid='.$TorrentID.'" ';
     if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-      $DisplayName .= 'onmouseover="getCover(event)" data-cover="'.ImageTools::process($WikiImage, 'thumb').'" onmouseleave="ungetCover()" ';
+      $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage, 'thumb').'" ';
     }
     $GroupName = empty($GroupName) ? (empty($GroupNameRJ) ? $GroupNameJP : $GroupNameRJ) : $GroupName;
     $DisplayName .= 'dir="ltr">'.$GroupName.'</a>';

sections/userhistory/subscribed_collages.php

@@ -113,7 +113,7 @@ if (!$NumResults) {
       }
       $DisplayName .= "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
       if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-        $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage)."\" onmouseleave=\"ungetCover(event)\" ";
+        $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage).'" ';
       }
       $DisplayName .= "dir=\"ltr\">".($GroupName ? $GroupName : ($GroupNameRJ ? $GroupNameRJ : $GroupNameJP))."</a>";
       if ($GroupYear > 0) {
@@ -169,7 +169,7 @@ if (!$NumResults) {
 
         $DisplayName = "<a class=\"torrent_title\" href=\"torrents.php?id=$GroupID\" ";
         if (!isset($LoggedUser['CoverArt']) || $LoggedUser['CoverArt']) {
-          $DisplayName .= "onmouseover=\"getCover(event)\" data-cover=\"".ImageTools::process($WikiImage)."\" onmouseleave=\"ungetCover(event)\" ";
+          $DisplayName .= 'data-cover="'.ImageTools::process($WikiImage).'" ';
         }
         $DisplayName .= "dir=\"ltr\">".($GroupName ? $GroupName : ($GroupNameRJ ? $GroupNameRJ : $GroupNameJP))."</a>";
 

static/functions/global.js

@@ -300,17 +300,30 @@ function preload(image) {
   document.body.removeChild(img)
 }
 
+let coverListener
 function getCover(event) {
-  var image = event.target.attributes['data-cover'].value
+  let image = event.target.attributes['data-cover'].value
   $('#coverCont img').remove()
-  var coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
+  let coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
   coverCont.id = 'coverCont'
   if ($('#coverCont img').length == 0) {
     coverCont.appendChild(document.createElement('img'))
   }
   $('#coverCont img')[0].src = image?image:'/static/common/noartwork/nocover.png'
-  coverCont.className = (event.clientX > (window.innerWidth/2)) ? 'left' : 'right'
   coverCont.style.display = 'block'
+  coverListener = mevent => {
+    let wh = window.innerHeight, ch = coverCont.clientHeight, ph = mevent.clientY
+    let pos = (ph<wh/2) ? ((ph+ch+10>wh) ? wh-ch : ph+10) : ((ph-ch-10<0) ? 0 : ph-ch-10)
+    coverCont.style.top = pos+'px'
+    if (mevent.clientX > window.innerWidth/2) {
+      coverCont.style.left = "initial"
+      coverCont.style.right = window.innerWidth-mevent.clientX+10+"px"
+    } else {
+      coverCont.style.left = mevent.clientX+10+"px"
+      coverCont.style.right = "initial"
+    }
+  }
+  document.addEventListener("mousemove", coverListener)
   //Preload next image
   if ($('.torrent_table, .request_table').length > 0) {
     var as = $('[data-cover]')
@@ -322,6 +335,7 @@ function getCover(event) {
 function ungetCover(event) {
   $('#coverCont img').remove()
   coverCont.style.display = 'none'
+  document.removeEventListener("mousemove", coverListener)
 }
 
 // Apparently firefox doesn't implement NodeList.forEach until FF50
@@ -340,6 +354,8 @@ $(function() {
     })
   })
 
+  $(document).on('mouseover', '[data-cover]', getCover)
+  $(document).on('mouseleave', '[data-cover]', ungetCover)
   $(document).on('click', '.lightbox-init', function(e) {
     lightbox.init((e.target.attributes['lightbox-img']||[]).value||e.target.src, (e.target.attributes['lightbox-size']||[]).value||e.target.width)
   })

static/styles/beluga/style.css

@@ -2087,6 +2087,12 @@ caption {
   filter: invert(100%);
 }
 
+#coverCont {
+  font-size: 0;
+  padding: 5px;
+  background-color: #565960;
+}
+
 /* Pink Additions */
 
 body.style_pink h1 a, body.style_pink h2 a, body.style_pink h3 a, body.style_pink h4 a, body.style_pink h5 a, body.style_pink h6 a {

static/styles/global.css

@@ -831,16 +831,8 @@ div.torrent_artists {
 .r08           { color: #8c4802; }
 .r09           { color: #7b5200; }
 
-#coverCont.left {
-  left: 20px;
-  right: initial;
-}
-
 #coverCont {
   position: fixed;
-  right: 20px;
-  left: initial;
-  top: 20px;
   max-width: 30%;
   background-size: contain;
   background-repeat: no-repeat;