Skip to content

Instantly share code, notes, and snippets.

@Blumed

Blumed/basic-example.js

Last active May 9, 2024 05:03
Show Gist options
  • Save Blumed/17b22de251fbb4aa9c188811c73d90b2 to your computer and use it in GitHub Desktop.
Save Blumed/17b22de251fbb4aa9c188811c73d90b2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Blumed revised this gist May 9, 2024. No changes.
  2. Blumed revised this gist May 9, 2024. No changes.
  3. Blumed revised this gist May 9, 2024. No changes.
  4. Blumed revised this gist May 9, 2024. 2 changed files with 104 additions and 0 deletions.
    104 changes: 104 additions & 0 deletions basic-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    const container = document.createElement('dialog');

    function createDialog() {
    const close = document.createElement('button');

    container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');

    close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0 0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
    close.textContent = 'x';
    close.onclick = () => container.remove();

    document.body.appendChild(container);
    container.appendChild(close);

    plainText("I am some plain text and I love getting copied", "plainText1");
    plainText("Here is another example!", "plainText2");

    container.showModal();
    }

    function plainText(textToCopy, id) {
    const text = document.createElement('p');
    const copyText = document.createElement('button');

    text.textContent = textToCopy;
    text.id = id;

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
    copyText.onclick = () => copyStuff(text.id);

    container.appendChild(text);
    container.appendChild(copyText);
    }

    // Helper function for copying text if id of element is provided
    function copyStuff(id) {
    const copyTarget = document.getElementById(id).textContent;
    return navigator.clipboard.writeText(copyTarget);
    }

    createDialog();

    const container = document.createElement('dialog');

    function createDialog() {
    const close = document.createElement('button');

    container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');

    close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0 0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
    close.textContent = 'x';
    close.onclick = () => container.remove();

    document.body.appendChild(container);
    container.appendChild(close);

    plainText("I am some plain text and I love getting copied", "plainText1");
    plainText("Here is another example!", "plainText2");
    littleNotePad();

    container.showModal();
    }

    function plainText(textToCopy, id) {
    const text = document.createElement('p');
    const copyText = document.createElement('button');

    text.textContent = textToCopy;
    text.id = id;

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
    copyText.onclick = () => copyStuff(true,text.id);

    container.appendChild(text);
    container.appendChild(copyText);
    }

    function littleNotePad() {
    const text = document.createElement('textarea');
    const copyText = document.createElement('button');

    text.id = "textareaId";
    text.setAttribute("placeholder", "I am lil notepad");

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
    copyText.onclick = () => copyStuff(false,text.id);

    container.appendChild(text);
    container.appendChild(copyText);
    }

    // Helper function for copying text if id of element is provided
    function copyStuff(plainText, id) {
    const copyTarget = plainText ? document.getElementById(id).textContent : document.getElementById(id).value;
    return navigator.clipboard.writeText(copyTarget);
    }

    createDialog();
    0 example.js → extra-fun-example.js
    View file
    File renamed without changes.
  5. Blumed revised this gist May 9, 2024. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,6 @@ function createDialog() {
    container.showModal();
    }

    //This creates a p tag with some text plus a button lets the helper function know if it is plain text and what the id is so it can target it and grab the text.
    function plainText(textToCopy, id) {
    const text = document.createElement('p');
    const copyText = document.createElement('button');
    @@ -36,12 +35,12 @@ function plainText(textToCopy, id) {
    container.appendChild(copyText);
    }

    //Just a fun idea not what you were looking for but fun none the less
    function littleNotePad() {
    const text = document.createElement('textarea');
    const copyText = document.createElement('button');

    text.id = "textareaId";
    text.setAttribute("placeholder", "I am lil notepad");

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    @@ -54,7 +53,6 @@ function littleNotePad() {

    // Helper function for copying text if id of element is provided
    function copyStuff(plainText, id) {
    // The target can be just text or pull the value from textarea element
    const copyTarget = plainText ? document.getElementById(id).textContent : document.getElementById(id).value;
    return navigator.clipboard.writeText(copyTarget);
    }
  6. Blumed created this gist May 9, 2024.
    62 changes: 62 additions & 0 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    const container = document.createElement('dialog');

    function createDialog() {
    const close = document.createElement('button');

    container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');

    close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0 0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
    close.textContent = 'x';
    close.onclick = () => container.remove();

    document.body.appendChild(container);
    container.appendChild(close);

    plainText("I am some plain text and I love getting copied", "plainText1");
    plainText("Here is another example!", "plainText2");
    littleNotePad();

    container.showModal();
    }

    //This creates a p tag with some text plus a button lets the helper function know if it is plain text and what the id is so it can target it and grab the text.
    function plainText(textToCopy, id) {
    const text = document.createElement('p');
    const copyText = document.createElement('button');

    text.textContent = textToCopy;
    text.id = id;

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
    copyText.onclick = () => copyStuff(true,text.id);

    container.appendChild(text);
    container.appendChild(copyText);
    }

    //Just a fun idea not what you were looking for but fun none the less
    function littleNotePad() {
    const text = document.createElement('textarea');
    const copyText = document.createElement('button');

    text.id = "textareaId";

    copyText.type = "button";
    copyText.textContent = "Copy Plain Text";
    copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
    copyText.onclick = () => copyStuff(false,text.id);

    container.appendChild(text);
    container.appendChild(copyText);
    }

    // Helper function for copying text if id of element is provided
    function copyStuff(plainText, id) {
    // The target can be just text or pull the value from textarea element
    const copyTarget = plainText ? document.getElementById(id).textContent : document.getElementById(id).value;
    return navigator.clipboard.writeText(copyTarget);
    }

    createDialog();