fix: utiliser Sortable disponible dans le core pour permettre le tri des objets (onglets)

pull/29/head
Cerdic 3 months ago
parent f60a4498ce
commit 1eb7ee8797

@ -28,10 +28,15 @@
border-bottom-color: var(--spip-color-theme-dark);
z-index: 2;
}
.fabrique-tabs .onglets-head li img {
.fabrique-tabs .onglets-head li a img {
vertical-align: bottom;
margin-left:.5em;max-width: 24px;height: auto;
}
.fabrique-tabs .onglets-head li .sort-handle {display: none}
.fabrique-tabs .onglets-head .sortable-active li {position: relative}
.fabrique-tabs .onglets-head .sortable-active li a {padding-left: 1.5em;}
.fabrique-tabs .onglets-head .sortable-active li .sort-handle {display: block !important;position: absolute;left: 0;top:50%;margin-top: -8px;z-index: 3}
.fabrique-tabs .onglets-head .sortable-active .deplacer-onglet-placeholder {box-shadow: 0 0 10px var(--spip-color-info) !important; z-index: 10;}
.fabrique-tabs .onglets-content .onglet-content {display: none}
.fabrique-tabs .onglets-content .onglet-content.active {display: block}
@ -108,5 +113,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 .box__header .sort-handle {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;}

@ -36,13 +36,13 @@
<div class="fabrique-tabs" id="tab_main">
<div class="onglets-head onglets_simple">
<ul>
<li id='paquet' class="active"><a href="#tab-plugin"><:fabrique:onglet_plugin:>
<li id='paquet' class="active">[<span class="sort-handle">(#CHEMIN_IMAGE{deplacer-16.svg}|balise_img)</span>]<a href="#tab-plugin"><:fabrique:onglet_plugin:>
[(#REM) Attention à bien rafraichir l'image reduite lorsqu'on change de logo ]
[(#ENV{paquet/logo/0/fichier}|sinon{#CHEMIN_IMAGE{vide-1x24.png}}|fabrique_miniature_image{24})]
</a></li>
<BOUCLE_tab_objets(DATA){source tableau, #OBJETS}>
[(#SET{defaut,<:fabrique:onglet_objet_n{nb=#CLE}:>})]
<li id='objet#CLE'><a href="#tab-objet-#CLE">[(#NOM|fabrique_mb_strtoupper|sinon{#GET{defaut}})]
<li id='objet#CLE'>[<span class="sort-handle">(#CHEMIN_IMAGE{deplacer-16.svg}|balise_img)</span>]<a href="#tab-objet-#CLE">[(#NOM|fabrique_mb_strtoupper|sinon{#GET{defaut}})]
[(#REM) Attention à bien rafraichir l'image reduite lorsqu'on change de logo ]
[(#VALEUR{logo/24/fichier}
|sinon{#VALEUR{logo/32/fichier}}|sinon{#VALEUR{logo/0/fichier}}

@ -140,7 +140,7 @@
<B_champs>
<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>[<span class="deplacer-box">(#CHEMIN_IMAGE{deplacer-16.svg}|balise_img)</span>]</h4>],simple mini}
[(#BOITE_OUVRIR{[<h4><a href="#[objet#_objet:CLE-champ(#CLE)]"><code>#(#CHAMP|strtoupper|sinon{#CLE})</code></a>[<span class="sort-handle">(#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'>

@ -115,25 +115,33 @@ jQuery(function($){
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);
function sortable_init($sortables) {
// 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
if ($sortables.length < 2) {
$sortables.find('.sort-handle').hide();
return false;
} else {
$me.find('.deplacer-box').show();
$sortables.find('.sort-handle').show();
}
$me.find('>.box').each(function(){
$sortables.each(function(){
var id = $(this).attr('id');
if (id && !$(this).attr('data-id')) {
$(this).attr('data-id', id);
}
});
return true;
}
$(".accordion-sortable").each(function () {
// détruire / recréer le sortable à chaque appel ajax
if (Sortable.get(this)) {
Sortable.get(this).destroy();
}
var $me = $(this);
var $sortables = $me.find('> .box');
if (!sortable_init($sortables)) {
return true; // continue
}
$me.addClass('sortable-active');
new Sortable(this, {
direction: 'vertical',
swapThreshold: .8,
@ -147,8 +155,6 @@ jQuery(function($){
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">
@ -158,92 +164,40 @@ jQuery(function($){
}
});
});
}
/*
Installer les onglets et accordions
ACCORDION avant TABS sinon la largeur de
l'accordion actif (autre que le premier)
est mal calcule sur un onglet caché
Pour les accordions & tabs, on sauve
le dernier ouvert, et on ouvre ceux la
au chargement de la page
*/
/*
if ($.fn.accordion) {
$("#tabs > div > .parties").accordion({
collapsible: true,
heightStyle: "content",
create: function(event, ui) {
tab_id = $(this).attr('id').substring(7);
i = Number($("#open_accordion_" + tab_id).val())
$(this).accordion("option", "active", i);
},
activate: function(event, ui) {
tab_id = $(this).attr('id').substring(7);
$('#open_accordion_' + tab_id).val( $(this).accordion('option', 'active') );
$("#tab_main>.onglets-head>ul").each(function(){
// détruire / recréer le sortable à chaque appel ajax
if (Sortable.get(this)) {
Sortable.get(this).destroy();
}
});
$("#tabs > div > .parties .parties").accordion({
collapsible: true,
heightStyle: "content",
active: false,
header: '> div > h4'
})
.sortable({
axis: "y",
handle: "h4",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h4" ).triggerHandler( "focusout" );
},
update: function(event, ui) {
tab = ui.item.parent().data('tab');
var champOrder = $(this).sortable('toArray').toString();
form = $(this).closest('form');
form.find('div:first')
.prepend('<input type="hidden" name="f_action[champorder][' + tab + ']" value="'+ champOrder + '">');
form.submit();
var $me = $(this);
var $sortables = $me.find('> li');
if (!sortable_init($sortables)) {
return true; // continue
}
});
}
*/
/*
if ($.fn.tabs) {
$("#tabs").tabs({
active: $('#open_tab').val(),
beforeActivate: function(event, ui) {
$('#open_tab').val(ui.newTab.index());
$me.addClass('sortable-active');
new Sortable(this, {
direction: 'horizontal',
swapThreshold: .8,
ghostClass: "deplacer-onglet-placeholder",
onStart: function(event) {
$(event.item).addClass('onglet-en-mouvement');
},
create: function(event, ui) {
/* Se remettre en haut du formulaire après un coup d'ajax
Ce que fait SPIP habituellement, mais accordion() et tabs()
arrivent après et les navigateurs se décalent
*
if ($is_ajax) {
$('.formulaire_fabriquer_plugin').positionner(false);
}
}
})
.find( ".ui-tabs-nav" ).sortable({
axis: "x",
update: function(event, ui) {
var tabOrder = $(this).sortable('toArray').toString();
form = $(this).closest('form');
onEnd: function(event) {
$(event.item).removeClass('onglet-en-mouvement');
},
onUpdate: function (event) {
var tabOrder = this.toArray();
console.log(this);
console.log(tabOrder);
var form = $(event.item).closest('form');
// on génère un hidden tu type
form.find('div:first')
.prepend('<input type="hidden" name="f_action[taborder]" value="' + tabOrder + '">');
form.submit();
}
});
});
}
*/
<BOUCLE_skeleditor(CONDITION){si #PLUGIN{skeleditor}}>
/* un peu de coloration syntaxique */

Loading…
Cancel
Save