Pages enfant
  • Impression d'un canal

En uPortal 3.2

On peut travailler sans modifier de XSL uniquement au niveau javascript et jquery.

Pour se faire au niveau du (ou des skins) dans le fichier skin.xml ajouter :

 <js>javascript/print-plugins.js</js>

Mettre le fichier print-plugins.js dans le dossier "javascript" du skin

 /*********************************************

Ajout de la fonctionnalité d'impression

*********************************************/
(function($){
    $(".up-portlet-controls").ready(function() {  
        var portletControls = $(".up-portlet-controls");
        $('.up-portlet-controls').each(function(i){        
            var parentNode = $(this).parent();
            var chanId = $(parentNode).attr('id').split('_')[1]
            $('<a href="javascript:void(0);" title="Pour imprimer le canal" id="printPortlet_'+chanId+' "class="up-portlet-control print"><span>Imprimer</span></a>').appendTo($(this));        
        });

        $('a[id*=printPortlet_]').each(function(i){$(this).click(function(){printPortlet(this.id.split("_")[1]);return false;});});    
        
        
        var printPortlet = function(id) {
            var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
            sOption+="scrollbars=yes,width=750,height=600,left=100,top=25,resizable=yes";
            
            var iFrame = $('#portletContent_'+id).find('iframe')[0];
            if(typeof(iFrame) == 'object') {
                var printWindows =  window.open(iFrame.src,'',sOption);
                printWindows.focus();
                printWindows.print();        
                return false;
            }
                        
            var printWindows =  window.open('','',sOption);
            var html = '<html><head><title>Impression</title>';
            
            $('link[rel=stylesheet]').each(function () {
                html += '<link href="'+this.href+'" rel="'+this.rel+'" type="'+this.type+'"/>\n';
            });        
    
            html += '</head>';
            
            var htmlTree = '';
            $('#portletContent_'+id).parents().each(function () {
                if(this.tagName.toLowerCase() != "head" && this.tagName.toLowerCase() != 'html') {
                    var oneElement = '<'+this.tagName ;
                    if(this.id != 'undefined' && this.id != '') oneElement += ' id="'+this.id+'"' ;
                    if(this.className != 'undefined' && this.className != '') {
                        var className = this.className.toLowerCase();
                        
                        className = className.replace(new RegExp("layout-.-columns","gi"),"layout-1-columns");
                        className = className.replace(new RegExp("fl-col-flex.","gi"),"fl-col-flex1");
                        className = className.replace(new RegExp("left","gi"),"single");
                        className = className.replace(new RegExp("fl-col-flex..","gi"),"fl-col-flex");            
                        oneElement += '' ;
                    }
                    oneElement += ' >' ;
                    
                    htmlTree = oneElement + '\n' + htmlTree                
                }
            });        
            html += htmlTree;
            html +='<div id="portletContent_' + id + '">';
            //
            html += $('#portletContent_'+id).clone().html();
            html +='</div>';
            
            $('#portletContent_'+id).parents().each(function () {
                html += '</'+this.tagName+'>\n' ;
            });
            
            printWindows.document.write(html);
            printWindows.document.close();
            printWindows.focus();
            printWindows.print();
        
            return false;
        };    
    });
})(jQuery);

Ce code Javascript va :

  1. trouver toutes les div dequi ont la class : .up-portlet-controls
  2. Ajouter dans celle ci un lien avec l'id "printPortlet_chanIdXXX"
  3. Attache la fonction printPortlet à tout les liens de type printPortlet_*
  4. la fonction printPortlet va ouvrir une nouvelle fenêtre
    1. si le canal est un iframe il ouvre carrément une fenêtr eavec l'url de l'iframe et imprime
    2. si c'est un canal on recupére le contenu et imprime

Antérieur à uPortal 3.2

Ajouter un lien dans les controls

Fichier : custom/uportal-war/src/main/resources/layout/theme/universality/content.xsl

Template xsl : <xsl:template name="controls">

<xsl:if test="$USE_AJAX='true' and $AUTHENTICATED='true'">
  <a href="javascript:void(0);" onclick="PrintPage('{@ID}')" title="{$TOKEN[@name='PORTLET_PRINT_LONG_LABEL']}" class="portlet-control print">
    <span><xsl:value-of select="$TOKEN[@name='PORTLET_PRINT_LABEL']"/></span>
  </a>
</xsl:if>

Ajout de la fonction Javascript

Fichier : custom/uportal-war/src/main/resources/layout/theme/universality/universality.xsl

Template xsl : <xsl:template name="page.js">      

<script type="text/javascript">
<![CDATA[
  function PrintPage(id) {
	var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
	sOption+="scrollbars=yes,width=750,height=600,left=100,top=25,resizable=yes";

	var winprint=window.open("","",sOption);
	winprint.document.open();
	winprint.document.write("<HTML>\n");
	winprint.document.write("<HEAD>\n");
	// noeud contenant le canal
	var content = document.getElementById("portletContent_"+id);
	// write stylesheets
	for(var i=0;i<document.styleSheets.length-1;i++) {
		var css = document.styleSheets[i].href;
		winprint.document.write('<LINK href=\"'+css+'\" rel=\"stylesheet\" type=\"text\/css\"\/>'+"\n");
	}
	winprint.document.write("<\/HEAD>\n");

	winprint.document.write("<BODY id=\"portal\" class=\"fl-theme-nancyU\">\n");
	winprint.document.write("<DIV id=\"portalPage\" class=\"logged-in focused fl-container-flex\">\n");
	winprint.document.write("<DIV id=\"portalPageInner\" class=\"layout-1-columns\">\n");
	winprint.document.write("<DIV id=\"portalPageBody\" class=\"fl-container-flex\">\n");
	winprint.document.write("<DIV id=\"portalPageBodyInner\">\n");
	winprint.document.write("<DIV id=\"portalPageBodyLayout\" class=\"fl-col-flex\">\n");
	winprint.document.write("<DIV class=\"portal-page-column single\">\n");
	winprint.document.write("<DIV class=\"portal-page-column-inner\">\n");

	// write content
	if (content) {
		winprint.document.write('<DIV');
		if(content.id != '')
			winprint.document.write(' id="'+content.id+'"');
		if(content.className != '')
			winprint.document.write(' class="'+content.className+'"');
		winprint.document.write(">\n");
		winprint.document.write(content.innerHTML);
		winprint.document.write("</DIV>\n");
	}
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("</DIV>\n");
	winprint.document.write("<\/BODY>\n<\/HTML>\n");
	winprint.document.close();
	winprint.focus();
	winprint.print();
}
]]>
</script>
  • Aucune étiquette

Commentaire

  1. J'avais quelques difficulté a ajouter le javascript, voilà qui est résolu merci pour ce tutoriel qui m'a été très utile pour mon site