blocks/javascript/gestion_listes_blocks.js.html

#HTTP_HEADER{Content-Type: text/javascript; charset=#CHARSET}
[(#REM)<script>/*

	Gestion des listes de blocks (reprise du plugin medias) :
	- Gestion du tri par glisser-déposer
	- Edition en place (ajax)

	TODO : utiliser la méthode native du core quand elle sera générique
*/]

/* Gestion du tri des listes de blocks et de leur enregistrement */
function ordonner_listes_blocks() {

	if (typeof Sortable === 'function') {
		$(".objet_blocks[data-lien]").find('> .sortable').each(function () {
			// détruire / recréer le sortable à chaque appel ajax
			if (Sortable.get(this)) {
				Sortable.get(this).destroy();
			}
			// pas de tri possible s'il n'y a qu'un seul élément.
			if ($(this).find('> .objetblock').length < 2) {
				$(this).find('.deplacer-block').hide();
				$(this).parent().find('.tout_desordonner').hide();
				return true; // continue
			} else {
				$(this).find('.deplacer-block').show();
			}
			new Sortable(this, {
				direction: 'vertical',
				handle: '.deplacer_block_'+$(this).data('idsortable'),
				swapThreshold: .8,
				ghostClass: "deplacer-block-placeholder",
				onStart: function(event) {
					$(event.item).addClass('block-en-mouvement');
				},
				onEnd: function(event) {
					$(event.item).removeClass('block-en-mouvement');
				},
				onUpdate: function (event) {
					const ordre = this.toArray();
					const $items = $(event.from);
					const $item = $(event.item);

					// l'objet lié est indiqué dans l'attribut data-lien sur la liste
					const [objet_lie, id_objet_lie] = $items.parents(".objet_blocks").data("lien").split("/");
					const action = '[(#VAL{ordonner_liens_blocks}|generer_url_action{"", 1})]';
					const params = {
						objet_source: 'block',
						objet_lie: objet_lie,
						id_objet_lie: id_objet_lie,
						ordre: ordre,
					};

					$item.animateLoading();

					$.post({
						url: action,
						data: params,
						dataType: 'json',
						cache: false,
					}).done(function(data) {
						ajaxReload('blocks_objet');
					});
				}
			});

		});
	}
}

function gestion_boutons_blocks() {
	// édition en place des blocs
	$('.objet_blocks .actions .editer_block').off('click').on('click', function(e) {
		e.preventDefault();
		var id_block = $(this).data('id_block');
		ajaxReload('block_' + id_block, {args: {edit_bloc: 1}});
	});

	// boutons "Annuler"
	$('.formulaire_editer_block button[name="annuler"]').off('click').on('click', function(e) {
		e.preventDefault();
		var id_block = $(this).data('id_block');
		var ajaxArgs = {};
		if(id_block !== 'new') {
			ajaxArgs.args = {edit_bloc: ''};
		}
		ajaxReload('block_' + id_block, ajaxArgs);
	});
}

function gestion_accordeons_blocks() {
	let collapsed = [];
	// mettre à jour l'état replié / déplié des blocs
	if(document.cookie.indexOf('blocks_accordions') >= 0) {
		try {
			collapsed = JSON.parse(Cookies.get('blocks_accordions'));
		} catch(e) {}
		const arrayLength = collapsed.length;
		let button,
			panel;
		for(let i = 0; i < arrayLength; i++) {
			button = $('.block__accordion_trigger[data-id_block=' + collapsed[i] + ']');
			if(button.length) {
				panel = $('#' + button.attr('aria-controls'));
				if(panel.length) {
					button.attr('aria-expanded', false);
					panel.attr('hidden', true);
				}
			}
		}
	}
	// gestion des events
	$('.block__accordion_trigger').off('click').on('click', function() {
		const controlsId = $(this).attr('aria-controls');
		if(controlsId.length) {
			const panel = $('#' + controlsId);
			if(panel.length) {
				if(panel.is(':visible')) {
					$(this).attr('aria-expanded', false);
					panel.attr('hidden', true);
				} else {
					$(this).attr('aria-expanded', true);
					panel.removeAttr('hidden');
				}

				// mise à jour du cookie
				$('.block__accordion_trigger').each(function() {
					const id = parseInt($(this).data('id_block'));
					if(id && !$(this).hasClass('nocookie')) {
						if($(this).attr('aria-expanded')==='false') {
							collapsed.push(id);
						} else {
							collapsed = collapsed.filter(item => item !== id);
						}
					}
				});
				// filtrer les valeurs non numérique
				collapsed = collapsed.filter(item => !isNaN(item));
				// array_unique
				collapsed = [...new Set(collapsed)];
				Cookies.set('blocks_accordions', JSON.stringify(collapsed), {SameSite: 'Strict'});
			}
		}
	});
}

$(function() {

	if(!$.sortableblocks_charge) {
		$.sortableblocks_charge = true;
		if(typeof Sortable === "undefined") {
			jQuery.getScript('[(#CHEMIN{prive/javascript/Sortable.js}|timestamp)]').done(ordonner_listes_blocks);
		} else {
			ordonner_listes_blocks();
		}
		onAjaxLoad(ordonner_listes_blocks);
	}

	gestion_boutons_blocks();
	onAjaxLoad(gestion_boutons_blocks);

	gestion_accordeons_blocks();
	onAjaxLoad(gestion_accordeons_blocks);
});