Last active
June 27, 2025 05:10
-
-
Save Blumed/33c2faea5d7cdb727bc9c57a35d5bb8c to your computer and use it in GitHub Desktop.
Bookmarklet Utilities Functions: unique name, create svg element, create element
This file contains hidden or 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 customElement = (tag, props = {}) => { | |
| const element = document.createElement(tag); | |
| if (props.id) element.id = props.id; | |
| if (props.className) element.classList.add(props.className); | |
| if (props.style) Object.assign(element.style, props.style); | |
| if (props.text) element.textContent = props.text; | |
| if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) { | |
| element.setAttribute(key, value); | |
| } | |
| if (props.events) for (const [event, handler] of Object.entries(props.events)) { | |
| element.addEventListener(event, handler); | |
| } | |
| if (!props.container) { | |
| document.body.appendChild(element); | |
| return; | |
| } | |
| const items = document.querySelectorAll(props.container.target); | |
| if (items.length === 0) { | |
| console.log(`No elements found using target: ${props.container.target}`); | |
| return; | |
| } | |
| switch (props.container.position) { | |
| case 'before': | |
| for (const item of items) { | |
| item.prepend(element.cloneNode(true)); | |
| } | |
| break; | |
| case 'insert': | |
| for (const item of items) { | |
| item.appendChild(element.cloneNode(true)); | |
| } | |
| break; | |
| case 'after': | |
| for (const item of items) { | |
| item.append(element.cloneNode(true)); | |
| } | |
| break; | |
| default: | |
| console.log(`Position ${props.container.position} not found. Use before, insert, or after`); | |
| } | |
| }; | |
| /* | |
| Function for templating html elements ( ! This is a work in progress ! ) | |
| Example: | |
| customElement('h1', { | |
| id: 'i-have-an-id-officer', | |
| className: 'best-in-class', | |
| style: { backgroundColor: 'red' }, | |
| text: 'This is some TEXT!', | |
| attributes: { 'data-or-dada': 'data' }, | |
| container: { | |
| target: 'body', | |
| position: 'insert' | |
| } | |
| }); | |
| Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1> | |
| */ |
This file contains hidden or 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 svgIcon = (props = {}) => { | |
| const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | |
| svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); | |
| svg.setAttribute('width', `${props.width ?? '24'}`); | |
| svg.setAttribute('height', `${props.height ?? '24'}`); | |
| svg.setAttribute('viewBox', `${props.viewBox ?? '0 -960 960 960'}`); | |
| const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| svgPath.setAttribute('d', `${props.path ?? 'M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z'}`); | |
| svgPath.setAttribute('fill', `${props.fill ?? '#000'}`); | |
| svg.appendChild(svgPath); | |
| if (!props.container) { | |
| document.body.appendChild(svg); | |
| return; | |
| } | |
| const target = document.querySelector(props.container.target); | |
| switch (props.container.position) { | |
| case 'before': | |
| target.prepend(svg); | |
| break; | |
| case 'insert': | |
| target.appendChild(svg); | |
| break; | |
| case 'after': | |
| target.append(svg); | |
| break; | |
| default: | |
| console.log(`Position ${props.container.position} not found. Use before, insert, or after`); | |
| } | |
| }; | |
| /* | |
| Create a basic flexible svg and position in it where you need it | |
| Example: | |
| svgIcon({ | |
| fill: 'blue', | |
| path: 'M410-120v-238L204-239l-70-121 206-120-206-119 70-121 206 119v-239h140v239l206-119 70 121-206 119 206 120-70 121-206-119v238H410Z', | |
| container: { | |
| target: 'body', | |
| position: 'insert' | |
| } | |
| }); | |
| Output -> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#fff"></path></svg> | |
| */ |
This file contains hidden or 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 uniqueName = (name) => `b00k_${name}`; | |
| /* | |
| Creates a unique name which will most likely not colid with a name/label/class/id on any given webpage. | |
| If you use this function on multiple bookmarklets I would suggest using the name of the bookmarkelt before the underscore. | |
| Example: | |
| uniqueName('card'); | |
| Output -> b00k_card | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment