laantungir/hamburger_morphing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve css handling

Browse Source
This commit is contained in:
Your Name
2025-11-12 16:15:25 -04:00
parent fc2ed6fc9d
commit 8b91e61682
1 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
hamburger.mjs
View File

@@ -18,9 +18,9 @@ export class HamburgerMorphing {
* @param {string} containerSelector - CSS selector for the container element
* @param {Object} options - Configuration options
* @param {number} [options.size=100] - Size of the SVG in pixels
* @param {string} [options.foreground="#000000"] - Foreground/stroke color for the lines
* @param {string} [options.background="#ffffff"] - Background color for cutout effects
* @param {string} [options.hover="#ff0000"] - Hover color for interactive effects
* @param {string} [options.foreground="#000000"] - Foreground/stroke color for the lines (supports CSS variables)
* @param {string} [options.background="#ffffff"] - Background color for cutout effects (supports CSS variables)
* @param {string} [options.hover="#ff0000"] - Hover color for interactive effects (supports CSS variables)
*/
constructor(containerSelector, options = {}) {
this.container = document.querySelector(containerSelector);
@@ -30,9 +30,9 @@ export class HamburgerMorphing {
this.options = {
size: options.size || 100,
foreground: options.foreground || DEFAULT_FOREGROUND,
background: options.background || DEFAULT_BACKGROUND,
hover: options.hover || DEFAULT_HOVER
foreground: this.resolveCssVariable(options.foreground || DEFAULT_FOREGROUND),
background: this.resolveCssVariable(options.background || DEFAULT_BACKGROUND),
hover: this.resolveCssVariable(options.hover || DEFAULT_HOVER)
};
this.draw = null;
@@ -54,6 +54,31 @@ export class HamburgerMorphing {
this.container.addEventListener('mouseleave', () => this.onHover(false));
}
/**
* Resolves CSS variables to their computed color values
* @param {string} color - Color value (can be CSS variable like 'var(--primary-color)' or hex like '#000000')
* @returns {string} Resolved color value
*/
resolveCssVariable(color) {
// Check if the color is a CSS variable
if (color && color.trim().startsWith('var(')) {
// Extract the variable name from var(--variable-name)
const match = color.match(/var\(\s*(--[^,\s)]+)/);
if (match) {
const variableName = match[1];
// Get the computed style from the document root
const computedValue = getComputedStyle(document.documentElement)
.getPropertyValue(variableName)
.trim();
// Return the computed value if found, otherwise return the original
return computedValue || color;
}
}
// Return the color as-is if it's not a CSS variable
return color;
}
/**
* Initializes the SVG drawing and creates the initial hamburger lines
*/