Skip to content

Commit 4e0596e

Browse files
olivier3lancolivier3lanc
committed
[FEAT] pre-release
1 parent 76f9b5e commit 4e0596e

File tree

3 files changed

+82
-18
lines changed

3 files changed

+82
-18
lines changed

‎README.md‎

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# c-scrollsyncbar.js
22

3-
c-scrollsyncbar.js est une barre d'affichage et de masquage synchronisée avec le défilement de la fenêtre. c-scrollsyncbar.js permet d'afficher et de masquer progressivement la navigation ou tout autre élément en synchronisation avec le sens de défilement de la fenêtre.
3+
c-scrollsyncbar.js est une librairie permettant d'afficher/masquer des éléments HTML progressivement en fonction du sens de défilement de la fenêtre.
44

5-
![Kapture 2023-04-26 at 15 35 42](https://user-images.githubusercontent.com/13103047/234616162-0b5b4222-8bce-4d18-ab16-709a6ead5a11.gif)
6-
![Kapture 2023-04-26 at 15 39 16](https://user-images.githubusercontent.com/13103047/234616353-a2431b8d-6e02-422a-a2de-05fb4dbff243.gif)
5+
![GIF exemple usage c-scrollsyncbar.js 1](https://user-images.githubusercontent.com/13103047/234616162-0b5b4222-8bce-4d18-ab16-709a6ead5a11.gif)
6+
![GIF exemple usage c-scrollsyncbar.js 2](https://user-images.githubusercontent.com/13103047/234616353-a2431b8d-6e02-422a-a2de-05fb4dbff243.gif)
77

88
## Installation
99

@@ -14,7 +14,6 @@ Il est recommandé de placer les fichiers dans cet ordre avant la balise fin de
1414
```html
1515
<body>
1616
<script src="/path/to/c-scrollsyncbar.js"></script> <!-- obligatoire -->
17-
<script src="/path/to/c-scrollsyncbar-callbacks.js"></script> <!-- optionnel -->
1817
</body>
1918
```
2019

@@ -52,14 +51,41 @@ https://cdn.jsdelivr.net/gh/ita-design-system/[email protected]/ui/js/c-
5251

5352
## Usage
5453

55-
Ajouter `c-scrollsyncbar="IDENTIFIANT_UNIQUE"` à l'élément. Par défaut l'élément subit une [transformation CSS](https://developer.mozilla.org/fr/docs/Web/CSS/transform) `translateY(-|x|%)` dans laquelle `|x|` est un nombre compris entre à et 100.
54+
Ajouter `c-scrollsyncbar="IDENTIFIANT_UNIQUE_OPTIONNEL"` à l'élément. Par défaut l'élément subit une [transformation CSS](https://developer.mozilla.org/fr/docs/Web/CSS/transform) `translateY(-|x|%)` dans laquelle `|x|` est un nombre compris entre à et 100.
5655

5756
```html
57+
<!-- Minimal -->
58+
<div c-scrollsyncbar="">
59+
<!-- Contenu -->
60+
</div>
61+
62+
<!-- Avec id personnalisé -->
5863
<div c-scrollsyncbar="foo">
5964
<!-- Contenu -->
6065
</div>
6166
```
6267

68+
### Sensibilité `scrollSteps`
69+
70+
Par défaut, l'initialisation se fait avec paramètre de sensibilité de `scrollSteps: 200`, qui correspond au nombre de pixels de défilement qu'il faut pour compléter la course de l'élément.
71+
72+
Il est possible de modifier cette sensibilité en invoquant la méthode `cScrollSyncBar.update({scrollSteps: <INTEGER>});`
73+
74+
* Plus le paramètre `scrollSteps` est élevé, plus la course du défilement nécessaire est longue
75+
* Plus le paramètre `scrollSteps` est petit, plus la course du défilement nécessaire est courte
76+
77+
```javascript
78+
// Faible sensibilité, course longue
79+
cScrollSyncBar.update({scrollSteps: 500});
80+
81+
// Par défaut
82+
cScrollSyncBar.update();
83+
// Est équivalent à
84+
cScrollSyncBar.update({scrollSteps: 200});
85+
86+
// Haute sensibilité, course courte
87+
cScrollSyncBar.update({scrollSteps: 50});
88+
```
6389

6490
### Formule personnalisée
6591

@@ -79,8 +105,40 @@ c-scrollsyncbar.js fonctionne uniquement avec la [propriété CSS transform](htt
79105

80106
### Méthode `cScrollSyncBar.update()`
81107

82-
Indispensable pour démarrer l'application, crée les instances des éléments sur lequel appliquer l'effet.
108+
* Indispensable pour initialiser l'application, crée les instances des éléments sur lequels appliquer l'effet.
109+
* Mettre à jour les options
83110

84111
```javascript
112+
// Initialisation ou mise à jour avec paramètres par défaut
85113
cScrollSyncBar.update();
114+
115+
// Initialisation ou mise à jour avec paramètres personnalisés
116+
cScrollSyncBar.update({scrollSteps: 500});
86117
```
118+
119+
### Méthode `cScrollSyncBar.pause()`
120+
121+
Interrompre l'effet de la librairie. Maintient les élements dans l'état courant.
122+
123+
```javascript
124+
cScrollSyncBar.pause();
125+
```
126+
127+
### Méthode `cScrollSyncBar.stop()`
128+
129+
Stoppe l'effet de la librairie et réinitialise les élements dans leur état d'origine.
130+
131+
```javascript
132+
cScrollSyncBar.stop();
133+
```
134+
135+
## API
136+
137+
Toutes les instances de cScrollSyncBar sont placées dans `cScrollSyncBar.instances[ID_DE_L_INSTANCE]`. `ID_DE_L_INSTANCE` est l'id de l'élément s'il est présent, s'il est absent, cScrollSyncBar applique un id préfixé de `cssb_` suivi de l'index de l'instance.
138+
139+
```javascript
140+
// Élément DOM activé
141+
cScrollSyncBar.instances[ID_DE_L_INSTANCE].el;
142+
// Formule CSS transform en application
143+
cScrollSyncBar.instances[ID_DE_L_INSTANCE].formula;
144+
```

‎content/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
permalink: index.html
44
unlisted: true
55
---
6-
<nav c-scrollsyncbar="foo">
6+
<nav c-scrollsyncbar="">
77
<a href="#">c-scrollsyncbar.js</a>
88
</nav>
99

10-
<p>Défiler vers le bas pour observer l'effet.</p>
10+
<p>Défiler vers le bas pour observer l'effet, vers le haut pour inverser le mouvement.</p>
1111

1212
<p>ScrollSyncBar est une barre d'affichage et de masquage synchronisée avec le défilement de la fenêtre.</p>
1313

1414
<p>ScrollSyncBar permet d'afficher et de masquer progressivement la navigation ou tout autre élément en synchronisation avec le défilement de la fenêtre.</p>
1515

1616
<nav id="commands">
1717
<menu>
18-
<li><button onclick="scrollSyncBar.update()">scrollSyncBar.update()</button> <br>Initialise en créant les instances des éléménts à observer</li>
19-
<li><button onclick="scrollSyncBar.update({scrollSteps:500})">scrollSyncBar.update({scrollSteps:500})</button> <br>Plus le paramètre scrollSteps est élevé, plus l'effet est lent (200 par défa ut)</li>
20-
<li><button onclick="scrollSyncBar.update({scrollSteps:50})">scrollSyncBar.update({scrollSteps:50})</button> <br>Plus le paramètre scrollSteps est petit, plus l'effet est rapide (200 par défa ut)</li>
21-
<li><button onclick="scrollSyncBar.pause()">scrollSyncBar.pause()</button> <br>Stoppe et laisse l'élément en l'état</li>
22-
<li><button onclick="scrollSyncBar.stop()">scrollSyncBar.stop()</button> <br>Stoppe et rétablit l'état d'origne de l'élément</li>
23-
<li><button onclick="scrollSyncBar.start()">scrollSyncBar.start()</button> <br>Démarre la synchronisation</li>
18+
<li><button onclick="cScrollSyncBar.update()">cScrollSyncBar.update()</button> <br>Initialise en créant les instances des éléménts à activer</li>
19+
<li><button onclick="cScrollSyncBar.update({scrollSteps:500})">cScrollSyncBar.update({scrollSteps:500})</button> <br>Plus le paramètre scrollSteps est élevé, plus la course du défilement nécessaire est longue (200 par défaut)</li>
20+
<li><button onclick="cScrollSyncBar.update({scrollSteps:50})">cScrollSyncBar.update({scrollSteps:50})</button> <br>Plus le paramètre scrollSteps est petit, plus la course du défilement nécessaire est courte (200 par défaut)</li>
21+
<li><button onclick="cScrollSyncBar.pause()">cScrollSyncBar.pause()</button> <br>Stoppe et laisse l'élément en l'état</li>
22+
<li><button onclick="cScrollSyncBar.stop()">cScrollSyncBar.stop()</button> <br>Stoppe et rétablit l'état d'origne de l'élément</li>
23+
<li><button onclick="cScrollSyncBar.start()">cScrollSyncBar.start()</button> <br>Démarre la synchronisation</li>
2424
</menu>
2525
</nav>
2626

@@ -53,7 +53,7 @@
5353
flex-direction: column;
5454
gap: 1em;
5555
}
56-
[c-scrollsyncbar="foo"] {
56+
[c-scrollsyncbar=""] {
5757
position: fixed;
5858
top: 0%;
5959
left: 0;
@@ -69,7 +69,7 @@
6969
padding: 2em;
7070
background-color: var(--ita-color-support-success-100);
7171
}
72-
[c-scrollsyncbar="foo"] a {
72+
[c-scrollsyncbar=""] a {
7373
color: var(--ita-color-neutral-100);
7474
}
7575
[c-scrollsyncbar="bar"] a {

‎ui/js/c-scrollsyncbar.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,14 @@ const cScrollSyncBar = {
3131
}
3232
});
3333
// Seek for elements
34-
document.querySelectorAll('[c-scrollsyncbar]').forEach(function(el) {
35-
const identifier = el.getAttribute('c-scrollsyncbar');
34+
document.querySelectorAll('[c-scrollsyncbar]').forEach(function(el, index) {
35+
let identifier = el.getAttribute('c-scrollsyncbar');
36+
if (el.id.length > 0) {
37+
identifier = el.id;
38+
}
39+
if (identifier == '') {
40+
identifier = 'cssb_'+index;
41+
}
3642
// Store elements into the pre-defined object cScrollSyncBar.instances
3743
cScrollSyncBar.instances[identifier] = {
3844
el: el,

0 commit comments

Comments
 (0)