https://www.drought.gov/modules/custom/general_page_js_css/js/map-helpers/ol-counties.js?tlrx84

1/**
2 * @file Utilities to assist with County and County Equivalent features.
3 */
4(function (drupalSettings, mapsUtil) {
5  "use strict";
6
7  (function main() {
8    exportConfig();
9  })();
10
11  /**
12   * Creates the option displayed to the user when an option has not been selected.
13   * @param {string} abv - State abbreviation.
14   * @return {Element} The Option element.
15   * @private
16   */
17  function _makeBetaCountyDefaultOption(abv) {
18    const option = _createElement("option", "", "View " + makeCountyType(abv, false) + " maps");
19    option.setAttribute("selected", "selected");
20    option.setAttribute("hidden", "hidden");
21    option.setAttribute("disabled", "disabled");
22    option.className = "text-uppercase";
23    return option;
24  }
25
26  /**
27   * Creates the full county dropdown for state pages.
28   * @param {string} abv - Two letter abbreviation of state/territory.
29   * @param {[string]} counties - array of the names of the counties in the state.
30   * @return {Element} - Complete select element.
31   * @private
32   */
33  function _makeBetaCountyDropdown(abv, counties) {
34    let i, l;
35    const select = _makeCountyDropdown();
36    select.classList.add(
37      "mobile-lg:width-auto",
38      "height-full",
39      "minh-7",
40      "padding-left-2",
41      "padding-right-6",
42      "text-bold",
43      "text-uppercase",
44      "font-sans-md",
45      "u--color--light-blue",
46      "border-2px",
47      "u--border-active",
48      "radius-md",
49      "c--arrow-active",
50      "text-center"
51    );
52    select.appendChild(_makeBetaCountyDefaultOption(abv));
53    for (i = 0, l = counties.length; i < l; i++) {
54      select.appendChild(_makeCountyOption(counties[i]));
55    }
56    select.addEventListener("input", handleCountySelectInput);
57    return select;
58  }
59
60  /**
61   * Adds the dropdown to the map.
62   * @param {Element} wrapper - div parent of map with class interactive-map.
63   * @param {string} abv - State abbreviation
64   */
65  function addCountyDropdownToMap(wrapper, abv) {
66    if (
67      !drupalSettings.allCounties &&
68      (!drupalSettings.allWatershedCountiesWithState || !drupalSettings.allWatershedCountiesWithState.length)
69    ) {
70      return;
71    }
72
73    if (wrapper.closest(".paragraph--view-mode--cards")) {
74      return;
75    }
76
77    if (!abv) {
78      abv = "";
79    }
80
81    const counties = drupalSettings.allCounties || drupalSettings.allWatershedCountiesWithState;
82    const mapWrapper = wrapper.closest(".paragraph--view-mode--default");
83    if (!mapWrapper) {
84      return;
85    }
86    const buttonWrapper = mapWrapper.querySelector(".map-extra-link");
87    if (!buttonWrapper || buttonWrapper.childElementCount > 0) {
88      return;
89    }
90    const labelWrapper = _createElement("label", "", "");
91    const text = _createElement("div", "usa-sr-only", "View " + makeCountyType(abv, false) + " conditions");
92    const select = _makeBetaCountyDropdown(abv, counties);
93    labelWrapper.append(text, select);
94    buttonWrapper.appendChild(labelWrapper);
95  }
96
97  /**
98   * Creates the base Select element.
99   * @return {Element} - Base select element
100   */
101  function _makeCountyDropdown() {
102    const select = _createElement("select", "width-full", "");
103    if (drupalSettings.state_name) {
104      select.setAttribute("data-state", drupalSettings.state_name);
105    }
106    return select;
107  }
108
109  /**
110   * Generates the option element for a county.
111   * @param {{county: string, state: string}} val - Name of county
112   * @return {Element} - HTML Option element for a county.
113   */
114  function _makeCountyOption(val) {
115    let text = mapsUtil.uppercaseWords(val.county);
116
117    if (val.abv) {
118      text = text + ", " + val.abv.toUpperCase();
119    }
120    const option = _createElement("option", "text-capitalize text-base-darkest text-align-left", text);
121    option.value = val.county;
122
123    if (val.state) {
124      option.value = val.county + "," + val.state;
125    }
126
127    return option;
128  }
129
130  /**
131   * @param {Event} e - Input event
132   */
133  function handleCountySelectInput(e) {
134    e.preventDefault();
135    const target = e.target;
136    let state = target.getAttribute("data-state"),
137      county = target.value;
138
139    if (target.value.indexOf(",") !== -1) {
140      const splitStr = target.value.split(",");
141      county = splitStr[0];
142      state = splitStr[1];
143    }
144    if (!state || !county) {
145      return;
146    }
147    target.classList.add("text-capitalize");
148    triggerCountyChange(state, county);
149  }
150
151  /**
152   * Navigates to new county page
153   * @param {string} state - Machine name of state. Whitespace separated words.
154   * @param {string} county - Machine name of county. Whitespace separated words.
155   */
156  function triggerCountyChange(state, county) {

157    window.location.href = "/states/" + state + "/county/" + county;
158  }
159
160  /**
161   * Helper function to make DOM elements needed for this widget.
162   * @param {string} tag - The HTML tagname.
163   * @param {string} classes - Single string of classes for the element. Separate classes with whitespace.
164   * @param {string} text - Text Content for the element.
165   * @return {Element} - An HTML element
166   */
167  function _createElement(tag, classes, text) {
168    const elem = document.createElement(tag);
169    elem.className = classes;
170    elem.textContent = text;
171    return elem;
172  }
173
174  /**
175   * Determines the local name used for Counties and County Equivalents.
176   * @param {string} abv - Two letter state abbreviation.
177   * @param {boolean} properName - determines if the type should be capitalized
178   * @return {string} - Name of the type of area a 'County' is.
179   */
180  function makeCountyType(abv, properName) {
181    let name = "County";
182    abv = abv.toUpperCase();
183    if (abv === "AK") {
184      name = "Borough";
185    } else if (abv === "LA") {
186      name = "Parish";
187    } else if (abv === "PR") {
188      name = "Municipality";
189    } else if (abv === "CT") {
190      name = "Planning Region";
191    }
192
193    if (!properName) {
194      name = name.toLowerCase();
195    }
196
197    return name;
198  }
199
200  /**
201   * Exports functions.
202   */
203  function exportConfig() {
204    window.olCounties = {
205      addCountyDropdownToMap,
206      triggerCountyChange,
207      makeCountyType,
208    };
209  }
210})(window.drupalSettings, window.mapsUtil);