SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

pour les action / mediabox / modalbox, si on ajoute data-confirm="mon

Browse source 
texte", au clique sur le lien, on ajoute un confirm js
This commit is contained in:
Christophe 2020-05-14 23:27:09 +02:00
parent e1a82baddb
commit 25f0d4d42c
3 changed files with 67 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
README.md
View file

@ -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,

20
js/gamutable.es6.js
View file

@ -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 });
});

30
js/gamutable.js
View file

@ -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