[3D] 3d tilt

src/components/backgroundselector/BackgroundSelectorDirective.js

@@ -19,7 +19,8 @@ goog.require('ga_topic_service');
         templateUrl:
             'components/backgroundselector/partials/backgroundselector.html',
         scope: {
-          map: '=gaBackgroundSelectorMap'
+          map: '=gaBackgroundSelectorMap',
+          ol3d: '=gaBackgroundSelectorOl3d'
         },
         link: function(scope, elt, attrs) {
           scope.isBackgroundSelectorClosed = true;
@@ -45,7 +46,10 @@ goog.require('ga_topic_service');
             } else {
               scope.isBackgroundSelectorClosed = true;
               if (scope.currentLayer != bgLayer) {
-                scope.currentLayer = bgLayer;
+                var ol3dEnabled = scope.ol3d && scope.ol3d.getEnabled();
+                if (!(bgLayer.disable3d && ol3dEnabled)) {
+                  scope.currentLayer = bgLayer;
+                }
               }
             }
           };
@@ -63,7 +67,8 @@ goog.require('ga_topic_service');
               return (selected ? 'ga-bg-highlight ' : '') +
                 'ga-' + splitLayer[splitLayer.length - 1] +
                 ' ' + ((!scope.isBackgroundSelectorClosed) ?
-                'ga-bg-layer-' + index : '');
+                'ga-bg-layer-' + index : '') +
+                ' ' + (layer.disable3d ? 'ga-disable3d' : '');
             }
           };
 

src/components/backgroundselector/BackgroundService.js

@@ -14,26 +14,16 @@ goog.require('ga_permalink');
    * Backgrounds manager
    */
   module.provider('gaBackground', function() {
-    this.$get = function($rootScope, $q, gaTopic, gaLayers, gaPermalink,
-        gaGlobalOptions, gaBrowserSniffer) {
+    this.$get = function($rootScope, $q, gaTopic, gaLayers, gaPermalink) {
       var isOfflineToOnline = false;
       var bg; // The current background
       var bgs = [ // The list of backgrounds available
-        {id: 'ch.swisstopo.swissimage', label: 'bg_luftbild'},
+        {id: 'ch.swisstopo.swissimage', label: 'bg_luftbild', disable3d: true},
         {id: 'ch.swisstopo.pixelkarte-farbe', label: 'bg_pixel_color'},
         {id: 'ch.swisstopo.pixelkarte-grau', label: 'bg_pixel_grey'},
         {id: 'voidLayer', label: 'void_layer'}
       ];
 
-      // to be moved in defaultBgOrder once 3d is live
-      if (gaGlobalOptions.dev3d && gaBrowserSniffer.webgl) {
-        bgs.splice(3, 0, {
-          id: 'ch.swisstopo.swisstlm3d-karte-farbe',
-          label: 'terrain_layer',
-          is3d: true
-        });
-      }
-
       var getBgById = function(id) {
         for (var i = 0, ii = bgs.length; i < ii; i++) {
           if (bgs[i].id == id) {

src/components/backgroundselector/style/backgroundselector.less

@@ -105,11 +105,6 @@
     background-size: 38px 38px;
   }
 
-  .ga-3d {
-    background-image: data-uri('terrain.png');
-    background-size: 38px 38px;
-  }
-
   .ga-bg-layer-0 {
     bottom: 101px;
     @media (max-width: @screen-tablet) {
@@ -220,10 +215,6 @@
     background-image: data-uri('voidLayer-rect.png');
   }
 
-  .ga-3d {
-    background-image: data-uri('terrain-rect.png');
-  }
-
   .ga-bg-layer-0 {
     right: 35px;
   }
@@ -248,12 +239,12 @@
       right: 194px;
     }
   }
+}
 
-  .ga-bg-layer-4 {
-    right: 439px;
-    @media (max-width: @screen-tablet) {
-      right: 247px;
-    }
+.ga-3d-active {
+  .ga-disable3d {
+    cursor: default;
+    background-color: gray;
+    color: gray;
   }
-
 }

src/components/tilt3d/Tilt3dDirective.js

@@ -0,0 +1,35 @@
+goog.provide('ga_tilt3d_directive');
+
+(function() {
+
+  var module = angular.module('ga_tilt3d_directive', []);
+
+  module.directive('gaTilt3d', function(gaBrowserSniffer) {
+    return {
+      restrict: 'A',
+      templateUrl: 'components/tilt3d/partials/tilt3d.html',
+      link: function(scope, element, attrs) {
+
+        scope.supported = gaBrowserSniffer.webgl;
+
+        // true is the selected background layer is not 3d compatible.
+        scope.disabled = false;
+        scope.$on('gaBgChange', function(evt, value) {
+          scope.disabled = !!value.disable3d;
+        });
+
+        scope.tilt = function() {
+          if (scope.supported) {
+            if (!scope.disabled) {
+              scope.globals.is3dActive = !scope.globals.is3dActive;
+            } else {
+              // FIXME: error message "selected background not compatible"
+            }
+          } else {
+            // FIXME: error message "browser not supported"
+          }
+        };
+      }
+    };
+  });
+})();

src/components/tilt3d/Tilt3dModule.js

@@ -0,0 +1,9 @@
+goog.provide('ga_tilt3d');
+
+goog.require('ga_tilt3d_directive');
+(function() {
+
+  angular.module('ga_tilt3d', [
+    'ga_tilt3d_directive'
+  ]);
+})();

src/components/tilt3d/partials/tilt3d.html

@@ -0,0 +1 @@
+<button type="button" class="ga-tilt3d" ng-click="tilt()" ng-class="{'ga-disabled': disabled, 'ga-unsupported': !supported}">3d</button>

src/components/tilt3d/style/tilt3d.less

@@ -0,0 +1,18 @@
+.ga-tilt3d {
+  background-color: #fff !important;
+  &.ga-unsupported, &.ga-disabled {
+    cursor: default;
+  }
+  &.ga-unsupported {
+
+  }
+  &.ga-disabled {
+    background-color: gray !important;
+  }
+}
+
+.ga-3d-active {
+  .ga-tilt3d {
+    background-color: green !important;
+  }
+}

src/index.mako.html

@@ -217,6 +217,7 @@
   % if device == 'mobile':
         <div ga-offline-bt></div>
   % endif
+        <div ga-tilt3d ng-if="globals.dev3d"></div>
       </div>
       <div ga-swipe 
            ga-swipe-map="map" 
@@ -235,7 +236,8 @@
 
 % if device != 'embed':
     <div ng-cloak ga-background-selector
-         ga-background-selector-map="map"
+         ga-background-selector-map="map",
+         ga-background-selector-ol3d="::ol3d"
          ng-hide="globals.offline">
     </div>
     <div ng-cloak translate-cloak id="footer" class="navbar navbar-fixed-bottom">

src/js/GaModule.js

@@ -47,6 +47,7 @@ goog.require('ga_share');
 goog.require('ga_share_controller');
 goog.require('ga_styles_from_literals_service');
 goog.require('ga_swipe');
+goog.require('ga_tilt3d');
 goog.require('ga_timeselector');
 goog.require('ga_timeselector_controller');
 goog.require('ga_timestamp_control');
@@ -115,7 +116,8 @@ goog.require('ga_waitcursor_service');
     'ga_tooltip_controller',
     'ga_featuretree_controller',
     'ga_draw_controller',
-    'ga_query_controller'
+    'ga_query_controller',
+    'ga_tilt3d'
   ]);
 
 })();

src/js/MainController.js

@@ -133,9 +133,6 @@ goog.require('ga_storage_service');
     $scope.map = createMap();
 
     if (gaGlobalOptions.dev3d && gaBrowserSniffer.webgl) {
-      $rootScope.$on('gaBgChange', function(evt, newBg) {
-        $scope.globals.is3dActive = !!newBg.is3d;
-      });
       $scope.map.on('change:target', function(event) {
         if (!!$scope.map.getTargetElement()) {
           $scope.$watch('globals.is3dActive', function(active) {

src/style/app.less

@@ -32,6 +32,7 @@
 @import "../components/query/style/query.less";
 @import "../components/timestampcontrol/style/timestampcontrol.less";
 @import "../components/translation/style/translation.less";
+@import "../components/tilt3d/style/tilt3d.less";
 
 
 @header-height: 89;

test/specs/backgroundselector/BackgroundSelectorDirective.spec.js

@@ -1,6 +1,6 @@
 describe('ga_backgroundselector_directive', function() {
 
-  var element, map, layer1, layer2, $rootScope, $compile, def, globalOptions;
+  var element, map, layer1, layer2, $rootScope, $compile, def;
   beforeEach(function() {
 
     map = new ol.Map({});
@@ -40,11 +40,10 @@ describe('ga_backgroundselector_directive', function() {
       });
     });
 
-    inject(function(_$rootScope_, _$compile_, $q, gaGlobalOptions) {
+    inject(function(_$rootScope_, _$compile_, $q) {
       $compile = _$compile_;
       $rootScope = _$rootScope_;
       def = $q.defer();
-      globalOptions = gaGlobalOptions;
     });
 
     $rootScope.map = map;
@@ -65,14 +64,9 @@ describe('ga_backgroundselector_directive', function() {
       var div = divToggle[0];
       expect(div).not.to.be(undefined);
     });
-    it('creates the correct number of layer bgselectors div', function() {
+    it('creates 4 layer bgselectors div', function() {
       var divsBg = element.find('.ga-bg-layer');
-      if (globalOptions.dev3d) {
-        expect(divsBg.length).to.equal(5);
-      } else {
-        // to be removed once 3d goes live
-        expect(divsBg.length).to.equal(4);
-      }
+      expect(divsBg.length).to.equal(4);
     });
   });