Développement Web, Internet, Javascript

Réaliser un scheduler AJAX avec jQuery et PeriodicalUpdater

Posté par seiyar81 le 21 mai 2013 | Laisser un commentaire (0)
jQuery

jQuery est un outil formidable.
Il fait non seulement partie des meilleurs frameworks du moment, je dis bien des car nombreux sont ceux qui rivalisent en terme de fonctionnalités, légèreté, et simplicité d’utilisation : ExtJS, Prototype, Mootools ou encore YUI pour ne pas les citer.

Mais sa véritable force, comme j’ai déjà pu l’évoquer avec le génial DataTables, réside dans la variété de plugins disponibles.

Nous nous intéressons ici à un plugin, qui est en fait un portage d’une fonctionnalité de Prototype vers jQuery, j’ai nommé PeriodicalUpdater.

Petit exemple concret : qui n’a jamais eu à mettre en place un rafraîchissement automatique du contenu d’une page Web à base de setInterval ? C’est fastidieux, pas pratique à écrire et s’écarte un peu de la logique d’utilisation d’un framework.

PeriodicalUpdater nous permet via une méthode unique de mettre en place une requête AJAX périodique, facilement paramétrable.

Rien de tel qu’un peu de code pour tout comprendre, la méthode prend trois paramètres : l’URL à interroger, les paramètres de la requête, une fonction callback.

Les paramètres ne sont ni plus ni moins que les paramètres normalement passés à une requête $.ajax classique avec en plus ceux de PeriodicalUpdater.

$('#myDiv').PeriodicalUpdater('/news/list/', 
{
        method: 'get',          // méthode; get ou post
        data: {},               // tableau de valeurs passées à l'URL - e.g. {nom: "Yriase", msg: "Hello World"}
        minTimeout: 1000,       // valeur de départ du timeout en millisecondes
        maxTimeout: 8000,       // valeur maximum du timeout en millisecondes
        multiplier: 2,          // valeur pour incrémenter le timeout si la réponse n'a pas changé (jusqu'à maxTimeout)
        type: 'text',           // type de la réponse : text, xml, json, etc.  Voir $.ajax
        maxCalls: 0,            // nombre maximum d'appels. 0 = pas de limite.
        autoStop: 0,            // arrête automatiquement la requête après plusieurs retours renvoyant les mêmes données. 0 = désactivé.
        autoStopCallback: function() { ... } // Callback a exécuter quand l'autoStop est déclenché
        cookie: {},             // configuration du cookie pour stocker le timeout
        verbose: 0              // niveau de verbosité des logs : 0=aucuns, 1=moyen, 2=tout 
}
, function(remoteData, success, xhr, handle) { 
    // this référence $('#myDiv') 
});

Il est également possible d’appeler librement la méthode sans l’attacher à un élément :

$.PeriodicalUpdater('/news/list/', {}, function(remoteData, success, xhr, handle) {});

Et voilà en quelques lignes vous avez paramétré votre scheduler ;)

Pour récupérer le plugin direction GitHub.

Catégorie: Développement Web, Internet, Javascript | Laisser un commentaire (0)

PHPUi : Du nouveau et des examples

Posté par seiyar81 le 26 février 2013 | Laisser un commentaire (0)

PHPUi Logo

Beaucoup de changements pour PHPUi, on avance petit à petit vers une librairie utilisable pour développer et créer ses interfaces utilisateurs.

La réécriture de la librairie avec les namespaces de PHP5 a apporté entre autres une meilleur abstraction et modularité des fonctionnalités.

Le support de jQuery ( et de jQuery Ui ) est toujours d’actualité mais est complété par le support de Javascript basique.
Cela nous permet de mieux intégrer dans nos pages des fonctionnalités simples mais nécessaires telles que l’ouverture de popup ou le clic sur un bouton sans avoir besoin d’un framework complet.

Un petit exemple :

	$button = new Xhtml\Element('button', array('onClick' => PHPUi::getInstance()->js()->console->log('[OnClick] Hello world !')), true, 'Click me !');
	$button->onMouseOver = $button->js()->console->log('[MouseOver] Hello world !');
	echo $button;

        $button2 = new Xhtml\Element('button', array('onClick' => PHPUi::getInstance()->js()->window->open("http://localhost/phpui/examples/","PHPUi Examples","menubar=1,resizable=1,width=350,height=250")), true, 'Open pop-up !');
        echo $button2;

Comme vous pouvez le voir, le chaînage des appels Javascript est pleinement supporté.

Cette fonctionnalité devrait également faire son apparition dans l’adapter jQuery en plus du support des spécificités de ce dernier.
A l’heure actuelle vous pouvez déjà réaliser ceci :

        $gs = PHPUi::getInstance()->gs(array('columns' => 16));
        $gs->addChild(new Xhtml\Element('h2', null, true, '16 Column Grid - 960Gs'));
        $gs->jquery()->click( $gs->js()->console->log("Hello from the console") ); 
        $gs->jquery()->click( 
            $gs->jquery()->ajax( 
                array( 
                    'url' => 'ajax.php', 
                    'type' => 'POST', 
                    'data' => array( 'html' => $jsonString ), 
                    'dataType' => 'html',
                    'success' => 'function(data) { $(".container_16").append(data); }' 
                ) 
            ) 
        );
        echo $gs;

Le chaînage des appels Javascript dans un appel jQuery est actuellement supporté.

Pour plus d’exemples ou d’informations voyez le GitHub du projet.

Catégorie: Développement Web, Javascript, PHP | Laisser un commentaire (0)

DataTables : Personnalisation du template

Posté par seiyar81 le 12 décembre 2012 | Laisser un commentaire (0)

Encore un article sur DataTables, et oui je dois bien me l’avouer, la librairie me plaît elle est très ouverte et flexible c’est donc tout normalement que je me permets de donner des petites astuces sur son utilisation.

Il existe une option de configuration que vous n’avez peut-être pas encore utilisée, car pas nécessairement configurable si on se sert de la version basique de DataTables, mais qui se révèle pourtant très utile.
Chaque tableau possède un header et un footer (balises <thead> et <tfoot>) qui servent à afficher un certain nombre de contrôles : pages, filtre etc …

Et bien le plugin nous offre la possibilité de pleinement configurer tout ça !
C’est donc via l’option de configuration sDom que l’on va choisir quoi afficher, et où.

Un petit exemple tout simple :

    $(document).ready(function() {
        $('#example').dataTable( {
            "sDom": '<"top"lp>rt<"bottom"if>'
        } );
    } );

Cette configuration inverse les contrôles par défaut, ceux du header se retrouvent dans le footer et vice-versa.

Mais plus intéressant cette option nous permet de rajouter des contrôles personnalisés. Imaginons que pour une raison particulière on ai besoin d’ajouter un filtre sur une colonne et que l’on ai envie de mettre ce filtre à la place du champ de recherche.

Rien de plus simple :

    

$(document).ready(function() {

        $.fn.dataTableExt.aoFeatures.push( {
                "fnInit": function( oSettings ) {
                    return $("<select id='filter'>...</select>").get(0); 
                }, 
                "cFeature": "S", 
                "sFeature": "Filtre" 
        } ); 

        $('#example').dataTable( { 
                     "sDom": '<"top"Si>rt<"bottom"lp>' 
              } 
        ); 

} );

Un petit coup de CSS et le tour est joué !

La prochaine fois je parlerai des options de filtrage, triage de DataTables.

Catégorie: Développement Web, Javascript | Laisser un commentaire (0)

PHPUi : créer et manipuler des interfaces utilisateurs en PHP

Posté par seiyar81 le 21 septembre 2012 | Laisser un commentaire (2)

PHPUi Logo

Je présente aujourd’hui un projet commencé pour mon mémoire de fin d’études, puis mis en pause, puis repris, puis complètement réécris …

Il s’agit d’une librairie qui permet de générer des interfaces utilisateurs en écrivant uniquement du PHP (ou presque :p).
Le but est de simplifier la vie aux développeurs qui souhaitent générer dynamiquement du code HTML/CSS ou Javascript côté serveur.
A l’heure actuelle, le support du CSS et du Javascript est en cours d’implémentation/optimisation.

La librairie se veut 100% objet PHP5, utilise les namespaces, est facilement extensible via une abstraction de la plupart de ses fonctionnalités, supporte l’autoload, utilise le pattern Observer etc …
De plus un support particulier des frameworks CSS 960gs et Blueprint a été implémenté (via le système d’abstraction, donc applicable à d’autres frameworks/librairies) afin de réellement faciliter la mise en place d’interfaces aux développeurs.

Si vous souhaitez plus d’infos sur les frameworks cités : 960gs, Blueprint.

Un petit exemple de code :

    $blue = PHPUi::getInstance()->blueprint(array('class' => 'container', 'id' => 'blueprint'));
    $blue->addChild(new Xhtml\Element('h2', array('span' => 24), true, '24 Column Grid - Blueprint'));
    $blue->addChild(new Xhtml\Element('div', array('notice' => true), true, 'This is a div with class notice'));
    $blue->addChild(new Xhtml\Element('div', array('error' => true), true, 'This is a div with class error'));
    $blue->jquery()->click( 
        $blue->jquery()->ajax( 
             array( 
                 'url' => 'ajax.php', 
                 'type' => 'POST', 
                 'dataType' => 'html',
                 'success' => 'function(data) { $("#blueprint").append(data); }' 
             ) 
        ) 
    );

On créé ici un nouvel élément utilisant l’adapter Blueprint, on peut donc directement initialiser des div de type error, notice ou alert en passant le paramètre à true. On applique ensuite un filtre jQuery qui au clic sur la div lancera un appel AJAX avec les paramètres donnés.
La librairie se charge ensuite de générer le code correspondant aux appels effectués.

Sachez qu’il est également possible de charger/décharger un ensemble d’éléments via un système d’adapter.
Exemple avec notre élément $blue de tout à l’heure :

     $dump = Xhtml\Dumper\DumperJson::dump( $blue );
     $loaderJson = new Xhtml\Loader\LoaderJson(array('content' => $dump));
     echo $loaderJson->load();

Ici on dump et on load un élément en JSON mais à terme il sera possible d’exporter/charger via n’importe quel format puisqu’il est possible de définir ses propres classes.

Si vous souhaitez regarder les exemples ou bien le code de la librairie, un dépôt Github existe :
https://github.com/seiyar81/phpui

La librairie est toujours en cours de développement, je suis donc ouvert aux propositions d’améliorations ou aux fonctionnalités à implémenter.

Catégorie: Développement Web, Javascript, PHP | Laisser un commentaire (2)

Google Advanced Sitemap disponible pour Prestashop 1.4

Posté par seiyar81 le 3 juin 2012 | Laisser un commentaire (36)

EDIT 15/06/2012 : J’ai créé un dépôt Github afin de pouvoir partager les modifications apportées au plugin.

https://github.com/seiyar81/prestashop-advanced-sitemap

Suites aux remarques et à plusieurs demandes, j’ai fais évoluer le support des langages.
Vous pouvez maintenant, en plus de sélectionner quels langue inclure dans le sitemap, sélectionner l’URL sur laquelle se baser pour la génération et ce pour chaque langue.

EDIT 03/06/2012 : Nouvelle version du module avec support des langages (merci à roselan sur le forum de Prestashop) et génération d’un sitemap correctement formaté.

  Google Advanced Sitemap (13,9 KiB, 751 hits)


Suite aux nombreuses demandes reçues je me suis enfin décidé à porter mon module de génération de sitemap vers Prestashop 1.4.
Depuis la version 1.4 l’équipe de développement de Prestashop a intégré le support des images des produits et des différentes langues activées sur la boutique.

Je suis donc reparti de cette base solide et stable afin de ré-inclure mes fonctionnalités de ping des moteurs de recherche.
Ainsi le module est capable de pinger les moteurs suivants :

  • Google
  • Bing (comprends Yahoo qui a fusionné avec l’index de Bing)
  • Ask.com

Potentiellement tous les moteurs de recherche peuvent être ajoutés, n’hésitez donc pas à me faire part de vos requêtes.

Sachez également qu’à chaque ajout, édition ou suppression de produit, le sitemap est ré-généré automatiquement.

Je reste bien évidemment ouvert aux propositions d’améliorations, de nouvelles fonctionnalités etc… et disponible s’il y a des problèmes.
Encore merci à tous pour vos remarques et suggestions.

Catégorie: Développement Web, Internet, PHP | Laisser un commentaire (36)

Réaliser une requête POST en PHP avec cURL

Posté par seiyar81 le 10 mai 2012 | Laisser un commentaire (0)

Voici un snippet d’une fonctionnalité que l’on ne trouve pas facilement dans la documentation de PHP : uploader un fichier avec la librairie cURL.

Cette dernière nous offre en effet de nombreuses possibilités pour gérer nos requêtes et ce qui nous intéresse plus particulièrement ici : les requêtes HTTP à l’instar de wget par exemple.


function curlUploadFile($url, $fileName) {

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_VERBOSE, 0);
  curl_setopt($ch, CURLOPT_USERAGENT, "MY_USER_AGENT");
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_POST, true);

  $post = array(
    "upload_file"=>"@".str_replace("\\", "/", $fileName),
  );
  curl_setopt($ch, CURLOPT_POSTFIELDS, $post); 
  $response = curl_exec($ch);

  if(!curl_errno($ch))
  {
    return $response;
  }
  else
  {
    return curl_error($ch);
  }

}

Voilà en espérant que cela dépanne certains !

Catégorie: Développement Web, Internet, PHP | Laisser un commentaire (0)

DataTables : Tri et filtre personnalisés des données

Posté par seiyar81 le 7 avril 2012 | Laisser un commentaire (2)

Un petit moment que je n’ai pas posté de tutoriel ou tout du moins d’articles plus techniques, mais l’occasion s’est présentée lorsque je suis tombé sur un problème avec la librairie DataTables.

Je dis volontairement librairie car aujourd’hui le plugin pour jQuery a tellement évolué qu’on peut le considérer comme une librairie à part entière.

Une des fonctionnalités très pratique et intéressante de DataTables est de permettre l’ajout de de fonctions personnalisées de tri et de filtrage sur les donénes des tableaux.

L’intérêt d’une telle pratique est de pouvoir offrir aux utilisateurs des fonctionnalités avancées de manipulation des données.

Pour commencer voici un exemple tiré permettant d’ajouter un filtrage pour des adresses IP : 

function ip2long (IP) {
 IP = IP.match(/^([1-9]\d*|0[0-7]*|0x[\da-f]+)(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))?(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))?(?:\.([1-9]\d*|0[0-7]*|0x[\da-f]+))?$/i); // Verify IP format.
 if (!IP) {        return false;
 }
 IP[0] = 0;
 for (i = 1; i < 5; i += 1) {        IP[0] += !! ((IP[i] || '').length);
     IP[i] = parseInt(IP[i]) || 0;
 }
 IP[4 + IP[0]] *= Math.pow(256, 4 - IP[0]);
 if (IP[1] >= IP[5] || IP[2] >= IP[6] || IP[3] >= IP[7] || IP[4] >= IP[8]) {
     return false;    }
 return IP[1] * (IP[0] === 1 || 16777216) + IP[2] * (IP[0] <= 2 || 65536) + IP[3] * (IP[0] <= 3 || 256) + IP[4] * 1;
}

$.fn.dataTableExt.oSort['ip_address-asc'] = function(a, b) {
	var ipA = ip2long(a);
	var ipB = ip2long(b);
	return ((ipA < ipB) ? -1 : ((ipA > ipB) ?  1 : 0));
};

$.fn.dataTableExt.oSort['ip_address-desc'] = function(a, b) {
	var ipA = ip2long(a);
	var ipB = ip2long(b);
	return ((ipA < ipB) ? 1 : ((ipA > ipB) ?  -1 : 0));
};

On a tout d’abord une fonction pour transformer une adresse IP en entier puis deux fonctions pour comparer deux adresses et les trier par ordre ascendant ou descendant.

Une fois ces fonctions ajoutées, il suffit de spécifier le type de données de la colonne lors de la déclaration du tableau :

$('#example').dataTable( {
        "aoColumns": [
             null,
             null,
             null,
             { "sType": "ip_address" },
             null
         ]
} );

Il est donc très simple d’ajouter des fonctions de tri si nos tableaux utilisent des données d’un format un peu exotique.
Plusieurs fonctions sont d’ailleurs disponibles dans la documentation de la librairie.

Si ces fonctions nous permettent d’améliorer le tri des données, on peut également ajouter des fonctionnalités de filtrage.
Imaginons l’exemple suivant : vous disposez d’un tableau listant des factures avec leur état et vous souhaitez filtrer ce tableau en fonction d’une liste de checkbox représentant chacune un état.
A chaque changement d’état d’une de ces checkbox vous souhaitez donc filtrer le tableau.


var etatsCheckbox = new Array("filtre_etat_1", "filtre_etat_2", "filtre_etat_3", "filtre_etat_4", "filtre_etat_5", "filtre_etat_6"); 

var etatsGlobal = null;

$("#filter_etat input").click(function(){
    if($(this).attr("id") != "no_filter_etat") {
	 if(!$(this).is(":checked")) {
               if(getEtatsFiltres().length == 0)
                      $("#no_filter_etat").attr('checked', 'checked');
               }
	       else
		   $("#no_filter_etat").removeAttr('checked');
	 } else if($(this).attr("id") == "no_filter_etat") {
               if(!$(this).is(":checked")) {
                      $("#filtre_etat_1").attr('checked', 'checked');
               } else {
		      for(var i = 0; i < etatsCheckbox .length; i++) {
			$("input[name="+etatsCheckbox [i]+"]").removeAttr("checked");
		      }
               }
         }
	 etatsGlobal = getEtatFiltres();
	 oTable.fnDraw();
});

function getEtatFiltres() {
	var f = new Array();
	if($("#no_filter_etat").is(":checked"))
           return null;
	else {
	   for(var i = 0; i < etatsCheckbox .length; i++) {
		if($("input[name="+etatsCheckbox [i]+"]").is(":checked"))
		      f.push($("input[name="+etatsCk[i]+"]").attr("value"));
	   }
	   return f;
	}
};

On a tout d'abord un tableau avec les id de nos checkbox, un tableau global qui sera utilisé pour le tri, puis une fonction qui a chaque clic va relancer le filtrage du tableau en effectuant quelques contrôles avant (si on coche "no_filter_etat" décocher les autres checkbox ou bien cocher "filtre_etat_1" par défaut) et enfin une fonction pour récupérer les attributs value des checkbox cochées.

Maintenant il ne nous reste plus qu'à ajouter notre fonction à l'API de DataTables :


$.fn.dataTableExt.afnFiltering.push(
	function( oSettings, aData, iDataIndex ) {
		var iColumn = 2; // Numéro de la colonne dans votre tableau
			
		if(etats === null)
			return true;
		
		var iEtat = aData[iColumn];
			
		if(iEtat) {
			if(iEtat.length == 0)
				return false;
			else if(etatsGlobal.indexOf(iEtat) >= 0) {
				return true;
			} else {
				return false;
			}
		} else {
			return true;
		}
	}
);

Petite explication : si la colonne ou est définie l'état de la facture est contenue dans notre tableau global etatsGlobal, elle sera affichée, sinon cachée.

C'est donc très simple et à la portée de tout le monde d'ajouter des fonctions de tri et de filtrage, à vos claviers !

Catégorie: Développement Web, Javascript | Laisser un commentaire (2)

Plugin pour Prestashop : Google Advanced Sitemap

Posté par seiyar81 le 17 février 2011 | Laisser un commentaire (26)

EDIT 16/02/2012 : Une nouvelle version du module, compatible 1.4 vient de sortir ici.

EDIT 23/11 : Pas de nouveaux articles depuis un moment, le temps libre me manque, toutefois j’ai reçu beaucoup de demandes concernant des mises à jour où des évolutions pour le module. Il faut savoir que le module de base de Prestashop 1.4 (Google Sitemap) intègre de base le support des images, d’une manière plus stable que mon module ce qui le rend obsolète.
Si je trouve un jour le temps, je le mettrai peut-être à jour pour la version 1.4 avec le ping des autres moteurs et sûrement d’autres fonctionnalités.
Merci à tous pour vos retours et suggestions.

EDIT 17/02 : Mise à jour du module : ajout du ping des moteurs Bing et Yahoo.

Ayant travaillé récemment sur la solution e-commerce Prestashop, proposé par la société éponyme, j’ai cherché à mettre en place le classique fichier sitemap.

Il existe un module, intégré de base à la solution qui permet de générer un fichier avec tous les liens du sites : produits, catégories, CMS etc…
Mais bizarrement, ce module appelé Google Sitemap ne gère pas les images, pourtant partie intégrante d’une boutique en ligne.

Qu’à cela ne tienne, j’ai modifié le module afin d’ajouter :

  • le support des balises <image:image>
  • quelques statistiques en plus lors de la génération du fichier
  • la possibilité de pinger Google directement

et ainsi est né Google Advanced Sitemap !

L’archive zip du module est téléchargeable via le lien ci-dessous. Il est bien évidemment distribué sous la licence GPL.

  Google Advanced Sitemap (13,9 KiB, 751 hits)

Je le mettrai peut-être à jour avec quelques fonctionnalités en plus d’ici quelques temps.

Catégorie: Développement Web, Internet, PHP | Laisser un commentaire (26)

Créer un calendrier dynamique en Javascript avec FullCalendar

Posté par seiyar81 le 24 octobre 2010 | Laisser un commentaire (4)

Comme on le sait jQuery possède un nombre de plugins tout simplement énorme ! Il y a certes du tri à faire et certains plugins tente de réinventer la roue, en vain…

FullCalendar ne fait pas partie de ceux-là. Vous avez besoin d’ajouter un calendrier permettant une gestion des évènements, un affichage par jour/semaine/mois, et thèmable ? Alors il vous faut FullCalendar !

Le plugin offre plusieurs vues pour afficher les évènements : par jour, semaine, mois avec des versions type agenda ou basique.
Un de ces autres points forts c’est d’être compatible avec jQuery UI et il s’adapte ainsi à votre thème tout seul, plutôt pratique.
Une extension lui permet même de récupérer les évènements de votre Google Calendar !

Voyons voir un peu comment le mettre en place :

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			theme: true,
			editable: true,
			events: [
				{
					id: 1
					title: 'Aller sur Yriase.fr',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://www.yriase.fr/',
					allDay: true
				},
				{
					id: 2
					title: 'Nourrir le chat !',
					start: new Date(y, m, 28, 8, 0),
					end: new Date(y, m, 29, 8, 15),
					allDay: false
				}
			]
		});
		
	});

Ce bout de code plutôt simple, inialise votre Calendrier avec 2 évènements et l’adaptation au thème jQuery UI. Le proriété editable indique que les évènements ne peuvent être déplacés (peut être remplacée par la propriété editable de chanque évènement).

Comme vous pouvez le constater les évènements sont en réalité des objets JSON, auxquels on peut donc ajouter des proriétés.
Ainsi on peut par exemple ajouter une propriété type qui pourrait nous permettre de filtrer les évènements par type.
Ce qui serait encore mieux serait de pouvoir ajouter un bouton ou ensemble de boutons pour filtrer, qui soient intégrés au calendrier.
Ca tombe bien, j’avais prévu d’expliquer comme faire !

Le but de la manoeuvre est simple, ajouter des boutons au calendrier simplement en modifiant les valeurs dans la déclaration de la propriété header. Par exemple :

			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'all,mandatory,not_mandatory month,agendaWeek,agendaDay'
			}

On ajoute ici trois boutons donc all,mandatory, not_mandatory pour afficher/cacher les évènements obligatoires ou pas. Pas très original mais c’est bon pour l’exemple !

Maintenant il va nous falloir modifier un petit peu le fichier fullcalendar.js.
Aux alentours de la ligne 80, la déclaration de la propriété buttonText.
Ajouter au tableau les lignes :
all: ‘All’,
mandatory: ‘Mandatory’,
not_mandatory: ‘Not Mandatory’,

Ensuite vers la ligne 710 cherchez :

              if (publicMethods[buttonName]) {
			buttonClick = publicMethods[buttonName];
	      }
	       else if (views[buttonName]) {
			buttonClick = function() {
			  button.removeClass(tm + '-state-hover');
			  changeView(buttonName)
			};
	     }

et ajoutez après :

else {
      buttonClick = function() {
	button.removeClass(tm + '-state-hover');
        button.addClass(tm + '-state-active');
        if(button.hasClass('fc-button-all')) {
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-not_mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
        }
      };
 }

Cette partie s’occupe de marquer comme actif le bouton cliqué.
Enfin juste après se trouve cette partie :

if (icon) {
	button = $("
"); } else if (text) { ...

Mettez dans le corps du else if(text) :

if(buttonName == 'all') 
  button = $("");
else
  button = $("");

Maintenant il ne vous reste plus qu’a mettre en place les fonctions pour filtrer les évènements selon leur type.
Mais ça ce sera pour une autre fois !

Catégorie: Développement Web, Javascript | Laisser un commentaire (4)

Utiliser Google Font API pour ajouter des polices à ses pages Web

Posté par seiyar81 le 2 août 2010 | Laisser un commentaire (1)

Parmis les nombreuses API disponibles dans ses Code Labs, Google a mis en place une API particulièrement intéressante : Google Font API !

Cette dernière nous permet très simplement d’inclure une ou plusieurs polices hébergées sur les serveurs de Google via un simple fichier CSS.

Un petit exemple pour illustrer le tout, dans la balise head :

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />

Et plus loin dans le corps de la page :

<span style="font-family: 'Lobster', arial, serif; font-size: 16px;">Hello World !</span>

Ce qui donne le résultat suivant :

Hello World

Tout de même bien pratique cette API ! Vous pouvez consulter la liste des polices disponibles sur cette page.

Sachez qu’il est aussi possible d’utiliser un script Javascript co-développé par Google et TypeKit : WebFont Loader.

Rien de bien compliqué ici non plus, si ce n’est que vous pouvez mieux contrôler le chargement des polices via WebFont Loader :


      WebFontConfig = {
        google: { families: [ 'Lobster', 'Nobile' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

Vous pouvez ensuite définir vos styles comme ceci :

<style>
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Lobster', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 18px
      }
      .wf-active h1 {
        font-family: 'Nobile', serif;
        font-size: 18px
      }
</style>

L’avantage de WebFont Loader est qu’il supporte le chargement de polices via plusieurs fournisseurs. Ainsi vous pouvez charger des polices provenant des serveurs de Google mais aussi de TypeKit, Ascender, et même de n’importe quel fournisseur via un loader dit “custom” :

WebFontConfig = {
  custom: { families: ['OneFont', 'AnotherFont'],
    urls: [ 'http://www.yriase.fr/mystylesheet1.css',
      'http://www.weblike.me/stylesheet2.css' ] }
};
Catégorie: Développement Web, Javascript | Laisser un commentaire (1)