ExtendedSteamGuideTools.user.js

// ==UserScript==
// @name         Extended Steam Guide Tools
// @namespace    http://tampermonkey.net/
// @version      0.1.3
// @description  Adds extra functionalities to Steam Guides.
// @author       lylat
// @match        https://steamcommunity.com/sharedfiles/editguidesubsection/?*
// @icon         https://cdn.discordapp.com/avatars/749437490883985499/7c4053deed909ec48be2656da4b12b76.png
// @grant        none
// ==/UserScript==

(() =>
{
    'use strict';
	if (document.documentURI.includes('https://steamcommunity.com/sharedfiles/editguidesubsection'))
	{
        const btnTable = document.createElement('a');
        btnTable.innerHTML = '<span>Table</span>';
        btnTable.classList.add('btn_grey_black', 'btn_small_thin');
        document.querySelector('.editGuideSubSectionControls').appendChild(btnTable);

        const customTableBtn = document.createElement('a');
        customTableBtn.innerHTML = '<span>Custom Table</span>';
        customTableBtn.classList.add('btn_grey_black', 'btn_small_thin');
        customTableBtn.id = 'customTableBtn';
        customTableBtn.style.marginLeft = '4px';
        document.querySelector('.editGuideSubSectionControls').appendChild(customTableBtn);

        const btnCode = document.createElement('a');
        btnCode.innerHTML = '<span>Code</span>';
        btnCode.classList.add('btn_grey_black', 'btn_small_thin')
        btnCode.style.marginLeft = '4px';
        document.querySelector('.editGuideSubSectionControls').appendChild(btnCode);

        btnTable.addEventListener('click', () =>
        {
            g_textarea.wrapSelection('[table][tr][td]','[/td][/tr][/table]');
        })

        customTableBtn.addEventListener('click', () =>
        {
            const y = prompt('height');
            if(!y) return;
            if(isNaN(y) || y > 100) return alert('invalid height value');
            const x = prompt('width');
            if(!x) return;
            if(isNaN(x) || x > 100) return alert('invalid width value');
            const table = [];

            for(let i = 0; i < y; i++)
            {
                table.push('[tr]');
                for(let j = 0; j < x; j++) table.push(i === 0 ? `[th]CONTENT[/th]` : `[td]CONTENT[/td]`);
                table.push('[/tr]');
            }
            g_textarea.replaceSelection(['[table]'].concat(table, ['[/table]']).join('\n'));
        })

        btnCode.addEventListener('click', ()=>
        {
            g_textarea.wrapSelection('[code]','[/code]');
        })

        const searchBar = document.createElement('input');
        searchBar.placeholder = 'Search image...'
        document.querySelector('.editGuideSubSectionMediaSelections').appendChild(searchBar);

        searchBar.addEventListener('keyup', ()=>
        {
            const imgs = document.getElementById('PreviewImages').getElementsByTagName('img');
            for (const i of imgs) i.style.display = i.title.toUpperCase().includes(searchBar.value.toUpperCase().trim()) ? '' : 'none';
        })
    }
})();