Wiki file link preview

preview image for link that start with "File:"

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Wiki file link preview
// @namespace    https://unlucky.ninja/
// @version      0.1
// @description  preview image for link that start with "File:"
// @author       UnluckyNinja
// @match        https://*.wikipedia.org/*
// @require      https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js
// @require      https://greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js?version=6349
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

// (function($, undefined) {
(function() {
  'use strict';

  $(function() {
    GM_addStyle(`
    #img-preview {
      position: fixed;
      width: auto;
      height: auto;
    }
    .wip-upper-right {
      top: 10px;
      right: 10px;
    }
    .wip-upper-left {
      top: 10px;
      left: 10px;
    }
    
    `)
    let preview = $('<img id="img-preview"></img>')

    function checkMouse(event, img) {
      console.log(event.clientX + ', ' + window.innerWidth)
      if (event.clientX < window.innerWidth / 2) {
        img.removeClass('wip-upper-left')
        img.addClass('wip-upper-right')
      } else {
        img.removeClass('wip-upper-right')
        img.addClass('wip-upper-left')
      }
    }

    let m_in = (event) => {
      console.log('m_in in ' + $(event.target).toString())
      let img = $('#img-preview')
      checkMouse(event, img)
      let imglink = '';
      let url = $(event.target).attr('href')
      if (url && url !== '') {
        console.log('url is ' + url)
        $.post(url, null, function(data, status, jqxhr) {
          imglink = $(data).find('#file img').first().attr('src');
          if (img.is(':visible')) {
            img.attr('src', imglink)
          }
          console.log('post success, imglink:' + imglink)
        }).fail(() => { console.log('get image failed') })
      }
      img.show()
    }

    let m_out = (event) => {
      let img = $('#img-preview')
      img.hide()
      img.attr('src', null)
    }

    preview.appendTo('body')
    preview.hide()

    let addPreviewEvent = function(node) {
      if (node.text().startsWith('File:')) {
        node.hover(m_in, m_out)
      }
    }

    waitForKeyElements("#mw-category-media a", addPreviewEvent);
  })
})()
//})(window.jQuery.noConflict(true) || $); // not work