!media tweet sertch link helper for id

!media tweet sertch link helper for id

■ 概要
　Twitterのプロフィール ページやツイートのIDの横に、
　そのIDのツイートの検索リンクのアイコンを追加する。
　追加されるリンク アイコンは以下のフィルター2種
　　・画像 (filter:images)
　　・動画 (filter:videos)
　表示は共通で最新表示。

　ajaxによるツイートの動的読み込みのため、定期的に生成を行う。
　また、pjaxの画面遷移により、生成したリンク アイコンが残留してしいまうため、
　定期的にチェックしてIDのが一致しない場合に削除も行う。

■ 目的 (利用用途)
　例) 神絵師様方が投稿される漫画の連載・連続ツイートを一括で読もうとするとき。
　　　ハッシュタグ、もしくは作品タイトルなどのテキストをクリップ ボードにコピー。
　　　画像用のリンク アイコンをクリックし、 更に検索条件にペーストし再検索。
　　　読みたい画像ツイートのみが検索でき、一括で読める。

userscript.js

// ==UserScript==
// @name         media tweet sertch link helper for id
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

   // Your code here...
   const BASE_TGT_SELECTOR_LIST = [
       // account page.
       'main div[data-testid="primaryColumn"] div.r-15d164r.r-1g94qm0 div.r-18u37iz.r-1wbh5a2',
       // tweets.
       'main div[data-testid="primaryColumn"] article div[data-testid=tweet] div.css-1dbjc4n.r-18u37iz.r-1wbh5a2',
       // recommended users
       'main div[data-testid="primaryColumn"] section div[data-testid="UserCell"]',
    ];
    const STYLE_CLASS_SEARCH_VALIDATE_ID = 'searchValidateId';
    const STYLE_CLASS_SEARCH_LINK_CONTENTS = 'searchLinkContents';
    const ELM_DATA_SEARCH_VALIDATE_ID = 'data-search_validate_id';

    let createImageSearchUrl = function(twId, appendQueryTextList){
        let url = '/search?f=live';
        let queryTextSrc = 'from:' + twId;
        let queryTextEnc;
        Array.prototype.forEach.call(appendQueryTextList, function(q){
            queryTextSrc += ' ' + q;
        });
        queryTextSrc += ' ';
        queryTextEnc = encodeURIComponent(queryTextSrc);
        url += '&q=' + queryTextEnc;
        return url;
    };

    let createSpan = function(text, href, classList){
        let span = document.createElement('span');
        Array.prototype.forEach.call(classList, function(styleClass){
            span.classList.add(styleClass);
        });
        if(href) {
            let a = document.createElement('a');
            a.href = href;
            //a.target = '_blank';
            a.text = text;
            // font
            a.classList.add('r-gwet1z');
            // color
            [
                // bllue
                'r-1n1174f',
                // yellow
                'r-daml9f',
                // red
                'r-61mi1v',
                // purple
                'r-1n1174f',
                // orange
                'r-1qkqhnw',
                // green
                'r-nw8l94',
            ].forEach(function(style){
                a.classList.add(style);
            });
            // underline
            a.classList.add('css-4rbku5');

            // add underline when a:hover.
            a.addEventListener('mouseover', function(e) {
                a.style.textDecorationLine = 'underline';
            }, false);
            a.addEventListener('mouseout', function(e) {
                a.style.textDecorationLine = '';
            }, false);
            span.appendChild(a);
        } else {
            span.text = text;
        }
        return span;
    };

    let createFunc = function() {
        let list = [];

        Array.prototype.forEach.call(BASE_TGT_SELECTOR_LIST, function(baseSelector){
            let selector = baseSelector;
            selector += ' div[dir="ltr"]:not([' + ELM_DATA_SEARCH_VALIDATE_ID + '])';
            selector += ' span:not([title])';
            document.querySelectorAll(selector).forEach(function(elm){
                list.push(elm);
            });
        });

        Array.prototype.forEach.call(list, function(e){
            let twidSpan = e;
            let parentNode = e.parentNode;
            let twId = twidSpan.innerText

            let createLinsSpan = function(displayText, queryTextList, styleClassList) {
                let href = createImageSearchUrl(twId, queryTextList);
                let span = createSpan(displayText, href, styleClassList);
                return span;
            };

            // create link element.
            parentNode.appendChild(createLinsSpan('🖼️', ['filter:images'], ['r-zso239', STYLE_CLASS_SEARCH_LINK_CONTENTS, 'searchLinkImages']));
            parentNode.appendChild(createLinsSpan('🎥', ['filter:videos'], ['r-zso239', STYLE_CLASS_SEARCH_LINK_CONTENTS, 'searchLinkVideos']));

            // right pad.
            twidSpan.classList.add('r-zso239');

            // searched mark.
            twidSpan.classList.add(STYLE_CLASS_SEARCH_VALIDATE_ID);
            parentNode.setAttribute(ELM_DATA_SEARCH_VALIDATE_ID, twId);
        });
    }

    let validateFunc = function() {
        let list = [];

        Array.prototype.forEach.call(BASE_TGT_SELECTOR_LIST, function(baseSelector){
            let selector = baseSelector;
            selector += ' div[dir="ltr"][' + ELM_DATA_SEARCH_VALIDATE_ID + ']';
            selector += ' span:not([title]).' + STYLE_CLASS_SEARCH_VALIDATE_ID;
            document.querySelectorAll(selector).forEach(function(elm){
                list.push(elm);
            });
        });

        Array.prototype.forEach.call(list, function(e){
            let twidSpan = e;
            let parentNode = e.parentNode;
            let currentTwId = twidSpan.innerText

            let validateTwId = parentNode.getAttribute(ELM_DATA_SEARCH_VALIDATE_ID);

            if(currentTwId != validateTwId) {
                console.log('currentTwId=' + currentTwId + '');
                console.log('validateTwId=' + validateTwId + '');

                parentNode.querySelectorAll('span.' + STYLE_CLASS_SEARCH_LINK_CONTENTS).forEach(function (span){
                    span.parentNode.removeChild(span);
                });

                twidSpan.classList.remove(STYLE_CLASS_SEARCH_VALIDATE_ID);
                parentNode.removeAttribute(ELM_DATA_SEARCH_VALIDATE_ID);
                console.log('removed serch id.');
            }
        });
    };


    document.debugCreateSearchLnk = createFunc;
    document.debugValidateSearchLnk = validateFunc;

    //setInterval(createFunc, 1000);
    //setInterval(validateFunc, 1000);
    setInterval(function() {
        validateFunc();
        createFunc();
    }, 1000);
})();