Difference between revisions of "HQ:2021"
| Line 830: | Line 830: | ||
<div class="column full_image"> | <div class="column full_image"> | ||
| + | <select class="styled_select timezone_converter" id="timezone_converter"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</select> | </select> | ||
| − | |||
| − | < | + | |
| − | + | <table> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | / | + | <tr> |
| − | + | <th>Date </th> | |
| − | + | <th>#</th> | |
| − | + | </tr> | |
| − | + | <tr> | |
| − | / | + | <td class="date_timezone">06,09,1000,30</td> |
| − | + | <td>1</td> | |
| − | + | </tr> | |
| − | + | ||
| − | + | <tr> | |
| − | + | <td class="date_timezone">06,09,0300,60</td> | |
| − | / | + | <td>2</td> |
| − | + | </tr> | |
| − | + | ||
| − | + | <tr> | |
| − | + | <td class="date_timezone">06,09,1300,60</td> | |
| − | + | <td>3</td> | |
| + | </tr> | ||
| + | <tr> | ||
| + | <td class="date_timezone">06,16,1000,30</td> | ||
| + | <td>4</td> | ||
| + | </tr> | ||
| + | |||
| + | <tr> | ||
| + | <td class="date_timezone">06,23,0300,60</td> | ||
| + | <td>5</td> | ||
| + | </tr> | ||
| + | |||
| + | <tr> | ||
| + | <td class="date_timezone">06,23,1300,60</td> | ||
| + | <td>6</td> | ||
| + | </tr> | ||
| + | |||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| Line 2,092: | Line 2,057: | ||
| + | //setup | ||
var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>"; | var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>"; | ||
let slide_counter=0; | let slide_counter=0; | ||
| Line 2,098: | Line 2,064: | ||
for( x=0; x< total_gallerys; x++ ){ | for( x=0; x< total_gallerys; x++ ){ | ||
| − | //add navigation buttons | + | //setup: add navigation buttons |
$('.gallery:eq('+x+') > .content').prepend(navigation); | $('.gallery:eq('+x+') > .content').prepend(navigation); | ||
| − | //count number of slides to add controls buttons | + | //setup: count number of slides to add controls buttons |
slide_counter = $('.gallery:eq('+x+') > .content > .slide').length; | slide_counter = $('.gallery:eq('+x+') > .content > .slide').length; | ||
| Line 2,117: | Line 2,083: | ||
gallery_ids[x] = $('.gallery.carousel:eq('+x+')').attr('id'); | gallery_ids[x] = $('.gallery.carousel:eq('+x+')').attr('id'); | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
//activate gallery controls and rotation function | //activate gallery controls and rotation function | ||
gallery_slides(gallery_ids); | gallery_slides(gallery_ids); | ||
| Line 2,202: | Line 2,165: | ||
} | } | ||
| − | |||
function clicking_gallerys(clicked_id, gallery_ids, type_of_click){ | function clicking_gallerys(clicked_id, gallery_ids, type_of_click){ | ||
| Line 2,273: | Line 2,235: | ||
return gallery_ids; | return gallery_ids; | ||
} | } | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | //if there is a time zone converter | ||
| + | if($("#timezone_converter").length){ | ||
| + | |||
| + | //global variables | ||
| + | var hold_all_dates = []; | ||
| + | var date_counter = 0; | ||
| + | |||
| + | |||
| + | //grab original dates | ||
| + | var grab_date; | ||
| + | var date_array; | ||
| + | |||
| + | //change dates to Boston timezone and collect all dates into a global variable | ||
| + | $('.date_timezone').each(function(i, obj) { | ||
| + | |||
| + | //get the date | ||
| + | grab_date = $(this).html(); | ||
| + | |||
| + | //change date to a number array | ||
| + | date_array = grab_date.split(',').map(Number); | ||
| + | |||
| + | //create an id for that specific date, we will use this later to append | ||
| + | $(this).attr('id', 'dt_'+date_counter); | ||
| + | |||
| + | //add to global variables | ||
| + | hold_all_dates[date_counter]=date_array; | ||
| + | date_counter++; | ||
| + | |||
| + | //clean the div and have it ready for the change | ||
| + | $(this).empty(); | ||
| + | |||
| + | //now append that date in Boston time: | ||
| + | $(this).append(change_time_zone(date_array[0],date_array[1],date_array[2],date_array[3],0)); | ||
| + | |||
| + | }); | ||
| + | |||
| + | |||
| + | //setup timezone select | ||
| + | var select_is_ready = false; | ||
| + | |||
| + | // DAYLIGHT SAVINGS TIME | ||
| + | select_is_ready = time_zone_dropdown('winter'); | ||
| + | |||
| + | //once timezone is ready, allow user to change time zones | ||
| + | if(select_is_ready){ | ||
| + | //if the user wants to change the timezone | ||
| + | $("#timezone_select").on("change", function(e) { | ||
| + | |||
| + | //get the timezone requested | ||
| + | var timezone_selected = $(this).val(); | ||
| + | var time_difference = parseInt(timezone_selected); | ||
| + | |||
| + | |||
| + | //empty all timezones getting ready for appending | ||
| + | $('.date_timezone').empty(); | ||
| + | |||
| + | //get each date_timezone by number id | ||
| + | for(x=0; x< date_counter; x++){ | ||
| + | |||
| + | $('#dt_'+x).append(change_time_zone(hold_all_dates[x][0], | ||
| + | hold_all_dates[x][1], | ||
| + | hold_all_dates[x][2], | ||
| + | hold_all_dates[x][3], | ||
| + | time_difference)); | ||
| + | |||
| + | } | ||
| + | |||
| + | }); | ||
| + | |||
| + | } | ||
| + | else{ | ||
| + | console.log('error with appending timezone select'); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | //////////////////////////////////////////////////////////// | ||
| + | //TIME ZONE CONVERTER | ||
| + | //time zone functions | ||
| + | //main function for switching time | ||
| + | function change_time_zone(month, day, time, duration, change){ | ||
| + | |||
| + | //holds days per month | ||
| + | const days_in_month = [31, 28, 31, 30, | ||
| + | 31, 30, 31, 31, | ||
| + | 30, 30, 30, 31]; | ||
| + | |||
| + | //maximum amount of days in the month we are in | ||
| + | var months_days_limit = days_in_month[month]; | ||
| + | |||
| + | //time event starts | ||
| + | var time_start = time + change; | ||
| + | |||
| + | //convert duration minutes in military format | ||
| + | if(duration%60 == 0){ | ||
| + | duration = (duration/60)*100; | ||
| + | } | ||
| + | else if( duration > 60){ | ||
| + | duration = (((duration / 60)|0)*100) + (duration % 60); | ||
| + | } | ||
| + | |||
| + | //add converted minutes | ||
| + | var time_end = time_start + duration; | ||
| + | |||
| + | //check if time_end needs to be adjusted | ||
| + | var time_end_minutes = time_end % 100; | ||
| + | |||
| + | if(time_end_minutes == 60){ | ||
| + | time_end = (time_end -60)+100; | ||
| + | } | ||
| + | else if(time_end_minutes > 60){ | ||
| + | //from those minutes, get how many hours | ||
| + | var sixty = ((time_end_minutes / 60)|0)*100; | ||
| + | |||
| + | //add hours plus minutes in military format | ||
| + | time_end_minutes = sixty + ((time_end % 100) - 60); | ||
| + | |||
| + | //get the final time end by adding the correct minute convertion | ||
| + | time_end = (time_start - (time_start % 100)) + time_end_minutes; | ||
| + | } | ||
| + | |||
| + | //check if adjusted time change crosses the international date line | ||
| + | if(time_start >= 2400){ | ||
| + | |||
| + | time_start = time_start - 2400; | ||
| + | time_end = time_end - 2400; | ||
| + | |||
| + | day = day + 1; | ||
| + | } | ||
| + | |||
| + | if(time_start < 0){ | ||
| + | |||
| + | time_start = 2400 - time_start; | ||
| + | time_end = 2400 - time_end; | ||
| + | |||
| + | day = day - 1; | ||
| + | } | ||
| + | |||
| + | //check if the new day switches months | ||
| + | if(day > months_days_limit ){ | ||
| + | month = month + 1; | ||
| + | day = day - months_days_limit; | ||
| + | } | ||
| + | if(day <= 0 ){ | ||
| + | month = month - 1; | ||
| + | day = days_in_a_month[month]; | ||
| + | } | ||
| + | |||
| + | //style date and time | ||
| + | var date_changed = month_day_for_display(month, day)+", " | ||
| + | +hour_for_display(time_start)+" - " | ||
| + | +hour_for_display(time_end); | ||
| + | |||
| + | //return date changed and styled | ||
| + | return date_changed; | ||
| + | } | ||
| + | |||
| + | //switch hours from 24 to 12 format | ||
| + | function switch_hours(hour){ | ||
| + | |||
| + | let converted_hour = 12; | ||
| + | |||
| + | switch(hour){ | ||
| + | case 13: | ||
| + | converted_hour = 1; | ||
| + | break; | ||
| + | case 14: | ||
| + | converted_hour = 2; | ||
| + | break; | ||
| + | case 15: | ||
| + | converted_hour = 3; | ||
| + | break; | ||
| + | case 16: | ||
| + | converted_hour = 4; | ||
| + | break; | ||
| + | case 17: | ||
| + | converted_hour = 5; | ||
| + | break; | ||
| + | case 18: | ||
| + | converted_hour = 6; | ||
| + | break; | ||
| + | case 19: | ||
| + | converted_hour = 7; | ||
| + | break; | ||
| + | case 20: | ||
| + | converted_hour = 8; | ||
| + | break; | ||
| + | case 21: | ||
| + | converted_hour = 9; | ||
| + | break; | ||
| + | case 22: | ||
| + | converted_hour = 10; | ||
| + | break; | ||
| + | case 23: | ||
| + | converted_hour = 11; | ||
| + | break; | ||
| + | } | ||
| + | |||
| + | return converted_hour; | ||
| + | } | ||
| + | |||
| + | //make months + days look nice | ||
| + | function month_day_for_display(month, day){ | ||
| + | |||
| + | const months_array =['January','February','March','April','May','June', | ||
| + | 'July','August','September','October','November','December' ]; | ||
| + | |||
| + | //return month | ||
| + | return (months_array[month-1]+" "+day); | ||
| + | |||
| + | } | ||
| + | |||
| + | //make hours and minutes look nice | ||
| + | function hour_for_display(hour_x){ | ||
| + | |||
| + | //store hours, minutes and midday for time start and time end | ||
| + | var hour_obj ={hours:0, minutes:0, midday:"AM"}; | ||
| + | |||
| + | //get hours | ||
| + | hour_obj.hours = (hour_x / 100)|0; | ||
| + | |||
| + | //check if PM, (by default its AM) | ||
| + | if(hour_x > 1159){ | ||
| + | |||
| + | hour_obj.midday = "PM"; | ||
| + | hour_obj.hours = switch_hours((hour_x / 100)|0); | ||
| + | } | ||
| + | |||
| + | //get minutes | ||
| + | hour_obj.minutes = hour_x%100; | ||
| + | |||
| + | |||
| + | //if minutes are 0, change to 00 for displaying | ||
| + | if(hour_obj.minutes < 10){ | ||
| + | hour_obj.minutes = "0" + hour_obj.minutes; | ||
| + | } | ||
| + | |||
| + | return (hour_obj.hours+":"+hour_obj.minutes+" "+hour_obj.midday); | ||
| + | } | ||
| + | |||
| + | //append the values for the time zone select dropdown | ||
| + | function time_zone_dropdown(season){ | ||
| + | |||
| + | //list of all the ids for the UTC time zones we display | ||
| + | const utcs_ids = ["UTC_minus_12","UTC_minus_11","UTC_minus_10","UTC_minus_09","UTC_minus_08", | ||
| + | "UTC_minus_07","UTC_minus_06","UTC_minus_05' selected='selected","UTC_minus_04" ,"UTC_minus_03", | ||
| + | "UTC_minus_02","UTC_minus_01","UTC_0","UTC_plus_01","UTC_plus_02","UTC_plus_03", | ||
| + | "UTC_plus_04","UTC_plus_05","UTC_plus_06","UTC_plus_07","UTC_plus_08","UTC_plus_09", | ||
| + | "UTC_plus_10","UTC_plus_11","UTC_plus_12","UTC_plus_13","UTC_plus_14"]; | ||
| + | |||
| + | //list of all the UTC names of time zones | ||
| + | var utcs_names =["UTC -12", "UTC -11", "UTC -10","UTC -09", "UTC -08", | ||
| + | "UTC -07","UTC -06","UTC -05","UTC -04 (EDT)","UTC -03", | ||
| + | "UTC -02","UTC -01", "UTC 0","UTC +01 (CET)","UTC +02 ","UTC +03", | ||
| + | "UTC +04","UTC +05","UTC +06","UTC +07 ","UTC +08 (CST) ","UTC +09", | ||
| + | "UTC +10","UTC +11","UTC +12","UTC +13","UTC +14"]; | ||
| + | |||
| + | //by default its daylight savings time - | ||
| + | //this will determine the difference between Boston and other UTCs | ||
| + | let utc_value = -800; | ||
| + | |||
| + | if (season == 'winter'){ | ||
| + | utc_value = -700; | ||
| + | |||
| + | utcs_names[7] = 'UTC -05 (EST)'; | ||
| + | utcs_names[8] = 'UTC -04'; | ||
| + | } | ||
| + | |||
| + | //this will hold the options to append to the dropdown select | ||
| + | var timezone_values_str =''; | ||
| + | |||
| + | for(x=0; x<utcs_ids.length; x++){ | ||
| + | |||
| + | timezone_values_str = timezone_values_str+ | ||
| + | "<option id='"+ utcs_ids[x] +"' value='"+ utc_value +"'>"+ | ||
| + | utcs_names[x] + "</option>"; | ||
| + | |||
| + | utc_value = utc_value + 100; | ||
| + | } | ||
| + | |||
| + | |||
| + | //append the options | ||
| + | $("#timezone_select").append(timezone_values_str); | ||
| + | |||
| + | //its ready! | ||
| + | return true; | ||
| + | } | ||
| + | |||
}); | }); | ||
</SCRIPT> | </SCRIPT> | ||
Revision as of 15:51, 12 January 2021
| Date | # |
|---|---|
| 06,09,1000,30 | 1 |
| 06,09,0300,60 | 2 |
| 06,09,1300,60 | 3 |
| 06,16,1000,30 | 4 |
| 06,23,0300,60 | 5 |
| 06,23,1300,60 | 6 |