Przeglądaj źródła

Use newest AngularJS techniques

Follow https://github.com/toddmotto/angularjs-styleguide
jmacura 5 lat temu
rodzic
commit
b420612d6f
3 zmienionych plików z 68 dodań i 15 usunięć
  1. 6 1
      src/app.css
  2. 61 13
      src/app.js
  3. 1 1
      src/index.html

+ 6 - 1
src/app.css

@@ -1,3 +1,8 @@
-.cursor-pointer {
+#hs-app {
+  height: 100vh;
+  position: relative;
+}
+
+cursor-pointer {
   cursor: pointer;
 }

+ 61 - 13
src/app.js

@@ -1,9 +1,11 @@
 'use strict';
 //import angular from 'angular';
 import 'hslayers-ng/components/add-layers/add-layers.module';
+import 'hslayers-ng/components/core/core.module';
 import 'hslayers-ng/components/datasource-selector/datasource-selector.module';
 import 'hslayers-ng/components/draw/draw.module';
 import 'hslayers-ng/components/info/info.module';
+import 'hslayers-ng/components/map/map.module';
 import 'hslayers-ng/components/measure/measure.module';
 import 'hslayers-ng/components/permalink/permalink.module';
 import 'hslayers-ng/components/print/print.module';
@@ -98,10 +100,12 @@ nuts3Layer.set('popUp', {
 angular
   .module('hs', [
     'hs.addLayers',
+    'hs.core',
     'hs.datasource_selector',
     'hs.geolocation',
     'hs.info',
     'hs.layermanager',
+    'hs.map',
     'hs.measure',
     'hs.permalink',
     'hs.print',
@@ -113,15 +117,6 @@ angular
     'gettext',
     'pra.adjuster',
   ])
-  .directive('hs', function (HsConfig, HsCore) {
-    'ngInject';
-    return {
-      template: HsCore.hslayersNgTemplate,
-      /* link: function (scope, element) {
-        HsCore.fullScreenMap(element);
-      } */
-    };
-  })
   .value('HsConfig', {
     proxyPrefix: '../8085/',
     default_layers: [
@@ -159,11 +154,64 @@ angular
       saveMap: false,
       language: false,
     },
-    /*searchProvider: (q) => {
-      return `/app/jupyter-test/8085/search/?q=${q}`;
-    },*/
     sizeMode: 'fullscreen',
   })
+  .component('hs', {
+    template: (HsCore) => {
+      'ngInject';
+      return HsCore.hslayersNgTemplate;
+    },
+    bindings: {},
+    controller: function (
+      $scope,
+      $compile,
+      gettext,
+      HsCore,
+      HsLayoutService,
+      HsSidebarService,
+      PraAdjusterService
+    ) {
+      'ngInject';
+      const vm = this;
+      vm.exists = HsCore.exists;
+      vm.panelVisible = HsLayoutService.panelVisible;
+      HsLayoutService.sidebarRight = false;
+      // HsLayoutService.sidebarToggleable = false;
+      // HsCore.singleDatasources = true;
+      HsLayoutService.sidebarButtons = true;
+      HsLayoutService.setDefaultPanel('adjuster');
+      $scope.$on('scope_loaded', function (event, args) {
+        if (args === 'Sidebar') {
+          const el = angular.element(
+            '<pra.adjuster hs.draggable ng-if="vm.exists(\'pra.adjuster\')" ng-show="vm.panelVisible(\'adjuster\', this)"></pra.adjuster>'
+          )[0];
+          HsLayoutService.panelListElement.appendChild(el);
+          $compile(el)($scope);
+          const toolbarButton = angular.element(
+            '<div pra-adjuster-sidebar-btn></div>'
+          )[0];
+          HsLayoutService.sidebarListElement.appendChild(toolbarButton);
+          $compile(toolbarButton)(event.targetScope);
+        }
+      });
+      $scope.$on('clusters_loaded', function (event, args) {
+        randomColorPalette = generateRandomColorPalette(
+          PraAdjusterService.clusters.length
+        );
+      });
+    },
+    controllerAs: 'vm',
+  }).name;
+
+  /*.directive('hs', function (HsConfig, HsCore) {
+    'ngInject';
+    return {
+      template: HsCore.hslayersNgTemplate,
+      link: function (scope, element) {
+        HsCore.fullScreenMap(element);
+      }
+    };
+  })
   .controller('MainController', function (
     $scope,
     $compile,
@@ -202,4 +250,4 @@ angular
         PraAdjusterService.clusters.length
       );
     });
-  });
+  });*/

+ 1 - 1
src/index.html

@@ -15,7 +15,7 @@
 </head>
 
 <body>
-  <div hs ng-app="hs" ng-controller="MainController as vm" style="height: 100vh;"></div>
+  <hs ng-app="hs" id="hs-app" ng-strict-di></hs>
   <% for (var js in htmlWebpackPlugin.files.js) { %>
     <script type="application/javascript" src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
   <% } %>