lizmap-javascript-scripts icon indicating copy to clipboard operation
lizmap-javascript-scripts copied to clipboard

Addpdf.js modification

Open aeduard opened this issue 5 years ago • 0 comments

I was working with addpdf.js, and made some minor modifications:

  1. 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;
  2. The button for fullscreen view has been changed;
  3. 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'
          });
        }
      }
});

aeduard avatar Dec 02 '20 21:12 aeduard