From 25f0d4d42c3f5d90a81d0d7c7303c1dbebebf048 Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Thu, 14 May 2020 23:27:09 +0200
Subject: [PATCH] pour les action / mediabox / modalbox, si on ajoute
 data-confirm="mon texte", au clique sur le lien, on ajoute un confirm js

---
 README.md           | 37 +++++++++++++++++++------------------
 js/gamutable.es6.js | 20 ++++++++++++++++++++
 js/gamutable.js     | 30 ++++++++++++++++++++++++++++--
 3 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index dc98350..b11de44 100644
--- a/README.md
+++ b/README.md
@@ -19,24 +19,24 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 >
 > * pour les champs date, pour avoir l'ordre de la col, il faut le format : dd/mm/yyyy ou dd/mm/yy
 3. Pour utliser **les actions** :
-	1. dans `json_gamutable.json.html`
-	```html
-	[(#SET{statut,
-		#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
-		<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
-			[(#STATUT|!={publie}|oui)
-				<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
-			]
-			[(#STATUT|=={publie}|oui)
-				<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
-			]
-		</a>
-	})]
-	"statut" : [(#GET{statut}|json_encode)],
-	```
-	> il faut ajouter data-id="" si on veut recharger que cette ligne
+```html
+[(#SET{statut,
+	#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
+	<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
+		[(#STATUT|!={publie}|oui)
+			<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
+		]
+		[(#STATUT|=={publie}|oui)
+			<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
+		]
+	</a>
+})]
+"statut" : [(#GET{statut}|json_encode)],
+```
+> * il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter un popin de confirmation
+> * il faut ajouter data-id="" si on veut recharger que cette ligne
 
-4. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final`
+1. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final`
 ```php
 /**
  * injection du reload de vuejs pour les crayons de l'objet souscription
@@ -55,7 +55,7 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
 }
 ```
 > **Attention** Pour les crayons, l'invalidation du cache ne se fait que pour les objets publiés
-5. Pour utiliser une **mediabox** ou **modalbox**,
+2. Pour utiliser une **mediabox** ou **modalbox**,
 	1. Dans le json : ajouter un lien avec la classe mediabox ou modalbox (cf ex de json)
 	```html
 	"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
@@ -77,6 +77,7 @@ function prefixPlugin_crayons_vue_affichage_final($flux){
 		</script>
 	]
 	```
+	> * il faut ajouter data-confirm="Confirmez vous ..." si on veut ajouter un popin de confirmation
 
 ## Attention
 > les Crayons utilise l'api modifier_objet de SPIP qui invalide le cache que si objet est publie,
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index 470d829..5eeffbe 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -1,7 +1,15 @@
 jQuery(function () {
+	// pour les #URL_ACTION_AUTEUR
+	// il faut ajouter une class : url_action
 	$('#app').on('click', '.url_action', function (e) {
 		e.preventDefault();
 		e.stopPropagation();
+		let confirmation = $(this).data('confirm');
+		if (confirmation) {
+			if (!confirm(confirmation)) {
+				return;
+			}
+		}
 		let url = $(this).attr('href');
 		let id = $(this).data('id');
 		console.time('Chargement de VueJs APRES Ajax');
@@ -17,15 +25,27 @@ jQuery(function () {
 		});
 	});
 
+	// lancement d'une modalbox
 	$('#app').on('click', '.modalbox', function (e) {
 		e.preventDefault();
+		if (confirmation) {
+			if (!confirm(confirmation)) {
+				return;
+			}
+		}
 		let url = $(this).attr('href');
 		url += '&var_zajax=content';
 		$.modalbox(url);
 	});
 
+	// lancement d'une médiabox
 	$('#app').on('click', '.mediabox', function (e) {
 		e.preventDefault();
+		if (confirmation) {
+			if (!confirm(confirmation)) {
+				return;
+			}
+		}
 		let href = $(this).attr('href');
 		$.fn.mediabox({ href });
 	});
diff --git a/js/gamutable.js b/js/gamutable.js
index bb327e3..60e8256 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -17,9 +17,19 @@ function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) ||
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 jQuery(function () {
+  // pour les #URL_ACTION_AUTEUR
+  // il faut ajouter une class : url_action
   $('#app').on('click', '.url_action', function (e) {
     e.preventDefault();
     e.stopPropagation();
+    var confirmation = $(this).data('confirm');
+
+    if (confirmation) {
+      if (!confirm(confirmation)) {
+        return;
+      }
+    }
+
     var url = $(this).attr('href');
     var id = $(this).data('id');
     console.time('Chargement de VueJs APRES Ajax');
@@ -33,15 +43,31 @@ jQuery(function () {
         app.rechargerJson();
       }
     });
-  });
+  }); // lancement d'une modalbox
+
   $('#app').on('click', '.modalbox', function (e) {
     e.preventDefault();
+
+    if (confirmation) {
+      if (!confirm(confirmation)) {
+        return;
+      }
+    }
+
     var url = $(this).attr('href');
     url += '&var_zajax=content';
     $.modalbox(url);
-  });
+  }); // lancement d'une médiabox
+
   $('#app').on('click', '.mediabox', function (e) {
     e.preventDefault();
+
+    if (confirmation) {
+      if (!confirm(confirmation)) {
+        return;
+      }
+    }
+
     var href = $(this).attr('href');
     $.fn.mediabox({
       href: href