J’ai donc pris 5min de mon temps pour faire rapido presto, un petit coup de jquery pour pouvoir bouger ma debug bar!

Tout simplement, j’ai juste utilisé un script jquery qui permet d’ajouter un event de type « drag » à un élément du DOM. Un petit coup de jquery pour l’utiliser sur la debug bar:

jQuery(document).ready(function($) {
  $("#sfWebDebugBar")
    .bind("dragstart",function( event ){
      $(this).css("right","auto")
    })
    .bind("drag",function( event ){
      $(this).css({
        top: event.offsetY,
        left: event.offsetX
      });
    });
});

Il ne reste plus qu’à faire un petit filtre pour inclure ces 2 scripts automatiquement à la volée en environnement de dev. J’ai tout mis dans un petit plugin disponible plus bas mais je vous détaille le code ici pour ceux qui voudraient juste jeter un œil:

class moveWebDebugBarFilter extends sfFilter
{
  public function execute($filterChain)
  {
    if ('dev' == sfConfig::get('sf_environment'))
    {
      $response = $this->getContext()->getResponse();
 
      $response->addJavascript('/moveDebugBarPlugin/js/jquery.event.drag-1.5.min.js','last');
      $response->addJavascript('/moveDebugBarPlugin/js/moveDebugBar.js','last');
    }
 
    $filterChain->execute();    
  }
}

que l’on rajoute dans notre filters.yml

rendering: ~
security:  ~
 
# insert your own filters here
moveDebugBar:
  class: moveWebDebugBarFilter
 
cache:     ~
execution: ~

Il ne reste plus qu’à télécharger:
moveDebugBarPlugin
et à lancer un petit:

php symfony plugin:publish-asset

Le plugin est très basique et rudimentaire évidemment, il ne sera pas encore sur le site de Symfony du coup. Mais si vous avez des idées d’améliorations ou d’enrichissements hésitez pas, sait-on jamais.

Voilà le rendu en vidéo, a noter que je l’ai testé avec Symfony 1.2 et 1.3:

Crédit photo: http://www.flickr.com/photos/kaidohmaru/453263320/

C’était pour vous tenir au courant un peu. Mais voici ce que vous êtes venu chercher, les bons plans de la semaine.

• Des graphs en jQuery qu’ils sont beaux
  Le flash, j’aime pas trop, mais son utilisation pour des graphiques m’a toujours semblé adapté. Mais petit à petit jQuery grignote ce secteur, en voici une nouvelle illustration très réussie.
• Profiler vos script PHP
  Une alternative à xdebug très bien introduite par ce billet
• 12 sites pour vos présentations en lignes
  Parce que c’est devenu un peu une grosse source de connaissance, les présentations exposées en conférence puis mise en ligne, les outils ne manquent donc pas.
• Les myths des réseaux sociaux
  Très bon article sur un sujet d’actualité
• Des Tshirt pour graphistes et développeurs
  C’est bientôt noël, peut-être une idée de cadeaux se cache dans ce billet. Ils ne sont pas tous en vente, mais ils sont tous bien pensés.
• Une jolie ombre portée en photoshop
  Toujours dans la rubrique « passons nous des graphistes », voici un petit tutorial pour une ombre portée très réussie.
• Plugin symfony sfCodeReview
  Je ne le connaissais pas, mais je le trouve parfaitement bien pensé. ce plugin vous permettra de balayer le code source de Symfony directement depuis la debug bar
• Reflet d’image en jquery
  Ca reste toujours sympa, surtout quand c’est bien codé.
• Encore un set d’icone pour blog très bien fichu
  Très travaillé et coloré, tous les icônes indispensables pour réussir son thème de blog
• Un explorateur de fichier en PHP
  Très belle réalisation, ce script pour permettra de vous balader dans l’arborescence de votre serveur web avec un certain style. Ajax et graphisme sont aussi au rendez-vous.

crédit photo: http://www.flickr.com/photos/besimo/4094334183/

Et c’est parti:

• Retirer les bordures autour des liens cliqués sous Firefox.
  Il y a pas mal de temps, un ami graphiste m’avait demandé « C’est vraiment moche ces bordures quand on clic » (oui vous savez ces graphistes et le souci du détail ;)). Et je ne pensais pas (et encore aujourd’hui) qu’on pouvait les retirer. Et pourtant c’est tout simple. (Oui oui Gi, je parle de toi, souvenir :)
• Plugin jquery pour revenir en haut de la page
  Il sait se faire discret et rempli parfaitement son rôle. Une fois qu’on scroll un peu dans la page, un charmant petit module vient apparaître permettant de remonter en haut de la page.
• Slides Symfony 1.3 et Doctrine 1.2
  Pour ceux qui auraient loupé le lien! Je suis d’ailleurs ravi des nouveautés, en particulier pour doctrine, qui nous permettra enfin d’étendre Doctrine, facilement.
• Jquery Plugin Avant/Après
  Le genre de plugin qui m’emballe. Ceux dont on ne sait pas trop à quoi il pourrait servir, jusqu’à l’illumination!
• PHP 5.3, les appels dynamiques
  Et oui, c’est une des principales nouveautés de la 5.3 et ca méritait bien un petit tuto très bien ficelé comparé à ceux que j’ai pu croiser jusque là
• Créer simplement des animations avec jquery (via dator)
  En voilà une idée quelle est bonne. Une interface permettant de créer rapidement et simplement des animations et des interactions avec jquery. Un bel outil.
• Effet pour légende d’image avec jQuery
  La semaine dernière, je vous présentais un petit effect « ouverture de porte », voilà son petit frère avec un effet encore plus recherché (et réussi à mon goût)
• Contrôler votre base de donnée avec un seul fichier PHP
  Sans être exceptionnel, il mérite de remplir parfaitement son rôle. Un seul fichier PHP à uploader (ou à poser en local) et vous pouvez alors contrôler vos bases de données. Un phpmyadmin light, mais efficace.
• Créer un twitter like tout simplement
  Certes, le code est très basique, mais c’était surtout pour montrer qu’une bonne idée, ca reste une idée menée au bout (et je parle pour moi le premier ;p). Et que le concept de twitter se résume en ces quelques lignes.
• Petites astuces CSS pour améliorer le rendu typographique
  C’est simple, mais ce sont les règles élémentaires à toujours garder à l’esprit à mon goût

On essaye de diversifier mais je me rend compte qu’un peu de structure dans cette liste des fois, ça ferait pas de mal! Ou alors, je pourrais faire des compils best-of! Vous en pensez-quoi?

crédit photo: http://www.flickr.com/photos/lilit/

La deuxième découle de la première, finalement, on aura un lien « lire la suite » histoire d’être sûr de mesurer toutes les lectures. Bref, des détails, rien de bien grave et voici la sélection de la semaine!

• jGrow
  C’est une des fonctionnalités des RTE assez populaires, pouvoir agrandir la hauteur d’un textarea en fonction de la taille de son contenu, le tout dans un petit plugin jquery
• Comment développer un plugin jquery
  Un très bon tutorial sur les bases de la création de plugin jquery. En anglais certes, mais réaliser par la fine équipe de Sitepoint.com, une très bonne référence
• ImageFlow
  De toute les galeries jquery, en voici une très aboutie qui reproduit l’effet coverflow d’itunes. Très réussie!
• DateJS
  Voici une librairie javascript très intéressante qui permet de transformer une date texte en une « vrai » date, un peu à la manière de strtotime en PHP.
• Select box ipod style
  Un énième plugin jquery sur la customisation d’un selectbox qui s’inspire lui du menu de sélection d’un ipod. Plutôt bien pensé niveau ergonomie.
• Créer un carousel jquery de billets wordpress
  Tout est dans le titre, un tutorial en anglais qui indique comme créer simplement un carousel avec les billets de son blog que l’on souhaite mettre en avant
• Une classe CSS selon la taille du navigateur
  Avec l’avènement des grandes résolutions et du mobile, il devient parfois délicat de contenter tout le monde sur le rendu visuel d’un site. Voici un petit plugin qui va pouvoir aider, en donnant une class CSS au body de notre page html selon les dimensions de notre navigateur.
• Une select box sexy
  Et voici encore une customisation de selectbox qui cette fois-ci, mise sur le look et l’effet est très réussi.

Après avoir définitivement abandonné TinyMCE, car trop usine à gaz et n’en faisant qu’à sa tête, j’ai essayé nicedit comme je vous l’avais signalé dans un bon plan de la semaine. Malheureusement, il reste un peu juste pour certains besoins.
Sur les conseils de Sam, je me suis donc relancé dans une vieille connaissance, FCKEditor, un des plus vieux RTE avec TinyMCE.

S’il est a noté de nets progrès, il fait encore un peu usine à gaz (mais moins que TinyMCE quand même) et je le trouve particulièrement moche, mais c’est un détail qui peut se modifier, donc on va le mettre de côté pour l’instant ;)

Un des impératifs par contre, c’est la personnalisation et donc la création de plugin permettant de rajouter des boutons avec des fonctionnalités que l’on aura déterminer nous même. Et vu les difficultés que j’ai pu rencontrer pour créer mon premier, je me suis dis que ca valait bien quelques explications. Dans un souci de clarté, je ne détaillerai pas l’installation de fck, je vous invite à faire un tour sur leur site pour ça.

Première chose quand on veut créer un plugin fck, créer son arborescence, dans editor/plugins. Ici, on va créer un plugin qui nous permettra de rajouter un bouton à notre toolbar qui lancera une fenêtre nous permettant de faire un peu ce qu’on veut, en l’occurrence dans notre cas, afficher une liste des pages de notre gestionnaire de contenus symfony afin de pouvoir insérer des liens internes entre elle.

Dans notre nouveau dossier, vous créez donc un fichier plugin.js avec à l’intérieur:

// Ici je crée une action FCK qui s'appelle Internlink, et qui chargera le fichier test.html (qui sera au même niveau que ce fichier) lors de son appel
FCKCommands.RegisterCommand('Internlink', new FCKDialogCommand('Internlink','Ajout lien interne',FCKConfig.PluginsPath+'internlink/test.html', 300, 300 ));
 
// Ici je crée un bouton pour la toolbar auquel j'associe l'action précédemment définie
FCKToolbarItems.RegisterItem( 'Internlink', new FCKToolbarButton( 'Internlink', 'Lien interne', null, FCK_TOOLBARITEM_ICONTEXT, true, true, 1 ) ) ;

Ensuite on enchaine avec le template de notre popup qu’on a appelé test.html plus haut (on le met bien où on veut mais j’ai définis au-dessus de le mettre au même niveau):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    // Cette partie est nécessaire pour pouvoir utiliser les fonctions de fck à l'intérieur de notre popup 
    var oEditor = window.parent.InnerDialogLoaded();
    var FCKConfig = oEditor.FCKConfig;
    var dialog = window.parent;
    document.write('<script src="' + FCKConfig.BasePath + 'dialog/common/fck_dialog_common.js" type="text/javascript"><\/script>');
    dialog.SetOkButton(true); // Par défaut, seul le bouton annuler est affiché, on rajoute le bouton ok	
 
    // Maintenant on fait bien ce qu'on veux, ici j'ai décidé de récupérer en AJAX, une liste en JSON de toutes mes pages et d'alimenter ma selectbox avec
    jQuery(document).ready(function(){
      $.getJSON("/content/selectJson",{}, function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) {
          options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        $("select#intern-link").html(options);
      })
    });
 
    // Puis on surdéfinit une fonction Ok qui est appelé par fck quand on appuye sur le bouton ... ok
    function Ok()
    {
      // Maintenant on utilise fck pour rajouter du contenu à notre RTE. Ici je rajoute simplement les valeurs de mes 2 champs définis dans mon HTML ci-dessous
      oEditor.FCK.InsertHtml( '<a href="'+ jQuery('#intern-link').val() +'" class="extern">'+ jQuery('#intern-label').val() +'</a>' );
      return true; // Il faut renvoyer true pour fermer la popup
    }
</script>
</head>
<body>
	<div id="add-intern-link">		
		<p>
			<label for="intern-link">Lien interne</label>
			<select id="intern-link" name="intern-link">
			</select>						
		</p>
		<p>
			<label for="intern-label">Label</label>
			<input type="text" id="intern-label" name="intern-label" />						
		</p>
	</div>
</body>
</html>

Il ne reste plus qu’à charger notre plugin dans notre conf:

FCKConfig.Plugins.Add( 'internlink' ) ;

et ajouter le bouton à notre toolbar comme par exemple:

FCKConfig.ToolbarSets["nice"] = ['Internlink'];

et on obtient:

On a maintenant accès à toutes nos pages, et un clic sur ok, nous rajoutera un lien dans notre contenu avec le label renseigné.

Il ne reste plus qu’à adapter à vos besoins ces petits bouts de codes!