mobility-toolbox-js 2.0.0 → 2.0.1-beta.13

package/ol/controls/CopyrightControl.js

@@ -1,80 +1,42 @@
-import { inView } from 'ol/layer/Layer';
-import Control from '../../common/controls/Control';
-import mixin from '../../common/mixins/CopyrightMixin';
-import removeDuplicate from '../../common/utils/removeDuplicate';
-
-/**
- * Display layer's copyrights.
- *
- * @example
- * import { Map } from 'ol';
- * import { CopyrightControl } from 'mobility-toolbox-js/ol';
- *
- * const map = new Map({
- *   target: 'map',
- * });
- * const control = new CopyrightControl();
- * control.map = map
- *
- *
- * @see <a href="/example/ol-copyright">Openlayers copyright example</a>
- *
- * @extends {Control}
- * @implements {CopyrightInterface}
- */
+import { inView } from "ol/layer/Layer";
+import Control from "../../common/controls/Control";
+import mixin from "../../common/mixins/CopyrightMixin";
+import removeDuplicate from "../../common/utils/removeDuplicate";
 class CopyrightControl extends mixin(Control) {
   constructor(options) {
     super(options);
     this.onPostRender = this.onPostRender.bind(this);
   }
-
   getCopyrights() {
     if (!this.frameState) {
       return [];
     }
     let copyrights = [];
-
-    // This code loop comes mainly from ol.
     this.frameState.layerStatesArray.forEach((layerState) => {
       const { layer } = layerState;
-      if (
-        inView(layerState, this.frameState.viewState) &&
-        layer &&
-        layer.getSource &&
-        layer.getSource() &&
-        layer.getSource().getAttributions()
-      ) {
-        copyrights = copyrights.concat(
-          layer.getSource().getAttributions()(this.frameState),
-        );
+      if (inView(layerState, this.frameState.viewState) && layer && layer.getSource && layer.getSource() && layer.getSource().getAttributions()) {
+        copyrights = copyrights.concat(layer.getSource().getAttributions()(this.frameState));
       }
     });
     return removeDuplicate(copyrights);
   }
-
   activate() {
     super.activate();
     if (this.map) {
-      this.map.on('postrender', this.onPostRender);
+      this.map.on("postrender", this.onPostRender);
     }
   }
-
   deactivate() {
     if (this.map) {
-      this.map.un('postrender', this.onPostRender);
+      this.map.un("postrender", this.onPostRender);
     }
     super.deactivate();
   }
-
   onPostRender(evt) {
     if (this.map && this.element) {
-      /**
-       * @ignore
-       */
       this.frameState = evt.frameState;
       this.render();
     }
   }
 }
-
 export default CopyrightControl;

package/ol/controls/CopyrightControl.test.js

@@ -1,14 +1,13 @@
-import View from 'ol/View';
-import Tile from 'ol/Tile';
-import TileLayer from 'ol/layer/Tile';
-import TileSource from 'ol/source/Tile';
-import { createXYZ } from 'ol/tilegrid';
-import { Map } from 'ol';
-import Layer from '../layers/Layer';
-import CopyrightControl from './CopyrightControl';
-
+import View from "ol/View";
+import Tile from "ol/Tile";
+import TileLayer from "ol/layer/Tile";
+import TileSource from "ol/source/Tile";
+import { createXYZ } from "ol/tilegrid";
+import { Map } from "ol";
+import Layer from "../layers/Layer";
+import CopyrightControl from "./CopyrightControl";
 const tileLoadFunction = () => {
-  const tile = new Tile([0, 0, -1], 2 /* LOADED */);
+  const tile = new Tile([0, 0, -1], 2);
   tile.getImage = () => {
     const image = new Image();
     image.width = 256;
@@ -17,195 +16,150 @@ const tileLoadFunction = () => {
   };
   return tile;
 };
-
 const getOLTileLayer = () => {
   const layer = new TileLayer({
     source: new TileSource({
-      projection: 'EPSG:3857',
-      tileGrid: createXYZ(),
-    }),
+      projection: "EPSG:3857",
+      tileGrid: createXYZ()
+    })
   });
   layer.getSource().getTile = tileLoadFunction;
   return layer;
 };
-
-const getLayer = (copyrights, visible = true) =>
-  new Layer({
-    visible,
-    copyrights,
-    olLayer: getOLTileLayer(),
-  });
-
-describe('CopyrightControl', () => {
+const getLayer = (copyrights, visible = true) => new Layer({
+  visible,
+  copyrights,
+  olLayer: getOLTileLayer()
+});
+describe("CopyrightControl", () => {
   let map;
-
   beforeEach(() => {
-    const target = document.createElement('div');
+    const target = document.createElement("div");
     document.body.appendChild(target);
     map = new Map({
       target,
       view: new View({
         center: [0, 0],
-        zoom: 0,
-      }),
+        zoom: 0
+      })
     });
-    getLayer(true, 'bar').init(map);
+    getLayer(true, "bar").attachToMap(map);
     map.setSize([200, 200]);
     map.renderSync();
   });
-
   afterEach(() => {
     if (map) {
       map.setTarget(null);
       map = null;
     }
   });
-
-  test('should be activate by default', () => {
+  test("should be activate by default", () => {
     const control = new CopyrightControl();
     expect(control.active).toBe(true);
   });
-
-  test('renders a string copyright', () => {
+  test("renders a string copyright", () => {
     const control = new CopyrightControl();
-    control.map = map;
-    expect(control.element.innerHTML).toBe('');
-    getLayer('copyright').init(map);
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer("copyright").attachToMap(map);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright');
+    expect(control.element.innerHTML).toBe("copyright");
   });
-
-  test('renders an array of copyrights', () => {
+  test("renders an array of copyrights", () => {
     const control = new CopyrightControl();
-    control.map = map;
-    expect(control.element.innerHTML).toBe('');
-    getLayer(['copyright 1', 'copyright 2']).init(map);
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer(["copyright 1", "copyright 2"]).attachToMap(map);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
+    expect(control.element.innerHTML).toBe("copyright 1 | copyright 2");
   });
-
-  test('renders unique copyrights', () => {
+  test("renders unique copyrights", () => {
     const control = new CopyrightControl();
-    control.map = map;
-    expect(control.element.innerHTML).toBe('');
-    getLayer(['copyright 1', 'copyright 2']).init(map);
-    getLayer('copyright 1').init(map);
-    getLayer(['copyright 2']).init(map);
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer(["copyright 1", "copyright 2"]).attachToMap(map);
+    getLayer("copyright 1").attachToMap(map);
+    getLayer(["copyright 2"]).attachToMap(map);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
+    expect(control.element.innerHTML).toBe("copyright 1 | copyright 2");
   });
-
   test("doesn't render copyright of an hidden layer", () => {
     const control = new CopyrightControl();
-    control.map = map;
-    expect(control.element.innerHTML).toBe('');
-    const layer1 = getLayer('copyright hidden', false);
-    layer1.init(map);
-    const layer2 = getLayer('copyright', true);
-    layer2.init(map);
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    const layer1 = getLayer("copyright hidden", false);
+    layer1.attachToMap(map);
+    const layer2 = getLayer("copyright", true);
+    layer2.attachToMap(map);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright');
-
-    // the we update visibility of both layers
+    expect(control.element.innerHTML).toBe("copyright");
     layer1.setVisible(true);
     map.renderSync();
     layer2.setVisible(false);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright hidden');
+    expect(control.element.innerHTML).toBe("copyright hidden");
   });
-
-  test('should activate the control on construction then deactivate it', () => {
-    getLayer('copyright 1').init(map);
+  test("should activate the control on construction then deactivate it", () => {
+    getLayer("copyright 1").attachToMap(map);
     const control = new CopyrightControl({ active: true });
-    control.map = map;
+    control.attachToMap(map);
     map.renderSync();
-
     expect(control.element.parentNode).toBe(map.getTargetElement());
-
-    // Should be activated by default.
     expect(control.active).toBe(true);
-    expect(control.element.innerHTML).toBe('copyright 1');
-
-    // on deactivation
+    expect(control.element.innerHTML).toBe("copyright 1");
     control.active = false;
     map.renderSync();
-    expect(control.element.innerHTML).toBe('');
+    expect(control.element.innerHTML).toBe("");
   });
-
-  test('should deactivate the control on constrcution then activate it', () => {
-    getLayer('copyright 1').init(map);
+  test("should deactivate the control on constrcution then activate it", () => {
+    getLayer("copyright 1").attachToMap(map);
     const control = new CopyrightControl({ active: false });
-    control.map = map;
+    control.attachToMap(map);
     map.renderSync();
-
     expect(control.element.parentNode).toBe(map.getTargetElement());
-
-    // Should be activated by default.
     expect(control.active).toBe(false);
     map.renderSync();
-    expect(control.element.innerHTML).toBe('');
-
-    // on deactivation
+    expect(control.element.innerHTML).toBe("");
     control.active = true;
     map.renderSync();
-    expect(control.element.innerHTML).toBe('copyright 1');
+    expect(control.element.innerHTML).toBe("copyright 1");
   });
-
-  test('should add copyrights in the map container element then remove it.', () => {
-    getLayer('copyright value').init(map);
+  test("should add copyrights in the map container element then remove it.", () => {
+    getLayer("copyright value").attachToMap(map);
     map.renderSync();
-
     const control = new CopyrightControl();
-
-    // Add control
-    control.map = map;
+    control.attachToMap(map);
     expect(control.element.parentNode).toBe(map.getTargetElement());
-
-    // Remove control
-    control.map = null;
+    control.detachFromMap();
     expect(control.element.parentNode).toBe(null);
   });
-
-  test('should add copyrights in the target element then remove it.', () => {
-    getLayer(['copyright value']).init(map);
+  test("should add copyrights in the target element then remove it.", () => {
+    getLayer(["copyright value"]).attachToMap(map);
     map.renderSync();
-
-    const target = document.createElement('div');
-    target.setAttribute('id', 'copyright');
+    const target = document.createElement("div");
+    target.setAttribute("id", "copyright");
     document.body.appendChild(target);
-
     const control = new CopyrightControl({
-      target: document.getElementById('copyright'),
+      target: document.getElementById("copyright")
     });
-
-    // Add control
-    control.map = map;
+    control.attachToMap(map);
     expect(control.element.parentNode).toBe(target);
-
-    // Remove control
-    control.map = null;
+    control.detachFromMap();
     expect(control.element.parentNode).toBe(null);
   });
-
-  test('renders custom copyrights with the render method ', () => {
+  test("renders custom copyrights with the render method ", () => {
     const control = new CopyrightControl({
       active: true,
       render() {
         if (!this.element) {
           return;
         }
-        this.element.innerHTML = this.active
-          ? this.getCopyrights().join(', ')
-          : '';
-      },
+        this.element.innerHTML = this.active ? this.getCopyrights().join(", ") : "";
+      }
     });
-    control.map = map;
-    getLayer(['copyright 1', 'copyright 2', 'copyright 3']).init(map);
+    control.attachToMap(map);
+    getLayer(["copyright 1", "copyright 2", "copyright 3"]).attachToMap(map);
     map.renderSync();
-
-    // Add control
-    expect(control.element.innerHTML).toBe(
-      'copyright 1, copyright 2, copyright 3',
-    );
+    expect(control.element.innerHTML).toBe("copyright 1, copyright 2, copyright 3");
   });
 });