代码： 全选
// Global variable to hold the SVG clone and ensure state is maintained
let etani = null;
let intervalMoving = null;
/**
* Creates a standard HTML element with optional class and text content.
* @param {string} tag - The HTML tag name (e.g., 'div', 'span').
* @param {string} [className] - Optional CSS class name.
* @param {string} [textContent] - Optional text content.
* @returns {HTMLElement} The created HTML element.
*/
function createEl(tag, className, textContent) {
const el = document.createElement(tag);
if (className) {
el.className = className;
}
if (textContent) {
el.textContent = textContent;
}
return el;
}
// Add dynamic CSS styles to the document
function addEtaniStyles() {
if (document.getElementById('dynamic-et-styles')) {
return;
}
const styleSheet = createEl('style');
styleSheet.id = 'dynamic-et-styles';
styleSheet.textContent = `
.etaniinner {
margin-top: 10px;
}
.etaniCtrl {
margin-bottom: 10px;
clear: both;
padding: 5px;
border: 1px solid #c0c0c0;
text-align: center;
}
.etaniCtrl > div {
display: inline-block;
vertical-align: top;
padding: 5px;
border: 1px solid #ccc;
margin: 0 5px 5px 5px;
text-align: left;
}
.etaniCtrl > div > a, .etaniCtrl > div > span {
display: inline-block;
text-decoration: none;
padding: 2px 8px;
font-size: 14px;
margin: 0 2px;
cursor: pointer;
user-select: none;
}
.etaniCtrl > div > span {
border: 1px solid #888;
background-color: #eee;
color: #333;
}
.etaniCtrl > div > span.active {
background-color: #008CBA;
color: white;
border-color: #008CBA;
}
.etaniContentHTML {
border: 1px solid #db3a32;
color: #db3a32;
}
.etaniUpdateTiles {
border: 1px solid #008CBA;
color: #008CBA;
}
.etaniCenter {
border: 1px solid green;
color: green;
}
.etaniAllAppendTransform {
border: 1px solid #2e36b9;
color: #2e36b9;
}
.etaniAllAppendOpacity {
border: 1px solid #b68942;
color: #b68942;
}
.etaniValueIncrease {
border: 1px solid purple;
color: purple;
}
.etaniCol {
border: 1px solid #aaa;
padding: 5px;
margin-bottom: 10px;
clear: both;
}
.etaniItem {
min-height: 48px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: -1px;
background-color: lightyellow;
display: inline-block;
}
.etaniItemLeft {
float: left;
width: 60px;
min-height: 48px;
padding: 2px 0;
text-align: center;
}
.etaniItemImageOuter {
width: 40px;
height: 40px;
margin: 0 auto;
}
.etaniItemImage {
width: 100%;
height: 100%;
display: block;
}
.etaniItemId {
text-align: center;
font-size: 12px;
word-break: break-all;
margin-top: 2px;
cursor: pointer;
}
.etaniItemPlus {
width: 12px;
height: 12px;
display: inline-block;
margin-left: 2px;
}
.etaniItemRight {
margin-left: 60px;
padding: 7px;
min-height: 64px;
background-color: #fff;
}
.etaniWindow {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 24px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 777;
width: auto;
display: inline-block;
}
.etaniAppendRow {
margin-bottom: 8px;
}
.etaniAppendRow a, .etaniAppendRow span {
display: inline-block;
padding: 4px 8px;
margin-right: 5px;
border: 1px solid #888;
background-color: #eee;
color: #333;
cursor: pointer;
text-decoration: none;
font-size: 12px;
}
.etaniWindow label {
display: inline;
margin-bottom: 10px;
}
.etaniAppendSpecify {
display: inline;
width: 120px;
box-sizing: border-box;
padding: 4px;
font-size: 12px;
}
.etaniWindow button {
margin-right: 10px;
padding: 5px 10px;
}
.etaniResult {
text-align: center;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #bbb;
box-sizing: border-box;
}
.etaniResultImage {
display: block;
max-width: 480px;
width: 100%;
height: auto;
margin: 0 auto 10px auto;
border: 1px solid #000;
box-sizing: border-box;
}
.etaniResultDR {
text-align: center;
margin-bottom: 10px;
}
.etaniResultDownload, .etaniResultRename {
display: inline-block;
margin-right: 15px;
text-decoration: none;
padding: 5px 10px;
font-size: 16px;
}
.etaniResultDownload {
border: 1px solid blue;
color: blue;
}
.etaniResultRename {
border: 1px solid brown;
color: brown;
}
.etaniResultSize {
display: inline-block;
margin-left: 10px;
font-size: 12px;
color: #555;
}
`;
document.head.appendChild(styleSheet);
}
// Append ctrl elements to etaniCtrl
function addEtaniCtrlElements(etaniinner) {
// Create the etaniCtrl element
const etaniCtrl = createEl('div', 'etaniCtrl');
etaniinner.appendChild(etaniCtrl);
// Create etaniContent div
const etaniContent = createEl('div', 'etaniContent');
// Create etaniContentHTML a
const etaniContentHTML = createEl('a', 'etaniContentHTML');
etaniContentHTML.href = 'javascript:;';
etaniContentHTML.textContent = 'HTML';
etaniContent.appendChild(etaniContentHTML);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniContent);
// Create etaniUpdate div
const etaniUpdate = createEl('div', 'etaniUpdate');
// Create etaniUpdateTiles a
const etaniUpdateTiles = createEl('a', 'etaniUpdateTiles');
etaniUpdateTiles.href = 'javascript:;';
etaniUpdateTiles.textContent = 'update';
etaniUpdate.appendChild(etaniUpdateTiles);
// Create etaniCenter a
const etaniCenter = createEl('a', 'etaniCenter');
etaniCenter.href = 'javascript:;';
etaniCenter.textContent = 'Center';
etaniUpdate.appendChild(etaniCenter);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniUpdate);
// Create etaniFilter div
const etaniFilter = createEl('div', 'etaniFilter');
// Create etaniFilterTiles span
const etaniFilterTiles = createEl('span', 'etaniFilterTiles active', 'tiles');
etaniFilter.appendChild(etaniFilterTiles);
// Create etaniFilterMoving span
const etaniFilterMoving = createEl('span', 'etaniFilterMoving', 'moving');
etaniFilter.appendChild(etaniFilterMoving);
// Create etaniFilterBoard span
const etaniFilterBoard = createEl('span', 'etaniFilterBoard', 'board');
etaniFilter.appendChild(etaniFilterBoard);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniFilter);
// Add click event listeners for etaniFilter spans
const filterSpans = etaniFilter.querySelectorAll('span');
filterSpans.forEach(function(span) {
span.addEventListener('click', function() {
// Remove active from all spans in etaniFilter
filterSpans.forEach(function(s) { s.classList.remove('active'); });
// Add active to clicked span
this.classList.add('active');
// Update visibility after filter change
updateVisibility();
const active = document.querySelector('.etaniFilter .active');
if (active && active.classList[0] === 'etaniFilterMoving') {
if (intervalMoving) clearInterval(intervalMoving);
intervalMoving = setInterval(updateMovingTiles, 1000);
// Call immediately
updateMovingTiles();
} else {
if (intervalMoving) clearInterval(intervalMoving);
intervalMoving = null;
}
});
});
// Create etaniMode div
const etaniMode = createEl('div', 'etaniMode');
// Create etaniModeRepeat span
const etaniModeRepeat = createEl('span', 'etaniModeRepeat active', 'repeat');
etaniMode.appendChild(etaniModeRepeat);
// Create etaniModeFreeze span
const etaniModeFreeze = createEl('span', 'etaniModeFreeze', 'freeze');
etaniMode.appendChild(etaniModeFreeze);
// Create etaniModeMixed span
const etaniModeMixed = createEl('span', 'etaniModeMixed', 'mixed');
etaniMode.appendChild(etaniModeMixed);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniMode);
// Add click event listeners for etaniMode spans
const modeSpans = etaniMode.querySelectorAll('span');
modeSpans.forEach(function(span) {
span.addEventListener('click', function() {
// Remove active from all spans in etaniMode
modeSpans.forEach(function(s) { s.classList.remove('active'); });
// Add active to clicked span
this.classList.add('active');
});
});
// Create etaniAllAppend div
const etaniAllAppend = createEl('div', 'etaniAllAppend');
// Create etaniAllAppendTransform a
const etaniAllAppendTransform = createEl('a', 'etaniAllAppendTransform');
etaniAllAppendTransform.href = 'javascript:;';
etaniAllAppendTransform.textContent = 'transform';
etaniAllAppend.appendChild(etaniAllAppendTransform);
// Create etaniAllAppendOpacity a
const etaniAllAppendOpacity = createEl('a', 'etaniAllAppendOpacity');
etaniAllAppendOpacity.href = 'javascript:;';
etaniAllAppendOpacity.textContent = 'opacity';
etaniAllAppend.appendChild(etaniAllAppendOpacity);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniAllAppend);
// Create etaniValue div
const etaniValue = createEl('div', 'etaniValue');
// Create etaniValueIncrease a
const etaniValueIncrease = createEl('a', 'etaniValueIncrease');
etaniValueIncrease.href = 'javascript:;';
etaniValueIncrease.textContent = 'increase';
etaniValue.appendChild(etaniValueIncrease);
// Append to etaniCtrl
etaniCtrl.appendChild(etaniValue);
}
// Define updateMovingTiles function
function updateMovingTiles() {
const movingUse = document.querySelector('#etmain > .etdrop > use.tilemoving');
const items = document.querySelectorAll('.etaniItem');
items.forEach(function(item) {
item.style.display = 'none';
});
if (movingUse) {
const id = movingUse.getAttribute('href').slice(1);
const item = document.querySelector('.etaniItem[data-id="' + id + '"]');
if (item) {
item.style.display = 'block';
}
}
}
// list Etani elements
function listEtaniItems() {
// Get the etaniCol element
let etaniCol = document.querySelector('.etaniCol');
if (!etaniCol) return; // Exit if etaniCol not found
// Clear existing content in etaniCol
etaniCol.innerHTML = '';
// Collect elements into etaniElementArray
let uses = etani.querySelectorAll('.etdrop > use');
let etanidrop = etani.getElementById('etanidrop');
let boardElements = etani.querySelectorAll('.etdrop > .etboard [id]');
let etaniElementArray = [...uses, etanidrop, ...boardElements];
// Loop through etaniElementArray to create etaniItem elements
etaniElementArray.forEach(function(element) {
if (!element) return; // Skip if element is null
// Determine itemId and dataType
let itemId;
let dataType;
if (element.tagName === 'use') {
itemId = element.getAttribute('href').slice(1);
dataType = 'tile';
} else if (element.id === 'etanidrop') {
itemId = 'board';
dataType = 'board';
} else {
itemId = element.id;
dataType = 'board';
}
// Create etaniItem div
const etaniItem = createEl('div', 'etaniItem');
etaniItem.dataset.id = itemId;
etaniItem.dataset.type = dataType;
// Create etaniItemLeft div
const etaniItemLeft = createEl('div', 'etaniItemLeft');
etaniItem.appendChild(etaniItemLeft);
// Create etaniItemImageOuter div
const etaniItemImageOuter = createEl('div', 'etaniItemImageOuter');
etaniItemLeft.appendChild(etaniItemImageOuter);
if (dataType === 'tile') {
// Create etaniItemImage img
const etaniItemImage = createEl('img', 'etaniItemImage');
etaniItemImage.src = generateTileImage(itemId);
etaniItemImageOuter.appendChild(etaniItemImage);
} else {
// Generate background color
etaniItemImageOuter.style.background = generateHexColor(itemId);
}
// Create etaniItemId div
const etaniItemId = createEl('div', 'etaniItemId');
etaniItemLeft.appendChild(etaniItemId);
etaniItemLeft.addEventListener('click', function() {
etaniAppendAnimateWindow(itemId, dataType);
});
// Create etaniItemName span
const etaniItemName = createEl('span', 'etaniItemName', itemId);
etaniItemId.appendChild(etaniItemName);
// Create etaniItemPlus img
const etaniItemPlus = createEl('img', 'etaniItemPlus');
etaniItemPlus.width = 12;
etaniItemPlus.height = 12;
etaniItemPlus.src = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEiPjxsaW5lIHN0cm9rZT0iZGFya2dyZWVuIiB4MT0iNiIgeTE9IjAiIHgyPSI2IiB5Mj0iMTIiPjwvbGluZT48bGluZSBzdHJva2U9ImRhcmtncmVlbiIgeDE9IjAiIHkxPSI2IiB4Mj0iMTIiIHkyPSI2Ij48L2xpbmU+PC9zdmc+';
etaniItemId.appendChild(etaniItemPlus);
// Create etaniItemRight div
const etaniItemRight = createEl('div', 'etaniItemRight');
etaniItem.appendChild(etaniItemRight);
// Append etaniItem to etaniCol
etaniCol.appendChild(etaniItem);
});
}
// Define updateVisibility function
function updateVisibility() {
const active = document.querySelector('.etaniFilter .active');
if (!active) return;
const activeClass = active.classList[0]; // e.g., 'etaniFilterTiles'
const items = document.querySelectorAll('.etaniItem');
items.forEach(function(item) {
item.style.display = 'none';
});
if (activeClass === 'etaniFilterTiles') {
document.querySelectorAll('.etaniItem[data-type="tile"]').forEach(function(item) {
item.style.display = 'block';
});
} else if (activeClass === 'etaniFilterBoard') {
document.querySelectorAll('.etaniItem[data-type="board"]').forEach(function(item) {
item.style.display = 'block';
});
} else if (activeClass === 'etaniFilterMoving') {
document.querySelectorAll('.etaniItem[data-type="board"]').forEach(function(item) {
item.style.display = 'block';
});
// Tiles visibility handled by interval
}
}
// Convert SVG string to a Base64 data URL
function svgToBase64(svgString) {
const base64 = btoa(unescape(encodeURIComponent(svgString)));
return `data:image/svg+xml;base64,${base64}`;
}
// Define start button click function
function etaniStartClick() {
const etaniouter = document.querySelector('.etaniouter');
const originalSvg = document.getElementById('etmain');
if (!originalSvg) {
console.error('SVG with ID "etmain" not found.');
return;
}
etani = originalSvg.cloneNode(true);
const etwaitElement = etani.querySelector('.etwait');
if (etwaitElement) {
etwaitElement.remove();
}
etani.id = 'etani';
const etdropClone = etani.querySelector('.etdrop');
if (etdropClone) {
etdropClone.id = 'etanidrop';
}
// Check if etaniinner already exists
let etaniinner = etaniouter.querySelector('.etaniinner');
if (etaniinner) {
// Remove etaniinner
etaniouter.removeChild(etaniinner);
// Restore button text
etaniStart.textContent = 'start ejtile animate';
} else {
// Create etaniinner div
etaniinner = createEl('div', 'etaniinner');
// Create etaniCtrl div
addEtaniCtrlElements(etaniinner);
// Create etaniCol div
const etaniCol = createEl('div', 'etaniCol');
etaniinner.appendChild(etaniCol);
// Create etaniResult div
const etaniResult = createEl('div', 'etaniResult');
etaniinner.appendChild(etaniResult);
// Append etaniinner to etaniouter
etaniouter.appendChild(etaniinner);
// Change button text
etaniStart.textContent = 'close ejtile animate';
// list etani elements
listEtaniItems();
// update etani elements display by etaniFilter
updateVisibility();
// update result
updateEtaniResult();
}
}
// Generate base64 image for a tile
function generateTileImage(tileid) {
const originalTile = document.querySelector(`#etmain > defs > g#${tileid}`);
if (!originalTile) return null;
const etdropUses = document.querySelectorAll('#etmain > .etdrop > use');
const etwaitGroups = document.querySelectorAll('#etmain > .etwait g');
let targetUse = null;
for (const group of etwaitGroups) {
const useInGroup = group.querySelector(`use[href="#${tileid}"]`);
if (useInGroup) {
targetUse = useInGroup;
break;
}
}
let etwaittransform = '', etwaitfill = '', etwaitstroke = '', etwaitstrokeWidth = '';
if (targetUse) {
etwaittransform = targetUse.getAttribute('transform') || '';
etwaitfill = targetUse.getAttribute('fill') || '';
etwaitstroke = targetUse.getAttribute('stroke') || '';
etwaitstrokeWidth = targetUse.getAttribute('stroke-width') || '';
const scaleMatch = etwaittransform.match(/scale\(([^)]+)\)/);
const rotateMatch = etwaittransform.match(/rotate\(([^)]+)\)/);
const scalePart = scaleMatch ? scaleMatch[0] : '';
const rotatePart = rotateMatch ? rotateMatch[0] : '';
etwaittransform = `translate(20,20) ${scalePart} ${rotatePart}`.trim().replace(/\s+/g, ' ');
}
const tileclone = originalTile.cloneNode(true);
tileclone.removeAttribute('id');
if (etwaittransform) tileclone.setAttribute('transform', etwaittransform);
if (etwaitfill) tileclone.setAttribute('fill', etwaitfill);
if (etwaitstroke) tileclone.setAttribute('stroke', etwaitstroke);
if (etwaitstrokeWidth) tileclone.setAttribute('stroke-width', etwaitstrokeWidth);
const svgWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgWrapper.setAttribute('width', '40');
svgWrapper.setAttribute('height', '40');
svgWrapper.setAttribute('version', '1.1');
svgWrapper.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgWrapper.appendChild(tileclone);
const svgString = new XMLSerializer().serializeToString(svgWrapper);
return svgToBase64(svgString);
}
// generate hex color
function generateHexColor(seed) {
let hash = 0;
for (let i = 0; i < seed.length; i++) {
hash = seed.charCodeAt(i) + ((hash << 5) - hash);
}
let color = (hash & 0x00FFFFFF).toString(16).toUpperCase();
while (color.length < 6) {
color = '0' + color;
}
return '#' + color;
}
// Open append animate window
function etaniAppendAnimateWindow(id, dataType) {
// Get the .etaniinner element
const inner = document.querySelector('.etaniinner');
if (!inner) {
console.error('Element with class .etaniinner not found.');
return;
}
// Create the main div.etaniWindow
const windowDiv = createEl('div', 'etaniWindow');
// First row
const row1 = createEl('div', 'etaniAppendRow');
const strong = createEl('strong', null, 'id: ' + id);
row1.appendChild(strong);
windowDiv.appendChild(row1);
// Second row
const row2 = createEl('div', 'etaniAppendRow');
const aTransform = createEl('a', 'etaniAppendTransform', 'Transform');
aTransform.href = 'javascript:;';
const aMotion = createEl('a', 'etaniAppendMotion', 'Motion');
aMotion.href = 'javascript:;';
const spanSet = createEl('span', 'etaniAppendSet', 'Set');
row2.appendChild(aTransform);
row2.appendChild(aMotion);
row2.appendChild(spanSet);
windowDiv.appendChild(row2);
// Third row
const row3 = createEl('div', 'etaniAppendRow');
const aOpacity = createEl('a', 'etaniAppendOpacity', 'Opacity');
aOpacity.href = 'javascript:;';
const aWriting = createEl('a', 'etaniAppendWriting', 'Writing');
aWriting.href = 'javascript:;';
row3.appendChild(aOpacity);
row3.appendChild(aWriting);
windowDiv.appendChild(row3);
// Fourth row
const row4 = createEl('div', 'etaniAppendRow');
const aFill = createEl('a', 'etaniAppendFill', 'Fill');
aFill.href = 'javascript:;';
const aStroke = createEl('a', 'etaniAppendStroke', 'Stroke');
aStroke.href = 'javascript:;';
const aWidth = createEl('a', 'etaniAppendWidth', 'Width');
aWidth.href = 'javascript:;';
row4.appendChild(aFill);
row4.appendChild(aStroke);
row4.appendChild(aWidth);
windowDiv.appendChild(row4);
// Fifth row
const row5 = createEl('div', 'etaniAppendRow');
const label = createEl('label', null, 'specify: ');
const input = createEl('input', 'etaniAppendSpecify');
input.type = 'text';
row5.appendChild(label);
row5.appendChild(input);
windowDiv.appendChild(row5);
// Sixth row
const row6 = createEl('div', 'etaniAppendRow');
const btnConfirm = createEl('button', null, 'Confirm');
const btnCancel = createEl('button', null, 'Cancel');
row6.appendChild(btnConfirm);
row6.appendChild(btnCancel);
windowDiv.appendChild(row6);
// Append the windowDiv to .etaniinner
inner.appendChild(windowDiv);
// Add click events to all specified elements
// For a elements with href="javascript:;"
aTransform.addEventListener('click', function() {
etaniAppendAnimate(id, dataType, "animateTransform", "transform");
});
aMotion.addEventListener('click', function() {
// TODO: Implement Motion click functionality
});
aOpacity.addEventListener('click', function() {
// TODO: Implement Opacity click functionality
});
aWriting.addEventListener('click', function() {
// TODO: Implement Writing click functionality
});
aFill.addEventListener('click', function() {
// TODO: Implement Fill click functionality
});
aStroke.addEventListener('click', function() {
// TODO: Implement Stroke click functionality
});
aWidth.addEventListener('click', function() {
// TODO: Implement Width click functionality
});
// For span.etaniAppendSet
spanSet.addEventListener('click', function() {
// TODO: Implement Set click functionality
});
// For buttons
btnConfirm.addEventListener('click', function() {
// TODO: Implement Confirm click functionality
});
btnCancel.addEventListener('click', function() {
// TODO: Implement Cancel click functionality
});
}
// Update the result section with the current state of etani
function updateEtaniResult() {
if (!etani) return;
let etaniResult = document.querySelector('.etaniResult');
if (!etaniResult) return;
const svgString = new XMLSerializer().serializeToString(etani);
const sizeInBytes = new Blob([svgString]).size;
const base64Url = svgToBase64(svgString);
// Generate default filename with current date and time
const now = new Date();
const defaultFilename = `ejtileAnimation_${now.toISOString().replace(/[-:T]/g, '').slice(0, 15)}.svg`;
let imgElement = document.querySelector('.etaniResultImage');
let downloadElementOuter = document.querySelector('.etaniResultDR');
let downloadElement = document.querySelector('.etaniResultDownload');
let renameElement = document.querySelector('.etaniResultRename');
let sizeElement = document.querySelector('.etaniResultSize');
if (!imgElement) {
imgElement = createEl('img', 'etaniResultImage');
imgElement.alt = 'Rendered Ejtile Animation SVG';
etaniResult.appendChild(imgElement);
}
if (!downloadElementOuter) {
downloadElementOuter = createEl('div', 'etaniResultDR');
}
if (!downloadElement) {
downloadElement = createEl('a', 'etaniResultDownload', 'Download SVG');
downloadElement.href = 'javascript:;';
downloadElementOuter.appendChild(downloadElement);
etaniResult.appendChild(downloadElementOuter);
}
if (!renameElement) {
renameElement = createEl('a', 'etaniResultRename', 'Rename File');
renameElement.href = 'javascript:;';
downloadElementOuter.appendChild(renameElement);
etaniResult.appendChild(downloadElementOuter);
}
if (!sizeElement) {
sizeElement = createEl('span', 'etaniResultSize');
etaniResult.appendChild(sizeElement);
}
if (imgElement && downloadElement && renameElement && sizeElement) {
imgElement.src = base64Url;
sizeElement.textContent = `Size: ${sizeInBytes} byte`;
downloadElement.href = base64Url;
downloadElement.download = defaultFilename;
renameElement.onclick = (e) => {
e.preventDefault();
let currentDownloadName = downloadElement.download;
let newFilename = prompt("Enter new filename:", currentDownloadName);
if (newFilename) {
if (!newFilename.toLowerCase().endsWith('.svg')) {
newFilename += '.svg';
}
downloadElement.download = newFilename;
alert(`Filename changed to: ${newFilename}`);
}
};
}
}
/**
* Appends animation UI controls and the corresponding SVG animation element.
* * @param {string} id - The ID of the target .etaniItem.
* @param {string} elementtype - The element type ('tile' or 'board') to determine the SVG insertion target.
* @param {string} tagname - The animation tag name ('animate', 'animateTransform', 'animateMotion', 'set').
* @param {string} animatetype - The attributeName to animate (e.g., 'opacity', 'fill').
* @param {string} defaultvalue - The default value for the animation (e.g., '0;1;0', 'M 0 0 L 100 100').
*/
function etaniAppendAnimate(id, elementtype, tagname, animatetype, defaultvalue = null) {
// --- Helper Functions ---
/**
* Creates an SVG element with the specified namespace and attributes.
* @param {string} name - The SVG tag name (e.g., 'animate').
* @param {object} attrs - An object of key-value attribute pairs.
* @returns {Element} The created SVG element.
*/
function createSVGElement(name, attrs) {
const el = document.createElementNS('http://www.w3.org/2000/svg', name);
for (const key in attrs) {
el.setAttribute(key, attrs[key]);
}
return el;
}
/**
* Parses an SVG transform attribute string into its components.
* @param {string} transformStr - The transform attribute string from a <use> tag.
* @returns {object} An object with translate, scale, and rotate values.
*/
function parseTransformValues(transformStr) {
const transforms = {
translate: '0,0',
scale: '1,1',
rotate: '0'
};
if (!transformStr) {
return transforms;
}
// Extract translate values
const translateMatch = /translate\(([^)]+)\)/.exec(transformStr);
if (translateMatch) {
transforms.translate = translateMatch[1].trim();
}
// Extract scale values
const scaleMatch = /scale\(([^)]+)\)/.exec(transformStr);
if (scaleMatch) {
transforms.scale = scaleMatch[1].trim();
}
// Extract rotate values
const rotateMatch = /rotate\(([^)]+)\)/.exec(transformStr);
if (rotateMatch) {
transforms.rotate = rotateMatch[1].trim();
}
return transforms;
}
// --- Task 1: Append UI Element using DOM creation ---
// Find the UI target parent element (in the .etaniinner UI panel)
const targetUIParent = document.querySelector(`.etaniinner .etaniItem[data-id="${id}"] .etaniItemRight`);
if (!targetUIParent) {
console.error(`Error: UI target (.etaniItem[data-id="${id}"] .etaniItemRight) not found.`);
return;
}
// Build the UI structure
const elAnimate = createEl('div', 'etaniAnimate');
// 1. Build .etaniAnimateAttr
const elAnimateAttr = createEl('div', 'etaniAnimateAttr');
const elAnimateName = createEl('span', 'etaniAnimateName');
const elAnimateDur = createEl('span', 'etaniAnimateDur');
const elAnimateAttrAdd = createEl('span', 'etaniAnimateAttrAdd', '+');
elAnimateAttr.appendChild(elAnimateName);
elAnimateAttr.appendChild(elAnimateDur);
elAnimateAttr.appendChild(elAnimateAttrAdd);
// 2. Build .etaniAnimateValue
const elAnimateValue = createEl('div', 'etaniAnimateValue');
const elAVLabel = createEl('span', 'etaniAVLabel');
const elAV = createEl('div', 'etaniAV');
const elAVItem = createEl('span', 'etaniAVItem');
elAV.appendChild(elAVItem);
// 3. Apply logic based on tagname
switch (tagname) {
case 'animateTransform':
elAnimateName.textContent = 'transform';
elAnimateDur.textContent = 'dur: 0s';
elAVLabel.textContent = 'values : ';
elAVItem.textContent = 'a'; // Default placeholder
// Add controls for this type
const elAVCtrl_T = createEl('div', 'etaniAVCtrl');
elAVCtrl_T.appendChild(createEl('img', 'etaniAVAdd'));
elAVCtrl_T.appendChild(createEl('img', 'etaniAVDelete'));
elAVCtrl_T.appendChild(createEl('img', 'etaniAVCopy'));
elAVCtrl_T.appendChild(createEl('img', 'etaniAVMove'));
// Insert controls before the label
elAnimateValue.appendChild(elAVCtrl_T);
break;
case 'animate':
elAnimateName.textContent = animatetype;
elAnimateDur.textContent = 'dur: 0s';
elAVLabel.textContent = 'values : ';
elAVItem.textContent = defaultvalue;
// Add controls for this type
const elAVCtrl_A = createEl('div', 'etaniAVCtrl');
elAVCtrl_A.appendChild(createEl('img', 'etaniAVAdd'));
elAVCtrl_A.appendChild(createEl('img', 'etaniAVDelete'));
elAVCtrl_A.appendChild(createEl('img', 'etaniAVCopy'));
elAVCtrl_A.appendChild(createEl('img', 'etaniAVMove'));
// Insert controls before the label
elAnimateValue.appendChild(elAVCtrl_A);
break;
case 'animateMotion':
elAnimateName.textContent = 'motion';
elAnimateDur.textContent = 'dur: 1s';
elAVLabel.textContent = 'move to : ';
elAVItem.textContent = defaultvalue;
// No controls for this type
break;
case 'set':
elAnimateName.textContent = animatetype;
elAnimateDur.textContent = 'dur: 1s';
elAVLabel.textContent = 'set to : ';
elAVItem.textContent = defaultvalue;
// No controls for this type
break;
default:
console.error(`Error: Unknown tagname "${tagname}" for UI.`);
return;
}
// 4. Assemble the .etaniAnimateValue children
elAnimateValue.appendChild(elAVLabel);
elAnimateValue.appendChild(elAV);
// 5. Assemble the final element
elAnimate.appendChild(elAnimateAttr);
elAnimate.appendChild(elAnimateValue);
// 6. Append the fully constructed UI element to the DOM
targetUIParent.appendChild(elAnimate);
// --- Task 2: Append SVG Element ---
// 1. Find the SVG insertion target using the 'etani' global variable
let targetSVGParent;
if (elementtype === 'tile') {
// For 'tile', the target is the <use> element in .etdrop
targetSVGParent = etani.querySelector(`.etdrop > use[href="#${id}"]`);
} else if (elementtype === 'board') {
// For 'board', the target is the element (e.g., <g>) with the matching id
targetSVGParent = etani.querySelector(`#${id}`);
}
if (!targetSVGParent) {
console.error(`Error: SVG target parent (href="#${id}" or "#${id}") not found in 'etani' variable.`);
return;
}
// 2. Determine repeat or fill attributes from the UI state
const repeatModeActive = document.querySelector('.etaniModeRepeat.active');
let repeatOrFillAttrs = {};
if (tagname === 'set') {
// 'set' never has repeatCount
if (!repeatModeActive) {
repeatOrFillAttrs = { fill: "freeze" };
}
} else {
// Other animation types
if (repeatModeActive) {
repeatOrFillAttrs = { repeatCount: "indefinite" };
} else {
repeatOrFillAttrs = { fill: "freeze" };
}
}
// 3. Create and append SVG elements
switch (tagname) {
case 'animateTransform':
// Find the source <use> element in #etmain to read the transform from
const sourceElement = document.querySelector(`#etmain .etdrop > use[href="#${id}"]`);
const transformString = sourceElement ? sourceElement.getAttribute('transform') : '';
// Parse the existing transform values
const transformValues = parseTransformValues(transformString);
// Define base attributes for all 3 transform animations
const baseAttrs = {
attributeName: "transform",
attributeType: "XML",
...repeatOrFillAttrs // Add the repeat/fill logic
};
// Create and append <animateTransform> for translate
const elTranslate = createSVGElement('animateTransform', {
...baseAttrs,
type: "translate",
values: transformValues.translate
});
targetSVGParent.appendChild(elTranslate);
// Create and append <animateTransform> for scale
const elScale = createSVGElement('animateTransform', {
...baseAttrs,
type: "scale",
values: transformValues.scale,
additive: "sum"
});
targetSVGParent.appendChild(elScale);
// Create and append <animateTransform> for rotate
const elRotate = createSVGElement('animateTransform', {
...baseAttrs,
type: "rotate",
values: transformValues.rotate,
additive: "sum"
});
targetSVGParent.appendChild(elRotate);
break;
case 'animate':
const elAnimateSVG = createSVGElement('animate', {
attributeName: animatetype,
values: defaultvalue,
...repeatOrFillAttrs
});
targetSVGParent.appendChild(elAnimateSVG);
break;
case 'animateMotion':
const elMotion = createSVGElement('animateMotion', {
dur: "1s",
path: defaultvalue,
...repeatOrFillAttrs
});
targetSVGParent.appendChild(elMotion);
break;
case 'set':
const elSet = createSVGElement('set', {
attributeName: animatetype,
to: defaultvalue,
dur: "1s",
...repeatOrFillAttrs // Will be {fill: "freeze"} or {}
});
targetSVGParent.appendChild(elSet);
break;
}
}
// Initialize the animation control panel on window load
window.addEventListener('load', function() {
// Get the etmainouter element
const etmainouter = document.getElementById('etmainouter');
if (!etmainouter) return; // Exit if etmainouter not found
// insert dynamic style
addEtaniStyles();
// Create etaniouter div
const etaniouter = createEl('div', 'etaniouter');
// Create etaniStart button
const etaniStart = createEl('button', null, 'start ejtile animate');
etaniStart.id = 'etaniStart';
// Append button to etaniouter
etaniouter.appendChild(etaniStart);
// Insert etaniouter after etmainouter
etmainouter.parentNode.insertBefore(etaniouter, etmainouter.nextSibling);
// Add click event listener to etaniStart
etaniStart.addEventListener('click', etaniStartClick);
});
