Browse Source

Hover cover follows mouse

spaghetti 3 years ago
parent
commit
9d2db56317

+ 1
- 1
classes/text.class.php View File

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

+ 2
- 2
sections/artist/artist.php View File

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

+ 1
- 1
sections/better/covers.php View File

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

+ 1
- 1
sections/better/screenshots.php View File

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

+ 2
- 2
sections/bookmarks/torrents.php View File

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

+ 1
- 1
sections/collages/torrent_collage.php View File

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

+ 1
- 1
sections/index/private.php View File

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

+ 1
- 1
sections/requests/requests.php View File

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

+ 1
- 1
sections/rules/ratio.php View File

@@ -117,7 +117,7 @@ $GB = 1024*1024*1024;
117 117
         <br />
118 118
         <br />
119 119
         <div style="text-align: center;">
120
-        <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))" />
120
+        <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))" />
121 121
         </div>
122 122
         <br />
123 123
         <br />

+ 1
- 1
sections/snatchlist/snatchlist.php View File

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

+ 1
- 1
sections/top10/torrents.php View File

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

+ 2
- 2
sections/torrents/browse.php View File

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

+ 1
- 1
sections/torrents/notify.php View File

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

+ 1
- 1
sections/torrents/user.php View File

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

+ 2
- 2
sections/userhistory/subscribed_collages.php View File

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

+ 19
- 3
static/functions/global.js View File

@@ -300,17 +300,30 @@ function preload(image) {
300 300
   document.body.removeChild(img)
301 301
 }
302 302
 
303
+let coverListener
303 304
 function getCover(event) {
304
-  var image = event.target.attributes['data-cover'].value
305
+  let image = event.target.attributes['data-cover'].value
305 306
   $('#coverCont img').remove()
306
-  var coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
307
+  let coverCont = ($('#coverCont').length==0)?document.body.appendChild(document.createElement('div')):$('#coverCont')[0]
307 308
   coverCont.id = 'coverCont'
308 309
   if ($('#coverCont img').length == 0) {
309 310
     coverCont.appendChild(document.createElement('img'))
310 311
   }
311 312
   $('#coverCont img')[0].src = image?image:'/static/common/noartwork/nocover.png'
312
-  coverCont.className = (event.clientX > (window.innerWidth/2)) ? 'left' : 'right'
313 313
   coverCont.style.display = 'block'
314
+  coverListener = mevent => {
315
+    let wh = window.innerHeight, ch = coverCont.clientHeight, ph = mevent.clientY
316
+    let pos = (ph<wh/2) ? ((ph+ch+10>wh) ? wh-ch : ph+10) : ((ph-ch-10<0) ? 0 : ph-ch-10)
317
+    coverCont.style.top = pos+'px'
318
+    if (mevent.clientX > window.innerWidth/2) {
319
+      coverCont.style.left = "initial"
320
+      coverCont.style.right = window.innerWidth-mevent.clientX+10+"px"
321
+    } else {
322
+      coverCont.style.left = mevent.clientX+10+"px"
323
+      coverCont.style.right = "initial"
324
+    }
325
+  }
326
+  document.addEventListener("mousemove", coverListener)
314 327
   //Preload next image
315 328
   if ($('.torrent_table, .request_table').length > 0) {
316 329
     var as = $('[data-cover]')
@@ -322,6 +335,7 @@ function getCover(event) {
322 335
 function ungetCover(event) {
323 336
   $('#coverCont img').remove()
324 337
   coverCont.style.display = 'none'
338
+  document.removeEventListener("mousemove", coverListener)
325 339
 }
326 340
 
327 341
 // Apparently firefox doesn't implement NodeList.forEach until FF50
@@ -340,6 +354,8 @@ $(function() {
340 354
     })
341 355
   })
342 356
 
357
+  $(document).on('mouseover', '[data-cover]', getCover)
358
+  $(document).on('mouseleave', '[data-cover]', ungetCover)
343 359
   $(document).on('click', '.lightbox-init', function(e) {
344 360
     lightbox.init((e.target.attributes['lightbox-img']||[]).value||e.target.src, (e.target.attributes['lightbox-size']||[]).value||e.target.width)
345 361
   })

+ 6
- 0
static/styles/beluga/style.css View File

@@ -2087,6 +2087,12 @@ caption {
2087 2087
   filter: invert(100%);
2088 2088
 }
2089 2089
 
2090
+#coverCont {
2091
+  font-size: 0;
2092
+  padding: 5px;
2093
+  background-color: #565960;
2094
+}
2095
+
2090 2096
 /* Pink Additions */
2091 2097
 
2092 2098
 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 {

+ 0
- 8
static/styles/global.css View File

@@ -831,16 +831,8 @@ div.torrent_artists {
831 831
 .r08           { color: #8c4802; }
832 832
 .r09           { color: #7b5200; }
833 833
 
834
-#coverCont.left {
835
-  left: 20px;
836
-  right: initial;
837
-}
838
-
839 834
 #coverCont {
840 835
   position: fixed;
841
-  right: 20px;
842
-  left: initial;
843
-  top: 20px;
844 836
   max-width: 30%;
845 837
   background-size: contain;
846 838
   background-repeat: no-repeat;

Loading…
Cancel
Save