add full screen control to viewers

app/assets/javascripts/geoblacklight/controls.js

@@ -0,0 +1 @@
+//= require_tree ./controls

app/assets/javascripts/geoblacklight/controls/fullscreen.js

@@ -0,0 +1,6 @@
+// Leaflet fullscreen control.
+GeoBlacklight.Controls.Fullscreen = function(viewer) {
+  viewer.map.addControl(new L.Control.Fullscreen({
+    pseudoFullscreen: true
+  }));
+};

app/assets/javascripts/geoblacklight/controls/opacity.js

@@ -0,0 +1,4 @@
+// Leaflet opacity control.
+GeoBlacklight.Controls.Opacity = function(viewer) {
+  viewer.map.addControl(new L.Control.LayerOpacity(viewer.overlay));
+};

app/assets/javascripts/geoblacklight/geoblacklight.js

@@ -35,6 +35,7 @@
     }
   });
 
+  // Hash for leaflet controls.
+  GeoBlacklight.Controls = {};
   global.GeoBlacklight = GeoBlacklight;
-
 }(this);

app/assets/javascripts/geoblacklight/viewers.js

@@ -1 +1 @@
-//= require_tree ./viewers
+//= require_tree ./viewers

app/assets/javascripts/geoblacklight/viewers/esri.js

@@ -22,18 +22,17 @@ GeoBlacklight.Viewer.Esri = GeoBlacklight.Viewer.Map.extend({
     _this.data.url = _this.data.url.replace(/\/$/, '');
 
     L.esri.get = L.esri.Request.get.JSONP;
-    L.esri.get(_this.data.url, {}, function(error, response){
-      if(!error) {
+    L.esri.get(_this.data.url, {}, function(error, response) {
+      if (!error) {
         _this.layerInfo = response;
 
         // get layer as defined in submodules (e.g. esri/mapservice)
         var layer = _this.getPreviewLayer();
 
         // add layer to map
         if (_this.addPreviewLayer(layer)) {
-
-          // add control if layer is added
-          _this.addOpacityControl();
+          // add controls if layer is added
+          _this.loadControls();
         }
       }
     });
@@ -48,7 +47,7 @@ GeoBlacklight.Viewer.Esri = GeoBlacklight.Viewer.Map.extend({
       return true;
     }
   },
-  
+
   // clear attribute table and setup spinner icon
   appendLoadingMessage: function() {
     var spinner = '<tbody class="attribute-table-body"><tr><td colspan="2">' +
@@ -62,7 +61,7 @@ GeoBlacklight.Viewer.Esri = GeoBlacklight.Viewer.Map.extend({
 
   // appends error message to attribute table
   appendErrorMessage: function() {
-    $('.attribute-table-body').html('<tbody class="attribute-table-body">'+ 
+    $('.attribute-table-body').html('<tbody class="attribute-table-body">' +
       '<tr><td colspan="2">Could not find that feature</td></tr></tbody>');
   },
 
@@ -72,9 +71,10 @@ GeoBlacklight.Viewer.Esri = GeoBlacklight.Viewer.Map.extend({
 
     // step through properties and append to table
     for (var property in feature.properties) {
-      html.append('<tr><td>' + property + '</td>'+
+      html.append('<tr><td>' + property + '</td>' +
                   '<td>' + feature.properties[property] + '</tr>');
     }
+
     $('.attribute-table-body').replaceWith(html);
   }
 });

app/assets/javascripts/geoblacklight/viewers/esri/dynamic_map_layer.js

@@ -31,7 +31,7 @@ GeoBlacklight.Viewer.DynamicMapLayer = GeoBlacklight.Viewer.Esri.extend({
         if (_this.addPreviewLayer(layer)) {
 
           // add control if layer is added
-          _this.addOpacityControl();
+          // _this.addOpacityControl();
         }
       }
     });

app/assets/javascripts/geoblacklight/viewers/esri/feature_layer.js

@@ -28,16 +28,12 @@ GeoBlacklight.Viewer.FeatureLayer = GeoBlacklight.Viewer.Esri.extend({
     return this.esriFeatureLayer;
   },
 
-  // override opacity control because feature layer is special
-  addOpacityControl: function() {
+  controlPreload: function() {
 
     // define setOpacity function that works for svg elements
     this.esriFeatureLayer.setOpacity = function(opacity) {
       $('.leaflet-clickable').css({ opacity: opacity });
     };
-
-    // add new opacity control
-    this.map.addControl(new L.Control.LayerOpacity(this.esriFeatureLayer));
   },
 
   getFeatureStyle: function() {

app/assets/javascripts/geoblacklight/viewers/iiif.js

@@ -9,7 +9,7 @@ GeoBlacklight.Viewer.Iiif = GeoBlacklight.Viewer.extend({
       crs: L.CRS.Simple,
       zoom: 0
     });
-
+    this.loadControls();
     this.iiifLayer = L.tileLayer.iiif(this.data.url)
       .addTo(this.map);
   },

app/assets/javascripts/geoblacklight/viewers/map.js

@@ -1,7 +1,6 @@
 //= require geoblacklight/viewers/viewer
 
 GeoBlacklight.Viewer.Map = GeoBlacklight.Viewer.extend({
-
   options: {
     /**
     * Initial bounds of map
@@ -10,13 +9,14 @@ GeoBlacklight.Viewer.Map = GeoBlacklight.Viewer.extend({
     bbox: [[-80, -195], [80, 185]],
     opacity: 0.75
   },
-  
+
   overlay: L.layerGroup(),
 
   load: function() {
     if (this.data.mapBbox) {
       this.options.bbox = L.bboxToBounds(this.data.mapBbox);
     }
+
     this.map = L.map(this.element).fitBounds(this.options.bbox);
     this.map.addLayer(this.selectBasemap());
     this.map.addLayer(this.overlay);
@@ -47,13 +47,6 @@ GeoBlacklight.Viewer.Map = GeoBlacklight.Viewer.extend({
     this.overlay.clearLayers();
   },
 
-  /**
-   * Add an opacity control to map.
-   */
-  addOpacityControl: function() {
-    this.map.addControl(new L.Control.LayerOpacity(this.overlay));
-  },
-
   /**
   * Selects basemap if specified in data options, if not return mapquest
   */

app/assets/javascripts/geoblacklight/viewers/viewer.js

@@ -8,7 +8,39 @@ GeoBlacklight.Viewer = L.Class.extend({
 
     L.Util.setOptions(this, options);
 
-    // trigger viewer load function
+    // trigger viewer load functions
     this.load();
+  },
+
+  /**
+  * Loads leaflet controls from controls directory.
+  **/
+  loadControls: function() {
+    var _this = this;
+    var protocol = this.data.protocol.toUpperCase();
+    var options = this.data.leafletOptions;
+    var viewer = options.VIEWERS[protocol];
+    var controls = viewer && viewer.CONTROLS;
+
+    this.controlPreload();
+
+    /**
+    * Loop though the GeoBlacklight.Controls hash, and for each control,
+    * check to see if it is included in the controls list for the current
+    * viewer. If it is, then pass in the viewer object and run the function
+    * that adds it to the map.
+    **/
+    $.each(GeoBlacklight.Controls, function(name, func) {
+      if (controls.indexOf(name) > -1) {
+        func(_this);
+      }
+    });
+  },
+
+  /**
+  * Work to do before the controls are loaded.
+  **/
+  controlPreload: function() {
+    return;
   }
 });

app/assets/javascripts/geoblacklight/viewers/wms.js

@@ -7,10 +7,9 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Map.extend({
     this.map = L.map(this.element).fitBounds(this.options.bbox);
     this.map.addLayer(this.selectBasemap());
     this.map.addLayer(this.overlay);
-
     if (this.data.available) {
       this.addPreviewLayer();
-      this.addOpacityControl();
+      this.loadControls();
     } else {
       this.addBoundsOverlay(this.options.bbox);
     }
@@ -55,15 +54,18 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Map.extend({
             $('.attribute-table-body').html('<tbody class="attribute-table-body"><tr><td colspan="2">Could not find that feature</td></tr></tbody>');
             return;
           }
+
           var html = $('<tbody class="attribute-table-body"></tbody>');
           $.each(data.values, function(i, val) {
             html.append('<tr><td>' + val[0] + '</td><td>' + val[1] + '</tr>');
           });
+
           $('.attribute-table-body').replaceWith(html);
         },
+
         fail: function(error) {
           console.log(error);
-        }
+        },
       });
     });
   }

app/helpers/geoblacklight_helper.rb

@@ -137,4 +137,11 @@ def render_web_services(reference)
   rescue ActionView::MissingTemplate
     render partial: 'web_services_default', locals: { reference: reference }
   end
+
+  ##
+  # Returns a hash of the leaflet plugin settings to pass to the viewer.
+  # @return[Hash]
+  def leaflet_options
+    Settings.LEAFLET
+  end
 end

app/views/catalog/_show_default_viewer_container.html.erb

@@ -1,5 +1,5 @@
 <% document ||= @document %>
 <div id='viewer-container' class="col-md-8">
-  <%= content_tag :div, id: 'map', data: { map: 'item', protocol: document.viewer_protocol.camelize, url: document.viewer_endpoint, 'layer-id' => wxs_identifier(document), 'map-bbox' => document.bounding_box_as_wsen, 'catalog-path'=> catalog_index_path, available: document_available?, inspect: show_attribute_table?, basemap: geoblacklight_basemap } do %>
+  <%= content_tag :div, id: 'map', data: { map: 'item', protocol: document.viewer_protocol.camelize, url: document.viewer_endpoint, 'layer-id' => wxs_identifier(document), 'map-bbox' => document.bounding_box_as_wsen, 'catalog-path'=> catalog_index_path, available: document_available?, inspect: show_attribute_table?, basemap: geoblacklight_basemap, leaflet_options: leaflet_options } do %>
   <% end %>
-</div>
+</div>

lib/generators/geoblacklight/templates/geoblacklight.css.scss

@@ -1,3 +1,4 @@
 /*
 *= require geoblacklight/application
+*= require leaflet.fullscreen
 */

lib/generators/geoblacklight/templates/geoblacklight.js

@@ -1,8 +1,10 @@
 //= require geoblacklight/geoblacklight
 //= require geoblacklight/basemaps
+//= require geoblacklight/controls
 //= require geoblacklight/viewers
 //= require geoblacklight/modules
 //= require geoblacklight/downloaders
 //= require leaflet-iiif
 //= require esri-leaflet
 //= require readmore.min
+//= require Leaflet.fullscreen

lib/generators/geoblacklight/templates/settings.yml

@@ -43,4 +43,28 @@ WMS_PARAMS:
   :STYLES: ''
   :SRS: 'EPSG:4326'
   :EXCEPTIONS: 'application/json'
-  :INFO_FORMAT: 'text/html'
+  :INFO_FORMAT: 'text/html'
+
+# Settings for leaflet 
+LEAFLET:
+  MAP:
+  LAYERS:
+  VIEWERS:
+    IIIF:
+      CONTROLS:
+        - 'Fullscreen'
+    WMS:
+      CONTROLS:
+        - 'Opacity'
+    TILEDMAPLAYER:
+      CONTROLS:
+        - 'Opacity'
+    FEATURELAYER:
+      CONTROLS:
+        - 'Opacity'
+    DYNAMICMAPLAYER:
+      CONTROLS:
+        - 'Opacity'
+    IMAGEMAPLAYER:
+      CONTROLS:
+        - 'Opacity'

spec/features/esri_viewer_spec.rb

@@ -21,6 +21,7 @@
     visit catalog_path 'minnesota-772ebcaf2ec0405ea1b156b5937593e7_0'
     expect(page).to have_css '.leaflet-control-zoom', visible: true
     expect(Nokogiri::HTML.parse(page.body).css('g').length).to eq 23
+    fail
   end
   scenario 'displays image map layer' do
     visit catalog_path 'minnesota-test-oregon-naip-2011'

spec/features/full_screen_control_spec.rb

@@ -0,0 +1,16 @@
+require 'spec_helper'
+
+feature 'Full screen control', js: true do
+  scenario 'IIIF layer should have full screen control' do
+    visit catalog_path('princeton-02870w62c')
+    expect(page).to have_css('.leaflet-control-fullscreen-button')
+  end
+  scenario 'WMS layer should not have full screen control' do
+    visit catalog_path('mit-us-ma-e25zcta5dct-2000')
+    expect(page).not_to have_css('.leaflet-control-fullscreen-button')
+  end
+  scenario 'ESRI image service layer should not have full screen control' do
+    visit catalog_path('minnesota-test-oregon-naip-2011')
+    expect(page).not_to have_css('.leaflet-control-fullscreen-button')
+  end
+end

spec/features/iiif_viewer_spec.rb

@@ -4,5 +4,6 @@
   scenario 'displays leaflet viewer', js: true do
     visit catalog_path('princeton-02870w62c')
     expect(page).to have_css '.leaflet-control-zoom', visible: true
+    expect(page).to have_css '.leaflet-control-fullscreen-button', visible: true
   end
 end

spec/features/layer_opacity_spec.rb

@@ -12,4 +12,9 @@
     expect(page).to have_css('div.opacity-text', text: '75%')
     expect(page.find('img.leaflet-image-layer', match: :first)[:style]).to match(/opacity: 0.75;/)
   end
+
+  scenario 'IIIF layer should not have opacity control' do
+    visit catalog_path('princeton-02870w62c')
+    expect(page).not_to have_css('div.opacity-text', text: '75%')
+  end
 end

spec/features/layer_preview_spec.rb

@@ -12,5 +12,6 @@
     within '.leaflet-tile-pane' do
       expect(page).to have_css('.leaflet-layer', count: 2)
     end
+    expect(page).not_to have_css '.leaflet-control-fullscreen-button'
   end
 end

spec/helpers/geoblacklight_helpers_spec.rb

@@ -87,4 +87,10 @@
       helper.render_web_services(reference)
     end
   end
+
+  describe '#leaflet_options' do
+    it 'returns a hash of options for leaflet' do
+      expect(leaflet_options[:VIEWERS][:IIIF][:CONTROLS]).to eq(['Fullscreen'])
+    end
+  end
 end