Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Copy active class as well as ID #1

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Copy active class as well as ID #1

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63cd1a5
Update stu-element-copy-id.js
portseif Mar 8, 2023
78335c8
Update stu-element-copy-id.js
portseif Mar 8, 2023
5facee8
Update stu-element-copy-id.js
portseif Mar 23, 2023
f345a73
Update stu-element-copy-id.js
portseif Mar 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 75 additions & 57 deletions stu-element-copy-id.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,76 @@
function stuElementCopyId() {
const copyIcon = '<svg version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="bricks-svg"><path d="M9.5,5h11c0.276,0 0.5,-0.224 0.5,-0.5v-1c0,-1.378 -1.122,-2.5 -2.5,-2.5h-1.774c-0.353,-0.609 -1.007,-1 -1.726,-1c-0.718,0 -1.373,0.39 -1.726,1h-1.774c-1.378,0 -2.5,1.122 -2.5,2.5v1c0,0.276 0.224,0.5 0.5,0.5Zm14.766,-2h-1.766c-0.276,0 -0.5,0.224 -0.5,0.5v1c0,0.828 -0.672,1.5 -1.5,1.5h-11c-0.826,0 -1.5,-0.672 -1.5,-1.5v-1c0,-0.276 -0.224,-0.5 -0.5,-0.5h-1.765c-0.956,0 -1.735,0.781 -1.735,1.739v23.523c0,0.957 0.779,1.738 1.735,1.738h18.529c0.957,0 1.736,-0.781 1.736,-1.739v-23.522c0,-0.958 -0.778,-1.739 -1.734,-1.739Z" fill="currentColor"></path></svg>';

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 = '<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1.549a.5.5 0 0 1 .5.5v2h3v-2a.5.5 0 0 1 1 0v2H10a.5.5 0 0 1 0 1H8.5v3H10a.5.5 0 0 1 0 1H8.5v2a.5.5 0 1 1-1 0v-2h-3v2a.5.5 0 1 1-1 0v-2H2a.5.5 0 0 1 0-1h1.5v-3H2a.5.5 0 0 1 0-1h1.5v-2a.5.5 0 0 1 .5-.5Zm3.5 6.5v-3h-3v3h3Z" fill="currentColor"/></svg>';
const copyClassIcon = '<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.146 3.695a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .707l-2.5 2.5a.5.5 0 1 1-.708-.707l2.147-2.146-2.147-2.147a.5.5 0 0 1 0-.707Zm-4.292 0a.5.5 0 0 1 0 .707L1.707 6.55l2.147 2.146a.5.5 0 1 1-.708.707l-2.5-2.5a.5.5 0 0 1 0-.707l2.5-2.5a.5.5 0 0 1 .708 0ZM7.108 1.56a.5.5 0 0 1 .38.597l-2 9a.5.5 0 0 1-.976-.217l2-9a.5.5 0 0 1 .596-.38Z" fill="currentColor"/></svg>';

// 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);
}