Contenu variable perdu.

Version imprimable

07/09/2019, 22h11
thirt

Contenu variable perdu.

Bonsoir à vous,

en fait, je souhaite utilise une variable qui s'appelle sideBar afin de savoir si la sideBar a déjà été montrée ou pas.

Le problème, c'est que cette variable semble être réinitialisée à 0 à chaque fois qu'un event est capturé. Dans mon cas, j'aimerais me servir de cette fonction pour faire un swipeRight et swipeLeft sur la version mobile.

Voici un exemple de mon code :

https://codepen.io/thirt/pen/eYOVdvY

Quand on swipe à droite, le message s'affiche bien. Par contre, quand on swipe à gauche, le message n'est pas affiché à cause du fait que la sideBar n'a pas gardé la valeur qui lui a été attribuée lors de l'événement swipeRight (normalement, cette variable devrait valoir 1 et elle vaut 0).

Pourquoi cette variable ne garde pas la valeur qu'on lui a assignée entre-temps ?

Merci d'avance pour votre aide.

Bonne soirée
Thierry

Salut

Ta condition if (!$sideBar) est non conforme
Pour preuve

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr"> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<script src="https://hammerjs.github.io/dist/hammer.js"></script>
		<style>
                        #site-content {
                        background: silver;
                        height: 300px;
                        text-align: center;
                        font: 30px/300px Helvetica, Arial, sans-serif;
                        }
                </style>
	</head>
	<body>
			<div id="site-content"></div>
		<script>
                        //'use strict'; // force la déclaration des variables
                        let swipeZone = document.getElementById('site-content');
                        let $sideBar = 0;
                        let mc = new Hammer(swipeZone);
 
                        mc.get('swipe').set({
                                direction: Hammer.DIRECTION_ALL,
                                threshold: 1, 
                                velocity:0.1
                        });
 
                        // listen to events...
                        mc
                        .on("swiperight", function(ev) {
                                        console.log("swiperight"); 
                                        if ($sideBar){return true;}
                                        swipeZone.textContent = ev.type + " gesture detected.";
                                        $sidebar = 1;
                                        console.log("swiperight => $sidebar= " + $sidebar); 
                                })
                        .on("swipeleft", function(ev) {
                                        console.log("swipeleft"); 
                                        if ($sideBar !==0){return true;}
                                        swipeZone.textContent = ev.type + " gesture detected.";
                                        $sidebar = 0;
                                        console.log("swipeleft => $sidebar= " + $sidebar); 
                                });
                </script>
	</body>
</html>

Citation:

Envoyé par thirt

Pourquoi cette variable ne garde pas la valeur qu'on lui a assignée entre-temps ?

parce que ton code ne change pas la valeur de $sideBar mais celle d'une autre variable (non déclarée et locale) $sidebarjavascript est case sensitive ==> le B doit être en MAJUSCULE

mais tant qu'a faire ta variable devrait être de type booléenne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <title>Hammer</title>
  <style>
    #site-content {
      background: silver;
      height: 300px;
      text-align: center;
      font: 30px/300px Helvetica, Arial, sans-serif;
    }
  </style>
</head>
<body>
 
  <div id="site-content"></div>
 
  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script>
    'use strict'
    
    const swipeZone = document.getElementById('site-content')
        ,  mc       = new Hammer(swipeZone)
 
    var $backSideBar = false;
 
    mc.get('swipe').set(
      {
      direction: Hammer.DIRECTION_ALL,
      threshold: 1, 
      velocity:0.1
      });
 
    // listen to events...
    mc
    .on('swiperight', function(ev)
      {
      if ($backSideBar) return true
      swipeZone.textContent = `${ev.type} gesture detected.`
      $backSideBar          = true
      })
    .on('swipeleft', function(ev)
      {
      if (!$backSideBar) return true
      swipeZone.textContent = `${ev.type} gesture detected.`
      $backSideBar          = false
      });
  </script>
</body>
</html>

sinon, la fin du code peut s'écrire plus simplement:

Code:

1
2
3
4
5
6
7
8
9
10
function SideBarMove(ev)
  {
  if ((ev.type==='swipeleft')!==$backSideBar) return true
  swipeZone.textContent = `${ev.type} gesture detected.`
  $backSideBar          = !$backSideBar
  }
 
mc
.on('swiperight', SideBarMove)
.on('swipeleft',  SideBarMove)

;)

08/09/2019, 09h58
thirt

Bonjour ProgElecT et Psychadelic,

tout d'abord, je tenais à vous remercier pour votre aide.

@Psychadelic : en effet, je n'avais pas fait attention au fait que la casse n'était pas respectée pour le nom de variable. Une erreur de débutant. -:)

Donc, grâce à vous, le problème est résolu.

Merci à vous.

Bonne journée
Thierry