Libreria JavaScript per Scaling Pixel-Based

Passa il mouse sui link dell'header di questo sito: crescono tutti dello stesso numero di pixel, qualunque sia la loro larghezza. Lo fa JS-Lib-Scale, una piccola libreria JavaScript che ho scritto proprio per questo.

Il problema di scale in CSS

La proprietà scale lavora in proporzione alla dimensione dell'elemento. Con scale(1.1) un bottone largo 100px cresce di 10px, uno largo 200px di 20px. In una fila di bottoni di misure diverse l'effetto hover diventa disomogeneo, e il CSS non permette di dire "cresci di 10 pixel".

Come funziona

Gli passi i pixel, non il fattore. ButtonScale misura ogni elemento che corrisponde al selettore e calcola il fattore di scala giusto per quella dimensione, così ogni bottone cresce o si riduce esattamente dei pixel indicati. Una sola istanza gestisce tutti gli elementi del selettore.

Installazione

La libreria si carica da jsDelivr, la stessa versione che usa questo sito:

<script src="https://cdn.jsdelivr.net/gh/FrancescoCiannavei/JS-Lib-Scale@1.0.1/library/main.min.js"></script>

Utilizzo

Crei un'istanza con un selettore CSS e i valori in pixel. Valori positivi ingrandiscono, negativi riducono.

<button class="scaleButton">Cliccami</button>

<script>
    new ButtonScale(".scaleButton", {
        hoverScale: 15,  // +15px all'hover
        clickScale: -5,  // -5px al click
    });
</script>

Opzioni

• hoverScale: pixel da aggiungere o togliere al passaggio del mouse.
• clickScale: pixel da aggiungere o togliere al click.
• maxScale: il fattore massimo raggiungibile, per evitare che un elemento piccolo cresca troppo.
• minScale: il fattore minimo, per evitare che si riduca troppo.

new ButtonScale('.my-button', {
  hoverScale: 15,
  clickScale: -10,
  maxScale: 1.2,   // mai oltre 1.2x
  minScale: 0.9    // mai sotto 0.9x
});

Tre bottoni, stessi pixel

Un esempio completo con tre bottoni di dimensioni diverse:

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn-small { padding: 8px 16px; }
        .btn-medium { padding: 12px 24px; }
        .btn-large { padding: 16px 32px; }
    </style>
</head>
<body>
    <button class="scaleButton btn-small">Piccolo</button>
    <button class="scaleButton btn-medium">Medio</button>
    <button class="scaleButton btn-large">Grande</button>

    <script src="https://cdn.jsdelivr.net/gh/FrancescoCiannavei/JS-Lib-Scale@1.0.1/library/main.min.js"></script>
    <script>
        new ButtonScale(".scaleButton", {
            hoverScale: 10,
            clickScale: -3,
        });
    </script>
</body>
</html>

Tutti e tre crescono di 10 pixel all'hover e si riducono di 3 pixel al click, nonostante le dimensioni diverse.

Dalla 0.0.1 alla 1.0.1

La prima versione aveva solo hoverScale e clickScale. Poi ho aggiunto i limiti maxScale e minScale e una suite di test con Jest che copre il calcolo della scala, gli handler di hover e click, i limiti e i casi limite. Con la 1.0.0 ho dichiarato la libreria stabile, senza modifiche incompatibili: il codice scritto per la 0.0.1 funziona ancora.

La documentazione e una demo dal vivo sono su GitHub Pages, il codice è nel repository su GitHub.