https://mccc-db.org/layout.js

1$( document ).ready(function() {
2
3  const monthNames = ["January", "February", "March", "April", "May", "June",
4    "July", "August", "September", "October", "November", "December"
5  ];
6
7  date = new Date();
8  year = date.getFullYear();
9  month = monthNames[date.getMonth()];
10  day = date.getDate();
11  document.getElementById("current_date").innerHTML = month + " " + day + ", " + year;
12      
13  $.ajax({
14    type: 'POST',
15    url: 'cgi-bin/count_files.php',
16    dataType:"json",
17    success: function(response){
18      document.getElementById("fileCounter").innerHTML = response.toLocaleString();
19      $("#fileCounterMessage").removeClass('hide');
20    ; },
21    async: false
22  }); //end 
23
24 $(".js-example-basic-single").select2();
25  
26  navigator.sayswho= (function(){
27    var ua= navigator.userAgent;
28    var tem;
29    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
30    if(/trident/i.test(M[1])){
31        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
32        return 'IE '+(tem[1] || '');
33    }
34    if(M[1]=== 'Chrome'){
35        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
36        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
37    }
38    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
39    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
40    return M.join(' ');
41  })();
42
43if (!Modernizr.cssgrid)
44{
45  console.log('cssgrid not supported');
46  $("#container").addClass('hide');
47  $("#mainLogin").addClass('hide');
48  document.getElementById('currBrowser').innerHTML = navigator.sayswho;
49  $("#compatError").removeClass('hide');
50  console.log(navigator.sayswho);
51}
52else
53{
54  console.log('cssgrid supported');
55
56  // Add placeholders to all selects
57
58  $(".dbViews").addClass('hide');
59  $("#contactView").addClass('hide');
60  $("#aboutView").addClass('hide');
61  $("#refView").addClass('hide');
62  $(".nav-button").addClass('nav-button-unselected');
63  $("#homeButton").addClass('nav-button-selected');
64  
65  // Initially select the HOME button
66  $("#homeButton").removeClass('nav-button-unselected');
67  if(window.innerWidth < 1040)
68  {
69    $("#homeButton").addClass('nav-button-selected-mini');
70  }
71  else
72  {
73    $("#homeButton").addClass('nav-button-selected-main');
74  }
75
76  setLayout();
77
78  $(".nav-button").click(function() {
79    $(".nav-button").removeClass('nav-button-selected').removeClass('nav-button-selected-main').removeClass('nav-button-selected-mini');
80    $(".nav-button").addClass('nav-button-unselected');
81    $(this).removeClass('nav-button-unselected');
82    $(this).addClass('nav-button-selected');
83    if(window.innerWidth < 1040)
84    {
85      $(this).addClass('nav-button-selected-mini');
86    }
87    else
88    {
89      $(this).addClass('nav-button-selected-main');
90    }
91    $(".dbViews").addClass('hide');
92    $("#contactView").addClass('hide');
93    $("#aboutView").addClass('hide');
94    $("#refView").addClass('hide');
95    $(".home-container").addClass('hide');
96    $("#mainbar").removeClass('mainbar-mini-db');
97  });
98
99  $("#homeButton").click(     function() {$(".home-container").removeClass('hide');}    );
100  $("#dbButton").click(       function() {
101    $(".dbViews").removeClass('hide');
102    $(".mainbar-mini").addClass('mainbar-mini-db');
103    if(window.innerWidth >= 1040) { $("#container").addClass("container-main"); }
104  });
105  $("#startButton").click(function() {
106    $(".nav-button").removeClass('nav-button-selected').removeClass('nav-button-selected-main').removeClass('nav-button-selected-mini');
107    $(".nav-button").addClass('nav-button-unselected');
108    $(".home-container").addClass('hide');
109    $(".dbViews").removeClass('hide');
110    $("#dbButton").removeClass('nav-button-unselected');
111    $("#dbButton").addClass('nav-button-selected');
112    $(".mainbar-mini").addClass('mainbar-mini-db');
113    if(window.innerWidth < 1040)
114    {
115      $("#dbButton").addClass('nav-button-selected-mini');
116    }
117    else
118    {
119      $("#dbButton").addClass('nav-button-selected-main');
120      $("#container").addClass("container-main");
121    }
122  });
123  $("#contactButton").click(  function() {$("#contactView").removeClass('hide');} );
124  $("#aboutButton").click(  function() {$("#aboutView").removeClass('hide');} );
125  $("#refButton").click(  function() {$("#refView").removeClass('hide');} );
126  $("#howToRefButton").click(  function() {} );
127  $("#howToRefButton").click(function() {
128    $(".nav-button").removeClass('nav-button-selected').removeClass('nav-button-selected-main').removeClass('nav-button-selected-mini');
129    $(".nav-button").addClass('nav-button-unselected');
130    $("#refButton").removeClass('nav-button-unselected');
131    $("#refButton").addClass('nav-button-selected');

132    if(window.innerWidth < 1040)
133    {
134      $("#refButton").addClass('nav-button-selected-mini');
135    }
136    else
137    {
138      $("#refButton").addClass('nav-button-selected-main');
139    }
140    $(".dbViews").addClass('hide');
141    $("#contactView").addClass('hide');
142    $("#aboutView").addClass('hide');
143    $("#refView").addClass('hide');
144    $(".home-container").addClass('hide');
145    $("#mainbar").removeClass('mainbar-mini-db');
146    $("#refView").removeClass('hide');
147  });
148  
149  window.onresize = function() {setLayout();}
150  
151  $(".plotMenu-button").click( function() {
152    $(".plotMenu-button").removeClass('plotMenu-button-selected').addClass('plotMenu-button-unselected');
153    $(this).removeClass('plotMenu-button-unselected').addClass('plotMenu-button-selected');
154  });
155  $("#plotButton").click( function() {
156    $("#plotView").show();
157    $("#fileView").hide();
158    $("#fitsView").hide();
159  });
160  $("#fileButton").click( function() {
161    $("#plotView").hide();
162    $("#fileView").show();
163    $("#fitsView").hide();
164  });
165  $("#fitButton").click( function() {
166    $("#plotView").hide();
167    $("#fileView").hide();
168    $("#fitsView").show();
169  });
170
171  function setLayout() {
172    $("#projectileSelect").select2(       {placeholder: "projectile", width: "100%"});
173    $("#targetElSelect").select2(         {placeholder: "target", width: "48.89%"});
174    $("#targetSelect").select2(           {placeholder: "isotopologue", width: "48.89%"});
175    $("#processSelectDisplay").select2(   {placeholder: "collision process", width: "100%"});
176    $("#processSelectDownload").select2(  {placeholder: "collision process", width: "100%"});
177    $("#estiSelectDisplay").select2(      {placeholder: "electronic", width: "48.89%"});
178    $("#estiSelectDownload").select2(     {placeholder: "electronic", width: "48.89%"});
179    $("#vstiSelectDisplay").select2(      {placeholder: "vibrational", width: "48.89%"});
180    $("#vstiSelectDownload").select2(     {placeholder: "vibrational", width: "48.89%"});
181    $("#estfSelectDisplay").select2(      {placeholder: "electronic", width: "48.89%"});
182    $("#vstfSelectDisplay").select2(      {placeholder: "vibrational", width: "48.89%"});
183    $("#nstiSelectDisplay").select2(      {placeholder: "initial", width: "48.89%"});
184    $("#nstfSelectDisplay").select2(      {placeholder: "final", width: "48.89%"});
185    
186    minWidth = 700
187    
188    if(window.innerWidth < minWidth)
189    {
190      document.body.style.transform = 'scale('+window.innerWidth/minWidth+')'
191      document.body.style.transformOrigin = '0 0';
192    }
193    
194    if(window.innerWidth < 1040)
195    {
196      setMiniLayout();
197    }
198    else
199    {
200      setMainLayout();
201    }
202  }
203
204  function setMainLayout() {
205    if($("#dbButton").hasClass('nav-button-selected')) { 
206      $("#container").addClass("container-main");
207    }
208    $("#mainbar").removeClass("mainbar-mini").removeClass("mainbar-mini-db").addClass("mainbar-main");
209    $("#refbar").removeClass("refbar-mini").addClass("refbar-main");
210    $(".card").removeClass("card-mini").addClass("card-main");
211    $("#systemCard").removeClass("system-card-mini").addClass("system-card-main");
212    $("#downloadCard").removeClass("download-card-mini").addClass("download-card-main");
213    $("#displayCard").removeClass("display-card-mini").addClass("display-card-main");
214    $("#container").removeClass("container-mini").addClass("container-main");
215    $("#headerContainer").removeClass("header-container-mini").addClass("header-container-main");
216    $(".sidebar").removeClass("sidebar-mini").addClass("sidebar-main");
217    $(".nav-button-selected").removeClass("nav-button-selected-mini").addClass("nav-button-selected-main");
218    $(".nav-button").removeClass("nav-button-mini");
219    $("#mainTitle").removeClass("main-title-mini").addClass("main-title-main");
220    $("#mainLogin").removeClass("main-login-mini").addClass("main-login-main");
221    $("#help-tip-system").removeClass("help-tip-minisys");
222    document.getElementById('dbInfo').innerHTML = "<br>Use the controls on the right to display or download data"
223  }
224  
225  function setMiniLayout() {
226    if($("#dbButton").hasClass('nav-button-selected')) { 
227      $("#mainbar").addClass("mainbar-mini-db");
228    }
229    $("#mainbar").removeClass("mainbar-main").addClass("mainbar-mini");
230    $("#refbar").removeClass("refbar-main").addClass("refbar-mini");
231    $(".card").removeClass("card-main").addClass("card-mini");
232    $("#systemCard").removeClass("system-card-main").addClass("system-card-mini");
233    $("#downloadCard").removeClass("download-card-main").addClass("download-card-mini");
234    $("#displayCard").removeClass("display-card-main").addClass("display-card-m

234ini");
235    $("#container").removeClass("container-main").removeClass("container-main").addClass("container-mini");
236    $("#headerContainer").removeClass("header-container-main").addClass("header-container-mini");
237    $(".sidebar").removeClass("sidebar-main").addClass("sidebar-mini");
238    $(".nav-button-selected").removeClass("nav-button-selected-main").addClass("nav-button-selected-mini");
239    $(".nav-button").addClass("nav-button-mini");
240    $("#mainTitle").removeClass("main-title-main").addClass("main-title-mini");
241    $("#mainLogin").removeClass("main-login-main").addClass("main-login-mini");
242    document.getElementById('dbInfo').innerHTML = "<br>Use the controls above to display or download data"
243    $("#help-tip-system").addClass("help-tip-minisys");
244  }
245
246} // end cssgrid support if
247
248});