https://www.altria.com/lib/usmap-lobbying.js

1var hiddenInputLobbying = document.getElementById('hidStates');
2var observer = new MutationObserver((mutationsList) => {
3  for (const mutation of mutationsList) {
4    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
5      refreshMap();
6    }
7  }
8});
9
10observer.observe(hiddenInputLobbying, { attributes: true });
11
12function refreshMap() {
13  if (!$('.lobbyingMapWrapper').is(':visible')) {
14    return;
15  }
16
17  const results = hiddenInputLobbying
18    ? hiddenInputLobbying.value.split(',').map((state) => state.trim())
19    : '';
20
21  var lobbyingComponent = $('#lobbyingComponent');
22  lobbyingComponent.find('.lobbyingMapViewFilters').css('display', 'block');
23  isContributionsMapLoaded = true;
24  var holderWidth = lobbyingComponent.find('.lobbyingMapWrapper').width();
25  var holderHeight = (holderWidth / 100) * 70;
26  holderHeight = holderHeight + 'px';
27  lobbyingComponent.find('.lobbyingMapWrapper').css('height', holderHeight);
28  var font_size = '14px';
29  var labelWidth = 46;
30  var labelHeight = 26;
31  var _StateSpecificStyle = '';
32  var _StateSpecificHoverStyle = '';
33  var _labelStateSpecificStyle = '';
34  var _labelStateSpecificHoverStyle = '';
35
36  for (var k = 0; k <= results.length - 1; k++) {
37    if (results[k] === 'ORG') {
38      results[k] = 'OR';
39    }
40    _StateSpecificStyle =
41      _StateSpecificStyle +
42      '"' +
43      results[k] +
44      '"' +
45      ':{ "fill": "#2d67b2", "stroke": "#fff", "stroke-width": "1" },';
46    _StateSpecificHoverStyle =
47      _StateSpecificHoverStyle +
48      '"' +
49      results[k] +
50      '"' +
51      ':{ "fill": "#6cf", "stroke": "#fff", "stroke-width": "1" },';
52    _labelStateSpecificStyle =
53      _labelStateSpecificStyle + '"' + results[k] + '"' + ':{ "font-color": "#fff" },';
54    _labelStateSpecificHoverStyle =
55      _labelStateSpecificHoverStyle + '"' + results[k] + '"' + ':{ "font-color": "#FFFFFF" },';
56  }
57  _StateSpecificStyle = '{' + _StateSpecificStyle.substr(0, _StateSpecificStyle.length - 1) + '}';
58  _StateSpecificHoverStyle =
59    '{' + _StateSpecificHoverStyle.substr(0, _StateSpecificHoverStyle.length - 1) + '}';
60  _labelStateSpecificStyle =
61    '{' + _labelStateSpecificStyle.substr(0, _labelStateSpecificStyle.length - 1) + '}';
62  _labelStateSpecificHoverStyle =
63    '{' + _labelStateSpecificHoverStyle.substr(0, _labelStateSpecificHoverStyle.length - 1) + '}';
64
65  _StateSpecificStyles = JSON.parse(_StateSpecificStyle || '{}');
66  _StateSpecificHoverStyles = JSON.parse(_StateSpecificHoverStyle || '{}');
67  _labelStateSpecificStyles = JSON.parse(_labelStateSpecificStyle || '{}');
68  _labelStateSpecificHoverStyles = JSON.parse(_labelStateSpecificHoverStyle || '{}');
69
70  lobbyingComponent.find('.lobbyingMap1')[0].innerHTML = '';
71  lobbyingComponent.find('.lobbyingMap2')[0].innerHTML = '';
72  lobbyingComponent.find('.lobbyingMap1').removeData();
73  lobbyingComponent.find('.lobbyingMap2').removeData();
74  lobbyingComponent.find('.lobbyingMap1').usmap({
75    stateStyles: {
76      fill: '#868787',
77      stroke: '#fff',
78      'stroke-width': 1,
79      'stroke-linejoin': 'round',
80      opacity: 0,
81      'font-size': font_size,
82      'font-color': '#fff',
83      'font-weight': 'bold',
84      cursor: 'default',
85    },
86    stateHoverStyles: {
87      fill: '#6cf',
88      stroke: '#fff',
89      'stroke-width': 1,
90      'stroke-linejoin': 'round',
91      'font-size': font_size,
92      'font-color': '#fff',
93      'font-weight': 'bold',
94      cursor: 'default',
95    },
96    stateSpecificStyles: _StateSpecificStyles,
97    stateSpecificHoverStyles: _StateSpecificHoverStyles,
98    stateSpecificLabelBackingStyles: _StateSpecificStyles,
99    stateSpecificLabelBackingHoverStyles: _StateSpecificHoverStyles,
100    stateSpecificLabelTextStyles: _labelStateSpecificStyles,
101    stateSpecificLabelTextHoverStyles: _labelStateSpecificHoverStyles,
102    stateHoverAnimation: 0,
103    showLabels: true,
104    labelText: true,
105    labelWidth: labelWidth,
106    labelHeight: labelHeight,
107    labelRadius: 0,
108    labelBackingStyles: { fill: '#868787', stroke: '#fff', 'stroke-width': '1' },
109    labelBackingHoverStyles: { fill: '#f7f7f' },
110    labelTextStyles: {
111      fill: '#fff',
112      'font-size': font_size,
113      'font-color': '#fff',
114      'font-weight': 'bold',
115    },
116    labelTextHoverStyles: { fill: '#FFFFFF', 'font-weight': 'bold', 'font-color': '#FFFFFF' },
117    click: showStateContributions,
118    //keydown: showStateContributions,
119    //touchstart: showStateContributions,
120    mouseover: changePointer,
121    mouseout: resetPointer,
122    componentName: 'lobbyingMap1',
123  });
124  lobbyingComponent.find('.lobbyingMap2').usmap({
125    stateStyles: {
126      fill: '#868787',
127      stroke: '#fff',
128      'stroke-width': 1,
129      'stroke-linejoin': 'round',
130      'font-size': font_size,
131      'font-color': '#294561',
132      'font-weight': 'bold',
133      cursor: 'default',
134    },
135    stateHoverStyles: {
136      fill: '#868787',
137      stroke: '#fff',
138      'stroke-width': 1,
139      'stroke-linejoin': 'round',
140      'font-size': font_size,
141      'font-color': '#FFFFFF',
142      'font-weight': 'bold',
143      cursor: 'default',
144    },
145    stateSpecificStyles: _StateSpecificStyles,
146    stateSpecificHoverStyles: _StateSpecificHoverStyles,
147    labelBackingStyles: { fill: '#7ec348', stroke: '#58738d', 'stroke-width': '1.4' },
148    labelBackingHoverStyles: { fill: '#7ec348' },
149    stateSpecificLabelTextStyles: _labelStateSpecificStyles,
150    stateSpecificLabelTextHoverStyles: _labelStateSpecificHoverStyles,
151    stateHoverAnimation: 0,
152    showLabels: false,
153    labelTextStyles: { 'font-size': font_size, 'font-color': '#fff' },
154    componentName: 'lobbyingMap2',
155  });
156  function captureClicks() {}
157  function showStateContributions(event, data) {
158    if (!data || !data.name) return;
159
160    if (results.indexOf(data.name.toUpperCase().toString()) >= 0) {
161      $('.state-lobbying-disclosures').find('.lobbyingMap2').usmap('trigger', before, 'mouseout');
162      before = '';
163      window.mapTriggerFetch(data.name);
164
165      const lobbyingComponent = $('#lobbyingComponent');
166      const stateData = lobbyingComponent.find(
167        `.lobbyingDisclosuresStateData[data-state="${data.name}"]`
168      );
169
170      if (stateData.length) {
171        lobbyingComponent
172          .find('.lobbyingDisclosuresDetialsWrapper')
173          .addClass('show')
174          .removeClass('hide');
175        lobbyingComponent.find('.lobbyingDisclosuresStateData').removeClass('defaultState');
176        lobbyingComponent
177          .find('.lobbyingDisclosuresStateData')
178          .addClass('hide')
179          .removeClass('show');
180        stateData.addClass('show').removeClass('hide');
181        stateData.addClass('defaultState');
182
183        // Update dropdown to match selected state
184        lobbyingComponent.find('.lobbyingDisclosuresStatesDropDown').val(data.name);
185      }
186    }
187  }
188  function closeDisclosuresPopup(lobbyingComponent) {
189    lobbyingComponent
190      .find('.lobbyingDisclosuresDetialsWrapper')
191      .removeClass('show')
192      .addClass('hide');
193    lobbyingComponent.find('.lobbyingDisclosuresStateData').addClass('hide').removeClass('show');
194  }
195  function resetPointer(event, data) {
196    var lobbyingComponent = $('.state-lobbying-disclosures');
197    if (results.indexOf(data.name.toUpperCase().toString()) >= 0) {
198      lobbyingComponent.find('.lobbyingMapWrapper .rvml').css('cursor', 'pointer');
199      lobbyingComponent.find('.lobbyingMapWrapper path').css('cursor', 'pointer');
200      lobbyingComponent.find('.lobbyingMapWrapper rect').css('cursor', 'pointer');
201    } else {
202      lobbyingComponent.find('.lobbyingMapWrapper .rvml').css('cursor', 'default');
203      lobbyingComponent.find('.lobbyingMapWrapper path').css('cursor', 'default');
204      lobbyingComponent.find('.lobbyingMapWrapper rect').css('cursor', 'default');
205      return false;
206    }
207
208    lobbyingComponent.find('.lobbyingMap2').usmap('trigger', data.name, 'mouseout');
209  }
210
211  $('.lobbyingMap1').hover(
212    function () {
213      // Mouse enter
214    },
215    function () {
216      // Mouse leave
217      if (before != '') {
218        $('.state-lobbying-disclosures').find('.lobbyingMap2').usmap('trigger', before, 'mouseout');
219        before = '';
220      }
221    }
222  );
223
224  var before = '';
225  function changePointer(event, data) {
226    var lobbyingComponent = $('.state-lobbying-disclosures');
227
228    if (data.name != before && before != '') {
229      lobbyingComponent.find('.lobbyingMap2').usmap('trigger', before, 'mouseout');
230    }
231    before = data.name;
232
233    if (results.indexOf(data.name.toUpperCase().toString()) >= 0) {
234      lobbyingComponent.find('.lobbyingMapWrapper .rvml').css('cursor', 'pointer');
235      lobbyingComponent.find('.lobbyingMapWrapper path').css('cursor', 'pointer');
236      lobbyingComponent.find('.lobbyingMapWrapper rect').css('cursor', 'pointer');
237    } else {
238      lobbyingComponent.find('.lobbyingMapWrapper .rvml').css('cursor', 'default');
239      lobbyingComponent.find('.lobbyingMapWrapper path').css('cursor', 'default');
240      lobbyingComponent.find('.lobbyingMapWrapper rect').css('cursor', 'default');
241      return false;
242    }
243
244    lobbyingComponent.find('.lobbyingMap2').usmap('trigger', data.name, 'mouseover');
245  }
246  function resetPointer(e, data) {}
247  function onResizeMapWindow() {
248    if ($(window).width() > 767) {
249      if (lobbyingComponent.find('.lobbyingMapView').css('display') === 'block') {
250        if (isContributionsMapLoaded) {
251          var holderWidth = lobbyingComponent.find('.lobbyingMapWrapper').width();
252          var holderHeight = (holderWidth / 100) * 70;
253          holderHeight = holderHeight + 'px';
254          lobbyingComponent.find('.lobbyingMapWrapper').css('height', holderHeight);
255          lobbyingComponent.find('.lobbyingMapWrapper svg').attr('width', holderWidth);

256          lobbyingComponent.find('.lobbyingMapWrapper svg').attr('height', holderHeight);
257        } else {
258          setTimeout(function () {
259            buildlobbyingMap(lobbyingComponent, contributionInfo);
260          }, 100);
261        }
262      }
263    } else {
264      //if (!isContributionsListViewLoaded) {
265      //    filterAndSortlobbyingMap(lobbyingComponent);
266      //}
267    }
268  }
269  $(window).resize(function () {
270    onResizeMapWindow();
271  });
272  onResizeMapWindow();
273
274  $(window).on('orientationchange', function () {
275    setTimeout(function () {
276      if ($(window).width() >= 768) {
277        if (lobbyingComponent.find('.lobbyingMapView').css('display') === 'block') {
278          var contributionType = lobbyingComponent
279            .find('.lobbyingMapListView .contributionTypesDropDown')
280            .val()
281            .toUpperCase();
282          var contributionYear = lobbyingComponent
283            .find('.lobbyingMapListView .contributionYearsDropdown')
284            .val();
285          var filterCriteria = '&Contribution=' + contributionType + '&Year=' + contributionYear;
286          calllobbyingMapAPI(lobbyingComponent, contributionsMapApiUrl + filterCriteria, false);
287          updateContributionFilters(
288            lobbyingComponent,
289            false,
290            contributionType,
291            null,
292            contributionYear
293          );
294        }
295      } else {
296        //filterAndSortlobbyingMap(lobbyingComponent);
297      }
298    }, 100);
299  });
300
301  // State dropdown change handler
302  $('.lobbyingDisclosuresStatesDropDown')
303    .off('change')
304    .on('change', function () {
305      const stateName = $(this).val();
306      showStateContributions(null, { name: stateName });
307    });
308
309  // Close button handler
310  $('.lobbyingDisclosuresDetails .closeButton')
311    .off('click keypress')
312    .on('click keypress', function (event) {
313      if (event.type === 'keypress' && event.key !== 'Enter') {
314        return;
315      }
316      closeDisclosuresPopup(lobbyingComponent);
317    });
318
319  // Handle clicks outside the popup
320  $(document).on('click', function (e) {
321    if (!$(e.target).closest('.lobbyingDisclosuresDetialsWrapper').length) {
322      closeDisclosuresPopup(lobbyingComponent);
323    }
324  });
325}
326
327$(window).on('resize', function () {
328  if ($(window).width() > 767) {
329    refreshMap();
330  }
331});