sdocs-dev 1.2.0 → 1.3.0

package/public/sdocs-controls.js

@@ -6,7 +6,7 @@ var S = SDocs;
 
 // ── CSS var updates ──────────────────────────────────
 
-function applyCtrl(id) {
+function applyControlToCss(id) {
   var el = document.getElementById(id);
   if (!el) return;
   var v = el.value;
@@ -35,14 +35,14 @@ function readAllControlValues() {
   return vals;
 }
 
-function linkRangeNum(rangeId, numId) {
+function syncRangeAndNumber(rangeId, numId) {
   var r = document.getElementById(rangeId);
   var n = document.getElementById(numId);
-  r.addEventListener('input', function() { n.value = r.value; applyCtrl(numId); });
-  n.addEventListener('input', function() { r.value = n.value; applyCtrl(numId); });
+  r.addEventListener('input', function() { n.value = r.value; applyControlToCss(numId); });
+  n.addEventListener('input', function() { r.value = n.value; applyControlToCss(numId); });
 }
 
-SDocStyles.RANGE_NUM_PAIRS.forEach(function(pair) { linkRangeNum(pair[0], pair[1]); });
+SDocStyles.RANGE_NUM_PAIRS.forEach(function(pair) { syncRangeAndNumber(pair[0], pair[1]); });
 
 var STANDALONE_COLOR_IDS = new Set(SDocStyles.STANDALONE_COLOR_IDS);
 
@@ -50,10 +50,11 @@ var STANDALONE_COLOR_IDS = new Set(SDocStyles.STANDALONE_COLOR_IDS);
   'ctrl-font-family','ctrl-h-font-family',
   'ctrl-h1-weight','ctrl-h2-weight','ctrl-h3-weight','ctrl-h4-weight',
   'ctrl-bg-color','ctrl-link-color','ctrl-link-decoration',
-  'ctrl-code-font','ctrl-code-bg','ctrl-code-color',
-  'ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-color',
+  'ctrl-code-font',
+  'ctrl-bq-border-color',
+  'ctrl-chart-accent','ctrl-chart-palette',
 ].forEach(function(id) {
-  var handler = function() { if (STANDALONE_COLOR_IDS.has(id)) S.overriddenColors.add(id); applyCtrl(id); };
+  var handler = function() { if (STANDALONE_COLOR_IDS.has(id)) S.overriddenColors.add(id); applyControlToCss(id); S.syncAll('controls'); };
   document.getElementById(id).addEventListener('input',  handler);
   document.getElementById(id).addEventListener('change', handler);
 });
@@ -65,7 +66,12 @@ var COLOR_CHILDREN = SDocStyles.COLOR_CASCADE;
 
 function setColorValue(ctrlId, value, userAction) {
   if (userAction) S.overriddenColors.add(ctrlId);
-  S.setStyleVar(COLOR_VAR[ctrlId], value);
+  var varName = COLOR_VAR[ctrlId];
+  if (Array.isArray(varName)) {
+    varName.forEach(function(v) { S.setStyleVar(v, value); });
+  } else {
+    S.setStyleVar(varName, value);
+  }
   var ctrl = document.getElementById(ctrlId);
   if (ctrl) ctrl.value = value;
   var children = COLOR_CHILDREN[ctrlId] || [];
@@ -74,30 +80,57 @@ function setColorValue(ctrlId, value, userAction) {
       setColorValue(children[i], value, false);
     }
   }
+  // Refresh charts when block/chart colors change
+  if (S.refreshChartColors && (ctrlId === 'ctrl-chart-bg' || ctrlId === 'ctrl-chart-text' ||
+      ctrlId === 'ctrl-block-bg' || ctrlId === 'ctrl-block-text')) {
+    S.refreshChartColors();
+  }
+}
+
+function findParent(ctrlId) {
+  for (var pid in COLOR_CHILDREN) {
+    if (COLOR_CHILDREN[pid].indexOf(ctrlId) !== -1) return pid;
+  }
+  return null;
 }
 
 function resetColorValue(ctrlId) {
   S.overriddenColors.delete(ctrlId);
-  setColorValue(ctrlId, S.getColorDefault(), false);
+  var parent = findParent(ctrlId);
+  var value;
+  if (!parent) {
+    // Cascade root: use theme default
+    value = ctrlId === 'ctrl-color' ? S.getColorDefault() : S.getStandaloneDefault(ctrlId);
+  } else {
+    var parentEl = document.getElementById(parent);
+    value = parentEl ? parentEl.value : S.getColorDefault();
+  }
+  setColorValue(ctrlId, value, false);
 }
 
 Object.keys(COLOR_VAR).forEach(function(ctrlId) {
   var el = document.getElementById(ctrlId);
   if (!el) return;
-  el.addEventListener('input',  function() { setColorValue(ctrlId, el.value, true); S.syncAll('controls'); });
-  el.addEventListener('change', function() { setColorValue(ctrlId, el.value, true); S.syncAll('controls'); });
+  var handler = function() { setColorValue(ctrlId, el.value, true); S.syncAll('controls'); };
+  el.addEventListener('input',  handler);
+  el.addEventListener('change', handler);
+});
+
+// Cascade color reset buttons
+document.getElementById('reset-color').addEventListener('click', function() { S.overriddenColors.delete('ctrl-color'); setColorValue('ctrl-color', S.getColorDefault(), false); S.syncAll('controls'); });
+['ctrl-h-color','ctrl-h1-color','ctrl-h2-color','ctrl-h3-color','ctrl-h4-color','ctrl-p-color','ctrl-list-color'].forEach(function(ctrlId) {
+  var btn = document.getElementById('reset-' + ctrlId.replace('ctrl-', ''));
+  if (btn) btn.addEventListener('click', function() { resetColorValue(ctrlId); S.syncAll('controls'); });
 });
 
-document.getElementById('reset-color').addEventListener('click',      function() { S.overriddenColors.delete('ctrl-color'); setColorValue('ctrl-color', S.getColorDefault(), false); S.syncAll('controls'); });
-document.getElementById('reset-h-color').addEventListener('click',    function() { resetColorValue('ctrl-h-color'); S.syncAll('controls'); });
-document.getElementById('reset-h1-color').addEventListener('click',   function() { resetColorValue('ctrl-h1-color'); S.syncAll('controls'); });
-document.getElementById('reset-h2-color').addEventListener('click',   function() { resetColorValue('ctrl-h2-color'); S.syncAll('controls'); });
-document.getElementById('reset-h3-color').addEventListener('click',   function() { resetColorValue('ctrl-h3-color'); S.syncAll('controls'); });
-document.getElementById('reset-h4-color').addEventListener('click',   function() { resetColorValue('ctrl-h4-color'); S.syncAll('controls'); });
-document.getElementById('reset-p-color').addEventListener('click',    function() { resetColorValue('ctrl-p-color'); S.syncAll('controls'); });
-document.getElementById('reset-list-color').addEventListener('click', function() { resetColorValue('ctrl-list-color'); S.syncAll('controls'); });
+// Block cascade resets
+['ctrl-block-bg','ctrl-block-text','ctrl-code-bg','ctrl-code-color','ctrl-bq-bg','ctrl-bq-color','ctrl-chart-bg','ctrl-chart-text'].forEach(function(ctrlId) {
+  var btnId = 'reset-' + ctrlId.replace('ctrl-', '');
+  var btn = document.getElementById(btnId);
+  if (btn) btn.addEventListener('click', function() { resetColorValue(ctrlId); S.syncAll('controls'); });
+});
 
-['ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-color'].forEach(function(ctrlId) {
+['ctrl-bg-color','ctrl-link-color','ctrl-bq-border-color','ctrl-chart-accent'].forEach(function(ctrlId) {
   var btnId = 'reset-' + ctrlId.replace('ctrl-', '');
   document.getElementById(btnId).addEventListener('click', function() {
     var defaultVal = S.getStandaloneDefault(ctrlId);
@@ -112,7 +145,7 @@ document.getElementById('reset-list-color').addEventListener('click', function()
 
 // ── Apply styles from meta → controls ──────────────────
 
-function setCtrl(id, val) {
+function setControlValue(id, val) {
   if (val === undefined || val === null) return;
   var el = document.getElementById(id);
   if (!el) return;
@@ -120,7 +153,7 @@ function setCtrl(id, val) {
   var rangeId = id.replace(/-num$/, '-range');
   var rng = document.getElementById(rangeId);
   if (rng) rng.value = val;
-  applyCtrl(id);
+  applyControlToCss(id);
 }
 
 function applyStylesFromMeta(s) {
@@ -142,31 +175,17 @@ function applyStylesFromMeta(s) {
         return o.value.replace(/['"]/g,'').split(',')[0].trim() === fontName ||
                o.textContent === fontName;
       });
-      if (match) { sel.value = match.value; applyCtrl(ctrlId); }
+      if (match) { sel.value = match.value; applyControlToCss(ctrlId); }
     }
   });
 
   Object.keys(controls).forEach(function(id) {
     if (id === 'ctrl-font-family' || id === 'ctrl-h-font-family') return;
     if (SDocStyles.COLOR_VAR_MAP[id]) return;
-    setCtrl(id, controls[id]);
+    setControlValue(id, controls[id]);
   });
 
-  if (result.hasThemeColors) {
-    // Per-theme color mode: populate both theme states
-    S.themeColors.light = result.lightColors || {};
-    S.themeColors.dark = result.darkColors || {};
-    S.themeOverridden.light = result.lightOverridden || new Set();
-    S.themeOverridden.dark = result.darkOverridden || new Set();
-
-    // Load the active theme's colors into controls
-    S._syncing = wasSyncing;
-    S.loadThemeColors(S.activeTheme);
-    return;
-  }
-
-  // Legacy single-theme path: top-level colors go to light theme only,
-  // then loadThemeColors applies the correct theme's colors.
+  // Top-level colors = light theme. dark: block = explicit dark overrides.
   var lightOverridden = S.themeOverridden.light;
   var lightColors = S.themeColors.light;
   var newOverridden = result.overriddenColors;
@@ -187,33 +206,88 @@ function applyStylesFromMeta(s) {
     if (s.code.background) legacyStandalone.push(['ctrl-code-bg', s.code.background]);
     if (s.code.color) legacyStandalone.push(['ctrl-code-color', s.code.color]);
   }
+  if (s.blocks) {
+    if (s.blocks.background) legacyStandalone.push(['ctrl-block-bg', s.blocks.background]);
+    if (s.blocks.color) legacyStandalone.push(['ctrl-block-text', s.blocks.color]);
+  }
   if (s.blockquote) {
     if (s.blockquote.borderColor) legacyStandalone.push(['ctrl-bq-border-color', s.blockquote.borderColor]);
     if (s.blockquote.background) legacyStandalone.push(['ctrl-bq-bg', s.blockquote.background]);
     if (s.blockquote.color) legacyStandalone.push(['ctrl-bq-color', s.blockquote.color]);
   }
+  if (s.chart) {
+    if (s.chart.background) legacyStandalone.push(['ctrl-chart-bg', s.chart.background]);
+    if (s.chart.textColor) legacyStandalone.push(['ctrl-chart-text', s.chart.textColor]);
+  }
+
+  // File-info card overrides (no UI controls — driven entirely by YAML).
+  S.fileinfoStyles = {};
+  if (s.fileinfo) {
+    if (s.fileinfo.background) {
+      S.fileinfoStyles.background = s.fileinfo.background;
+      S.setStyleVar('--md-fic-bg', s.fileinfo.background);
+    }
+    if (s.fileinfo.color) {
+      S.fileinfoStyles.color = s.fileinfo.color;
+      S.setStyleVar('--md-fic-text', s.fileinfo.color);
+    }
+  }
   legacyStandalone.forEach(function(pair) {
     lightOverridden.add(pair[0]);
     lightColors[pair[0]] = pair[1];
   });
 
-  // Now apply the active theme's colors (light overrides or dark defaults)
+  // Auto-generate dark theme from light colors via lightness inversion
+  var darkOverridden = S.themeOverridden.dark;
+  var darkColors = S.themeColors.dark;
+
+  // Parse explicit dark: overrides from YAML and persist for serialization
+  var explicitDark = s.dark ? SDocStyles.parseDarkBlock(s.dark) : {};
+  S._explicitDarkOverrides = s.dark || null;
+
+  // For every light color, auto-generate dark unless explicitly overridden
+  lightOverridden.forEach(function(id) {
+    if (explicitDark[id]) {
+      darkOverridden.add(id);
+      darkColors[id] = explicitDark[id];
+    } else {
+      darkOverridden.add(id);
+      darkColors[id] = SDocStyles.invertLightness(lightColors[id]);
+    }
+  });
+
+  // Also apply any dark: colors that weren't in light (e.g. dark-only overrides)
+  Object.keys(explicitDark).forEach(function(id) {
+    if (!darkOverridden.has(id)) {
+      darkOverridden.add(id);
+      darkColors[id] = explicitDark[id];
+    }
+  });
+
+  // Now apply the active theme's colors
   S._syncing = wasSyncing;
   S.loadThemeColors(S.activeTheme);
 }
 
 function collectStyles() {
   S.saveCurrentThemeColors();
-  var lightHas = S.themeOverridden.light.size > 0;
-  var darkHas = S.themeOverridden.dark.size > 0;
-  if (lightHas || darkHas) {
-    return SDocStyles.collectStylesDual(
-      readAllControlValues(),
-      S.themeOverridden.light, S.themeOverridden.dark,
-      S.themeColors.light, S.themeColors.dark
-    );
+  // Always emit top-level colors (light) via the simple collector
+  var styles = SDocStyles.collectStyles(readAllControlValues(), S.overriddenColors);
+
+  // Emit dark: block for any explicitly set dark overrides
+  // (don't emit auto-inverted values — those are generated on load)
+  if (S._explicitDarkOverrides && Object.keys(S._explicitDarkOverrides).length > 0) {
+    var darkBlock = SDocStyles.parseDarkBlock(S._explicitDarkOverrides);
+    // parseDarkBlock expects the YAML format, but _explicitDarkOverrides IS the YAML dark: object
+    styles.dark = S._explicitDarkOverrides;
   }
-  return SDocStyles.collectStyles(readAllControlValues(), S.overriddenColors);
+
+  // File-info card overrides (no UI controls; round-trip from YAML)
+  if (S.fileinfoStyles && Object.keys(S.fileinfoStyles).length > 0) {
+    styles.fileinfo = Object.assign({}, S.fileinfoStyles);
+  }
+
+  return styles;
 }
 
 // ── Reset all styles ──────────────────────────────────
@@ -224,8 +298,15 @@ function resetAllStyles() {
   S.themeOverridden.dark.clear();
   S.themeColors.light = {};
   S.themeColors.dark = {};
+  // Clear file-info-card overrides and the CSS vars they set
+  S.fileinfoStyles = {};
+  S.setStyleVar('--md-fic-bg', '');
+  S.setStyleVar('--md-fic-text', '');
 
   setColorValue('ctrl-color', S.getColorDefault(), false);
+  // Reset block cascade roots to theme defaults
+  setColorValue('ctrl-block-bg', S.getStandaloneDefault('ctrl-block-bg') || '#f4f1ed', false);
+  setColorValue('ctrl-block-text', S.getStandaloneDefault('ctrl-block-text') || '#6b6560', false);
   // Set standalone color controls to theme-appropriate defaults
   STANDALONE_COLOR_IDS.forEach(function(ctrlId) {
     var el = document.getElementById(ctrlId);
@@ -243,10 +324,11 @@ function resetAllStyles() {
    'ctrl-h3-size-num','ctrl-h3-weight','ctrl-h4-size-num','ctrl-h4-weight',
    'ctrl-p-lh-num','ctrl-p-mb-num',
    'ctrl-link-color','ctrl-link-decoration',
-   'ctrl-code-font','ctrl-code-bg','ctrl-code-color',
-   'ctrl-bq-border-color','ctrl-bq-bg','ctrl-bq-bw-num','ctrl-bq-size-num','ctrl-bq-color',
+   'ctrl-code-font',
+   'ctrl-bq-border-color','ctrl-bq-bw-num','ctrl-bq-size-num',
    'ctrl-list-spacing-num','ctrl-list-indent-num',
-  ].forEach(function(id) { applyCtrl(id); });
+   'ctrl-chart-accent','ctrl-chart-palette',
+  ].forEach(function(id) { applyControlToCss(id); });
 }
 
 // ── Init: set colors to theme-appropriate defaults ──────