// ==UserScript==
// @name         Twitter Engagement Button
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  ツイートの下にエンゲージメント画面に飛ぶリンクを追加します｡結構自分用｡
// @author       sambaquiz
// @match        https://twitter.com/*
// @match        https://mobile.twitter.com/*
// @match        https://pbs.twimg.com/media/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @license      MIT
// @grant        none
// @downloadURL none
// ==/UserScript==

const EB = (function() {
    'use strict';

    return {
        inject: function (article) {
            if (article.getAttribute('data-testid') === 'tweet') {
                let wrapper = document.createElement('div');
                wrapper.style.marginTop = '10px';

                const username = article.querySelector('a[href*="/status/"]').href.split('/')[3];
                const statusId = article.querySelector('a[href*="/status/"]').href.split('/status/').pop().split('/').shift();

                let engagementButton = document.createElement('a');
                engagementButton.className = 'engagementButton r-a023e6 css-18t94o4';
                engagementButton.href = `/${username}/status/${statusId}/quotes`;
                engagementButton.target= '_blank';
                engagementButton.style.color = 'inherit';
                engagementButton.style.textDecoration = 'none';
                engagementButton.style.marginLeft = '5px';
                engagementButton.textContent = `エンゲージメント確認`;

                let svg = document.createElement('svg');
                svg.style.float = 'left';
                svg.innerHTML = `
                <svg viewBox="0 0 24 24" aria-hidden="true" class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-1q142lx r-1xvli5t r-dnmrzs r-bnwqim r-lrvibr">
                        <g>
                            <path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path>
                        </g>
                </svg>
                `;
                engagementButton.appendChild(svg);
                wrapper.appendChild(engagementButton);

                const element = article.querySelector('div[data-testid="reply"]');
                element.parentElement.parentElement.parentElement.appendChild(wrapper);

            }

            article.dataset.EBinjected = 'true';
        }
    }
})();

(function () {
  const callback = ms => ms.forEach(m => m.addedNodes.forEach(node => {
    const article = node.tagName == 'ARTICLE' && node || node.tagName == 'DIV' && (node.querySelector('article') || node.closest('article'));
    if (article && !article.dataset.EBinjected) EB.inject(article);
  }));

  const observer = new MutationObserver(callback)
  observer.observe(document.body, {childList: true, subtree: true});
})();