fix element popup toggle: remove/re-enable cycle + inherited CSS comments
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 10m27s
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 10m27s
Remove pre-toggle snapshot system that was re-adding CSS values after removeProps, causing toggles to not properly disable styles and breaking the off/on/off cycle. Reset refs to defaults on toggle-off so displayed CSS shows inherited values. Fix hasInCss to exclude commented blocks. Replace "valeur par défaut" with "hérité de la page" comments. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
b544928a65
commit
1f3649fc14
1 changed files with 48 additions and 42 deletions
|
|
@ -236,33 +236,30 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
}
|
||||
};
|
||||
|
||||
// --- Pre-toggle CSS snapshot ---
|
||||
// Saves the CSS values for a group before toggle ON, restores them on toggle OFF
|
||||
const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue }
|
||||
|
||||
const savePreToggleSnapshot = (group) => {
|
||||
const key = `${selector.value}::${group}`;
|
||||
const cssProps = settingGroups[group];
|
||||
const snapshot = {};
|
||||
for (const cssProp of cssProps) {
|
||||
const val = stylesheetStore.extractValue(selector.value, cssProp);
|
||||
if (val) snapshot[cssProp] = val;
|
||||
}
|
||||
preToggleSnapshots.set(key, snapshot);
|
||||
};
|
||||
|
||||
const restorePreToggleSnapshot = (group) => {
|
||||
const key = `${selector.value}::${group}`;
|
||||
const snapshot = preToggleSnapshots.get(key);
|
||||
if (!snapshot) return;
|
||||
for (const [cssProp, val] of Object.entries(snapshot)) {
|
||||
if (typeof val === 'object' && 'value' in val) {
|
||||
updateProp(cssProp, val.value, val.unit);
|
||||
} else {
|
||||
updateProp(cssProp, val);
|
||||
// --- Reset refs to inherited/default values when toggle is turned off ---
|
||||
const resetRefsToDefaults = (group) => {
|
||||
if (group === 'font') {
|
||||
fontFamily.value = textDefaults.fontFamily;
|
||||
italic.value = ELEMENT_DEFAULTS.italic;
|
||||
bold.value = ELEMENT_DEFAULTS.bold;
|
||||
// Re-apply inline defaults if applicable
|
||||
const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
|
||||
if (inlineDefaults) {
|
||||
if (inlineDefaults.fontStyle === 'italic') italic.value = true;
|
||||
if (inlineDefaults.fontWeight === 'bold') bold.value = true;
|
||||
}
|
||||
} else if (group === 'fontSize') {
|
||||
fontSize.value = textDefaults.fontSize.value;
|
||||
fontSize.unit = textDefaults.fontSize.unit;
|
||||
} else if (group === 'lineHeight') {
|
||||
lineHeight.value = textDefaults.lineHeight.value;
|
||||
lineHeight.unit = textDefaults.lineHeight.unit;
|
||||
} else if (group === 'color') {
|
||||
color.value = textDefaults.color;
|
||||
// Re-apply inline default color if applicable
|
||||
const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
|
||||
if (inlineDefaults?.color) color.value = inlineDefaults.color;
|
||||
}
|
||||
preToggleSnapshots.delete(key);
|
||||
};
|
||||
|
||||
// --- Toggle actions ---
|
||||
|
|
@ -275,7 +272,6 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
settingEnabled[group] = enabled;
|
||||
isUpdatingFromStore = true;
|
||||
if (enabled) {
|
||||
savePreToggleSnapshot(group);
|
||||
restoreFromCache(group);
|
||||
applyAllEnabledGroups();
|
||||
} else {
|
||||
|
|
@ -286,7 +282,8 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
} else {
|
||||
removeProps(settingGroups[group]);
|
||||
}
|
||||
restorePreToggleSnapshot(group);
|
||||
// Reset refs to defaults so displayedCss shows inherited values
|
||||
resetRefsToDefaults(group);
|
||||
}
|
||||
saveElementState();
|
||||
nextTick(() => { isUpdatingFromStore = false; });
|
||||
|
|
@ -353,10 +350,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']);
|
||||
const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value));
|
||||
|
||||
// Check if the current selector has a CSS property in the store
|
||||
// Check if the current selector has a CSS property in the store (active CSS only, not commented)
|
||||
const hasInCss = (cssProp) => {
|
||||
if (!selector.value) return false;
|
||||
return !!stylesheetStore.extractValue(selector.value, cssProp);
|
||||
return !!stylesheetStore.extractValue(selector.value, cssProp, false);
|
||||
};
|
||||
|
||||
const displayedCss = computed(() => {
|
||||
|
|
@ -364,9 +361,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
const lines = [];
|
||||
for (const entry of displayedCssOrder) {
|
||||
if (entry.skip && entry.skip()) continue;
|
||||
const groupEnabled = settingEnabled[entry.group];
|
||||
// For inline elements, skip special groups (TextSettings defaults) when toggle is OFF
|
||||
// Exception: keep if the current tag has an inline default for this CSS property
|
||||
if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) {
|
||||
if (entry.special && isInlineElement.value && !groupEnabled) {
|
||||
const tagDefaults = INLINE_DEFAULTS[currentTag.value];
|
||||
const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' };
|
||||
const defaultKey = cssToDefaultKey[entry.css];
|
||||
|
|
@ -374,18 +372,26 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
}
|
||||
const val = entry.getValue();
|
||||
if (val === null || val === undefined) continue;
|
||||
// Show "valeur par défaut" only if the value actually matches the TextSettings default
|
||||
let isTextDefault = false;
|
||||
if (entry.special && !settingEnabled[entry.group]) {
|
||||
const textDefaultValues = {
|
||||
'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
|
||||
'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
|
||||
'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
|
||||
'color': textDefaults.color,
|
||||
};
|
||||
isTextDefault = val === textDefaultValues[entry.css];
|
||||
|
||||
// Determine inheritance comment for disabled groups
|
||||
let comment = '';
|
||||
if (!groupEnabled) {
|
||||
if (entry.special) {
|
||||
// Special groups: show "hérité de la page" when value matches page-level default
|
||||
const textDefaultValues = {
|
||||
'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
|
||||
'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
|
||||
'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
|
||||
'color': textDefaults.color,
|
||||
};
|
||||
if (val === textDefaultValues[entry.css]) {
|
||||
comment = ' /* hérité de la page */';
|
||||
}
|
||||
} else if (hasInCss(entry.css)) {
|
||||
// Non-special groups: show comment when CSS exists but toggle is off
|
||||
comment = ' /* hérité de la page */';
|
||||
}
|
||||
}
|
||||
const comment = isTextDefault ? ' /* valeur par défaut */' : '';
|
||||
lines.push(` ${entry.css}: ${val};${comment}`);
|
||||
}
|
||||
for (const side of ['top', 'right', 'bottom', 'left']) {
|
||||
|
|
@ -402,7 +408,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
|
|||
});
|
||||
|
||||
const editableFullCss = computed(() => {
|
||||
return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, '');
|
||||
return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, '');
|
||||
});
|
||||
|
||||
// --- CSS parsing & sync ---
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue