https://www.brownpapertickets.com/j/policy_modal.js

1let PolicyLink = (function() {
2  let modal_close_button_id = 'modal_close_btn';
3
4  let buyer_terms_link_class = 'buyer_terms_link';
5  let seller_terms_link_class = 'seller_terms_link';
6  let privacy_link_class = 'privacy_link';
7  let cookie_link_class = 'cookie_link';
8  let copyright_link_class = 'copyright_link';
9
10  let buyer_terms_page_id = 'buyer_terms';
11  let seller_terms_page_id = 'seller_terms';
12  let privacy_page_id = 'privacy_policy';
13  let cookie_page_id = 'cookie_policy';
14  let copyright_page_id = 'copyright_policy';
15
16  let modal_container_class_name = 'modal_container';
17  let modal_overlay_class_name = 'modal_overlay';
18
19  function elementHasClass (element, class_name) {
20    if (element.classList) {
21      return element.classList.contains(class_name);
22    } else {
23      return new RegExp('(^| )' + class_name + '( |$)', 'gi').test(element.class_name);
24    }
25  }
26
27  // Remove Nav links from pages that have not been loaded via the XMLHttpRequest
28  function removeNavLinksAndSetDefaultView(navLinkPages) {
29    let visible_pages = [];
30    let page_count = 0;
31    for (var nav_link in navLinkPages) {
32      if (!navLinkPages[nav_link]) {
33        let these_links = Array.prototype.slice.call(document.getElementsByClassName(nav_link+'_link'));
34        these_links.forEach(function(link) {
35          //this will remove the LI tag that contains the A tag
36          //start with A tag. find parent (LI tag). find parent (UL tag). remove child (A's LI tag)
37          link.parentNode.parentNode.removeChild(link.parentNode);
38        });
39      } else {
40        page_count++; //counting the number of pages
41        //create an array of visible pages
42        visible_pages.push(navLinkPages[nav_link]);
43      }
44    }
45    //look through array of visible pages and only display the first one. Hide the others via CSS
46    visible_pages.forEach(function(page, index) {
47      if (index === 0) {
48        page.style.display = 'block';
49      } else {
50        page.style.display = 'none';
51      }
52    });
53    //if only one page is passed in as a parameter from init(), remove the entire <nav> element since there's no other pages to link to within the modal
54    if (page_count === 1) {
55      let nav_elmement = document.getElementById('policy_nav');
56      nav_elmement.parentNode.removeChild(nav_elmement);
57      document.getElementById('policy_content').style.width = '100%';
58    }
59  }
60
61  function innerLinkEventListeners(element) {
62    let buyer_terms_page = document.getElementById(buyer_terms_page_id) ? document.getElementById(buyer_terms_page_id).parentNode : null;
63    let seller_terms_page = document.getElementById(seller_terms_page_id) ? document.getElementById(seller_terms_page_id).parentNode : null;
64    let privacy_page = document.getElementById(privacy_page_id) ? document.getElementById(privacy_page_id).parentNode : null;
65    let cookie_page = document.getElementById(cookie_page_id) ? document.getElementById(cookie_page_id).parentNode : null;
66    let copyright_page = document.getElementById(copyright_page_id) ? document.getElementById(copyright_page_id).parentNode : null;
67    let navLinkPages = {
68      buyer_terms: buyer_terms_page,
69      seller_terms: seller_terms_page,
70      privacy: privacy_page,
71      cookie: cookie_page,
72      copyright: copyright_page,
73    };
74    //We're assuming these pages exist. If they don't, we need to hide the nav links from the pages that ARE loaded in.
75    removeNavLinksAndSetDefaultView(navLinkPages);
76    let modal_links = element.getElementsByTagName('a');
77    let link_arr = Array.prototype.slice.call(modal_links);
78    let buyer_terms_links = [];
79    let seller_terms_links = [];
80    let privacy_links = [];
81    let cookie_links = [];
82    let copyright_links = [];
83    // Scan page and create arrays of links for each page
84    link_arr.forEach(function(link) {
85      if (elementHasClass(link, buyer_terms_link_class)) {
86        buyer_terms_links.push(link);
87      } else if (elementHasClass(link, seller_terms_link_class)) {
88        seller_terms_links.push(link);
89      } else if (elementHasClass(link, privacy_link_class)) {
90        privacy_links.push(link);
91      } else if (elementHasClass(link, cookie_link_class)) {
92        cookie_links.push(link);
93      } else if (elementHasClass(link, copyright_link_class)) {
94        copyright_links.push(link);
95      }
96    });
97    // Clicking on the buyer terms link show the terms and conditions page and hides the other pages
98    buyer_terms_links.forEach(function(link){
99      link.addEventListener('click', function(e) {
100        e.preventDefault();
101        e.stopPropagation();
102        if(buyer_terms_page) {
103          buyer_terms_page.style.display = 'block';
104        }
105        if(seller_terms_page) {
106          seller_terms_page.style.display = 'none';
107        }
108        if(privacy_page) {
109          privacy_page.style.display = 'none'
110        }
111        if(cookie_page) {
112          cookie_page.style.display = 'none'
113        }
114        if(copyright_page) {
115          copyright_page.style.display = 'none'
116        }
117      }, false);
118    });
119    // Clicking on the seller terms link show the terms and conditions page and hides the other pages
120    seller_terms_links.forEach(function(link){
121      link.addEventListener('click', function(e) {
122        e.preventDefault();
123        e.stopPropagation();
124        if(buyer_terms_page) {
125          buyer_terms_page.style.display = 'none';
126        }
127        if(seller_terms_page) {
128          seller_terms_page.style.display = 'block';
129        }
130        if(privacy_page) {
131          privacy_page.style.display = 'none'
132        }
133        if(cookie_page) {
134          cookie_page.style.display = 'none'
135        }
136        if(copyright_page) {
137          copyright_page.style.display = 'none'
138        }
139      }, false);
140    });
141    // Clicking on the privacy link show the privacy policy page and hides the other pages
142    privacy_links.forEach(function(link){
143      link.addEventListener('click', function(e) {
144        e.preventDefault();
145        e.stopPropagation();
146        if(buyer_terms_page) {
147          buyer_terms_page.style.display = 'none';
148        }
149        if(seller_terms_page) {
150          seller_terms_page.style.display = 'none';
151        }
152        if(privacy_page) {
153          privacy_page.style.display = 'block';
154        }
155        if(cookie_page) {
156          cookie_page.style.display = 'none'
157        }
158        if(copyright_page) {
159          copyright_page.style.display = 'none'
160        }
161      }, false);
162    });
163    // Clicking on the cookies link show the cookies page and hides the other pages
164    cookie_links.forEach(function(link){
165      link.addEventListener('click', function(e) {
166        e.preventDefault();
167        e.stopPropagation();
168        if(buyer_terms_page) {
169          buyer_terms_page.style.display = 'none';
170        }
171        if(seller_terms_page) {
172          seller_terms_page.style.display = 'none';
173        }
174        if(privacy_page) {
175          privacy_page.style.display = 'none';
176        }
177        if(cookie_page) {
178          cookie_page.style.display = 'block';
179        }
180        if(copyright_page) {
181          copyright_page.style.display = 'none';
182        }
183      }, false);
184    });
185    // Clicking on the copyright link show the copyright page and hides the other pages
186    copyright_links.forEach(function(link){
187      link.addEventListener('click', function(e) {
188        e.preventDefault();
189        e.stopPropagation();
190        if(buyer_terms_page) {
191          buyer_terms_page.style.display = 'none';
192        }
193        if(seller_terms_page) {
194          seller_terms_page.style.display = 'none';
195        }
196        if(privacy_page) {
197          privacy_page.style.display = 'none'
198        }
199        if(cookie_page) {
200          cookie_page.style.display = 'none'
201        }
202        if(copyright_page) {
203          copyright_page.style.display = 'block'
204        }
205      }, false);
206    });
207  }
208
209  // Closes modal when you click the X button
210  function closeButtonEventListener(modal, overlay) {

211    let close_btn = document.getElementById(modal_close_button_id);
212    close_btn.addEventListener('click', function() {
213      modal.parentNode.removeChild(modal);
214      overlay.parentNode.removeChild(overlay);
215    }, false);
216    overlay.addEventListener('click', function() {
217      modal.parentNode.removeChild(modal);
218      overlay.parentNode.removeChild(overlay);
219    }, false);
220  }
221
222  // Creates modal window and the background "overlay"
223  // populates the modal with content from the loaded pages
224  function launchModal(text) {
225    let overlay = document.createElement('div');
226    let modal = document.createElement('div');
227    modal.className = modal_container_class_name;
228    overlay.className = modal_overlay_class_name;
229    let page_body = document.getElementsByTagName('body');
230    page_body[0].appendChild(overlay);
231    page_body[0].appendChild(modal);
232    let modal_inner_html = `<div id='${modal_close_button_id}'>X</div><div class='scroll_container'>${text.join('')}</div>`;
233    modal.innerHTML = modal_inner_html;
234    innerLinkEventListeners(modal);
235    closeButtonEventListener(modal, overlay);
236  }
237
238  function loadPolicyPage(html_array) {
239    var request = new XMLHttpRequest();
240    let url_array = html_array;
241    let final_text = [];
242    url_array.forEach(function(this_url) {
243      request.open('GET', this_url, false);
244      request.onload = () => {
245        if (request.status >= 200 && request.status < 400) {
246          // Success!
247          // console.log('SUCCESSFUL SERVER RESPONSE!', request)
248          final_text.push(request.responseText);
249        } else {
250          // We reached our target server, but it returned an error
251          // console.log('SERVER RETURNED AN ERROR');
252        }
253      };
254      request.onerror = () => {
255        // There was a connection error of some sort
256        // console.log('THERE WAS A CONNECTION ERROR');
257      };
258      request.send(null);
259    });
260    launchModal(final_text);
261  }
262
263  function startEventListener(arr, buttonID) {
264    let this_button = document.getElementById(buttonID);
265    this_button.addEventListener('click', function(e){
266      e.preventDefault();
267      e.stopPropagation();
268      loadPolicyPage(arr);
269    }, false);
270  };
271
272  return {
273    init(arr, buttonID) {
274      startEventListener(arr, buttonID);
275    }
276  }
277})();