Skip to content

Instantly share code, notes, and snippets.

@Blumed
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.
bookmarklet: modal with buttons for copying text. I added another file to show how you can iterate and build off your idea's
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();
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment