Admin > Drag & drop pour les pages statiques
Gounlaf
Member
[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 :
id tr_$k pour pouvoir déplacer la ligne "options"
toujours, pour faciliter la gestion JS
Il est possible que ca fasse buguer le JS (en théorie non)
Edit : Correction bug "impossible de créer une nouvelle page"
En bas de page, avant l'include, mettre
pour identifier la page ...
Voila pour cette page;
core/admin/admin.css
ajouter
Avant
L'image en question est dans le zip que indiqué en bas (qui contient ce "README", et les fichiers aussi)
Apres
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
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
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).'">';
parecho '<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.'" /> ...';
parecho '<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');
parplxUtils::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>';
parecho '<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 & dropEn 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 fonctionspour identifier la page ...
Voila pour cette page;
core/admin/admin.css
ajouter
td.grabMe {cursor: move;}
core/admin/foot.phpAvant
<?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&dropL'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
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
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 et développeur de PluXml (2010 à 2018)
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)
GG
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).
Bravo à toi Gounlaf et merci
j'essayerais de corriger ça si je peux ... mais compter pas sur moi avant le week end prochain
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
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 : Remplacer par