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 :
- trouver toutes les div dequi ont la class : .up-portlet-controls
- Ajouter dans celle ci un lien avec l'id "printPortlet_chanIdXXX"
- Attache la fonction printPortlet à tout les liens de type printPortlet_*
- la fonction printPortlet va ouvrir une nouvelle fenêtre
- si le canal est un iframe il ouvre carrément une fenêtr eavec l'url de l'iframe et imprime
- 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>
Commentaire
Alexandre Moussion dit :
sept. 26, 2013J'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.