DDF-2644 Refactor layer preferences to remove map, checkboxes, and apply

- Removed apply and updated saving to be automatic. As such, the map is no longer necessary (you can watch the main map update in real time). - Removed checkboxes in favor of clicking on the layer name. - Added opacity indication of whether or not a layer is shown. - Upgraded to latest cesium in order to pull in CesiumGS/cesium#4258, which had been causing issues with hiding and showing of layers too quickly (cesium would crash).
codice · Jan 5, 2017 · 90e7422 · 90e7422
1 parent 9e83657
commit 90e7422
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 136 deletions.
diff --git a/catalog-ui-search/package.json b/catalog-ui-search/package.json
@@ -77,7 +77,7 @@
     "backbone.modelbinder": "1.1.0",
     "backbone.paginator": "2.0.5",
     "bootstrap": "3.2.0",
-    "cesium": "1.24.0",
+    "cesium": "1.26.0",
     "density-clustering": "1.3.0",
     "dropzone": "^4.3.0",
     "geo-convex-hull": "1.2.0",

diff --git a/catalog-ui-search/src/main/webapp/component/visualization/maps/cesium/map.cesium.js b/catalog-ui-search/src/main/webapp/component/visualization/maps/cesium/map.cesium.js
@@ -39,8 +39,6 @@ Cesium.BingMapsApi.defaultKey = properties.bingKey || 0;
 var imageryProviderTypes = LayerCollectionController.imageryProviderTypes;
 var CesiumLayerCollectionController = LayerCollectionController.extend({
     initialize: function() {
-        this.listenTo(wreqr.vent, 'preferencesModal:reorder:bigMap', this.reIndexLayers);
-
         // there is no automatic chaining of initialize.
         LayerCollectionController.prototype.initialize.apply(this, arguments);
     }
@@ -67,7 +65,8 @@ function createMap(insertionElement) {
             infoBox: false,
             //skyBox: false,
             //skyAtmosphere: false,
-            baseLayerPicker: false // Hide the base layer picker
+            baseLayerPicker: false, // Hide the base layer picker,
+            mapMode2D: 0
         }
     });
 

diff --git a/catalog-ui-search/src/main/webapp/component/visualization/maps/openlayers/map.openlayers.js b/catalog-ui-search/src/main/webapp/component/visualization/maps/openlayers/map.openlayers.js
@@ -36,8 +36,6 @@ var defaultColor = '#3c6dd5';
 
 var OpenLayerCollectionController = LayerCollectionController.extend({
     initialize: function() {
-        this.listenTo(wreqr.vent, 'preferencesModal:reorder:bigMap', this.reIndexLayers);
-
         // there is no automatic chaining of initialize.
         LayerCollectionController.prototype.initialize.apply(this, arguments);
     }

diff --git a/catalog-ui-search/src/main/webapp/css/searchPage.css b/catalog-ui-search/src/main/webapp/css/searchPage.css
@@ -1407,17 +1407,6 @@ a.pause:hover, a.pause:focus {
     transform: scale(2, 1.3);
 }
 
-.layerPickers .table > thead > tr > td,
-.layerPickers .table > tbody > tr > td,
-.layerPickers .table > tfoot > tr > td {
-    padding: 2px;
-    vertical-align: middle;
-    max-width: 6.25rem;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .layerPickers tbody {
     /*
      overflow:auto and white-space:nowrap make the tbody "scrollable",

diff --git a/catalog-ui-search/src/main/webapp/js/view/preferences/PreferencesModal.view.js b/catalog-ui-search/src/main/webapp/js/view/preferences/PreferencesModal.view.js
@@ -12,7 +12,7 @@
  * <http://www.gnu.org/licenses/lgpl.html>.
  *
  **/
-/* global define,require*/
+/* global define*/
 define([
     'application',
     'underscore',
@@ -27,14 +27,10 @@ define([
     'templates/preferences/layer.list.handlebars',
     'templates/preferences/layerPicker.handlebars',
     'templates/preferences/preference.buttons.handlebars',
-    'component/singletons/user-instance',
-    'wreqr',
-    // load dependencies
-    'spectrum',
-    'jquerySortable'
+    'component/singletons/user-instance'
 ], function (Application, _, Marionette, Backbone, $, properties, maptype, Modal,
              preferencesModalTemplate, layerPrefsTabTemplate, layerListTemplate,
-             layerPickerTemplate, preferenceButtonsTemplate, user, wreqr) {
+             layerPickerTemplate, preferenceButtonsTemplate, user) {
     var PrefsModalView = Marionette.LayoutView.extend({
         setDefaultModel: function(){
             this.model = user.get('user>preferences');
@@ -83,122 +79,36 @@ define([
         initialize: function () {
         },
         onRender: function () {
-            var viewLayerModels = [];
-            this.model.each(function (layerModel) {
-                var clonedLayerModel = layerModel.clone();
-                clonedLayerModel.set('modelCid', layerModel.cid);
-                viewLayerModels.push(clonedLayerModel);
-            });
-            var MapLayerConstructor = user.get('user>preferences>mapLayers').constructor;
-            this.viewMapLayers = new MapLayerConstructor(viewLayerModels);
             // listen to any change on all models in collection.
-            this.listenTo(this.viewMapLayers, 'change', this.onEdit);
-            if (maptype.is3d()) {
-                require(['cesium', 'js/controllers/cesium.layerCollection.controller'], function(Cesium, CesiumLayersController){
-                    PrefsModalView.CesiumLayersController = CesiumLayersController.extend({
-                        showMap: function () {
-                            this.makeMap({
-                                element: this.options.element.el.querySelector('#layerPickerMap'),
-                                cesiumOptions: {
-                                    sceneMode: Cesium.SceneMode.SCENE3D,
-                                    animation: false,
-                                    geocoder: false,
-                                    navigationHelpButton: false,
-                                    fullscreenButton: false,
-                                    timeline: false,
-                                    homeButton: false,
-                                    sceneModePicker: false,
-                                    baseLayerPicker: false
-                                }
-                            });
-                        }
-                    });
-                    this.widgetController = new PrefsModalView.CesiumLayersController({
-                        collection: this.viewMapLayers,
-                        element: this
-                    });
-
-                    // HACK fix it
-                    this.layerPickers = new PrefsModalView.LayerPickerTable({
-                        childView: PrefsModalView.LayerPicker,
-                        collection: this.viewMapLayers,
-                        childViewOptions: { widgetController: this.widgetController }
-                    });
-                    this.layerButtons = new PrefsModalView.Buttons({ tabView: this });
-                    this.showLayerPickersAndLayerButtons();
-                }.bind(this));
-            } else if (maptype.is2d()) {
-                require(['js/controllers/ol.layerCollection.controller'], function(OpenLayersController){
-                    PrefsModalView.OpenLayersController = OpenLayersController.extend({
-                        showMap: function () {
-                            this.makeMap({
-                                element: this.options.element.el.querySelector('#layerPickerMap'),
-                                zoom: 2,
-                                controls: []
-                            });
-                        }
-                    });
-                    this.widgetController = new PrefsModalView.OpenLayersController({
-                        collection: this.viewMapLayers,
-                        element: this
-                    });
-
-                    // HACK fix it
-                    this.layerPickers = new PrefsModalView.LayerPickerTable({
-                        childView: PrefsModalView.LayerPicker,
-                        collection: this.viewMapLayers,
-                        childViewOptions: { widgetController: this.widgetController }
-                    });
-                    this.layerButtons = new PrefsModalView.Buttons({ tabView: this });
-                    this.showLayerPickersAndLayerButtons();
-                }.bind(this));
-            }
+            this.listenTo(this.model, 'change', this.save);
+            // HACK fix it
+            this.layerPickers = new PrefsModalView.LayerPickerTable({
+                childView: PrefsModalView.LayerPicker,
+                collection: this.model
+            });
+            this.layerButtons = new PrefsModalView.Buttons({ tabView: this });
+            this.showLayerPickersAndLayerButtons();
         },
         showLayerPickersAndLayerButtons: function(){
             this.layerPickersRegion.show(this.layerPickers);
             this.layerButtonsRegion.show(this.layerButtons);
-            this.widgetController.showMap('layerPickerMap');
-        },
-        onDestroy: function () {
-            this.viewMapLayers = null;
-            this.widgetController.destroy();
-        },
-        onEdit: function () {
-            if (!this.isEdited) {
-                this.layerButtons.ui.save.toggleClass('btn-default').toggleClass('btn-primary');
-                this.isEdited = true;
-            }
         },
         save: function () {
-            if (this.isEdited) {
-                var mapLayers = this.model;
-                this.viewMapLayers.each(function (viewLayer) {
-                    var layer = mapLayers.get(viewLayer.get('modelCid'));
-                    if (viewLayer.get('alpha') !== layer.get('alpha')) {
-                        layer.set('alpha', viewLayer.get('alpha'));
-                    }
-                    if (viewLayer.get('show') !== layer.get('show')) {
-                        layer.set('show', viewLayer.get('show'));
-                    }
-                });
-                this.model.sort();
-                this.model.savePreferences();
-                this.isEdited = false;
-                this.layerButtons.ui.save.toggleClass('btn-default').toggleClass('btn-primary');
-                wreqr.vent.trigger('preferencesModal:reorder:bigMap');
-            }
+            this.model.sort();
+            this.model.savePreferences();
+            this.layerButtons.ui.save.toggleClass('btn-default').toggleClass('btn-primary');
         },
         resetDefaults: function () {
-            this.onEdit();
-            this.viewMapLayers.each(function (viewLayer) {
+            this.model.each(function (viewLayer) {
                 var url = viewLayer.get('url');
                 var defaultConfig = _.find(properties.imageryProviders, function (layerObj) {
                     return url === layerObj.url;
                 });
                 viewLayer.set('show', true);
                 viewLayer.set('alpha', defaultConfig.alpha);
             });
-            this.viewMapLayers.sort();
+            this.model.sort();
+            this.save();
         }
     });
     /*
@@ -240,19 +150,19 @@ define([
         className: 'layerPicker-row',
         ui: { range: 'input[type="range"]' },
         events: { 'sort': 'render' },
-        initialize: function (options) {
+        initialize: function () {
             this.modelBinder = new Backbone.ModelBinder();
-            this.widgetController = options.widgetController;
             this.$el.data('layerPicker', this);    // make model available to sortable.update()
             this.listenTo(this.model, 'change:show', this.changeShow);
         },
         onRender: function () {
             var layerBindings = Backbone.ModelBinder.createDefaultBindings(this.el, 'name');
             this.modelBinder.bind(this.model, this.$el, layerBindings);
-            this.ui.range.prop('disabled', !this.model.get('show'));
+            this.changeShow();           
         },
-        changeShow: function (model) {
-            this.ui.range.prop('disabled', !model.get('show'));
+        changeShow: function () {
+            this.$el.toggleClass('is-disabled', !this.model.get('show'));
+            this.ui.range.prop('disabled', !this.model.get('show'));
         },
         onDestroy: function () {
             this.modelBinder.unbind();

diff --git a/catalog-ui-search/src/main/webapp/less/components/init.less b/catalog-ui-search/src/main/webapp/less/components/init.less
@@ -7,6 +7,7 @@
 @import "gradient";
 @import "headers";
 @import "labels";
+@import "layers";
 @import "focus";
 @import "list";
 @import "loading";

diff --git a/catalog-ui-search/src/main/webapp/less/components/layers.less b/catalog-ui-search/src/main/webapp/less/components/layers.less
@@ -0,0 +1,21 @@
+.layerPickers .table > thead > tr > td,
+.layerPickers .table > tbody > tr > td,
+.layerPickers .table > tfoot > tr > td {
+    padding: 2px;
+    vertical-align: middle;
+    max-width: 6.25rem;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    label {
+        cursor: pointer;
+    }
+    input[type="checkbox"] {
+        display: none;
+    }
+}
+
+.layerPickers .table > tbody > tr.is-disabled {
+    opacity: .6;
+}
diff --git a/catalog-ui-search/src/main/webapp/templates/preferences/layer.list.handlebars b/catalog-ui-search/src/main/webapp/templates/preferences/layer.list.handlebars
@@ -14,7 +14,6 @@
 <table class="table scrollable">
     <thead>
     <tr id="header">
-        <th>Visible</th>
         <th>Name</th>
         <th>Transparency</th>
     </tr>

diff --git a/catalog-ui-search/src/main/webapp/templates/preferences/layer.preferences.tab.handlebars b/catalog-ui-search/src/main/webapp/templates/preferences/layer.preferences.tab.handlebars
@@ -11,6 +11,5 @@
 *
 **/
 --}}
-<div id="layerPickerMap" class="miniMap"></div>
 <div id="layerPickers" class="layerPickers"></div>
 <div id="layerButtons"></div>
diff --git a/catalog-ui-search/src/main/webapp/templates/preferences/layerPicker.handlebars b/catalog-ui-search/src/main/webapp/templates/preferences/layerPicker.handlebars
@@ -12,10 +12,10 @@
 **/
 --}}
 <td>
-    <input name="show" type="checkbox"/>
-</td>
-<td class="sortHandle">
-    <span name="label"/>
+    <label>
+        <input name="show" type="checkbox"/>
+        <span name="label"/>
+    </label>
 </td>
 <td>
     <input name="alpha" min="0" max="1" step="0.01" type="range"/>

diff --git a/catalog-ui-search/src/main/webapp/templates/preferences/preference.buttons.handlebars b/catalog-ui-search/src/main/webapp/templates/preferences/preference.buttons.handlebars
@@ -11,6 +11,5 @@
 *
 **/
 --}}
-<button type="button" class="btn btn-ok btn-default save" aria-hidden="true">Apply</button>
 <button type="button" class="btn btn-default reset-defaults" aria-hidden="true">Reset Defaults
 </button>