Discussion :

[chtitenyny]

Bonjour,

J'ai une problématique que, malgré mes divers tests, je n'arrive pas à régler.
J'utilise le code suivant pour des cases à gratter qui, une fois grattées font ouvrir une modale.
J'ai reussi à obtenir ce resultat en séparant les diverses fonctions, mais la modale s'ouvre même si la case n'est pas complétément grattée.
Je vois bien pourquoi mais je n'arrive pas à intégrer l'ouverture de la modale dans la 1ere fonction.
Merci pour vos lumières !!

Voici le code pour une case :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#gratt1').wScratchPad({
    size        : 70,     
    bg:  'images/1_decouverte_calendar.jpg',
   realtime    : true, 
    fg: 'images/01.jpg',
    'cursor': 'url("cursors/canne-sucre.png") 5 5, default',
   scratchMove: function (e, percent) {
       if (percent > 50) {
			  this.clear();	 		  	
       }
     }
});
 
$(document).ready(function(){
	$('.openModalgratt1').click(function(){
      $('#myModalgratt1').modal('show');  // show modal
	}); 
});

-----

A noter que j'ai réussi à intégrer ma fonction modal('show') dans la fonction du dessus, mais j'ai perdu le fonctionnement de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  if (percent > 50) {
			  this.clear();	 		  	
       }

Mon code qui marche un peu mieux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$('#gratt1').wScratchPad({
    size        : 70,     
    bg:  'images/1_decouverte_calendar.jpg',
   realtime    : true, 
    fg: 'images/01.jpg',
    'cursor': 'url("curseurs/canne-sucre.png") 5 5, default',
   scratchMove: function (e, percent) {
       if (percent > 50) {
			  this.clear();	 		  	
       }
       if (percent == 100) {
			$('.openModalgratt1').click(function(){
			  $('#myModalgratt1').modal('show');  // show modal
			});  		  	
       }
     }
});

[Toufik83]

Bonjour,

Tu peux simuler l'événement "click" pour éviter d'attacher un nouveau écouteur à chaque fois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#gratt1").wScratchPad({
  ....,
  ....,
  scratchMove: function(e, percent) {
    if (percent > 50) {
      this.clear();
      if (percent ==100) {
        this.enable(false);//désactiver l'élément à gratter
        //si le modal est caché (:hidden) on simule le click sur ".openModalgratt1"  pour afficher "#myModalgratt1" en utilisant $.trigger
        if ($('#myModalgratt1').is(':hidden')) $(".openModalgratt1").trigger("click");
      }
    }
  }
});
 
//cette partie doit être à l'extérieur du plugin wScratchPad
$('.openModalgratt1').click(function() {
  console.log("show le modale...");
  $('#myModalgratt1').modal('show');
});

la fonction scratchMove(e,percent) s'exécute à chaque mouvement de la souris, comme il existe aussi scratchDown et scratchUp.

[chtitenyny]

Merci, je vais regarder cela !