Merge pull request #2289 from WikiWatershed/arr/select-boundary-guard

Disable Select Boundary If Below Min Zoom + Lower Boundary Min Zoom
WikiWatershed · Sep 26, 2017 · 41ef26b · 41ef26b
2 parents 4f50039 + 2295772
commit 41ef26b
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 18 deletions.
diff --git a/deployment/ansible/group_vars/all b/deployment/ansible/group_vars/all
@@ -33,6 +33,8 @@ nodejs_npm_version: 2.1.17
 apache_version: "2.4.7-*"
 
 java_version: "7u151-*"
+java_major_version: "7"
+java_flavor: "openjdk"
 
 graphite_carbon_version: "0.9.13-pre1"
 graphite_whisper_version: "0.9.13-pre1"

diff --git a/deployment/ansible/roles/model-my-watershed.rwd/defaults/main.yml b/deployment/ansible/roles/model-my-watershed.rwd/defaults/main.yml
@@ -2,7 +2,7 @@
 rwd_data_path: "/opt/rwd-data"
 rwd_host: "localhost"
 rwd_port: 5000
-rwd_docker_image: "quay.io/wikiwatershed/rwd:1.2.1"
+rwd_docker_image: "quay.io/wikiwatershed/rwd:1.2.2"
 
 app_config:
     RWD_HOST: "{{ rwd_host }}"

diff --git a/src/mmw/js/src/draw/templates/drawTool.html b/src/mmw/js/src/draw/templates/drawTool.html
@@ -13,18 +13,24 @@
         <ul class="dropdown-menu draw-pane-list">
             {% for item in toolData.items %}
                 <li class="draw-pane-list-item" role="presentation">
+                    <button class="draw-pane-list-item-button" role="button" tabindex="-1"
+                          data-min-zoom="{{ item.minZoom }}"
+                          href="#" id="{{ item.id }}"
+                          {%- if currentZoomLevel < item.minZoom %}
+                          disabled
+                          {% endif -%}>
+                        {{ item.title }}
+                        {% if currentZoomLevel < item.minZoom %}
+                        &mdash; Zoom in to use
+                        {% endif %}
+                    </button>
                     <a class="help pull-right" data-toggle="popover" tabindex="0" data-html="true"
                         data-container="body" role="button" data-content="{{ item.info | safe }}"
                         data-template="<div class='popover'><div class='pull-right'
                             id='popover-close-button'><i class='fa fa-times' /></div><div
                             class='popover-content'></div><div class='arrow'></div></div>">
                         <i class="fa fa-question-circle"></i>
                     </a>
-                    <span class="draw-pane-list-item-button" role="button" tabindex="-1"
-                        data-min-zoom="{{ item.minZoom }}"
-                        href="#" id="{{ item.id }}" {{ 'disabled' if currentZoomLevel < item.minZoom }}>
-                        {{ item.title }}
-                    </span>
                 </li>
                 {% if not loop.last %}
                     <li role="separator" class="divider"></li>

diff --git a/src/mmw/js/src/draw/views.js b/src/mmw/js/src/draw/views.js
@@ -515,21 +515,20 @@ var DrawToolBaseView = Marionette.ItemView.extend({
                 self.model.closeDrawTool();
             }
         });
+
+        this.listenTo(App.getLeafletMap(), 'zoomend', _.bind(this.onMapZoom, this));
     },
 
     templateHelpers: function() {
         var activeDrawTool = this.model.get('activeDrawTool'),
-            activeDrawToolItem = this.model.get('activeDrawToolItem'),
             currentZoomLevel = App.getLeafletMap().getZoom(),
             openDrawTool = this.model.get('openDrawTool'),
             activeTitle = null,
             activeDirections = null,
             toolData = this.getToolData();
 
         if (activeDrawTool === toolData.id) {
-            var activeItem = _.find(toolData.items, function(item) {
-                return item.id === activeDrawToolItem;
-            });
+            var activeItem = this.getActiveToolDataItem();
             activeTitle = activeItem.title;
             activeDirections = activeItem.directions;
         }
@@ -551,6 +550,21 @@ var DrawToolBaseView = Marionette.ItemView.extend({
         this.activatePopovers();
     },
 
+    onMapZoom: function() {
+        var activeItem = this.getActiveToolDataItem();
+        if (activeItem && App.getLeafletMap().getZoom() < activeItem.minZoom) {
+            this.resetDrawingState();
+        }
+        this.render();
+    },
+
+    getActiveToolDataItem: function() {
+        var activeDrawToolItem = this.model.get('activeDrawToolItem');
+        return _.find(this.getToolData().items, function(item) {
+            return item.id === activeDrawToolItem;
+        });
+    },
+
     openDrawTool: function() {
         this.model.openDrawTool(this.id);
     },

diff --git a/src/mmw/mmw/settings/layer_settings.py b/src/mmw/mmw/settings/layer_settings.py
@@ -237,7 +237,7 @@
                         'target=\'_blank\' rel=\'noreferrer noopener\'>Model '
                         'My Watershed Technical Documentation on Boundaries.'
                         '</a>',
-            'minZoom': 7,
+            'minZoom': 6,
             'selectable': True,
             'searchable': True,
             'search_rank': 30,
@@ -274,7 +274,7 @@
                         'target=\'_blank\' rel=\'noreferrer noopener\'>Model '
                         'My Watershed Technical Documentation on Boundaries.'
                         '</a>',
-            'minZoom': 9,
+            'minZoom': 8,
             'selectable': True,
             'searchable': True,
             'search_rank': 10,
@@ -291,7 +291,7 @@
                         'target=\'_blank\' rel=\'noreferrer noopener\'>Model '
                         'My Watershed Technical Documentation on Boundaries.'
                         '</a>',
-            'minZoom': 9,
+            'minZoom': 6,
             'selectable': True,
         },
         {
@@ -307,7 +307,7 @@
                         'target=\'_blank\' rel=\'noreferrer noopener\'>Model '
                         'My Watershed Technical Documentation on Boundaries.'
                         '</a>',
-            'minZoom': 6,
+            'minZoom': 5,
             'selectable': True,
         },
         {
@@ -322,15 +322,15 @@
                         'target=\'_blank\' rel=\'noreferrer noopener\'>Model '
                         'My Watershed Technical Documentation on Boundaries.'
                         '</a>',
-            'minZoom': 9,
+            'minZoom': 8,
             'selectable': True,
         },
         {
             'code': 'municipalities',
             'table_name': 'dep_municipalities',
             'display': 'PA Municipalities',
             'short_display': 'PA Municipalities',
-            'minZoom': 7,
+            'minZoom': 6,
             'perimeter': pa_perimeter,
         },
     ],

diff --git a/src/mmw/sass/pages/_draw.scss b/src/mmw/sass/pages/_draw.scss
@@ -127,12 +127,16 @@
     width: 100%;
 
     & .draw-pane-list-item {
-      list-style-type: none;
-      font-size: $font-size-h4;
+        list-style-type: none;
+        font-size: $font-size-h4;
+        display: flex;
 
       & .draw-pane-list-item-button {
         background: transparent;
         display: block;
+        width: 100%;
+        text-align: left;
+        border: none;
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
         padding-left: 0.8rem;
@@ -154,6 +158,8 @@
       & a.help {
         color: #999;
         padding: 0.5rem 1rem;
+        margin-right: 0;
+        margin-left: auto;
 
         &:hover {
           color: inherit;