Admin > Drag & drop pour les pages statiques

GounlafGounlaf Member
novembre 2010 modifié dans Modifications
[Edit] Corrections d'un oubli : on ne pouvais plus ajouter de nouvelle page



Bonsoir,



mon frère utilise votre système ; je ne l'ai jamais vraiment utilisé pour ma part (un peu les premières versions) ... mais je ne suis pas déçu de me plonger dedans, c'est bien foutu =)

pour ses besoins, j'ai rajouter une fonctionnalité de drag & drop pour les pages statiques, afin de pouvoir les réordonner simplement.



Niveau JS : Mootools Powered.

J'en ai donc profiter pour réintégrer vos fonctionnalité ("checkAll", et "Afficher/Masquer"), pour la page en question uniquement ... mais bon, c'est du détails

(c'est limite plus lourd ... mais bon)



Important : faites un backup avant.

Le fichier statiques.php et admin.css que je fourni dans le zip contient d'autres modifs "persos"

qui n'ont pas d'incidence ici



Ce qu'il faut modifier :


core/admin/statiques.php
echo '<tr class="line-'.($num%2).'">';
par
echo '<tr class="line line-'.($num%2).'" id="tr_'.$k.'">';
class "line" en plus, pour faciliter la detection,

id tr_$k pour pouvoir déplacer la ligne "options"


echo '<td class="tc7"><input type="checkbox" name="idStatic[]" value="'.$k.'" /> ...';
par
echo '<td class="tc7"><input class="checkAllChild" type="checkbox" name="idStatic[]" value="'.$k.'" /> ...
class css "checkAllChild" pour la case "Tout cocher/tout décocher"


plxUtils::printInput($k.'_ordre', $ordre, 'text', '2-3');
par
plxUtils::printInput($k.'_ordre', $ordre, 'text', '2-3', false, 'inputOrder');
pour rajouter la class css "inputOrder" aux champs "ordre"

toujours, pour faciliter la gestion JS


echo '<a id="link_'.$k.'" href="#" onclick="toggleTR(\'link_'.$k.'\', \'tr_'.$k.'\')">Options</a>';
par
echo '<a id="link_'.$k.'" href="javascript:void(0);" class="toggleOption">Options</a>';
pour l'intégration de la fonction toggleTR via Mootools


<tr>

			<td colspan="9">

				<?php plxUtils::printSelect('selection', array( '' => 'Pour la sélection...', 'delete' => 'Supprimer'), '') ?>

				<input class="button" type="submit" name="submit" value="Ok" />

			</td>

		</tr>

		<tr>

			<td colspan="8" style="text-align:center">

				<input class="button" type="submit" name="update" value="Modifier la liste des pages statiques" />

			</td>

		</tr>
par
<p>

		<?php plxUtils::printSelect('selection', array( '' => 'Pour la sélection...', 'delete' => 'Supprimer'), '') ?>

		<input class="button" type="submit" name="submit" value="Ok" />

	</p>

	<p style="text-align:center;">

		<input class="button" type="submit" name="update" value="Modifier la liste des pages statiques" />

	</p>
juste parce que ca m'embetait que ce soit dans le tableau.

Il est possible que ca fasse buguer le JS (en théorie non)





Edit : Correction bug "impossible de créer une nouvelle page"
<tr style="background-color:#e0e0e0">

				<td> </td>

				<td class="tc6">Nouvelle page</td>

				[.....]
par
<tr id="trNewPage" style="background-color:#e0e0e0">

				<td> </td>

				<td class="tc6">Nouvelle page</td>

				[.....]
C'est pour exclure la ligne "Nouvelle page" du drag & drop







En bas de page, avant l'include, mettre
$currentPage = 'statiques';
C'est pour appeler le JS ... je ne sais pas trop s'il y a déjà des fonctions

pour identifier la page ...





Voila pour cette page;



core/admin/admin.css



ajouter
td.grabMe {cursor: move;}
core/admin/foot.php



Avant
<?php if(method_exists($plxAdmin->editor, 'addFooter')) $plxAdmin->editor->addFooter(); ?>
Ajouter
<script type="text/javascript">

var plxCore = '<?php echo PLX_CORE ?>';

</script>
C'est pour que le js affiche une image pour le drag&drop

L'image en question est dans le zip que indiqué en bas (qui contient ce "README", et les fichiers aussi)



Apres
<?php if(method_exists($plxAdmin->editor, 'addFooter')) $plxAdmin->editor->addFooter(); ?>
Ajouter
<?php if(!empty($currentPage) && $currentPage == 'statiques') : ?>

<script type="text/javascript" src="<?php echo PLX_CORE ?>lib/js/libs/Mootools.Core.1.3.js"></script>

<script type="text/javascript" src="<?php echo PLX_CORE ?>lib/js/libs/Mootools.More.Sortables.1.2.4.4.js"></script>

<script type="text/javascript" src="<?php echo PLX_CORE ?>lib/js/statiques.sort.js"></script>

<?php endif; ?>
Pour appelez le javascript (page 'statiques.php' uniquement)



Mootools.Core.1.3.js -> le core, avec compatibilité 1.2

Mootools.More.Sortables.1.2.4.4.js -> "Sortables" via le More Builder

statiques.sort.js -> voir après


// Gounlaf - http://www.levisflorian.name
// Pour http://www.levis-heb.net
// History
// - 20101120 : Bug fix (can't use options)
// - 20101017 : Bug fix (can't create new static page)
// - 20101016 : First release
window.addEvent('domready', function() {
	// Tout cocher/tout décocher
	$$('.checkAllControler').addEvent('change', function() {
		if(this.get('checked')) {
			$$('.checkAllChild').each(function(e, i){
				e.set('checked', true);
			});
		} else {
			$$('.checkAllChild').each(function(e, i) {
				e.set('checked', false);
			});
		}
	});

	// afficher/masquer les options
	$$('.toggleOption').addEvent('click', function() {
		var toogleID = this.get('id');
		// 5 : 'link_'.length
		var tr = $('tr_options_'+toogleID.substr(5, toogleID.length));
		
		if(tr.getStyle('display') == 'table-row') {
			tr.setStyle('display', 'none');
			this.set('html', 'Options');
		} else {
			tr.setStyle('display', 'table-row');
			this.set('html', 'Masquer');
		}
	});

	// Création de la colonne dans le header du tableau
	$$('#change-static-file thead tr').each(function(e, i) {
		e.grab(new Element('th', {
			'html': ' ',
			'class': 'grabMe'
		}));
	});

	// Creation de la colonne pour drag&drop les pages
	$$('#change-static-file tbody tr').each(function(e, i) {
		if(e.hasClass('line')) {
			e.grab(new Element('td', {'class': 'grabMe'}).grab(
				new Element('img', {
					'alt': '',
					'src': plxCore+'admin/img/move.png',
					'class': 'handler'
				})
			));
		} else {
			e.grab(new Element('td', {'html': ' '}));
		}
	});
	
	var sortStatiquesPages = new Sortables('#change-static-file tbody', {
		constrain: true,
		handle: 'img.handler',
		onStart: function(e) {
			e.setStyles({'background-color': '#fff6bf','color': '#514721'});
		},
		onComplete: function(e) {
			var k = 0;
			this.serialize(0, function(e, i) {
				// Besoin d'un autre index parce que
				// le tableau renvoie les lignes "options"
				
				if(e.hasClass('line')) {
					var cssClass = (++k)%2;//pour coincider avec $ordre = ++$num;
					var trID = e.get('id');
					// reset des class css
					e.removeClass('line-0')
					.removeClass('line-1')
					.addClass('line-'+cssClass);

					// calcul des champs "ordre"
					e.getElements('.inputOrder')[0].set('value', k);

					// deplacement de la ligne "options"
					// 3 : 'tr_'.length
					var trOptions = $('tr_options_'+trID.substr(3, trID.length));
					if(trOptions != null) {
						trOptions.inject(e, 'after');
					}
				}
			});
			
			var effect = new Fx.Morph(e, {duration: 500, transition: Fx.Transitions.Sine.easeOut});

			// Stockage des propriétés background-color
			// et color pour effet Fx.Morph
			e.store('backgroundColor', e.getStyle('background-color'))
			.store('color', e.getStyle('color'));
 
			effect.start({
				'background-color': '#e6efc2','color': '#264409'
			}).chain(function() {
				effect.start({
					'background-color': e.retrieve('backgroundColor'),
					'color': e.retrieve('color')
				});
			}).chain(function() {
				e.setStyles({
					'background-color': '','color': ''
				});
			});
		}
	}).removeItems($('trNewPage'), $$('tr.options'));
});
Je crois n'avoir rien oublié ... si c'est le cas,

fait un diff sur le statiques.php fourni



Le JS peut surement etre optimisé.



Pour les couleurs pendant le drag&drop -> merci www.blueprint.org =)





Fichiers (au choix :) ) : http://www.levis-heb.net/static12/telechargement

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour Gounlaf

    C'est génial ce que tu as fait. Je viens de tester en récupérant le fichier .zip.
    En effet c'est pratique ce drag & drop.
    Joli boulot
    Bravo et merci de le partager !

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • cyrilcyril Member
    Merci Fréro :-)
  • GounlafGounlaf Member
    Bonjour,

    je n'ai rien fait ... c'est surtout Mootools =) (pour les Fans de JQuery ... il faudra l'adapter vous même, je ne "maitrise" pas du tout JQuery =/)

    Je viens d'éditer pour corriger "un bug" : je n'avais pas exclu la ligne "Nouvelle page" > du coup, impossible d'en créer une (d'après Cyril)
  • super_g2super_g2 Member
    mais c'est énorme ça :)
    GG
  • TriphonTriphon Member
    Bonjour,
    La fonction est pratique mais je viens de constater qu'elle (le code de foot.php) génère un dysfonctionnement si l'on utilise le module whizzywig pour éditer le corps des documents. Celui-ci perd la mémoire. Le collage du code de l'image depuis la boîte ouverte par medias.php ne passe plus dans le champ du formulaire (article.php).
  • SapinTremblantSapinTremblant Member
    voila un développement qui va dans le bon sens selon moi. Quelqu'un pour adapter tout ça en jQuery ?

    Bravo à toi Gounlaf et merci
  • GounlafGounlaf Member
    Triphon a écrit:
    Bonjour,
    La fonction est pratique mais je viens de constater qu'elle (le code de foot.php) génère un dysfonctionnement si l'on utilise le module whizzywig pour éditer le corps des documents. Celui-ci perd la mémoire. Le collage du code de l'image depuis la boîte ouverte par medias.php ne passe plus dans le champ du formulaire (article.php).
    Bonsoir,
    j'essayerais de corriger ça si je peux ... mais compter pas sur moi avant le week end prochain
    SapinTremblant a écrit:
    voila un développement qui va dans le bon sens selon moi. Quelqu'un pour adapter tout ça en jQuery ?

    Bravo à toi Gounlaf et merci
    J'essayerais de l'adapter à jQuery si j'ai le temps, idem, le week end prochain. Les syntaxes sont grossos modos les mêmes ; c'est surtout les fonctions qui ne sont pas les mêmes
  • GounlafGounlaf Member
    Plop,

    je viens de corriger un petit bug : la ligne "option" (qui apparait ou disparait quand on clic sur Options/Masquer) était "prise en compte" dans le sortable ... du coup, elle buguait pas mal :/

    Chercher : 
    }).removeItems($('trNewPage'));
    Remplacer par 
    }).removeItems($('trNewPage'), $$('tr.options'));
Connectez-vous ou Inscrivez-vous pour répondre.