Added hover functionality
This commit is contained in:
Your Name
173
hamburger.mjs
173
hamburger.mjs
@@ -7,13 +7,20 @@
|
||||
const STROKE_WIDTH = 29;
|
||||
const ANIMATION_DURATION = 500;
|
||||
|
||||
// Default colors for light and dark mode compatibility
|
||||
const DEFAULT_FOREGROUND = "#000000";
|
||||
const DEFAULT_BACKGROUND = "#ffffff";
|
||||
const DEFAULT_HOVER = "#ff0000";
|
||||
|
||||
export class HamburgerMorphing {
|
||||
/**
|
||||
* Creates a new hamburger morphing animation instance
|
||||
* @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.color="#000"] - Stroke color for the lines
|
||||
* @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
|
||||
*/
|
||||
constructor(containerSelector, options = {}) {
|
||||
this.container = document.querySelector(containerSelector);
|
||||
@@ -23,7 +30,9 @@ export class HamburgerMorphing {
|
||||
|
||||
this.options = {
|
||||
size: options.size || 100,
|
||||
color: options.color || "#000"
|
||||
foreground: options.foreground || DEFAULT_FOREGROUND,
|
||||
background: options.background || DEFAULT_BACKGROUND,
|
||||
hover: options.hover || DEFAULT_HOVER
|
||||
};
|
||||
|
||||
this.draw = null;
|
||||
@@ -32,13 +41,17 @@ export class HamburgerMorphing {
|
||||
this.line3 = null;
|
||||
|
||||
this.stroke = {
|
||||
color: this.options.color,
|
||||
color: this.options.foreground,
|
||||
width: STROKE_WIDTH,
|
||||
linecap: "round",
|
||||
linejoin: "round",
|
||||
};
|
||||
|
||||
this.init();
|
||||
|
||||
// Add hover event listeners
|
||||
this.container.addEventListener('mouseenter', () => this.onHover(true));
|
||||
this.container.addEventListener('mouseleave', () => this.onHover(false));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,9 +65,9 @@ export class HamburgerMorphing {
|
||||
this.draw = SVG().addTo(this.container).size('100%', '100%').viewbox(0, 0, 100, 100);
|
||||
|
||||
// Create the three lines
|
||||
this.line1 = this.draw.line(20, 20, 80, 20).fill("#fff").stroke(this.stroke);
|
||||
this.line2 = this.draw.line(20, 50, 80, 50).fill("#fff").stroke(this.stroke);
|
||||
this.line3 = this.draw.line(20, 80, 80, 80).fill("#fff").stroke(this.stroke);
|
||||
this.line1 = this.draw.line(20, 20, 80, 20).fill(this.options.background).stroke(this.stroke);
|
||||
this.line2 = this.draw.line(20, 50, 80, 50).fill(this.options.background).stroke(this.stroke);
|
||||
this.line3 = this.draw.line(20, 80, 80, 80).fill(this.options.background).stroke(this.stroke);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -66,103 +79,123 @@ export class HamburgerMorphing {
|
||||
throw new Error('HamburgerMorphing not properly initialized');
|
||||
}
|
||||
|
||||
|
||||
switch (shape) {
|
||||
case 'x':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 80 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 80, y2: 20 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 20 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'plus':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'minus':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'burger':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'arrow_left':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 65, x2: 80, y1: 50, y2: 50 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 80, y2: 50 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 65, x2: 80, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 80, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'arrow_down':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 80 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 35 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 35, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'arrow_up':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 20 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 80, y2: 65 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 20 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 80, y2: 65, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'arrow_right':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 35, y1: 50, y2: 50 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 50 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 35, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'triangle_up':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'triangle_down':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'triangle_left':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'triangle_right':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'carrot_right':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'carrot_left':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'carrot_up':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'carrot_down':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'circle':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 90 , stroke: this.options.foreground });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 90 , stroke: this.options.foreground });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 90 , stroke: this.options.foreground });
|
||||
break;
|
||||
|
||||
case 'doughnut':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 90 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 90 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50, 'stroke-width': 45, stroke: this.options.background });
|
||||
break;
|
||||
|
||||
case 'moon':
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 60, x2: 60, y1: 50, y2: 50, 'stroke-width': 90 });
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 60, x2: 60, y1: 50, y2: 50, 'stroke-width': 90 });
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 90, x2: 90, y1: 50, y2: 50, 'stroke-width': 90, stroke: this.options.background });
|
||||
break;
|
||||
|
||||
|
||||
default:
|
||||
throw new Error(`Unknown shape: ${shape}`);
|
||||
}
|
||||
@@ -184,23 +217,49 @@ export class HamburgerMorphing {
|
||||
const y1 = Math.round(line.getAttribute('y1'));
|
||||
const x2 = Math.round(line.getAttribute('x2'));
|
||||
const y2 = Math.round(line.getAttribute('y2'));
|
||||
const stroke = line.getAttribute('stroke') || this.options.color;
|
||||
const strokeWidth = line.getAttribute('stroke-width') || '38';
|
||||
const stroke = line.getAttribute('stroke') || this.options.foreground;
|
||||
const strokeWidth = line.getAttribute('stroke-width') || STROKE_WIDTH.toString();
|
||||
const strokeLinecap = line.getAttribute('stroke-linecap') || 'round';
|
||||
const strokeLinejoin = line.getAttribute('stroke-linejoin') || 'round';
|
||||
const fill = line.getAttribute('fill') || '#fff';
|
||||
const opacity = line.getAttribute('opacity') || '1';
|
||||
|
||||
svgCode += ` <line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLinecap}" stroke-linejoin="${strokeLinejoin}" fill="${fill}"></line>\n`;
|
||||
svgCode += ` <line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLinecap}" stroke-linejoin="${strokeLinejoin}" fill="${fill}" opacity="${opacity}"></line>\n`;
|
||||
});
|
||||
|
||||
svgCode += `</svg>`;
|
||||
return svgCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles hover state changes with animation
|
||||
* @param {boolean} isHovering - Whether the mouse is hovering
|
||||
*/
|
||||
onHover(isHovering) {
|
||||
if (!this.line1 || !this.line2 || !this.line3) return;
|
||||
|
||||
const targetColor = isHovering ? this.options.hover : this.options.foreground;
|
||||
|
||||
// Only change color for lines that have the foreground color (not background/cutout colors)
|
||||
if (this.line1.attr('stroke') === this.options.foreground || this.line1.attr('stroke') === this.options.hover) {
|
||||
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ stroke: targetColor });
|
||||
}
|
||||
if (this.line2.attr('stroke') === this.options.foreground || this.line2.attr('stroke') === this.options.hover) {
|
||||
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ stroke: targetColor });
|
||||
}
|
||||
if (this.line3.attr('stroke') === this.options.foreground || this.line3.attr('stroke') === this.options.hover) {
|
||||
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ stroke: targetColor });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroys the hamburger morphing instance and cleans up the DOM
|
||||
*/
|
||||
destroy() {
|
||||
// Remove event listeners
|
||||
this.container.removeEventListener('mouseenter', () => this.onHover(true));
|
||||
this.container.removeEventListener('mouseleave', () => this.onHover(false));
|
||||
|
||||
if (this.draw) {
|
||||
this.draw.remove();
|
||||
this.draw = null;
|
||||
|
||||
Reference in New Issue
Block a user