fix: utiliser Sortable disponible dans le core pour permettre le tri des champs d'un objet

pull/29/head
Cerdic 3 months ago
parent c13abec063
commit f60a4498ce

@ -108,3 +108,5 @@
.accordion-boxes .box .box__header h4 {font-size: var(--spip-box-heading-fontsize);font-weight: var(--spip-box-heading-fontweight);}
.accordion-boxes .box .box__header h4 code {font-size: 0.9em;opacity: 0.9;}
.accordion-boxes .box .box__header .deplacer-box {position: absolute; right: 1em;top:50%;margin-top: -10px;}
.accordion-boxes .box.deplacer-box-placeholder {box-shadow: 0 0 10px var(--spip-color-info) !important; z-index: 10;}

@ -138,10 +138,10 @@
[(#SET{id_objet,[(#ENV{objets/#CLE/id_objet}|sinon{id_objet})]})]
<p class='notice'><:fabrique:avertissement_champs{id_objet=#GET{id_objet}}:></p>
<B_champs>
<div class='parties accordion-boxes' data-tab='#CLE'>
<div class='parties accordion-boxes accordion-sortable' data-tab='#CLE'>
<BOUCLE_champs(DATA){source tableau,(#CHAMPS|sinon{#ARRAY})}>
[(#BOITE_OUVRIR{[<h4><a href="#[objet#_objet:CLE-champ(#CLE)]"><code>#(#CHAMP|strtoupper|sinon{#CLE})</code></a></h4>],simple mini}
|inserer_attribut{id,[objet#_objet:CLE-champ(#CLE)]})]
[(#BOITE_OUVRIR{[<h4><a href="#[objet#_objet:CLE-champ(#CLE)]"><code>#(#CHAMP|strtoupper|sinon{#CLE})</code></a>[<span class="deplacer-box">(#CHEMIN_IMAGE{deplacer-16.svg}|balise_img)</span>]</h4>],simple mini}
|replace{'^<div ',[<div id="objet#_objet:CLE-champ(#CLE)" ]})]
<div>
<div class='editer-groupe'>
[(#SAISIE{input, objets/#_objet:CLE/champs/#CLE/nom,

@ -90,7 +90,6 @@ jQuery(function($){
if (index === active_index) {
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).find('>a').attr('href');
console.log('tab active:' + target);
tab_show_content($node, target);
}
});
@ -113,6 +112,54 @@ jQuery(function($){
});
}
$('.fabrique-tabs').each(function(){tabs_init($(this));});
if (typeof Sortable === 'function') {
$(".accordion-sortable").each(function () {
// détruire / recréer le sortable à chaque appel ajax
if (Sortable.get(this)) {
Sortable.get(this).destroy();
}
var $me = $(this);
// pas de tri possible s'il n'y a qu'un seul élément.
if ($me.find('> .box').length < 2) {
$me.find('.deplacer-box').hide();
return true; // continue
} else {
$me.find('.deplacer-box').show();
}
$me.find('>.box').each(function(){
var id = $(this).attr('id');
if (id && !$(this).attr('data-id')) {
$(this).attr('data-id', id);
}
});
new Sortable(this, {
direction: 'vertical',
swapThreshold: .8,
ghostClass: "deplacer-box-placeholder",
onStart: function(event) {
$(event.item).addClass('box-en-mouvement');
},
onEnd: function(event) {
$(event.item).removeClass('box-en-mouvement');
},
onUpdate: function (event) {
var tab = $(event.item).parent().data('tab');
var champOrder = this.toArray();
console.log(this);
console.log(champOrder);
var form = $(event.item).closest('form');
// on génère un hidden tu type
// <input type="hidden" name="f_action[champorder][0]" value="objet0-champ0,objet0-champ1,objet0-champ2,objet0-champ3,objet0-champ4,objet0-champ5,objet0-champ6,objet0-champ7,objet0-champ9,objet0-champ8,objet0-champ10,objet0-champ11,objet0-champ12,objet0-champ13,objet0-champ14,objet0-champ15,objet0-champ16,objet0-champ17">
form.find('div:first')
.prepend('<input type="hidden" name="f_action[champorder][' + tab + ']" value="'+ champOrder + '">');
form.submit();
}
});
});
}
/*
Installer les onglets et accordions

@ -1,3 +1,4 @@
[<script type="text/javascript" src="(#CHEMIN{prive/javascript/Sortable.js}|timestamp)"></script>]
<div class='ajax'>
#FORMULAIRE_FABRIQUER_PLUGIN
</div>

Loading…
Cancel
Save