diff --git a/stu-element-copy-id.js b/stu-element-copy-id.js
index e65fcce..e389f1d 100644
--- a/stu-element-copy-id.js
+++ b/stu-element-copy-id.js
@@ -1,58 +1,76 @@
-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 = '';
+
+ // Destructuring for efficient future use
+ const { querySelector } = document;
+ const { contentWindow } = document.getElementById('bricks-builder-iframe');
+
+ // 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;
+
+ // 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;
+
+ // 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;
+ }
+ `;
+
+ // MutationObserver declarations
+ const targetNode = document.querySelector('#bricks-panel');
+ const config = { childList: true, subtree: true };
+
+ // 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;
+
+ if (elementClass) {
+ actionsContainer.prepend(spanId, spanClass);
+
+ const copyClass = actionsContainer.querySelector('span.stu-copy-class');
+ copyClass.addEventListener('click', (e) => {
+ e.stopPropagation();
+ navigator.clipboard.writeText(elementClass);
+ });
+ } else {
+ actionsContainer.prepend(spanId);
+
+ const copyId = actionsContainer.querySelector('span.stu-copy-id');
+ copyId.addEventListener('click', (e) => {
+ e.stopPropagation();
+ navigator.clipboard.writeText(placeholder);
+ });
+ }
+ }
+ }
+ };
+
+ // Create the MutationObserver object and monitor changes within #bricks-panel
+ const observer = new MutationObserver(callback);
+ observer.observe(targetNode, config);
+}