CureAnnouncement

README.md

お知らせリンクを追加するやつ

Mastodonの投稿欄の下に好きなリンクを追加することができるユーザースクリプトです。
もともとはキュアスタ！で実装されていたもので、Mastodon v4以降で廃止となったためユーザスクリプト化しました。

※本当の大本はアビスドンだった気がする・・

動作環境

ユーザースクリプトですので、それを利用できる拡張機能を入れてください。

• Tampermonkey (Chrome / Firefox)

Androidで使う場合

Firefoxの拡張機能、USIを使用してください。(Tampermonkeyでは動きません)
Yandexの場合はChrome拡張 Tampermonkeyを使用します。

インストール

Tampermonkeyを導入済みの場合、こちらからユーザースクリプトをインストールできます。

設定

Tampermonkeyでインストール後、スクリプトの設定からユーザーによる matchへ使用しているインスタンスのドメインを追加してください。

追加したいリンクはエディターからJSONを変更することで追加・削除することができます。
※デフォルトで私が個人的に使っているものが入っています

user.js

// ==UserScript==
// @name         Cure Announcement
// @namespace    http://github.com/karasugawasu
// @version      1.1.0
// @description  あなうんすのふっかつ！
// @match        https://precure.ml/*
// @match        https://md.korako.me/*
// @author       @karasu_sue@md.korako.me
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    const announcements = [
      {
        "body": "モロヘイヤ",
        "links": [
          { "href": "/mulukhiya", "body": "Home"},
          { "href": "/mulukhiya/app/status", "body": "キュア！"},
          { "href": "/mulukhiya/app/config", "body": "設定"},
          { "href": "/mulukhiya/app/media", "body": "メディア"},
          { "href": "/mulukhiya/app/api", "body": "API"}
        ]
      },
      {
        "body": "関連サーバー",
        "links": [
          { "href": "https://ak.korako.me", "body": "Akkoma"},
          { "href": "https://lm.korako.me", "body": "Lemmy"},
          { "href": "https://precure.ml", "body": "キュアスタ！"},
          { "href": "https://fd.korako.me", "body": "Friendica"}
        ]
      }
    ]

    let mainColor;
    let textColor;
    let whiteColor;
    let boaderColor;

    function setCSS(){
        var css = `
            .cure_announcements {
                margin: 10px 0;
            }

            .compose__extra__header {
                position: relative;
                display: flex;
                align-items: center;
                padding: 8px 12px;
                background: ` + mainColor + `;
                font-size: 16px;
                color: ` + textColor + `;
            }

            .cure_announcements .cure_announcements__icon {
                flex: 0 0 auto;
                display: inline-block;
                overflow: hidden;
                width: 22px;
                height: 22px;
            }

            .cure_announcements .cure_announcements__body p {
                padding-left: 5px;
                font-size: 14px;
            }

            .cure_announcements .cure_announcements__body .links {
                text-align: right;
            }

            .cure_announcements .cure_announcements__body .links a {
                display: inline-block;
                color: ` + textColor + `;
                background: ` + whiteColor + `;
                text-decoration: none;
                padding: 1px 10px 0;
                border: 1px solid ` + boaderColor + `;
                font-size: 10px;
                font-weight: 600;
                border-radius: 4px;
                margin-top: 5px;
                margin-left: 5px;
            }

            .cure_announcements li {
                display: flex;
                padding: 10px;
                color: ` + textColor + `;
                background: ` + mainColor + `;
                border-radius: 4px;
                margin-top: 10px;
            }

            .compose__extra__header__icon {
                background: transparent;
                position: absolute;
                color: ` + textColor + `;
                border: 0;
                padding: 0;
                right: 20px;
                top: 8px;
                text-align: center;
            }

            .cure_announcements ul {
                padding: 0 10px;
            }

            .compose__extra__header>i {
                padding-right: 4px;
            }

            .compose__extra__header__icon i {
                width: 14px;
            }
        `;
        GM_addStyle(css);
    }
    function createAnnoucementHTML() {
        let html = '';
        announcements.forEach(function(v){
            let links = '';
            v.links.forEach(function(l){
                if(l.href){
                    let href = l.href;
                    let body = l.body;
                    links = links + `<a href="` + href + `" target="_blank">` + body + `</a>`;
                }
            });
            html = html + `
              <li>
                <div class="cure_announcements__icon"><i class="fa fa-bookmark"></i></div>
                <div class='cure_announcements__body'>
                  <p>` + v.body +`</p>
                  <div class='links'>
                    ` + links + `
                  </div>
                </div>
              </li>`
        });
        return html;
    }
    function setAnnauncement(annoucementHTML) {
        const divElement = document.createElement('div');
        divElement.className = 'cure_announcements';
        divElement.innerHTML = '<div class="compose__extra__header"><i class="fa fa-link"></i>おしらせ＆関連リンク<button class="compose__extra__header__icon"><i class="fa fa-caret-down cure_announcement_icon"></i></button></div><ul class="cure_announcements_ul">' + annoucementHTML + '</ul>';
        divElement.querySelector('.compose__extra__header__icon').addEventListener('click', onToggle);

        const drawer = document.querySelector('.drawer__inner');
        let beforElement;
        if (!drawer) {
            const panel = document.querySelector('.compose-panel');
            if (!panel) return;
            beforElement = '.link-footer'
            panel.insertBefore(divElement, document.querySelector(beforElement));
        }else{
            beforElement = '.drawer__inner__mastodon'
            drawer.insertBefore(divElement, document.querySelector(beforElement));
        };
    }
    function onToggle() {
        let announcement = document.querySelector('.cure_announcements_ul');
        if (announcement.style.display == 'none'){
            announcement.style.display = 'block';
            document.querySelector('.cure_announcement_icon').classList.remove('fa-caret-left');
            document.querySelector('.cure_announcement_icon').classList.add('fa-caret-down');
        }else{
            announcement.style.display = 'none';
            document.querySelector('.cure_announcement_icon').classList.remove('fa-caret-down');
            document.querySelector('.cure_announcement_icon').classList.add('fa-caret-left');
        }
    }
    function getColor() {
        let search = document.querySelector('.search__input');
        let header = document.querySelector('.column-header');
        mainColor = window.getComputedStyle(search, null).getPropertyValue('background-color');
        textColor = window.getComputedStyle(search, null).getPropertyValue('color');
        boaderColor = window.getComputedStyle(search, null).getPropertyValue('boader');
        whiteColor = window.getComputedStyle(header, null).getPropertyValue('background-color');
    }
    window.onload = function () {
        getColor();
        setCSS();
        let html = createAnnoucementHTML();
        setAnnauncement(html);
    };
})();