☰

Trello Copy

Trello 功能擴充

当前为 2020-08-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Trello Copy
  3. // @namespace   1207bd0a-0252-4c8d-9134-d40ac51e4248
  4. // @match       https://trello.com/*
  5. // @grant       none
  6. // @version     1.0.0
  7. // @author      Rick0
  8. // @description Trello 功能擴充
  9. // @require     https://unpkg.com/clipboard@2/dist/clipboard.min.js
  10. // ==/UserScript==
  11.  
  12. // == class ==
  13.  
  14. class Card {
  15.   url = location.href.match(/(https?:\/\/.+)\//)[1]
  16.   title () {
  17.     return document.querySelector('.mod-card-back-title.js-card-detail-title-input').value
  18.   }
  19.   // description = document.querySelector('.description-title > .u-inline-block')
  20.   // headerIcon = document.querySelector('.window-header-icon')
  21.   // header = document.querySelector('.window-header')
  22. }
  23.  
  24. // == global function ==
  25.  
  26. function setCSS(src) {
  27.   let stylesheet = createNode(`<link rel="stylesheet" type="text/css" href="${src}">`)
  28.   document.head.appendChild(stylesheet)
  29. }
  30.  
  31. function setClipboardJS() {
  32.   copyButton = createNode(`<button class="oneCopy"></button>`)
  33.   document.body.appendChild(copyButton)
  34.   new ClipboardJS('.oneCopy')
  35. }
  36.  
  37. function setClipboard (text) {
  38.   copyButton.setAttribute('data-clipboard-text', text)
  39.   copyButton.click()
  40. }
  41.  
  42. function createNode(html) {
  43.   let template = document.createElement('template')
  44.   template.innerHTML = html
  45.   
  46.   return template.content.firstChild
  47. }
  48.  
  49. function createButton (buttonName, eventName, callback) {
  50.   let button = createNode(`<div><a class="button subtle" href="javascript:void(0)">${buttonName}</a></div>`)
  51.   let link = button.querySelector('a')
  52.  
  53.   link.addEventListener(eventName, callback)
  54.  
  55.   return button
  56. }
  57.  
  58. function createCopyButton (buttonName, text) {
  59.   return createButton(buttonName, 'click', function () {
  60.     setClipboard(text)
  61.   })
  62. }
  63.  
  64. // == global var ==
  65.  
  66.  
  67.  
  68. // == program start ==
  69.  
  70. // setCSS('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css')
  71. setClipboardJS()
  72.  
  73. let observer = new MutationObserver(function () {
  74.   let isCardDeatilMode = (location.pathname.slice(1, 2) === 'c')
  75.   if (isCardDeatilMode) {
  76.     let card = new Card()
  77.  
  78.     let tagArea = document.querySelector('.window-main-col>.card-detail-data')
  79.     let copyArea = createNode(`<div class="window-module-title window-module-title-no-divider description-title"><span class="icon-copy icon-lg window-module-title-icon"></span><h3 class="u-inline-block">複製</h3></div>`)
  80.     let titleCopyButton = createButton('標題', 'click', function () {
  81.       setClipboard(card.title())
  82.     })
  83.     let urlCopyButton = createCopyButton('網址', card.url)
  84.     let recordCopyButton = createButton('專案紀錄', 'click', function () {
  85.       setClipboard(`=HYPERLINK("${card.url}","${card.title().replace(/"/g, '\"\"')}")`)
  86.     })
  87.  
  88.     ;[
  89.       titleCopyButton,
  90.       urlCopyButton,
  91.       recordCopyButton,
  92.     ]
  93.       .forEach(button => {
  94.         copyArea.appendChild(button)
  95.     })
  96.     tagArea.insertAdjacentElement('afterend', copyArea)
  97.   }
  98. })
  99. observer.observe(document.body, {
  100.   attributeFilter: ['class'],
  101. })