Last active
May 9, 2024 05:03
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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