Skip to content

Instantly share code, notes, and snippets.

@amcolash

amcolash/index.js

Created August 7, 2021 20:21
Show Gist options
  • Save amcolash/fadd04a5424e7dcf7bed0d779c28f097 to your computer and use it in GitHub Desktop.
Save amcolash/fadd04a5424e7dcf7bed0d779c28f097 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. amcolash renamed this gist Aug 7, 2021. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → index.js
    View file
    File renamed without changes.
  2. amcolash created this gist Aug 7, 2021.
    59 changes: 59 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    // ==UserScript==
    // @name SchemeColor.com Copy Button
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description copy color palette from SchemeColor
    // @author Andrew McOlash
    // @match https://www.schemecolor.com/*
    // @icon https://www.google.com/s2/favicons?domain=schemecolor.com
    // @grant GM_setClipboard
    // ==/UserScript==

    (function() {
    'use strict';

    // Code adapted from https://css-tricks.com/converting-color-spaces-in-javascript/
    function RGBToHex(r,g,b) {
    r = Number.parseInt(r).toString(16);
    g = Number.parseInt(g).toString(16);
    b = Number.parseInt(b).toString(16);

    if (r.length == 1) r = "0" + r;
    if (g.length == 1) g = "0" + g;
    if (b.length == 1) b = "0" + b;

    return "#" + r + g + b;
    }

    const colors = Array.from(document.querySelectorAll('#list .mc-block div')).map(el => {
    const rgbString = el.style.background;
    const rgb = rgbString.replace('rgb(', '').replace(')', '').split(',');
    const hex = RGBToHex(...rgb);

    return hex;
    });

    const button = document.createElement('div');
    button.className = "downloadbtn";
    button.style.cursor = 'pointer';
    button.onclick = () => GM_setClipboard(JSON.stringify(colors), 'text');

    const icon = document.createElement('img');
    // Icon made by Kiranshastry https://www.flaticon.com/
    icon.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAzAAAAMwB6wBQKQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGLSURBVEiJ1dQ9axRRFMbx35GAYAQLCaTQIo0YxVIIViIWiljELyBBsLCLlZ34BSwsLCy00SqQziq+dGlCqkAS01gIgRCbQAJ2x2LvwgR2du9sAuIDB+7LOc9/7pmZKzPVBBaxUWKxuq7SfB4rmC6xgvlTAWAOu7iMx3hSxruYG1U/oaGICNzCVFm6iUdYyMxfEfEVUcYL+BARy1gr+ftYzfJkSnIT8A1H+I2rCNzNzEMDFBHn8QWJH7iIycy808+ZaCTPFuDDMn+F/TZzyMzDiPiIqcx8Weq+R8RsZm4dA+ACDhrzs7gfEZfaAEU39L6svg6K1/ETDNAStkeYKzkbbZutgMxcx3oFYKjOnNRglFpPEBHP8bTS511mvu4EwFu8rwT8adv4dy3CMx1ahG4tKj0dWNRFw17yNVyp9NnJzM1OAFzHg0rAZ3QDZOaS3t98Ig1r0T3cHgB+cSoAvbu95i4aD/Df3EVNwE/MRMS5cc1K7UzxQqNFmbkXEZ+wExGTYzKO8CYz9/oLfwGLMxyCUAggIAAAAABJRU5ErkJggg==";
    icon.style.width = '13px';
    icon.style.height = '13px';
    icon.style.marginRight = '4px';

    const text = document.createElement('span');
    text.innerText = 'Copy';

    button.appendChild(icon);
    button.appendChild(text);

    const buttons = document.querySelector('.bar-buttons');
    buttons.style.gridTemplateColumns = '1fr 1fr 1fr';
    buttons.appendChild(button);

    console.log(colors);
    })();