Skip to content

Commit

Permalink
now can easily increment attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelsboost committed Sep 5, 2024
1 parent f79b65c commit 1ab9e5e
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 221 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
343 changes: 171 additions & 172 deletions dist/App.min.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/App.min.js.map
View file

Large diffs are not rendered by default.

53 changes: 30 additions & 23 deletions src/App-backup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1984,7 +1984,7 @@ function Inspector() {
type="${type}"
placeholder="Use {n} for incremental text"
value="${value}" ${min ? `min="${min}"` : ''} ${max ? `max="${max}"` : ''} ${step ? `step="${step}"` : ''}
oninput="updateElement('props', '${name}', this.value)"
oninput="updateElement('props', '${name}', this.value, true)"
onfocus="saveState()"
onblur="saveState()"
/>
Expand All @@ -1997,7 +1997,7 @@ function Inspector() {
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('props', '${name}', this.value)"
oninput="updateElement('props', '${name}', this.value, true)"
onfocus="saveState()"
onblur="saveState()"/>${value}</textarea>
`;
Expand Down Expand Up @@ -3070,29 +3070,24 @@ function Inspector() {
const tag = layer.tag;

if ("text" in layer || layer.text) {
if (tag === "textarea" || tag === "style" || tag === "script") {
if (tag === "style" || tag === "script") {
attributes += `
<span class="${buttonItemClass}">text</span>
<textarea
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('text', null, this.value)"
onfocus="saveState()"
onblur="saveState()"/>${layer.text}</textarea>
`;
} else {
// attributes += `
// <span class="${buttonItemClass}">text</span>
// <input class="${inputClass}" style="${inputStyle}" type="text" value="${layer.text}" oninput="updateElement('text', null, this.value)" onfocus="saveState()" onblur="saveState()"/>
// `;
attributes += `
<span class="${buttonItemClass}">text</span>
<textarea
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('text', null, this.value)"
oninput="updateElement('text', null, this.value, true)"
onfocus="saveState()"
onblur="saveState()"/>${layer.text}</textarea>
`;
Expand Down Expand Up @@ -4761,31 +4756,44 @@ window.applyCssQuickCommands = async url => {
// Helper function to add an attribute to the element
window.addAttribute = attr => {
if (!attr) return;
// Split the attributess into individual attributes
const incrementPattern = /{n}/g; // Pattern to detect increment placeholder

// Split the attributes into individual attributes
const attrs = attr.toLowerCase().split(',').map(q => q.trim().toLowerCase());

// Get the current increment values for each attribute
const incrementValues = {};

saveState();
data.selectedLayerIds.forEach(id => {
const { layer } = findLayerById(id, project.html);
if (layer) {
// Initialize layer.props if it's undefined
if (!layer.props) layer.props = {};

// Iterate over each attribute and add it if it doesn't exist
saveState();
// Iterate over each attribute
attrs.forEach(attribute => {
let [key, value] = attribute.split('=').map(s => s.trim());
if (key === 'id') value = generateId();

if (incrementPattern.test(value)) {
// Handle incrementing values
let baseValue = value.replace(incrementPattern, '');
let increment = incrementValues[key] || 1;
value = baseValue + increment;
incrementValues[key] = increment + 1;
}

if (!(key in layer.props)) {
layer.props[key] = value !== undefined ? value : "";
} else if (value !== undefined) {
// If the attribute already exists, update its value
layer.props[key] = value;
}
});
saveState();
}
});
saveState();
}

// editor functions
Expand Down Expand Up @@ -6499,7 +6507,7 @@ window.emptyChildren = () => {
}
saveState(); // Save state after making changes
}
window.updateElement = (key, propKey, value) => {
window.updateElement = (key, propKey, value, initIncrement = false) => {
const incrementPattern = /{n}/g; // Pattern to detect increment placeholder

saveState();
Expand All @@ -6511,31 +6519,30 @@ window.updateElement = (key, propKey, value) => {
if (!value) {
layer.text = "";
} else {
// Check if the value contains the increment pattern {n}
if (incrementPattern.test(value)) {
// Replace {n} with the current index + 1 to increment
if (initIncrement && incrementPattern.test(value)) {
// If initIncrement is true, increment the {n} pattern
layer.text = value.replace(incrementPattern, index + 1);
} else {
layer.text = value;
layer.text = value; // Otherwise, just use the given value
}
}
} else {
// General case for non-text keys
layer[`${key}`] = value;
}
} else {
// Handling props (e.g., attributes) similarly
if (incrementPattern.test(value)) {
// Replace {n} in propKey values
// Handling props (e.g., attributes)
if (initIncrement && incrementPattern.test(value)) {
// If initIncrement is true, increment the {n} pattern in props
layer.props[`${propKey}`] = value.replace(incrementPattern, index + 1);
} else {
layer.props[`${propKey}`] = value;
layer.props[`${propKey}`] = value; // Otherwise, just use the given value
}
}
}
});
saveState();
}
};
window.updateImageMedia = (id, type) => {
let target = findLayerById(id, project.html).layer.props['src'];
let modalContent = `<div class="p-4 text-center grid grid-cols-1 gap-4 place-items-center">
Expand Down
53 changes: 30 additions & 23 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1984,7 +1984,7 @@ function Inspector() {
type="${type}"
placeholder="Use {n} for incremental text"
value="${value}" ${min ? `min="${min}"` : ''} ${max ? `max="${max}"` : ''} ${step ? `step="${step}"` : ''}
oninput="updateElement('props', '${name}', this.value)"
oninput="updateElement('props', '${name}', this.value, true)"
onfocus="saveState()"
onblur="saveState()"
/>
Expand All @@ -1997,7 +1997,7 @@ function Inspector() {
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('props', '${name}', this.value)"
oninput="updateElement('props', '${name}', this.value, true)"
onfocus="saveState()"
onblur="saveState()"/>${value}</textarea>
`;
Expand Down Expand Up @@ -3070,29 +3070,24 @@ function Inspector() {
const tag = layer.tag;

if ("text" in layer || layer.text) {
if (tag === "textarea" || tag === "style" || tag === "script") {
if (tag === "style" || tag === "script") {
attributes += `
<span class="${buttonItemClass}">text</span>
<textarea
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('text', null, this.value)"
onfocus="saveState()"
onblur="saveState()"/>${layer.text}</textarea>
`;
} else {
// attributes += `
// <span class="${buttonItemClass}">text</span>
// <input class="${inputClass}" style="${inputStyle}" type="text" value="${layer.text}" oninput="updateElement('text', null, this.value)" onfocus="saveState()" onblur="saveState()"/>
// `;
attributes += `
<span class="${buttonItemClass}">text</span>
<textarea
class="${textareaClass}"
style="${textareaStyle}"
placeholder="Use {n} for incremental text"
oninput="updateElement('text', null, this.value)"
oninput="updateElement('text', null, this.value, true)"
onfocus="saveState()"
onblur="saveState()"/>${layer.text}</textarea>
`;
Expand Down Expand Up @@ -4761,31 +4756,44 @@ window.applyCssQuickCommands = async url => {
// Helper function to add an attribute to the element
window.addAttribute = attr => {
if (!attr) return;
// Split the attributess into individual attributes
const incrementPattern = /{n}/g; // Pattern to detect increment placeholder

// Split the attributes into individual attributes
const attrs = attr.toLowerCase().split(',').map(q => q.trim().toLowerCase());

// Get the current increment values for each attribute
const incrementValues = {};

saveState();
data.selectedLayerIds.forEach(id => {
const { layer } = findLayerById(id, project.html);
if (layer) {
// Initialize layer.props if it's undefined
if (!layer.props) layer.props = {};

// Iterate over each attribute and add it if it doesn't exist
saveState();
// Iterate over each attribute
attrs.forEach(attribute => {
let [key, value] = attribute.split('=').map(s => s.trim());
if (key === 'id') value = generateId();

if (incrementPattern.test(value)) {
// Handle incrementing values
let baseValue = value.replace(incrementPattern, '');
let increment = incrementValues[key] || 1;
value = baseValue + increment;
incrementValues[key] = increment + 1;
}

if (!(key in layer.props)) {
layer.props[key] = value !== undefined ? value : "";
} else if (value !== undefined) {
// If the attribute already exists, update its value
layer.props[key] = value;
}
});
saveState();
}
});
saveState();
}

// editor functions
Expand Down Expand Up @@ -6499,7 +6507,7 @@ window.emptyChildren = () => {
}
saveState(); // Save state after making changes
}
window.updateElement = (key, propKey, value) => {
window.updateElement = (key, propKey, value, initIncrement = false) => {
const incrementPattern = /{n}/g; // Pattern to detect increment placeholder

saveState();
Expand All @@ -6511,31 +6519,30 @@ window.updateElement = (key, propKey, value) => {
if (!value) {
layer.text = "";
} else {
// Check if the value contains the increment pattern {n}
if (incrementPattern.test(value)) {
// Replace {n} with the current index + 1 to increment
if (initIncrement && incrementPattern.test(value)) {
// If initIncrement is true, increment the {n} pattern
layer.text = value.replace(incrementPattern, index + 1);
} else {
layer.text = value;
layer.text = value; // Otherwise, just use the given value
}
}
} else {
// General case for non-text keys
layer[`${key}`] = value;
}
} else {
// Handling props (e.g., attributes) similarly
if (incrementPattern.test(value)) {
// Replace {n} in propKey values
// Handling props (e.g., attributes)
if (initIncrement && incrementPattern.test(value)) {
// If initIncrement is true, increment the {n} pattern in props
layer.props[`${propKey}`] = value.replace(incrementPattern, index + 1);
} else {
layer.props[`${propKey}`] = value;
layer.props[`${propKey}`] = value; // Otherwise, just use the given value
}
}
}
});
saveState();
}
};
window.updateImageMedia = (id, type) => {
let target = findLayerById(id, project.html).layer.props['src'];
let modalContent = `<div class="p-4 text-center grid grid-cols-1 gap-4 place-items-center">
Expand Down

0 comments on commit 1ab9e5e

Please sign in to comment.