Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addpdf.js modification #31

Open
aeduard opened this issue Dec 2, 2020 · 0 comments
Open

Addpdf.js modification #31

aeduard opened this issue Dec 2, 2020 · 0 comments

Comments

@aeduard
Copy link

aeduard commented Dec 2, 2020

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 Adding your own JavaScript lizmap-web-client#712 (comment);
  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'
          });
        }
      }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant