Completed
Pull Request — develop (#235)
by Xaver
35s
created

map.js ➔ ... ➔ sidebar.button.addEventListener(ꞌvisibilityꞌ)   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 3

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
c 0
b 0
f 0
nc 1
dl 0
loc 3
rs 10
nop 0
1
define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet', 'map/activearea'],
2
  function (ClientLayer, LabelLayer, Button, L) {
3
    'use strict';
4
5
    var options = {
6
      worldCopyJump: true,
7
      zoomControl: true,
8
      minZoom: 0
9
    };
10
11
    return function (linkScale, sidebar, buttons) {
12
      var self = this;
13
      var savedView;
14
15
      var map;
16
      var layerControl;
17
      var baseLayers = {};
18
19
      function saveView() {
20
        savedView = {
21
          center: map.getCenter(),
22
          zoom: map.getZoom()
23
        };
24
      }
25
26
      function contextMenuOpenLayerMenu() {
27
        document.querySelector('.leaflet-control-layers').classList.add('leaflet-control-layers-expanded');
28
      }
29
30
      function setActiveArea(state) {
31
        map.setActiveArea({
32
          position: 'absolute',
33
          left: sidebar.getWidth(state) + 'px',
34
          right: 0,
35
          top: 0,
36
          bottom: 0
37
        });
38
        console.log(map._viewport);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
39
      }
40
41
      var el = document.createElement('div');
42
      el.classList.add('map');
43
44
      map = L.map(el, options);
45
      setActiveArea(false);
46
47
      var now = new Date();
48
      config.mapLayers.forEach(function (item, i) {
49
        if ((typeof item.config.start === 'number' && item.config.start <= now.getHours()) || (typeof item.config.end === 'number' && item.config.end > now.getHours())) {
50
          item.config.order = item.config.start * -1;
51
        } else {
52
          item.config.order = i;
53
        }
54
      });
55
56
      config.mapLayers = config.mapLayers.sort(function (a, b) {
57
        return a.config.order - b.config.order;
58
      });
59
60
      var layers = config.mapLayers.map(function (d) {
61
        return {
62
          'name': d.name,
63
          'layer': L.tileLayer(d.url.replace('{retina}', L.Browser.retina ? '@2x' : ''), d.config)
64
        };
65
      });
66
67
      map.addLayer(layers[0].layer);
68
69
      layers.forEach(function (d) {
70
        baseLayers[d.name] = d.layer;
71
      });
72
73
      var button = new Button(map, buttons);
74
75
      map.on('locationfound', button.locationFound);
76
      map.on('locationerror', button.locationError);
77
      map.on('dragend', saveView);
78
      map.on('contextmenu', contextMenuOpenLayerMenu);
79
80
      button.init();
81
82
      layerControl = L.control.layers(baseLayers, [], { position: 'bottomright' });
83
      layerControl.addTo(map);
84
85
      map.zoomControl.setPosition('topright');
86
87
      var clientLayer = new ClientLayer({ minZoom: config.clientZoom });
88
      clientLayer.addTo(map);
89
      clientLayer.setZIndex(5);
90
91
      var labelLayer = new LabelLayer({ minZoom: config.labelZoom });
92
      labelLayer.addTo(map);
93
      labelLayer.setZIndex(6);
94
95
      sidebar.button.addEventListener('visibility', function () {
96
        setActiveArea(!sidebar.container.classList.contains('hidden'));
97
      });
98
99
      map.on('zoom', function () {
100
        clientLayer.redraw();
101
        labelLayer.redraw();
102
      });
103
104
      map.on('baselayerchange', function (e) {
105
        map.options.maxZoom = e.layer.options.maxZoom;
106
        clientLayer.options.maxZoom = map.options.maxZoom;
107
        labelLayer.options.maxZoom = map.options.maxZoom;
108
        if (map.getZoom() > map.options.maxZoom) {
109
          map.setZoom(map.options.maxZoom);
110
        }
111
112
        var style = document.querySelector('.css-mode:not([media="not"])');
113
        if (style && e.layer.options.mode !== '' && !style.classList.contains(e.layer.options.mode)) {
114
          style.media = 'not';
115
          labelLayer.updateLayer();
116
        }
117
        if (e.layer.options.mode) {
118
          var newStyle = document.querySelector('.css-mode.' + e.layer.options.mode);
119
          newStyle.media = '';
120
          newStyle.appendChild(document.createTextNode(''));
121
          labelLayer.updateLayer();
122
        }
123
      });
124
125
      map.on('load', function () {
126
        var inputs = document.querySelectorAll('.leaflet-control-layers-selector');
127
        [].forEach.call(inputs, function (input) {
128
          input.setAttribute('role', 'radiogroup');
129
          input.setAttribute('aria-label', input.nextSibling.innerHTML.trim());
130
        });
131
      });
132
133
      var nodeDict = {};
134
      var linkDict = {};
135
      var highlight;
136
137
      function resetMarkerStyles(nodes, links) {
138
        Object.keys(nodes).forEach(function (d) {
139
          nodes[d].resetStyle();
140
        });
141
142
        Object.keys(links).forEach(function (d) {
143
          links[d].resetStyle();
144
        });
145
      }
146
147
      function setView(bounds, zoom) {
148
        map.fitBounds(bounds, { maxZoom: (zoom ? zoom : config.nodeZoom) });
149
      }
150
151
      function goto(m) {
152
        var bounds;
153
154
        if ('getBounds' in m) {
155
          bounds = m.getBounds();
156
        } else {
157
          bounds = L.latLngBounds([m.getLatLng()]);
158
        }
159
160
        setView(bounds);
161
162
        return m;
163
      }
164
165
      function updateView(nopanzoom) {
166
        resetMarkerStyles(nodeDict, linkDict);
167
        var m;
168
169
        if (highlight !== undefined) {
170
          if (highlight.type === 'node' && nodeDict[highlight.o.node_id]) {
171
            m = nodeDict[highlight.o.node_id];
172
            m.setStyle(config.map.highlightNode);
173
          } else if (highlight.type === 'link' && linkDict[highlight.o.id]) {
174
            m = linkDict[highlight.o.id];
175
            m.setStyle(config.map.highlightLink);
176
          }
177
        }
178
179
        if (!nopanzoom) {
180
          if (m) {
181
            goto(m);
182
          } else if (savedView) {
183
            map.setView(savedView.center, savedView.zoom);
184
          } else {
185
            setView(config.fixedCenter);
186
          }
187
        }
188
      }
189
190
      self.setData = function setData(data) {
191
        nodeDict = {};
192
        linkDict = {};
193
194
        clientLayer.setData(data);
195
        labelLayer.setData(data, map, nodeDict, linkDict, linkScale);
196
197
        updateView(true);
198
      };
199
200
      self.resetView = function resetView() {
201
        button.disableTracking();
202
        highlight = undefined;
203
        updateView();
204
      };
205
206
      self.gotoNode = function gotoNode(d) {
207
        button.disableTracking();
208
        highlight = { type: 'node', o: d };
209
        updateView();
210
      };
211
212
      self.gotoLink = function gotoLink(d) {
213
        button.disableTracking();
214
        highlight = { type: 'link', o: d[0] };
215
        updateView();
216
      };
217
218
      self.gotoLocation = function gotoLocation(d) {
219
        button.disableTracking();
220
        map.setView([d.lat, d.lng], d.zoom);
221
      };
222
223
      self.destroy = function destroy() {
224
        button.clearButtons();
225
        map.remove();
226
227
        if (el.parentNode) {
228
          el.parentNode.removeChild(el);
229
        }
230
      };
231
232
      self.render = function render(d) {
233
        d.appendChild(el);
234
        map.invalidateSize();
235
      };
236
237
      return self;
238
    };
239
  });
240