Fix bug with display in fullscreen

dbmdz · Feb 2, 2018 · 7e30647 · 7e30647
1 parent ebd959a
commit 7e30647
Showing 1 changed file with 54 additions and 33 deletions.
diff --git a/CanvasLink/canvasLink.js b/CanvasLink/canvasLink.js
@@ -23,7 +23,7 @@ var CanvasLink = {
 
   /* the template for the modal containing the canvas link */
   modalTemplate: Mirador.Handlebars.compile([
-    '<div id="canvas-link-modal" class="modal fade" tabindex="-1" role="dialog">',
+    '<div id="canvas-link-modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">',
     '<div class="modal-dialog" role="document">',
     '<div class="modal-content">',
     '<div class="modal-header">',
@@ -32,7 +32,7 @@ var CanvasLink = {
     '</div>',
     '<div class="modal-body">',
     '<p>',
-    '<input id="canvas-link" type="text">',
+    '<input id="canvas-link" type="text" value="{{canvasLink}}">',
     '<button type="button" class="btn btn-default" id="copy-to-clipboard" title="{{t "copy-to-clipboard"}}">',
     '<i class="fa fa-clipboard" aria-hidden="true"></i>',
     '</button>',
@@ -43,7 +43,8 @@ var CanvasLink = {
     '</div>',
     '</div>',
     '</div>',
-    '</div>'
+    '</div>',
+    '<div class="modal-backdrop fade in"></div>'
   ].join('')),
 
   /* adds event handlers to the modal */
@@ -54,7 +55,6 @@ var CanvasLink = {
     }.bind(this));
   },
 
-
   /* adds the locales to the internationalization module of the viewer */
   addLocalesToViewer: function(){
     var currentLocales = {};
@@ -70,12 +70,26 @@ var CanvasLink = {
     }
   },
 
+  /* extracts information like label and attribution from a window object */
+  extractInformationFromWindow: function(viewerWindow){
+    var currentImage = viewerWindow.imagesList[viewerWindow.focusModules[viewerWindow.viewType].currentImgIndex];
+    var service = currentImage.images[0].resource.service || currentImage.images[0].resource.default.service;
+    return {
+      'attribution': viewerWindow.manifest.jsonLd.attribution || false,
+      'canvasLink': viewerWindow.canvasID + (this.options.urlExtension || '/view'),
+      'label': viewerWindow.manifest.jsonLd.label,
+      'thumbnailUrl': Mirador.Iiif.getImageUrl(currentImage).concat('/full/280,/0/').concat((
+        Mirador.Iiif.getVersionFromContext(service['@context']) === '2.0' ? 'default.jpg' : 'native.jpg'
+      ))
+    }
+  },
+
   /* initializes the plugin */
   init: function(){
     i18next.on('initialized', function(){
       this.addLocalesToViewer();
     }.bind(this));
-    this.injectModalToDom();
+    this.injectViewerEventHandler();
     this.injectWorkspaceEventHandler();
     this.injectWindowEventHandler();
   },
@@ -86,7 +100,40 @@ var CanvasLink = {
   },
 
   /* injects the modal to the dom */
-  injectModalToDom: function(){
+  injectModalToViewerWindow: function(viewerWindow){
+    var windowInformation = this.extractInformationFromWindow(viewerWindow);
+    var canvasLinkModal = this.modalTemplate({
+      'canvasLink': windowInformation.canvasLink
+    });
+    viewerWindow.element[0].insertAdjacentHTML('beforeend', canvasLinkModal);
+    $('#canvas-link-modal').on('show.bs.modal', function(){
+      if(window.ShareButtons !== undefined){
+        ShareButtons.injectButtonsToDom('#canvas-link-modal .modal-footer', 'afterbegin');
+        ShareButtons.updateButtonLinks({
+          'attribution': windowInformation.attribution,
+          'label': windowInformation.label,
+          'link': windowInformation.canvasLink,
+          'thumbnailUrl': windowInformation.thumbnailUrl
+        });
+      }
+    });
+    $('#canvas-link-modal').on('shown.bs.modal', function(){
+      $('#canvas-link', this).select();
+    });
+    $('#canvas-link-modal').on('hidden.bs.modal', function(){
+      $(this).siblings('.modal-backdrop').remove();
+      $(this).remove();
+    });
+    $('#canvas-link-modal').on('click', function(e){
+      if(e.target === this){
+        $(this).modal('hide');
+      }
+    });
+    $('#canvas-link-modal').modal('show');
+  },
+
+  /* injects the needed viewer event handler */
+  injectViewerEventHandler: function(){
     var this_ = this;
     var origFunc = Mirador.Viewer.prototype.setupViewer;
     Mirador.Viewer.prototype.setupViewer = function(){
@@ -95,14 +142,8 @@ var CanvasLink = {
       if($.isPlainObject(options)){
         this_.options = options;
       }
-      var shareButtons = ['facebook', 'twitter', 'pinterest', 'tumblr', 'envelope'];
-      if('ontouchstart' in window || navigator.maxTouchPoints){
-        shareButtons.push('whatsapp');
-      }
-      document.body.insertAdjacentHTML('beforeend', this_.modalTemplate());
       if(window.ShareButtons !== undefined){
         ShareButtons.init(this_.options.showShareButtonsInfo);
-        ShareButtons.injectButtonsToDom('#canvas-link-modal .modal-footer', 'afterbegin');
       }
     };
     this.addEventHandlers();
@@ -128,27 +169,7 @@ var CanvasLink = {
     Mirador.Window.prototype.bindEvents = function(){
       origFunc.apply(this);
       this.element.find('.mirador-icon-canvas-cite-share').on('click', function(){
-        var label = this.manifest.jsonLd.label;
-        var attribution = this.manifest.jsonLd.attribution || false;
-        var canvasLink = this.canvasID + (this_.options.urlExtension || '/view');
-        var currentImage = this.imagesList[this.focusModules[this.viewType].currentImgIndex];
-        var service = currentImage.images[0].resource.service || currentImage.images[0].resource.default.service;
-        var thumbnailUrl = Mirador.Iiif.getImageUrl(currentImage).concat('/full/280,/0/').concat((
-          Mirador.Iiif.getVersionFromContext(service['@context']) === '2.0' ? 'default.jpg' : 'native.jpg'
-        ));
-        $('#canvas-link-modal #canvas-link').attr('value', canvasLink);
-        if(window.ShareButtons !== undefined){
-          ShareButtons.updateButtonLinks({
-            'attribution': attribution,
-            'label': label,
-            'link': canvasLink,
-            'thumbnailUrl': thumbnailUrl
-          });
-        }
-        $('#canvas-link-modal').modal('show');
-        $('#canvas-link-modal').on('shown.bs.modal', function(){
-          $('#canvas-link-modal #canvas-link').select();
-        });
+        this_.injectModalToViewerWindow(this);
       }.bind(this));
     };
   }