Raw Source Toggle Dropdown

• Minified Source

joep / TikTokFastAnswers

// ==UserScript==
// @name TikTokFastAnswers
// @description Click to copy answers from object
// @version 1.6
// @author JoeP
// @license MIT
// @include *
// @icon 
// @run-at document-end
// @match https://www.tiktok.com/*
// @grant none
// ==/UserScript==

window.history.pushState = new Proxy(window.history.pushState, {
    apply: (target, thisArg, argArray) => {
        initAnswers(argArray[2]);
        return target.apply(thisArg, argArray);
    },
});

window.addEventListener("popstate", (event) => {
  initAnswers(document.location.href);
});

(function () {
  'use strict';
  initAnswers(window.location.href);
})();

function initAnswers(url) {
    console.log('11111111: ', url);
    if (url.includes('/messages')) {
        const answers = [
            {
                title: 'Lorem ipsum dolor sit amet',
                answer:
                '1 Lorem ipsum dolor sit amet, \n\nprimis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'mediocrem, tota sanctus sit et',
                answer:
                '2 Lorem ipsum dolor sit amet, primis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'Lorem ipsum dolor sit amet',
                answer:
                '3 Lorem ipsum dolor sit amet, primis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'mediocrem, tota sanctus sit et',
                answer:
                'Lorem ipsum dolor sit amet, primis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'mediocrem, tota sanctus sit et',
                answer:
                'Lorem ipsum dolor sit amet, primis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'mediocrem, tota sanctus sit et',
                answer:
                'Lorem ipsum dolor sit amet, primis civibus scaevola qui eu. Per ad accusam efficiantur, eius ornatus ei his, mea ex tation dolorem. Alia vivendo cum id, et nec iriure intellegat. Ex dolore maluisset quaerendum eam, no usu saepe electram. Probo mnesarchum usu id, eum ad copiosae corrumpit torquatos.',
            },
            {
                title: 'mediocrem, tota sanctus sit et',
                answer: 'Ans 1',
            },
        ];
        const side = document.createElement('div');
        const sideCss = `
    <style>
    .tiktok-quick-answers {
      display: block;
      position: fixed;
      right: 0;
      top: 0;
      height: 100%;
      width: calc((100% - 1100px) / 2);
      margin-top: 75px;
    }
    .tiktok-quick-answers .title {
      font-weight: bold;
      display: block;
      user-select: none;
      cursor: pointer;
      padding: 5px 0 5px 5px;
      margin: 2px 0;
    }
    .tiktok-quick-answers .title .answer {
        display: none;
    }
    </style>
    `;
        side.classList.add('tiktok-quick-answers');

        answers.forEach((ans) => {
            side.innerHTML += `
      <div class="title">${
            ans.title.length > 0 ? ans.title : ans.answer.substring(0, 50) + '...'
        }
        <textarea class="answer">${ans.answer}</textarea>
      </div>
      `;
        });

        side.innerHTML = `
      <div class="answers-list">
      ${side.innerHTML}
      </div>
    `;

        document.body.appendChild(side);
        document.body.insertAdjacentHTML('afterbegin', sideCss);

        const textbox = document.querySelector(
            '#main-content-messages div[contenteditable="true"][role="textbox"] div[data-contents="true"] br[data-text="true"]'
        );
        document.querySelectorAll('.tiktok-quick-answers .title').forEach((q) => {
            q.addEventListener('click', (e) => {
                // textbox.innerText = q.querySelector('.answer').innerText;
                navigator.clipboard.writeText(q.querySelector('.answer').value);

                // const textboxWrapper = textbox.parentElement;
                // textboxWrapper.innerHTML = textboxWrapper.innerHTML.replace('br', 'span');
                // textboxWrapper.querySelector('span').innerText = q.querySelector('.answer').value;
            });
        });
    } else {
        document.querySelector('.tiktok-quick-answers')?.remove();
    }
}