☰

Wiki file link preview

preview image for link that start with "File:"

  1. // ==UserScript==
  2. // @name         Wiki file link preview
  3. // @namespace    https://unlucky.ninja/
  4. // @version      0.1
  5. // @description  preview image for link that start with "File:"
  6. // @author       UnluckyNinja
  7. // @match        https://*.wikipedia.org/*
  8. // @require      https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js
  9. // @require      https://greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js?version=6349
  10. // @grant        GM_xmlhttpRequest
  11. // @grant        GM_addStyle
  12. // ==/UserScript==
  13.  
  14. // (function($, undefined) {
  15. (function() {
  16.   'use strict';
  17.  
  18.   $(function() {
  19.     GM_addStyle(`
  20.     #img-preview {
  21.       position: fixed;
  22.       width: auto;
  23.       height: auto;
  24.     }
  25.     .wip-upper-right {
  26.       top: 10px;
  27.       right: 10px;
  28.     }
  29.     .wip-upper-left {
  30.       top: 10px;
  31.       left: 10px;
  32.     }
  33.     
  34.     `)
  35.     let preview = $('<img id="img-preview"></img>')
  36.  
  37.     function checkMouse(event, img) {
  38.       console.log(event.clientX + ', ' + window.innerWidth)
  39.       if (event.clientX < window.innerWidth / 2) {
  40.         img.removeClass('wip-upper-left')
  41.         img.addClass('wip-upper-right')
  42.       } else {
  43.         img.removeClass('wip-upper-right')
  44.         img.addClass('wip-upper-left')
  45.       }
  46.     }
  47.  
  48.     let m_in = (event) => {
  49.       console.log('m_in in ' + $(event.target).toString())
  50.       let img = $('#img-preview')
  51.       checkMouse(event, img)
  52.       let imglink = '';
  53.       let url = $(event.target).attr('href')
  54.       if (url && url !== '') {
  55.         console.log('url is ' + url)
  56.         $.post(url, null, function(data, status, jqxhr) {
  57.           imglink = $(data).find('#file img').first().attr('src');
  58.           if (img.is(':visible')) {
  59.             img.attr('src', imglink)
  60.           }
  61.           console.log('post success, imglink:' + imglink)
  62.         }).fail(() => { console.log('get image failed') })
  63.       }
  64.       img.show()
  65.     }
  66.  
  67.     let m_out = (event) => {
  68.       let img = $('#img-preview')
  69.       img.hide()
  70.       img.attr('src', null)
  71.     }
  72.  
  73.     preview.appendTo('body')
  74.     preview.hide()
  75.  
  76.     let addPreviewEvent = function(node) {
  77.       if (node.text().startsWith('File:')) {
  78.         node.hover(m_in, m_out)
  79.       }
  80.     }
  81.  
  82.     waitForKeyElements("#mw-category-media a", addPreviewEvent);
  83.   })
  84. })()
  85. //})(window.jQuery.noConflict(true) || $); // not work