Separate component logic to standalone file

src/app.component.js

@@ -0,0 +1,116 @@
+import VectorLayer from 'ol/layer/Vector';
+import hsv2rgb from 'hsv2rgb';
+import nuts from './nuts.js';
+import {Fill, Stroke, Style} from 'ol/style';
+
+export const HsComponent = {
+  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',
+};
+
+let randomColorPalette = [];
+
+const stroke = new Stroke({
+  color: '#3399CC',
+  width: 0.25,
+});
+
+const styles = function (feature) {
+  if (isNaN(feature.get('km25.cluster'))) {
+    return [
+      new Style({
+        fill: new Fill({
+          color: '#FFF',
+        }),
+        stroke: stroke,
+      }),
+    ];
+  } else {
+    return [
+      new Style({
+        fill: new Fill({
+          color: randomColorPalette[feature.get('km25.cluster') - 1],
+        }),
+        //stroke: stroke,
+      }),
+    ];
+  }
+};
+
+export const nuts2Layer = new VectorLayer({
+  source: nuts.nuts2Source,
+  visible: false,
+  style: styles,
+  title: 'NUTS2 regions',
+});
+
+export const nuts3Layer = new VectorLayer({
+  source: nuts.nuts3Source,
+  visible: true,
+  style: styles,
+  title: 'NUTS3 regions',
+});
+nuts3Layer.set('popUp', {
+  attributes: [{attribute: 'km25.cluster', label: 'Cluster ID'}],
+});
+
+/**
+ * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+ * @param {number} colorCount Number of colors to randomly generate
+ * @returns {Array<Array<Number>>} Array of RGB colors
+ */
+function generateRandomColorPalette(colorCount) {
+  const palette = [];
+  const goldenRatioConjugate = 0.618033988749895;
+  for (let i = 0; i < colorCount; i++) {
+    let h = Math.random();
+    h += goldenRatioConjugate;
+    h %= 1;
+    h *= 360;
+    palette.push(hsv2rgb(h, 0.5, 0.95));
+  }
+  return palette;
+  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
+}

src/app.js

@@ -17,16 +17,11 @@ import 'hslayers-ng/components/toolbar/toolbar.module';
 // eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
 import './adjuster/adjuster.module.js';
 import './app.css';
-import VectorLayer from 'ol/layer/Vector';
 import View from 'ol/View';
-import hsv2rgb from 'hsv2rgb';
-import nuts from './nuts.js';
-import {Fill, Stroke, Style} from 'ol/style';
+import {HsComponent, nuts2Layer, nuts3Layer} from './app.component.js';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
 
-let randomColorPalette = [];
-
 function getHostname() {
   const url = window.location.href;
   const urlArr = url.split('/');
@@ -34,69 +29,6 @@ function getHostname() {
   return urlArr[0] + '//' + domain;
 }
 
-const stroke = new Stroke({
-  color: '#3399CC',
-  width: 0.25,
-});
-
-/**
- * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
- * @param {number} colorCount Number of colors to randomly generate
- * @returns {Array<Array<Number>>} Array of RGB colors
- */
-function generateRandomColorPalette(colorCount) {
-  const palette = [];
-  const goldenRatioConjugate = 0.618033988749895;
-  for (let i = 0; i < colorCount; i++) {
-    let h = Math.random();
-    h += goldenRatioConjugate;
-    h %= 1;
-    h *= 360;
-    palette.push(hsv2rgb(h, 0.5, 0.95));
-  }
-  return palette;
-  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
-}
-
-const styles = function (feature) {
-  if (isNaN(feature.get('km25.cluster'))) {
-    return [
-      new Style({
-        fill: new Fill({
-          color: '#FFF',
-        }),
-        stroke: stroke,
-      }),
-    ];
-  } else {
-    return [
-      new Style({
-        fill: new Fill({
-          color: randomColorPalette[feature.get('km25.cluster') - 1],
-        }),
-        //stroke: stroke,
-      }),
-    ];
-  }
-};
-
-const nuts2Layer = new VectorLayer({
-  source: nuts.nuts2Source,
-  visible: false,
-  style: styles,
-  title: 'NUTS2 regions',
-});
-
-const nuts3Layer = new VectorLayer({
-  source: nuts.nuts3Source,
-  visible: true,
-  style: styles,
-  title: 'NUTS3 regions',
-});
-nuts3Layer.set('popUp', {
-  attributes: [{attribute: 'km25.cluster', label: 'Cluster ID'}],
-});
-
 angular
   .module('hs', [
     'hs.addLayers',
@@ -118,7 +50,7 @@ angular
     'pra.adjuster',
   ])
   .value('HsConfig', {
-    proxyPrefix: '../8085/',
+    //proxyPrefix: '../8085/',
     default_layers: [
       new Tile({
         source: new OSM(),
@@ -156,52 +88,7 @@ angular
     },
     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;
+  .component('hs', HsComponent).name;
 
   /*.directive('hs', function (HsConfig, HsCore) {
     'ngInject';