From 63cd1a50c4ef5b1c01c021696ef8bcbf9c49ea5d Mon Sep 17 00:00:00 2001 From: portseif Date: Wed, 8 Mar 2023 13:06:36 -0500 Subject: [PATCH 1/4] Update stu-element-copy-id.js Refactored previous code to handle active class --- stu-element-copy-id.js | 121 ++++++++++++++++++++++------------------- 1 file changed, 64 insertions(+), 57 deletions(-) diff --git a/stu-element-copy-id.js b/stu-element-copy-id.js index e65fcce..af02a6f 100644 --- a/stu-element-copy-id.js +++ b/stu-element-copy-id.js @@ -1,58 +1,65 @@ -function stuElementCopyId() { - const copyIcon = ''; - - const span = document.createElement('span'); - span.setAttribute('class', 'bricks-svg-wrapper stu-copy'); - span.setAttribute('data-balloon', 'Copy (Element ID)'); - span.setAttribute('data-balloon-pos', 'top-right'); - span.innerHTML = copyIcon; - - const style = document.createElement('style'); - style.innerHTML = ` - #bricks-panel-element-classes .active-class .actions .stu-copy { - visibility: hidden; - } - #bricks-panel-element-classes .active-class:hover .actions .stu-copy { - visibility: visible; - } - `; - document.head.appendChild(style); - - const targetNode = document.getElementById('bricks-panel'), - config = {childList: true, subtree: true}, - callback = (mutationList, observer) => { - for (const mutation of mutationList) { - - // If changing element being edited - if (mutation.target.id == 'bricks-panel-element' || - // If going from settings panel or element picker to editing element - mutation.addedNodes.length !== 0 && mutation.addedNodes[0].id === 'bricks-panel-element') { - - const activeClass = document.querySelector('#bricks-panel-element-classes .active-class'), - placeholder = activeClass.querySelector('input').getAttribute('placeholder'), - bricksCanvas = document.getElementById('bricks-builder-iframe').contentWindow.document, - dataId = bricksCanvas.querySelector(placeholder) ? bricksCanvas.querySelector(placeholder).getAttribute('data-id') : null, - actionsContainer = activeClass.querySelector('div.actions'); - - actionsContainer.prepend(span); - - const copy = actionsContainer.querySelector('span.stu-copy'); - - copy.addEventListener('click', function(e) { - e.stopPropagation(); - navigator.clipboard.writeText(placeholder); - // navigator.clipboard.writeText(dataId); - }); - - } - } - }; - - const observer = new MutationObserver(callback); - - observer.observe(targetNode, config); -} - -document.addEventListener('DOMContentLoaded', function() { - stuElementCopyId(); +document.addEventListener('DOMContentLoaded', () => { + stuElementCopyElement(); }); + +function stuElementCopyElement() { + const copyIdIcon = ''; + const copyClassIcon = ''; + + const { querySelector } = document; + const { contentWindow } = document.getElementById('bricks-builder-iframe'); + + const spanId = document.createElement('span'); + spanId.setAttribute('class', 'bricks-svg-wrapper stu-copy-id'); + spanId.setAttribute('data-balloon', 'Copy (Element ID)'); + spanId.setAttribute('data-balloon-pos', 'top-right'); + spanId.innerHTML = copyIdIcon; + + const spanClass = document.createElement('span'); + spanClass.setAttribute('class', 'bricks-svg-wrapper stu-copy-class'); + spanClass.setAttribute('data-balloon', 'Copy (Element Class)'); + spanClass.setAttribute('data-balloon-pos', 'top-right'); + spanClass.innerHTML = copyClassIcon; + + document.head.appendChild(document.createElement('style')).innerHTML = ` + #bricks-panel-element-classes .active-class .actions :is(.stu-copy-id, .stu-copy-class) { + visibility: hidden; + } + #bricks-panel-element-classes .active-class:hover .actions :is(.stu-copy-id, .stu-copy-class) { + visibility: visible; + } + `; + + const targetNode = document.querySelector('#bricks-panel'); + const config = { childList: true, subtree: true }; + + const callback = (mutationList, observer) => { + for (const mutation of mutationList) { + if (mutation.target.id === 'bricks-panel-element' || (mutation.addedNodes.length > 0 && mutation.addedNodes[0].id === 'bricks-panel-element')) { + const activeClass = document.querySelector('#bricks-panel-element-classes .active-class'); + const placeholder = activeClass.querySelector('input').getAttribute('placeholder'); + const bricksCanvas = contentWindow.document; + const dataId = bricksCanvas.querySelector(placeholder) ? bricksCanvas.querySelector(placeholder).getAttribute('data-id') : null; + const actionsContainer = activeClass.querySelector('div.actions'); + const elementClassName = document.querySelector('#bricks-panel-element-classes .element-classes .element-class.active > .name')?.innerText ?? null; + + actionsContainer.prepend(spanId, spanClass); + + const copyId = actionsContainer.querySelector('span.stu-copy-id'); + copyId.addEventListener('click', (e) => { + e.stopPropagation(); + navigator.clipboard.writeText(placeholder); + }); + + const copyClass = actionsContainer.querySelector('span.stu-copy-class'); + copyClass.addEventListener('click', (e) => { + e.stopPropagation(); + navigator.clipboard.writeText(elementClass); + }); + } + } + }; + + const observer = new MutationObserver(callback); + observer.observe(targetNode, config); +} From 78335c8a66ca5bcd245eb0ba3ed31dcc3f0973f4 Mon Sep 17 00:00:00 2001 From: portseif Date: Wed, 8 Mar 2023 13:07:53 -0500 Subject: [PATCH 2/4] Update stu-element-copy-id.js --- stu-element-copy-id.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stu-element-copy-id.js b/stu-element-copy-id.js index af02a6f..812a5d8 100644 --- a/stu-element-copy-id.js +++ b/stu-element-copy-id.js @@ -1,5 +1,5 @@ document.addEventListener('DOMContentLoaded', () => { - stuElementCopyElement(); + stuElementCopyElement(); }); function stuElementCopyElement() { From 5facee8ee41561153f3752f5cd58033876db843d Mon Sep 17 00:00:00 2001 From: portseif Date: Thu, 23 Mar 2023 18:35:58 -0400 Subject: [PATCH 3/4] Update stu-element-copy-id.js typo on line #44 elementClassName => elementClass --- stu-element-copy-id.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stu-element-copy-id.js b/stu-element-copy-id.js index 812a5d8..a9d2510 100644 --- a/stu-element-copy-id.js +++ b/stu-element-copy-id.js @@ -41,7 +41,7 @@ function stuElementCopyElement() { const bricksCanvas = contentWindow.document; const dataId = bricksCanvas.querySelector(placeholder) ? bricksCanvas.querySelector(placeholder).getAttribute('data-id') : null; const actionsContainer = activeClass.querySelector('div.actions'); - const elementClassName = document.querySelector('#bricks-panel-element-classes .element-classes .element-class.active > .name')?.innerText ?? null; + const elementClass = document.querySelector('#bricks-panel-element-classes .element-classes .element-class.active > .name')?.innerText ?? null; actionsContainer.prepend(spanId, spanClass); From f345a73f7cf55abfdae9329a2d4d68587d5aebe1 Mon Sep 17 00:00:00 2001 From: portseif Date: Fri, 24 Mar 2023 15:57:17 -0400 Subject: [PATCH 4/4] Update stu-element-copy-id.js * Added comments for organization and clarity * Refactored the copy class icon to only show if a class is selected --- stu-element-copy-id.js | 107 +++++++++++++++++++++++------------------ 1 file changed, 59 insertions(+), 48 deletions(-) diff --git a/stu-element-copy-id.js b/stu-element-copy-id.js index a9d2510..e389f1d 100644 --- a/stu-element-copy-id.js +++ b/stu-element-copy-id.js @@ -1,65 +1,76 @@ document.addEventListener('DOMContentLoaded', () => { - stuElementCopyElement(); + stuElementCopyElement(); }); function stuElementCopyElement() { - const copyIdIcon = ''; - const copyClassIcon = ''; + const copyIdIcon = ''; + const copyClassIcon = ''; - const { querySelector } = document; - const { contentWindow } = document.getElementById('bricks-builder-iframe'); + // Destructuring for efficient future use + const { querySelector } = document; + const { contentWindow } = document.getElementById('bricks-builder-iframe'); - const spanId = document.createElement('span'); - spanId.setAttribute('class', 'bricks-svg-wrapper stu-copy-id'); - spanId.setAttribute('data-balloon', 'Copy (Element ID)'); - spanId.setAttribute('data-balloon-pos', 'top-right'); - spanId.innerHTML = copyIdIcon; + // Create copy id icon + const spanId = document.createElement('span'); + spanId.setAttribute('class', 'bricks-svg-wrapper stu-copy-id'); + spanId.setAttribute('data-balloon', 'Copy (Element ID)'); + spanId.setAttribute('data-balloon-pos', 'top-right'); + spanId.innerHTML = copyIdIcon; - const spanClass = document.createElement('span'); - spanClass.setAttribute('class', 'bricks-svg-wrapper stu-copy-class'); - spanClass.setAttribute('data-balloon', 'Copy (Element Class)'); - spanClass.setAttribute('data-balloon-pos', 'top-right'); - spanClass.innerHTML = copyClassIcon; + // Create copy class icon + const spanClass = document.createElement('span'); + spanClass.setAttribute('class', 'bricks-svg-wrapper stu-copy-class'); + spanClass.setAttribute('data-balloon', 'Copy (Element Class)'); + spanClass.setAttribute('data-balloon-pos', 'top-right'); + spanClass.innerHTML = copyClassIcon; - document.head.appendChild(document.createElement('style')).innerHTML = ` - #bricks-panel-element-classes .active-class .actions :is(.stu-copy-id, .stu-copy-class) { - visibility: hidden; - } - #bricks-panel-element-classes .active-class:hover .actions :is(.stu-copy-id, .stu-copy-class) { - visibility: visible; - } - `; + // Create style tag and append to head + document.head.appendChild(document.createElement('style')).innerHTML = ` + #bricks-panel-element-classes .active-class .actions :is(.stu-copy-id, .stu-copy-class) { + visibility: hidden; + } + #bricks-panel-element-classes .active-class:hover .actions :is(.stu-copy-id, .stu-copy-class) { + visibility: visible; + } + `; - const targetNode = document.querySelector('#bricks-panel'); - const config = { childList: true, subtree: true }; + // MutationObserver declarations + const targetNode = document.querySelector('#bricks-panel'); + const config = { childList: true, subtree: true }; - const callback = (mutationList, observer) => { - for (const mutation of mutationList) { - if (mutation.target.id === 'bricks-panel-element' || (mutation.addedNodes.length > 0 && mutation.addedNodes[0].id === 'bricks-panel-element')) { - const activeClass = document.querySelector('#bricks-panel-element-classes .active-class'); - const placeholder = activeClass.querySelector('input').getAttribute('placeholder'); - const bricksCanvas = contentWindow.document; - const dataId = bricksCanvas.querySelector(placeholder) ? bricksCanvas.querySelector(placeholder).getAttribute('data-id') : null; - const actionsContainer = activeClass.querySelector('div.actions'); - const elementClass = document.querySelector('#bricks-panel-element-classes .element-classes .element-class.active > .name')?.innerText ?? null; + // Callback function to detect DOM changes within #bricks-panel + const callback = (mutationList, observer) => { + for (const mutation of mutationList) { + if (mutation.target.id === 'bricks-panel-element' || (mutation.addedNodes.length > 0 && mutation.addedNodes[0].id === 'bricks-panel-element')) { + const activeClass = document.querySelector('#bricks-panel-element-classes .active-class'); + const placeholder = activeClass.querySelector('input').getAttribute('placeholder'); + const bricksCanvas = contentWindow.document; + const dataId = bricksCanvas.querySelector(placeholder) ? bricksCanvas.querySelector(placeholder).getAttribute('data-id') : null; + const actionsContainer = activeClass.querySelector('div.actions'); + const elementClass = document.querySelector('#bricks-panel-element-classes .element-classes .element-class.active > .name')?.innerText ?? null; - actionsContainer.prepend(spanId, spanClass); + if (elementClass) { + actionsContainer.prepend(spanId, spanClass); - const copyId = actionsContainer.querySelector('span.stu-copy-id'); - copyId.addEventListener('click', (e) => { - e.stopPropagation(); - navigator.clipboard.writeText(placeholder); - }); + const copyClass = actionsContainer.querySelector('span.stu-copy-class'); + copyClass.addEventListener('click', (e) => { + e.stopPropagation(); + navigator.clipboard.writeText(elementClass); + }); + } else { + actionsContainer.prepend(spanId); - const copyClass = actionsContainer.querySelector('span.stu-copy-class'); - copyClass.addEventListener('click', (e) => { - e.stopPropagation(); - navigator.clipboard.writeText(elementClass); - }); + const copyId = actionsContainer.querySelector('span.stu-copy-id'); + copyId.addEventListener('click', (e) => { + e.stopPropagation(); + navigator.clipboard.writeText(placeholder); + }); + } + } } - } }; - const observer = new MutationObserver(callback); - observer.observe(targetNode, config); + // Create the MutationObserver object and monitor changes within #bricks-panel + const observer = new MutationObserver(callback); + observer.observe(targetNode, config); }