☰

Confluence Copy Title Link

Add permalink to conflucence document.

24.08.2021 itibariyledir. En son verisyonu görün.

// ==UserScript==
// @name         Confluence Copy Title Link
// @namespace    https://blog.simplenaive.cn/
// @version      0.1
// @description  Add permalink to conflucence document.
// @author       github.com/yidadaa
// @match        https://confluence.zhenguanyu.com/*
// @icon         https://www.google.com/s2/favicons?domain=zhenguanyu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const $ = s => document.querySelector(s);
    const $$ = s => Array.from(document.querySelectorAll(s));

    const styles = `
    .header-with-link {
        display: flex;
        align-items: center;
    }
    .header-link {
        color: #0049B0!important;
        border: 2px solid #0049B0;
        border-radius: 5px;
        font-size: 14px;
        margin-left: 10px;
        padding: 0px 3px;
    }
    ._yifei-message {
        position: fixed;
        top: 150px;
        box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
        background: white;
        color: black;
        transform: translateY(-50px);
        transition: all ease .3s;
        left: 50%;
        padding: 10px 20px;
        border-radius: 5px;
        opacity: 0;
    }

    ._yifei-message-show {
        transform: translateY(0);
        opacity: 1;
    }
    `

    const addStyle = () => {
        const styleSheet = document.createElement("style")
        styleSheet.type = "text/css"
        styleSheet.innerText = styles
        document.head.appendChild(styleSheet)
    }

    class Message {
        constructor() {
            this.dom = document.createElement('div')
            this.dom.className = '_yifei-message'
            this.SHOW_CLASS = '_yifei-message-show'
            this.timeout = null;
            document.body.appendChild(this.dom)
        }
        show (text) {
            this.timeout && clearTimeout(this.timeout)
            this.dom.innerText = text
            this.dom.classList.add(this.SHOW_CLASS)
            this.timeout = setTimeout(() => this.hide(), 1500)
        }

        hide() {
            this.dom.classList.remove(this.SHOW_CLASS)
        }
    }

    const message = new Message()

    const addLinkToHeader = () => {
        const headers = new Array(6).fill(0).map((v, i) => {
            return $$(`h${i + 1}`)
        }).reduce((p, c) => p.concat(c), []).filter(v => v.id)
        console.log(headers)

        headers.forEach(h => {
            const link = document.createElement('a')
            link.className = 'header-link'
            link.innerText = '#'

            link.href = location.hash ? location.href.replace(location.hash, `#${h.id}`) : location.href + `#${h.id}`
            link.title = 'click to copy link'

            link.onclick = () => {
                console.log('click', link.href)
                message.show('链接已复制到剪切板')
                navigator.clipboard.writeText(link.href)
            };

            h.classList.add('header-with-link')
            h.appendChild(link)
        })
    }

    const addLinkToComment = () => {
        const comments = $$('.comment-thread')
        console.log(comments)

        comments.forEach(c => {
            const actions = c.querySelector('.comment-actions')

            // confluence 自带 permalink，但是不想用
            // const permalink = c.querySelector('.comment-actions-secondary')
            // permalink.style.display = 'inline'

            const action = document.createElement('ul')
            action.className = 'comment-action-copy'

            const link = document.createElement('a')

            link.innerText = '复制评论链接'
            link.href = location.hash ? location.href.replace(location.hash, `#${c.id}`) : location.href + `#${c.id}`
            link.title = 'click to copy link'

            link.onclick = () => {
                console.log('click', link.href)
                message.show('链接已复制到剪切板')
                navigator.clipboard.writeText(link.href)
            };

            action.appendChild(link)
            actions.appendChild(action)
        })
    }

    const debugMode = () => {
        const userLinks = $$('.confluence-userlink')
        userLinks.forEach(v => v.style.filter = 'blur(4px)')
        $('#breadcrumbs').style.filter = 'blur(4px)'
        document.onclick = () => $('#wm').style.filter = 'blur(5px)'
    }

    addStyle()
    addLinkToHeader()
    addLinkToComment()
    // debugMode()
})();