Historique de la page

...

Adaptation de Twitter Bootstrap pour fonctionner dans un contexte portlet

Dans le cadre de développement de portlet responsivenos tests de développement avec Bootstrap, nous avons identifié certaines limitations du framework lors d'un usage au sein d'une portlet. 

Effectivement, les medias media-queries détectent la largeur de la fenêtre dans son intégralité, tandis qu'une portlet ne représente qu'un fragment de la page. Dans ce cadre là, nous avons mis en place une version modifiée du framework pour s'adapter à ces contraintes. Les sources sont disponibles sur Github.

Cette solution se veut iso-fonctionnelle par rapport à la version non modifiée. Cependant, il reste aujourd'hui quelques conflits de classes entre lors d'une utilisation "simultanée" de la version modifiée et celle non modifiée quand on utilise cette librairie avec (importée par les portlets) avec celle d'origine  (utilisée par le thème Respondr d'uPortal 4.1 et le thème respondr). 

Il est possible d'accéder à l'historique des discussions à propos de cette version modifiée de Bootstrap avec Jasig via l'historique Des échanges sur cette problématique sont en cours avec la communauté Jasig => Historique de la mailing list

Nécessité d'implémentation de modification au sein du framework

Comme évoqué précédemment les medias media-queries ne se basent que sur la largeur de la fenêtre, or les portlets peuvent prendre différentes tailles au sein d'une page . Une portlet va pouvoir occuper (25%, 33%, 40%, 50%, 60% ou même 100% de la largeur. Et une même portlet pourra avoir deux largeurs différentes sur une même page.

La version modifiée permet de passer outre les limitations imposées par les medias queries. Il devient alors possible d'avoir des "css conditionnelles" en fonction de la largeur de la portlet elle même.

...

). Il était donc nécessaire de trouver une solution "similaire" (règles CSS "conditionnelles") mais ne se basant pas sur les media-queries (inexploitables dans ce contexte).

Pour ce faire, nous sommes donc partis du constat suivant :

• Objectif : permettre d'appliquer différentes règles CSS en fonction de la largeur d'une portlet
• Contraintes : 
  • un page peut contenir plusieurs portlets
  • une même portlet peut se trouver à plusieurs endroits différents sur la même page...
  • .... et ne pas avoir la même largeur à chaque fois
  • la largeur d'une portlet peut varier lors d'un drag-n-drop (déplacement de portlet d'une colonne A à une colonne B), d'un changement de mode (normal => maximisé, maximisé => normal), d'un redimensionnement de la fenêtre du navigateur

=> Il nous fallait donc trouver une solution permettant de recalculer dynamiquement la largeur de chaque portlet présente sur la page.

Notre solution se base sur :

• un div (dit "conteneur") englobant l'intégralité du contenu de la portlet
• un script JS permettant de :
  
  • calculer à la volée les largeurs de chacune des portlets...
  • ... et, en fonction de la valeur obtenue pour chacune d'elles, attribuer la classe CSS correspondant au mode d'affichage (xs , sm, md, lg) à appliquer.

Fonctionnement de la version modifiée

Il faut insérer un petit snippet JavaScript dans la page 

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .pc
    	$portletContainers = $(".pc");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
        var $that = $(this);
        var portletWidth = $that.width()
        $that.removeClass("xs sm md lg");
        if(portletWidth < 768)
            $that.addClass("xs");
        if(portletWidth >= 768 && portletWidth < 992)
            $that.addClass("sm");
        if(portletWidth >= 992 && portletWidth < 1200)
            $that.addClass("md");
        if(portletWidth >= 1200)
            $that.addClass("lg");
    });
}
})(jQuery);

A chaque redimensionnement de la fenêtre, ce script va parcourir tous les éléments de la page pour recalculer la taille des conteneur conteneurs de porlet et leur appliquer la classe CSS en fonction de leur nouvelle largeur. 

La limitation actuelle de ce système est qu'il ne gère pas le déplacement de portlet en drag & drop. -n-drop => Cela fait partie des évolutions futures du développement. 

Exemples de projets tirant parti du framework

1. Portlet Jasig modifiée : email-preview
2. Portlet Portlet Jasig modifiée : news-reader-portlet
3. Esup-Dematec (Bootstrap en version 2.3)

...

L'utilisation de framework CSS n'est pas toujours utile. Dans certains cas, lorsque l'existant est trop lourd , ou que l'interface se révèle très sommaire, il est peut s'avérer fastidieux et/ou inutile de se baser sur des librairies aussi conséquentes.

...

Dans ces cas là, il parait plus pertinent de partir sur une solution sans librairie de réaliser soit même l'intégration. 

Les

...

classes CSS conditionnelles 

Comme vu précédemment il est malheureusement impossible avec des médias queries de cibler la largeur de la portlet. Nous sommes obligés de nous baser sur la largeur de la fenêtre (pour mieux comprendre cette problématique, un article explique bien les problèmes d'implémentation de cette fonctionnalité nommée Element Query).

...