canvasframework 0.3.15 → 0.3.16

package/components/Accordion.js

@@ -1,35 +1,11 @@
 import Component from '../core/Component.js';
+
 /**
- * Accordéon (section extensible)
+ * Accordion (section extensible) avec styles Material & Cupertino + Ripple centré Android
  * @class
  * @extends Component
- * @property {string} title - Titre
- * @property {string} content - Contenu
- * @property {string|null} icon - Icône
- * @property {boolean} expanded - Déplié
- * @property {string} platform - Plateforme
- * @property {number} headerHeight - Hauteur de l'en-tête
- * @property {number} contentPadding - Padding du contenu
- * @property {string} bgColor - Couleur de fond
- * @property {string} borderColor - Couleur de la bordure
- * @property {Function} onToggle - Callback au toggle
- * @property {boolean} animating - En cours d'animation
- * @property {number} animProgress - Progression de l'animation
- * @property {number} contentHeight - Hauteur du contenu
  */
 class Accordion extends Component {
-  /**
-   * Crée une instance de Accordion
-   * @param {CanvasFramework} framework - Framework parent
-   * @param {Object} [options={}] - Options de configuration
-   * @param {string} [options.title=''] - Titre
-   * @param {string} [options.content=''] - Contenu
-   * @param {string} [options.icon] - Icône
-   * @param {boolean} [options.expanded=false] - Déplié initialement
-   * @param {Function} [options.onToggle] - Callback au toggle
-   * @param {string} [options.bgColor='#FFFFFF'] - Couleur de fond
-   * @param {string} [options.borderColor='#E0E0E0'] - Couleur de bordure
-   */
   constructor(framework, options = {}) {
     super(framework, options);
     this.title = options.title || '';
@@ -44,58 +20,47 @@ class Accordion extends Component {
     this.onToggle = options.onToggle;
     this.animating = false;
     this.animProgress = this.expanded ? 1 : 0;
-    
-    // Calculer la hauteur du contenu
+
     this.calculateContentHeight();
     this.height = this.headerHeight + (this.expanded ? this.contentHeight : 0);
-    
-    // CORRECTION: Bloquer les clics pendant l'animation
+
+    // Pour les ripples Material
+    this.ripples = [];
+    this.rippleColor = 'rgba(1,0,0,0.2)';
+
+    // Clic
     this.onClick = () => {
-      // Ignorer les clics pendant l'animation
-      if (this.animating) {
-        return;
+      if (this.animating) return;
+
+      // Ripple centré Material
+      if (this.platform === 'material') {
+        this.addRipple();
       }
+
       this.toggle();
     };
   }
-  
-  /**
-   * Calcule la hauteur du contenu
-   * @private
-   */
+
   calculateContentHeight() {
     const ctx = this.framework.ctx;
     ctx.save();
     ctx.font = '14px -apple-system, sans-serif';
-    
-    // Diviser le contenu en lignes
-    const maxWidth = this.width - (this.contentPadding * 2);
+    const maxWidth = this.width - this.contentPadding * 2;
     const lines = this.wrapText(ctx, this.content, maxWidth);
-    const lineHeight = 20;
-    
     ctx.restore();
-    this.contentHeight = lines.length * lineHeight + (this.contentPadding * 2);
+    const lineHeight = 20;
+    this.contentHeight = lines.length * lineHeight + this.contentPadding * 2;
   }
-  
-  /**
-   * Divise le texte en lignes
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {string} text - Texte
-   * @param {number} maxWidth - Largeur maximale
-   * @returns {string[]} Tableau de lignes
-   * @private
-   */
+
   wrapText(ctx, text, maxWidth) {
     const words = text.split(' ');
     const lines = [];
     let currentLine = words[0] || '';
-    
     for (let i = 1; i < words.length; i++) {
       const word = words[i];
-      const width = ctx.measureText(currentLine + " " + word).width;
-      if (width < maxWidth) {
-        currentLine += " " + word;
-      } else {
+      const width = ctx.measureText(currentLine + ' ' + word).width;
+      if (width < maxWidth) currentLine += ' ' + word;
+      else {
         lines.push(currentLine);
         currentLine = word;
       }
@@ -103,64 +68,124 @@ class Accordion extends Component {
     lines.push(currentLine);
     return lines;
   }
-  
-  /**
-   * Alterne l'état déplié/replié
-   */
+
   toggle() {
-    // Empêcher les toggles multiples pendant l'animation
     if (this.animating) return;
-    
     this.expanded = !this.expanded;
     if (this.onToggle) this.onToggle(this.expanded);
     this.animate();
   }
-  
-  /**
-   * Anime le toggle
-   * @private
-   */
+
   animate() {
     if (this.animating) return;
     this.animating = true;
-    
     const target = this.expanded ? 1 : 0;
     const step = 0.1;
-    
+
     const doAnimate = () => {
       if (Math.abs(this.animProgress - target) < 0.01) {
         this.animProgress = target;
-        this.height = this.headerHeight + (this.contentHeight * this.animProgress);
+        this.height = this.headerHeight + this.contentHeight * this.animProgress;
         this.animating = false;
         return;
       }
-      
       this.animProgress += this.animProgress < target ? step : -step;
-      this.height = this.headerHeight + (this.contentHeight * this.animProgress);
+      this.height = this.headerHeight + this.contentHeight * this.animProgress;
       requestAnimationFrame(doAnimate);
     };
-    
     doAnimate();
   }
-  
-  /**
-   * Dessine l'accordéon
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+
+  addRipple() {
+    const ripple = {
+      x: this.width / 2,
+      y: this.headerHeight / 2,
+      radius: 0,
+      maxRadius: Math.max(this.width, this.headerHeight) * 1.5,
+      opacity: 0.3
+    };
+    this.ripples.push(ripple);
+    this.animateRipples();
+  }
+
+  animateRipples() {
+    const animate = () => {
+      let active = false;
+      for (let ripple of this.ripples) {
+        if (ripple.radius < ripple.maxRadius) {
+          ripple.radius += ripple.maxRadius / 15;
+          ripple.opacity -= 0.03;
+          active = true;
+        }
+      }
+      this.ripples = this.ripples.filter(r => r.opacity > 0);
+      if (active) requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
   draw(ctx) {
     ctx.save();
-    
+
+    let headerBg = '#FFFFFF';
+    let headerTextColor = '#000000';
+    let borderColor = this.borderColor;
+    let shadowBlur = 0;
+    let chevronWidth = 2;
+
+    if (this.platform === 'material') {
+      headerBg = '#F5F5F5';
+      headerTextColor = '#212121';
+      shadowBlur = 4;
+      chevronWidth = 3;
+    } else if (this.platform === 'cupertino') {
+      headerBg = '#FFFFFF';
+      headerTextColor = '#000000';
+      borderColor = '#C7C7CC';
+      chevronWidth = 1.5;
+    }
+
+    // Ombre Material
+    if (shadowBlur > 0) {
+      ctx.shadowColor = 'rgba(0,0,0,0.2)';
+      ctx.shadowBlur = shadowBlur;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 2;
+    }
+
     // Background
     ctx.fillStyle = this.bgColor;
     ctx.fillRect(this.x, this.y, this.width, this.height);
-    
-    // Bordure
-    ctx.strokeStyle = this.borderColor;
-    ctx.lineWidth = 1;
-    ctx.strokeRect(this.x, this.y, this.width, this.height);
-    
+
+    // Bordure Cupertino
+    if (this.platform === 'cupertino') {
+      ctx.strokeStyle = borderColor;
+      ctx.lineWidth = 1;
+      ctx.strokeRect(this.x, this.y, this.width, this.height);
+    }
+
     // Header
-    // Icône (si présente)
+    ctx.fillStyle = headerBg;
+    ctx.fillRect(this.x, this.y, this.width, this.headerHeight);
+
+    // Ripple centré Material
+    if (this.platform === 'material' && this.ripples.length) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(this.x, this.y, this.width, this.headerHeight);
+      ctx.clip();
+      for (let ripple of this.ripples) {
+        ctx.globalAlpha = ripple.opacity;
+        ctx.fillStyle = this.rippleColor;
+        ctx.beginPath();
+        ctx.arc(this.x + ripple.x, this.y + ripple.y, ripple.radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.globalAlpha = 1;
+    }
+
+    // Icône
     if (this.icon) {
       ctx.font = '20px sans-serif';
       ctx.fillStyle = '#666666';
@@ -168,26 +193,27 @@ class Accordion extends Component {
       ctx.textBaseline = 'middle';
       ctx.fillText(this.icon, this.x + 16, this.y + this.headerHeight / 2);
     }
-    
+
     // Titre
-    ctx.fillStyle = '#000000';
-    ctx.font = 'bold 16px -apple-system, sans-serif';
+    ctx.fillStyle = headerTextColor;
+    ctx.font =
+      this.platform === 'material'
+        ? 'bold 16px Roboto, sans-serif'
+        : 'bold 16px -apple-system, sans-serif';
     ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
-    const titleX = this.x + (this.icon ? 56 : 16);
+    const titleX = this.icon ? this.x + 56 : this.x + 16;
     ctx.fillText(this.title, titleX, this.y + this.headerHeight / 2);
-    
-    // Chevron (flèche)
+
+    // Chevron
     const chevronX = this.x + this.width - 30;
     const chevronY = this.y + this.headerHeight / 2;
     const chevronRotation = this.animProgress * Math.PI;
-    
     ctx.save();
     ctx.translate(chevronX, chevronY);
     ctx.rotate(chevronRotation);
-    
     ctx.strokeStyle = '#666666';
-    ctx.lineWidth = 2;
+    ctx.lineWidth = chevronWidth;
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
     ctx.beginPath();
@@ -195,58 +221,45 @@ class Accordion extends Component {
     ctx.lineTo(0, 3);
     ctx.lineTo(6, -3);
     ctx.stroke();
-    
     ctx.restore();
-    
-    // Contenu (si expanded ou en train d'animer)
+
+    // Contenu
     if (this.animProgress > 0) {
       ctx.save();
-      
-      // Clipping pour l'animation
       ctx.beginPath();
       ctx.rect(this.x, this.y + this.headerHeight, this.width, this.contentHeight * this.animProgress);
       ctx.clip();
-      
-      // Divider
-      ctx.strokeStyle = this.borderColor;
+
+      ctx.strokeStyle = borderColor;
       ctx.lineWidth = 1;
       ctx.beginPath();
       ctx.moveTo(this.x, this.y + this.headerHeight);
       ctx.lineTo(this.x + this.width, this.y + this.headerHeight);
       ctx.stroke();
-      
-      // Texte du contenu
+
       ctx.fillStyle = '#666666';
       ctx.font = '14px -apple-system, sans-serif';
       ctx.textAlign = 'left';
       ctx.textBaseline = 'top';
-      
       const contentX = this.x + this.contentPadding;
       const contentY = this.y + this.headerHeight + this.contentPadding;
-      const maxWidth = this.width - (this.contentPadding * 2);
+      const maxWidth = this.width - this.contentPadding * 2;
       const lines = this.wrapText(ctx, this.content, maxWidth);
       const lineHeight = 20;
-      
       lines.forEach((line, index) => {
-        ctx.fillText(line, contentX, contentY + (index * lineHeight));
+        ctx.fillText(line, contentX, contentY + index * lineHeight);
       });
-      
+
       ctx.restore();
     }
-    
+
     ctx.restore();
   }
-  
-  /**
-   * Vérifie si un point est dans les limites
-   * @param {number} x - Coordonnée X
-   * @param {number} y - Coordonnée Y
-   * @returns {boolean} True si le point est dans l'en-tête
-   */
+
   isPointInside(x, y) {
-    return x >= this.x && x <= this.x + this.width && 
+    return x >= this.x && x <= this.x + this.width &&
            y >= this.y && y <= this.y + this.headerHeight;
   }
 }
 
-export default Accordion;
+export default Accordion;