MediaWiki:Gadget-shortURL.js

/**
 * @name Short URL
 * @author 机智的小鱼君
 *
 * @description Get the "fake" short link provided by MediaWiki.
 *              Solve the very long link of the pages that name contain non-ASCII words.
 */
// Originated from [https://github.com/Wjghj-Project/wjghj-wiki/blob/master/gadgets/Share-btn/script.js here].
!(function () {
  var i18n = {
  	shareDescription: wgULS('您还可以通过此链接分享页面：','您還可以透過此連結分享頁面：'),
  	copy: wgULS('复制','複製'),
  	copied: wgULS('已复制！','已複製！'),
  }
  window.shortUrl = window.shortUrl || ''
  // 缓存 mw 变量
  var config = mw.config.get()
  // 判断是否存在文章ID
  if (config.wgArticleId > 0) {
    shortUrl = config.wgServer + '/-/' + config.wgArticleId
    // 插入短链接
    var shortURLParagraph = $('<div>', { class: 'shortUrl-block', style: 'margin: 1em;' }).append(
        $('<span>', { class: 'shortUrl-description' }).append(
          $('<span>', { text: i18n.shareDescription }),
          $('<strong>', { text: shortUrl + ' ' }),
          $('<br>'),
          $('<a>', { text: i18n.copy , href: 'javascript:;' }).click(function () {
            // 创建 input 元素，选中复制，然后销毁
            var $this = $(this),
              surlInput = $('<input>', { id: 'shortUrl-copy', value: shortUrl, style: 'z-index: -1; opacity: 0; position: absolute; left: -200vw;', readonly: 'readonly' })
            $this.append(surlInput)
            surlInput.select()
            document.execCommand('copy')
            surlInput.remove()
            $this.text(i18n.copied)
            setTimeout(function () {
              $this.text(i18n.copy)
            }, 1500)
          })
        )
      )
  
  // A PopupButtonWidget.
  var popupButton = new OO.ui.PopupButtonWidget( {
      icon: 'link',
      flags: [],
	  framed: false,
	  label: 'Short URL',
	  invisibleLabel: true,
	  popup: {
        label: 'Short URL',
	    $content: shortURLParagraph,
	    align: 'center'
	  }
    } );
  	// Append the button to the DOM.
    $( '#ca-view' ).after( popupButton.$element );
  }
  
  // 将短链接替换进文章
  $('.shortUrl').text(shortUrl)
  $('.shortUrl-link').html($('<a>', { href: shortUrl, text: shortUrl }))
})()