https://thefpl.us/assets/js/thefplus.min.js?updated=2020-09-11b

1// jshint -W117
2
3
4
5
6// This is the markup for the modal.
7// Generate the markup    
8const markupOpen = `
9<div id="ImageModal" class="image-modal">
10  <div class="image-modal-outer">
11    <div class="image-modal-dropsheet" id="ImageModalDropsheet"></div>
12    <div class="image-modal-inner">
13      <button class="close-modal" id="CloseModal">
14        <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
15          <path d="M16 17a1 1 0 01-.707-.293l-8-8a1 1 0 111.414-1.414l8 8A1 1 0 0116 17z"/>
16          <path d="M8 17a1 1 0 01-.707-1.707l8-8a1 1 0 111.414 1.414l-8 8A1 1 0 018 17z"/>
17        </svg>
18      </button>`;
19
20const markupClose =`
21    </div>
22  </div>
23</div>`;
24
25
26
27
28
29
30function trackEvent(c, a, l, v) {
31  if (v) {
32    _paq.push(['trackEvent', c, a, l, v]);
33    //ga('send', 'event', { eventCategory: c, eventAction: a, eventLabel: l, eventValue:v });
34    //console.log('CATEGORY: '+c+', ACTION:'+a+', LABEL:'+l+', VALUE:'+v);
35  } else if (l) {
36    _paq.push(['trackEvent', c, a, l]);
37    //ga('send', 'event', { eventCategory: c, eventAction: a, eventLabel: l });
38    //console.log('CATEGORY: '+c+', ACTION:'+a+', LABEL:'+l);
39  } else {
40    _paq.push(['trackEvent', c, a]);
41    //ga('send', 'event', { eventCategory: c, eventAction: a });
42    //console.log('CATEGORY: '+c+', ACTION:'+a);
43  }
44}
45
46var p = window.location.pathname;
47if (p == "/episode/random") {
48  p = '/episode/'+ $('h1 .episode-number').text() + ' (RANDOM)';
49}
50var episodePlayed = false;
51
52
53$(document).ready(function() {
54
55
56  // Hide/Show the merch count, depending on if you've seen the merch page this session.
57  if (typeof(Storage) !== "undefined") {
58    // Code for localStorage/sessionStorage.
59    if (sessionStorage.merchVisited) {
60      // You've clicke the merch link this session.
61    } else {
62      $('.main-link .count').addClass('visible');
63    }
64    
65    $('.merch-link').click(function() {
66      sessionStorage.setItem('merchVisited', 'true');
67    });
68    
69  } else {
70    // There's no web storage
71    $('.main-link .count').addClass('visible');
72  }
73
74
75
76
77  $('.logo-link').click(function() {
78    $(this).toggleClass('active');
79    $('.sidebar-links').toggleClass('active');
80  });
81
82  $('a.flapjax').click(function() {
83    $('a.flapjax').toggleClass('active');
84    $('.sidebar').toggleClass('visible');
85    $('main').toggleClass('noscroll');
86  });
87  
88  $('#SidebarSearchForm').submit(function() {
89    var s = $('#SidebarSearch').val();
90    var url = "https://thefpl.us/search?q="+s;
91    window.location = url;
92    preventDefault();
93  });
94  
95  $('#SidebarSearch').keydown(function(e) {
96    if (e.keyCode == 13) {
97      var s = $('#SidebarSearch').val();
98      var url = "https://thefpl.us/search?q="+s;
99      window.location = url;
100      e.preventDefault();
101    }
102  });
103
104
105  // FOR THE /fanart page
106  $('.full-fanart-link').click(function() {
107    let src = $(this).attr('full-size');
108
109    let artistName = $(this).attr('artist');
110    let artistPage = $(this).attr('artist-page');
111    let episodeTitle = $(this).attr('episode-title');
112    let episodeURL = $(this).attr('episode-url');
113    let fullWidth = $(this).attr('full-width');
114    let fullHeight = $(this).attr('full-height');
115
116    let altText = $(this).children('img').attr('alt');
117
118    let imgElement;
119    if (fullWidth && fullHeight) {
120      imgElement = `<figure><img src="${src}" alt="${altText}" width="${fullWidth}" height="${fullHeight}" /></figure>`;
121    } else {
122      imgElement = '<figure><img src="'+src+'" alt="'+altText+'" /></figure>';
123    }
124    let figcaption = '<figcaption>';
125
126    // Display Artist
127    if (artistPage) {
128      figcaption += '<p>Artist: <a href="'+artistPage+'">'+artistName+'</a></p>';
129    } else if (artistName) {
130      figcaption += '<p>Artist: <strong>'+artistName+'</strong></p>';
131    }
132
133    // Display Episode
134    if (episodeURL) {
135      figcaption += '<p>Episode: <a href="'+episodeURL+'">'+episodeTitle+'</a></p>';
136    } else if (episodeTitle) {
137      figcaption += '<p>Episode <strong>'+episodeTitle+'</strong></p>';
138    }
139    figcaption += '</figcaption>';
140
141    
142
143    let markup = "";
144    
145    markup += markupOpen;
146    markup += imgElement;
147    markup += figcaption;
148    markup += markupClose;
149
150    $('body').append(markup);
151  });
152
153
154  $('.zoom-photo').click(function() {
155    let src = $(this).attr('full-size');
156    let altText =$(this).children('img').attr('alt');
157    
158    let fullWidth = $(this).attr('full-width');
159    let fullHeight = $(this).attr('full-height');
160
161    let imgElement;
162    if (fullWidth && fullHeight) {
163      imgElement = `<figure><img src="${src}" alt="${altText}" width="${fullWidth}" height="${fullHeight}" /></figure>`;
164    } else {
165      imgElement = '<figure><img src="'+src+'" alt="'+altText+'" /></figure>';
166    }
167
168    let markup = "";
169    markup += markupOpen;
170    markup += imgElement;
171    markup += markupClose;
172    $('body').append(markup);
173  });
174
175
176  // Handling social links (popups and corresponding analytics)
177  $('a.social').click(function(event) { 
178    if ( $(this).hasClass('contribute') ) {
179      trackEvent("Contribute", "page link", p);
180    } else if ( $(this).hasClass('twitter') ) {
181      trackEvent("share", "Twitter", p);
182      window.open($(this).attr("href"), "popupWindow", "width=550,height=440");
183      event.preventDefault();
184    } else if ( $(this).hasClass('facebook') ) {
185      trackEvent("share", "Facebook", p);
186      window.open($(this).attr("href"), "popupWindow", "width=550,height=450");
187      event.preventDefault();
188    } else if ( $(this).hasClass('tumblr') ) {
189      trackEvent("share", "tumblr", p);
190    } else if ( $(this).hasClass('reddit') ) {
191      trackEvent("share", "Reddit", p);
192    } else if ( $(this).hasClass('github') ) {
193      trackEvent("outside link", "GitHub", p);
194    } else if ( $(this).hasClass('googleplus') ) {
195      trackEvent("share", "Google+", p);
196      window.open($(this).attr("href"), "popupWindow", "width=550,height=650");
197      event.preventDefault();
198    }
199  });
200
201  // Read a document
202  $('a.action.read').click(function() {
203    trackEvent("read document", "document", p);
204  });
205
206  // Visit ballpit thread
207  $('a.action.ballpit').click(function() {
208    trackEvent("ballpit thread", "ballpit", p);
209  });
210
211  // Use donation form.
212  $('#DonateButton').click(function() {
213    var d = "$" + $('#DonationAmount').val();
214    var v = $('#DonationAmount').val();
215    trackEvent("donate", "PayPal", d, v);
216  });
217
218});
219
220
221$(document).on('click', '#CloseModal', function() {
222  $('#ImageModal').remove();
223});
224$(document).on('click', '#ImageModalDropsheet', function() {
225  $('#ImageModal').remove();
226});
227
228
229/*
230// Play an episode
231$('audio').on('play', function(){
232  if (episodePlayed === false) {
233    trackEvent("listen", "play", p);
234    episodePlayed = true;
235  }
236});
237
238// Download an episode
239$('a.action.download').click(function() {
240  trackEvent("listen", "download", p);
241});
242*/
243
244// Are you on the meet page?
245if (window.location.pathname == "/meet" || window.location.pathname == "/meet/" || window.location.pathname == "/thefplus/meet") {
246
247  // If so, let's get the variables of your page and the search variables.
248  var meetPage = "";
249  if (window.location.pathname == "/meet" || window.location.pathname == "/meet/") {
250    meetPage = "/meet";
251  } else if (window.location.pathname == "/thefplus/meet") {
252    meetPage = "/thefplus/meet";
253  }
254
255  let visiblePeople = [];
256
257  if (!window.location.search) {
258    visiblePeople.push('regular');
259  }
260
261  $(document).ready(function (e) {
262
263    // Okay, on page load, if you've got a query string, let's read that and hide/show people accordingly.
264    if (window.location.search) {
265      visiblePeople = window.location.search.replace('?','').split(",");
266      console.log(visiblePeople);
267  
268      if (!visiblePeople.includes('regular')) {
269        $('.regular').addClass('hidden');
270        $('a[data-for="regular"]').removeClass('active');
271      }
272
273      visiblePeople.forEach(function(p) {
274        $('.'+p).removeClass('hidden');
275        $('a[data-for="'+p+'"]').addClass('active');
276        console.log(p+ ' are visible');
277      });
278
279    }
280
281    // And then if you click a toggle, let's hide/show that group of people
282    // and also pushState your new query.
283    $('.toggle a').click(function() {
284      console.log(visiblePeople);
285      $(this).toggleClass('active');
286      var n = $(this).attr('data-for');
287      if ($(this).hasClass('active')) {
288        visiblePeople.push(n);
289        $('.'+n).removeClass('hidden hide').addClass('show');
290      } else {
291        visiblePeople = visiblePeople.filter(item => item !== n);
292        $('.'+n).removeClass('hidden show').addClass('hide');
293        setTimeout(function(){ $('.'+n).addClass('hidden'); }, 700);
294      }
295      if (visiblePeople.length > 0) {
296        history.pushState(null, null, meetPage + '?' + visiblePeople.toString());
297      } else {
298        history.pushState(null, null, meetPage);
299      }
300    });
301  });
302  
303}