Skip to content

docs: lift head and body elements for codepen source #44

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

Merged
nbilyk merged 1 commit into from
Dec 5, 2025
Merged

docs: lift head and body elements for codepen source #44

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
88 changes: 50 additions & 38 deletions www/codepen-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
(function () {
const btn = document.createElement('a');
btn.id = 'editButton';
btn.href = '#';
btn.textContent = 'Edit on CodePen';
;(function () {
const btn = document.createElement('a')
btn.id = 'editButton'
btn.href = '#'
btn.textContent = 'Edit on CodePen'
Object.assign(btn.style, {
position: 'absolute',
top: '10px',
Expand All @@ -16,54 +16,66 @@
zIndex: '1000',
fontSize: '14px',
opacity: '0.8',
});
document.body.appendChild(btn);
})
document.body.appendChild(btn)

btn.addEventListener('click', (e) => {
e.preventDefault();
const form = document.createElement('form');
form.action = 'https://codepen.io/pen/define';
form.method = 'POST';
form.target = '_blank';
e.preventDefault()

const input = document.createElement('input');
input.type = 'hidden';
input.name = 'data';
// Clone the document to perform cleanup without affecting the live page
const clone = document.documentElement.cloneNode(true)

// Clone to remove button and script before serializing
const clone = document.documentElement.cloneNode(true);

// Remove the edit button from the clone
const clonedBtn = clone.querySelector('#editButton');
if (clonedBtn) clonedBtn.remove();
const clonedBtn = clone.querySelector('#editButton')
if (clonedBtn) clonedBtn.remove()

// Remove the script that includes this logic
const scripts = clone.querySelectorAll('script');
// Remove the helper script from the clone
const scripts = clone.querySelectorAll('script')
scripts.forEach((s) => {
if (s.src && s.src.includes('codepen-helper.js')) {
s.remove();
s.remove()
}
});
})

// Clean up the canvas attributes added by Three.js
const canvas = clone.querySelector('#mainCanvas');
const canvas = clone.querySelector('#mainCanvas')
if (canvas) {
canvas.removeAttribute('data-engine');
canvas.removeAttribute('width');
canvas.removeAttribute('height');
canvas.removeAttribute('style');
canvas.removeAttribute('data-engine')
canvas.removeAttribute('width')
canvas.removeAttribute('height')
canvas.removeAttribute('style')
}

const head = clone.querySelector('head')
const body = clone.querySelector('body')

// Extract style and script tags from head and trim 8 spaces of indentation
const headContent = head
? Array.from(head.querySelectorAll('style, script'))
.map((el) => el.outerHTML)
.join('\n')
.replace(/\n {8}/g, '\n')
: ''

const data = {
title: 'Three Particles Example',
html: '<!doctype html>\n' + clone.outerHTML,
html: headContent + '\n' + (body ? body.innerHTML : ''),
editors: '100', // HTML open
};
}

const form = document.createElement('form')
form.action = 'https://codepen.io/pen/define'
form.method = 'POST'
form.target = '_blank'

const input = document.createElement('input')
input.type = 'hidden'
input.name = 'data'
input.value = JSON.stringify(data)

input.value = JSON.stringify(data);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
});
})();
form.appendChild(input)
document.body.appendChild(form)
form.submit()
document.body.removeChild(form)
})
})()