lizmap-javascript-scripts
lizmap-javascript-scripts copied to clipboard
Addpdf.js modification
I was working with addpdf.js, and made some minor modifications:
- I've implemented a somewhat more dynamic link to the pdf file, according to https://github.com/3liz/lizmap-web-client/issues/712#issuecomment-345521037;
- The button for fullscreen view has been changed;
- Fullscreen and refresh button position has been fixed (they were overlapping with the Close button of the right-dock).
As for usage: you should create a subfolder in your project's media folder, and the pdf file should be copied directly there. Then the path to the pdf should be set at line 5 below in the addpdf.js file. After that the javascript file should be copied to the server as in the official documentation.
lizMap.events.on({
uicreated: function(e) {
var mediaLink = OpenLayers.Util.urlAppend(lizUrls.media,OpenLayers.Util.getParameterString(lizUrls.params)
);
var frameSrc = mediaLink +'&path=/media/yourfolder/yourfile.pdf';
lizMap.addDock(
'pdf',
'Documentation',
'right-dock',
'<iframe src="' + frameSrc + '" style="height:calc(100vh - 100px); height: -o-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -moz-calc(100vh - 100px);" width="100%" scrolling="no" frameborder="0"></iframe',
'icon-file'
);
//-------------------------------------------
//On ajoute le bouton1
var html = '<button id="bouton1" class="btn btn-defaut"><i class="icon-fullscreen"></i></button>'
$('#right-dock').append(html);
$('#bouton1')
.css('position', 'absolute')
.css('top', '5px')
.css('right', '140px')
.css('padding', '2px 14px')
;
//-------------------------------------------
//On ajoute le bouton2
var html = '<button id="bouton2" class="btn btn-defaut"><i class="icon-refresh"></i></button>';
$('#right-dock').append(html);
$('#bouton2')
.css('position', 'absolute')
.css('top', '5px')
.css('right', '80px')
.css('padding', '2px 14px')
;
//-------------------------------------------
//On utilise le bouton1 pour ouvrir l'aide dans un nouvel onglet
$('#bouton1').click(function () {
window.open(frameSrc);
});
//On utilise le bouton2 pour recharger le pdf
$('#bouton2').click(function () {
var iframe = $('<iframe src="' + frameSrc + '" style="height:calc(100vh - 100px); height: -o-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -moz-calc(100vh - 100px);" width="100%" scrolling="no" frameborder="0"></iframe>');
$(".menu-content").find("iframe").remove();
$("#pdf.tab-pane.active .menu-content").append(iframe);
});
},
rightdockopened: function(e) {
if ( e.id == 'pdf') {
$('#bouton1').css({
'display':'block'
});
$('#bouton2').css({
'display':'block'
});
}
else {
$('#bouton1').css({
'display':'none'
});
$('#bouton2').css({
'display':'none'
});
}
}
});