-
Notifications
You must be signed in to change notification settings - Fork 16
/
4_ebiFrameworkContent.js
462 lines (416 loc) · 21.7 KB
/
4_ebiFrameworkContent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
/**
* Utility method to get if it is IE, and what integer version.
* via: https://stackoverflow.com/a/15983064
* @returns {int} the IE version number
* @example if (isIE () && isIE () < 9) { }
*/
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
/**
* Utility function to toggle classes. Chiefly to show the #embl-bar.
*/
function ebiToggleClass(element, toggleClass){
var currentClass = element.className;
var newClass;
if(currentClass.split(" ").indexOf(toggleClass) > -1){ // has class
newClass = currentClass.replace(new RegExp('\\b'+toggleClass+'\\b','g'),"")
} else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass.trim();
}
/**
* Utility function to add classes (only once).
*/
function ebiActivateClass(element, cssClass){
element.classList.remove(cssClass);
element.classList.add(cssClass);
}
/**
* Utility function to remove classes.
*/
function ebiRemoveClass(element, cssClass){
element.classList.remove(cssClass);
}
/**
* Remove global-nav/global-nav-expanded from header/footer if body.no-global-nav is set
*/
function ebiFrameworkHideGlobalNav() {
try {
var hasGlobalMasthead = document.getElementById('masthead-black-bar') !== null;
var disabled = document.body.className.indexOf('no-global-nav') !== -1;
var elem;
if (hasGlobalMasthead && disabled) {
if ((elem=document.getElementById('global-nav')) !== null) {
elem.parentNode.removeChild(elem);
}
if ((elem=document.getElementById('global-nav-expanded')) !== null) {
elem.parentNode.removeChild(elem);
}
}
}
catch (err) {}
}
/**
* Assign global nav background images through meta tags
*/
function ebiFrameworkAssignImageByMetaTags() {
var masthead = document.getElementById('masthead');
// check for both ebi: and ebi- formatted meta tags
var mastheadColor = document.querySelector("meta[name='ebi:masthead-color']") || document.querySelector("meta[name='ebi-masthead-color']");
var mastheadImage = document.querySelector("meta[name='ebi:masthead-image']") || document.querySelector("meta[name='ebi-masthead-image']");
if (mastheadColor != null) {
masthead.style.backgroundColor = mastheadColor.getAttribute("content");
masthead.className += ' meta-background-color';
}
if (mastheadImage != null) {
masthead.style.backgroundImage = 'url(' + mastheadImage.getAttribute("content") + ')';
masthead.className += ' meta-background-image';
}
}
/**
* Populate `#masthead-black-bar`
*/
function ebiFrameworkPopulateBlackBar() {
try {
// Clear any existing black bar contents
if ((elem=document.getElementById('masthead-black-bar')) !== null) {
document.getElementById('masthead-black-bar').innerHTML = "";
}
var barContents = document.createElement("div");
barContents.innerHTML = '<nav class="row">'+
'<ul id="global-nav" class="menu global-nav text-right">'+
'<li class="home-mobile"><a href="https://www.ebi.ac.uk"></a></li>'+
'<li class="where embl hide"><a href="http://www.embl.org">EMBL</a></li>'+
'<li class="where barcelona hide"><a href="#">Barcelona</a></li>'+
'<li class="where hamburg hide"><a href="#">Hamburg</a></li>'+
'<li class="where grenoble hide"><a href="#">Heidelberg</a></li>'+
'<li class="where grenoble hide"><a href="#">Grenoble</a></li>'+
'<li class="where rome hide"><a href="#">Rome</a></li>'+
'<li id="embl-selector" class="float-right show-for-medium embl-selector embl-ebi">'+
'<button class="button float-right"> </button>'+
'</li>'+
'<li class="float-right search">'+
'<a href="#" class="inline-block collpased float-left search-toggle"><span class="show-for-small-only">Search</span></a>'+
// '<div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">'+
// '</div>'+
'</li>'+
'<li class="what about"><a href="https://www.ebi.ac.uk/about">About us</a></li>'+
'<li class="what training"><a href="https://www.ebi.ac.uk/training">Training</a></li>'+
'<li class="what research"><a href="https://www.ebi.ac.uk/research">Research</a></li>'+
'<li class="what services"><a href="https://www.ebi.ac.uk/services">Services</a></li>'+
'<li class="where ebi"><a href="https://www.ebi.ac.uk">EMBL-EBI</a></li>'+
// '<li class="float-right embl-selector">'+
// '<a class="button float-right"> </a>'+
// '</li>'+
// '<li class="what mission hide"><a href="//www.embl.org">More mission areas:</a></li>'+
'</ul>'+
'</nav>';
document.getElementById("masthead-black-bar").insertBefore(barContents,document.getElementById("masthead-black-bar").firstChild);
document.body.className += ' ebi-black-bar-loaded';
}
catch(err) {};
}
/**
* Reusable function to get part of the black bar
*/
function ebiGetFacet(passedAttribute){
var tag = "#masthead-black-bar ." + passedAttribute.toLowerCase();
return document.querySelectorAll(tag)[0];
}
/**
* Active tabs in `#masthead-black-bar` according to metadata
*/
function ebiFrameworkActivateBlackBar() {
// Look at the embl:facet-* meta tags to set active states
// <meta name="embl:rational" content="-3" />
// <meta name="embl:external" content="8" />
// <meta name="embl:active" content="what:*" />
// <meta name="embl:parent-1" content="" />
// <meta name="embl:parent-2" content="" />
try {
var metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
if (metas[i].getAttribute("name") == "embl:active") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("content").replace(':','.'));
ebiRemoveClass(targetFacet,'hide');
ebiActivateClass(targetFacet,'active');
}
if (metas[i].getAttribute("name") == "embl:parent-1") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("content").replace(':','.'));
ebiRemoveClass(targetFacet,'hide');
ebiActivateClass(targetFacet,'active');
}
if (metas[i].getAttribute("name") == "embl:parent-2") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("content").replace(':','.'));
ebiRemoveClass(targetFacet,'hide');
ebiActivateClass(targetFacet,'active');
}
}
// add interactivity to facets, so that hovering on what:research shows what:*
// we do this bit with jquery to prototype; need to rewire as vanilla JS.
// ebiGetFacet('where.active').addEventListener("mouseenter", function( event ) {
// $('#masthead-black-bar .where.hide').addClass('hover float-left').removeClass('hide');
// // $('#masthead-black-bar .where.hide').removeClass('hide').addClass('hover');
// $('#masthead-black-bar .what').addClass('hide');
// }, false);
// ebiGetFacet('what.active').addEventListener("mouseenter", function( event ) {
// $('#masthead-black-bar .what').removeClass('hide float-left');
// $('#masthead-black-bar .what').addClass('hover float-left');
// $('#masthead-black-bar .where').addClass('hide');
// }, false);
// Only reset blackbar after XXXms outside the blackbar
var mouseoutTimer;
blackBar.addEventListener("mouseenter", function() {
window.clearTimeout(mouseoutTimer);
}, false);
blackBar.addEventListener("mouseleave", function() {
mouseoutTimer = window.setTimeout(function(){ resetBlackBar(); }, 500);
});
// reset black bar contexts when mousing out
function resetBlackBar() {
// console.log('purged');
// $('#masthead-black-bar .hover').removeClass('hover float-left');
// $('#masthead-black-bar .what').removeClass('hide');
// $('#masthead-black-bar .where').addClass('hide');
ebiFrameworkActivateBlackBar();
}
}
catch(err) {};
}
/**
* Insert EMBL dropdown menu into `#masthead-black-bar`
*/
function ebiFrameworkInsertEMBLdropdown() {
try {
// remove any current dropdown
if ((elem=document.getElementById('embl-bar')) !== null) {
document.getElementById('embl-bar').remove();
}
var dropdownDiv = document.createElement("div");
dropdownDiv.innerHTML = '<nav id="embl-bar" class="embl-bar global-masthead-interactive-banner">'+
'<div class="row padding-bottom-medium">'+
'<div class="columns padding-top-medium">'+
'<button class="close-button" aria-label="Close alert" type="button"><span aria-hidden="true">×</span></button>'+
'</div>'+
'<div class="columns medium-7">'+
'<div class="large-10 medium-12">'+
'<div class="margin-bottom-large padding-top-xsmall margin-top-large"><h3 class="no-underline inline" style="line-height: 1rem;"><a href="//embl.org">EMBL</a></h3> was set up in 1974 as Europe’s flagship laboratory for the life sciences – an intergovernmental organisation with more than 80 independent research groups covering the spectrum of molecular biology:</div>'+
'</div>'+
// From: https://www.embl.es/aboutus/general_information/index.html
'<div class="row large-up-3 medium-up-3 small-up-2 no-underline medium-11">'+
'<div class="column padding-bottom-medium"><a class="" href="https://www.embl.de/research/index.php"><h5 class="inline underline">Research:</h5> perform basic research in molecular biology</a></div>'+
'<div class="column padding-bottom-medium"><a class="" href="https://www.embl.de/services/index.html"><h5 class="inline underline">Services:</h5> offer vital services to scientists in the member states</a></div>'+
'<div class="column padding-bottom-medium"><a class="" href="https://www.embl.de/training/index.php"><h5 class="inline underline">Training</h5> scientists, students and visitors at all levels</a></div>'+
'<div class="column padding-bottom-medium"><a class="" href="https://www.embl.de/research/tech_transfer/index.html"><h5 class="inline underline">Transfer</h5> and development of technology</a></div>'+
'<div class="column padding-bottom-medium"><h5 class="inline underline">Develop</h5> new instruments and methods</div>'+
'<div class="column padding-bottom-medium"><h5 class="inline underline">Integrating</h5> life science research in Europe</div>'+
'</div>'+
'<div class="margin-top-xlarge no-underline">'+
'<h3><a href="//embl.org" class="readmore">More about EMBL</a></h3>'+
'</div>'+
'</div>'+
'<div class="columns medium-5">'+
'<div class="large-10 medium-12">'+
'<h3 class="inline">Six sites</h3><p>represent EMBL in Europe.</p>'+
'</div>'+
'<div class="row medium-up-2 small-up-2">'+
'<div class="column"><h5 class="inline"><a href="//www.embl-barcelona.es/">Barcelona</a></h5><p class="">Tissue biology and disease modelling</p></div>'+
'<div class="column"><h5 class="inline"><a href="//www.embl.fr/">Grenoble</a></h5><p class="">Structural biology</p></div>'+
'<div class="column"><h5 class="inline"><a href="//www.embl-hamburg.de/">Hamburg</a></h5><p class="">Structural biology</p></div>'+
'<div class="column"><h5 class="inline"><a href="//www.embl.de/">Heidelberg</a></h5><p class="">Main laboratory</p></div>'+
'<div class="column">'+
'<h5 class="inline"><a href="https://www.ebi.ac.uk/">Hinxton</a></h5>'+
// '<span class="tag "><i class="icon icon-generic" data-icon="["></i> you are here</span>'+
'<p class="margin-bottom-none">EMBL-EBI: European Bioinformatics Institute</p>'+
'</div>'+
'<div class="column"><h5 class="inline"><a href="//www.embl.it/">Rome</a></h5><p class="">Epigenetics and neurobiology</p></div>'+
'</div>'+
'</div>'+
'</div>'+
'</nav>';
document.getElementById("masthead-black-bar").insertBefore(dropdownDiv,document.getElementById("masthead-black-bar").firstChild);
var emblBar = document.querySelectorAll(".embl-bar")[0];
var emblBarButton = document.querySelectorAll(".embl-selector")[0];
var blackBar = document.querySelectorAll(".masthead-black-bar")[0];
// add "peeking" animation for embl selector
emblBarButton.addEventListener("mouseenter", function( event ) {
if (ebiHasClass(document.querySelectorAll(".embl-bar")[0], 'active') == false) {
blackBar.className += ' peek';
}
}, false);
emblBarButton.addEventListener("mouseleave", function( event ) {
if (ebiHasClass(document.querySelectorAll(".embl-bar")[0], 'active') == false) {
blackBar.classList.remove("peek");
}
}, false);
// toggle the .embl-bar
var emblSelector = document.querySelectorAll(".embl-selector")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
ebiToggleClass(emblBarButton,'active');
window.scrollTo(0, 0);
}, false);
var emblSelectorClose = document.querySelectorAll(".embl-bar .close-button")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
ebiToggleClass(emblBarButton,'active');
window.scrollTo(0, 0);
}, false);
}
catch(err) {};
}
/**
* Insert EBI Footer into `#global-nav-expanded`
*/
function ebiFrameworkUpdateFoot() {
var html = '<div class="columns small-12">' +
'<h4 class="inline-block"><a href="https://www.ebi.ac.uk" class="no-underline" title="EMBL-EBI">EMBL-EBI</a></h4>' +
'<span class="small inline-block padding-left-large"><a class="readmore" href="http://intranet.ebi.ac.uk"><span class="icon icon-functional" data-icon="L"></span> Intranet for staff</a></span>' +
'</div>' +
'<div class="medium-up-5 small-up-2">' +
'<div class="column">' +
'<h5 class="services"><a class="services-color" href="https://www.ebi.ac.uk/services">Services</a></h5><ul>' + ' <li class="first"><a href="https://www.ebi.ac.uk/services">By topic</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/services/all">By name (A-Z)</a></li> ' + ' <li class="last"><a href="https://www.ebi.ac.uk/support">Help & Support</a></li> ' + '</ul></div>' +
'<div class="column">' +
'<h5 class="research"><a class="research-color" href="https://www.ebi.ac.uk/research">Research</a></h5><ul>' + ' <li><a href="https://www.ebi.ac.uk/research/publications">Publications</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/research/groups">Research groups</a></li> ' + ' <li class="last"><a href="https://www.ebi.ac.uk/research/postdocs">Postdocs</a> & <a href="https://www.ebi.ac.uk/research/eipp">PhDs</a></li> ' +
'</ul></div>' +
'<div class="column"> ' +
'<h5 class="training"><a class="training-color" href="https://www.ebi.ac.uk/training">Training</a></h5><ul>' + ' <li><a href="https://www.ebi.ac.uk/training/handson">Train at EBI</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/training/roadshow">Train outside EBI</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/training/online">Train online</a></li> ' + ' <li class="last"><a href="https://www.ebi.ac.uk/training/contact-us">Contact organisers</a></li> ' +
'</ul></div> ' +
'<div class="column"> ' +
'<h5 class="industry"><a class="industry-color" href="https://www.ebi.ac.uk/industry">Industry</a></h5><ul>' + ' <li><a href="https://www.ebi.ac.uk/industry/private">Members Area</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/industry/workshops">Workshops</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/industry/sme-forum"><abbr title="Small Medium Enterprise">SME</abbr> Forum</a></li> ' + ' <li class="last"><a href="https://www.ebi.ac.uk/industry/contact">Contact Industry programme</a></li> ' + '</ul></div> ' +
'<div class="column"> ' +
'<h5 class="about"><a class="ebi-color" href="https://www.ebi.ac.uk/about">About</a></h5><ul> ' + ' <li><a href="https://www.ebi.ac.uk/about/contact">Contact us</a>' + '<li><a href="https://www.ebi.ac.uk/about/events">Events</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/about/jobs" title="Jobs, postdocs, PhDs...">Jobs</a></li> ' + ' <li class="first"><a href="https://www.ebi.ac.uk/about/news">News</a></li> ' + ' <li><a href="https://www.ebi.ac.uk/about/people">People & groups</a></li> ' +
'</ul></div>' +
'</div>';
function init() {
try {
var foot = document.getElementById('global-nav-expanded');
foot.innerHTML = html;
} catch (err) {
setTimeout(init, 500);
}
}
init();
}
/**
* Insert footer meta info into `#ebi-footer-meta`
*/
function ebiFrameworkUpdateFooterMeta() {
var d = new Date();
var html = '<div class="columns">' +
'<p class="address">EMBL-EBI, Wellcome Genome Campus, Hinxton, Cambridgeshire, CB10 1SD, UK. +44 (0)1223 49 44 44</p> <p class="legal">Copyright © EMBL-EBI ' + d.getFullYear() + ' | EMBL-EBI is <a href="http://www.embl.org/">part of the European Molecular Biology Laboratory</a> | <a href="https://www.ebi.ac.uk/about/terms-of-use">Terms of use</a>' +
// '<a class="readmore float-right" href="http://intranet.ebi.ac.uk">Intranet</a>' +
'</p></div>';
function init() {
try {
var foot = document.getElementById('ebi-footer-meta');
foot.innerHTML = html;
} catch (err) { setTimeout(init, 500); }
}
init();
}
/**
* Once an announcement has been matched to the current page, show it (if there is one).
* @param {Object} message - The message you wish to show on the page.
* @param {string} message.headline - The headline to show (text)
* @param {string} message.message - The contents of the message (HTML)
* @param {string} [message.priority = 'callout'] - Optional class to add to message box. 'alert', 'warning', 'industry-background white-color'
* @example
* ebiInjectAnnouncements({ headline: 'Your headline here', message: 'this', priority: 'alert' });
*/
function ebiInjectAnnouncements(message) {
if (typeof(message) == 'undefined') {
return false;
};
if (typeof(message.processed) != 'undefined') {
// don't show a message more than once
return true;
} else {
// mark message as shown
message.processed=true;
}
var container = (document.getElementById('main-content-area') || document.getElementById('main-content') || document.getElementById('main') || document.getElementById('content') || document.getElementById('contentsarea'));
if (container == null) {
// if no suitable container, warn
console.warn('A message needs to be shown on this site, but an appropriate container could not be found. \n Message follows:','\n' + message.headline,'\n' + message.message,'\n' + 'Priority:',message.priority)
return false;
}
var banner = document.createElement('div');
var wrapper = document.createElement('div');
// var inner = document.createElement('div');
// banner.id = "";
banner.className = "notifications-js row margin-top-medium";
wrapper.className = "callout " + (message.priority || "");
wrapper.innerHTML = "<h3>" + message.headline + "</h3>" +
message.message +
// "<div id='cookie-dismiss'><button class='close-button' style='top: 0.3rem; color:#fff;' aria-label='Close alert' type='button'><span aria-hidden='true'>×</span></button></div>" +
"";
container.insertBefore(banner, container.firstChild);
banner.appendChild(wrapper);
}
/**
* Load the downtime/announcement messages, if any.
* For more info, see: https://gitlab.ebi.ac.uk/ebiwd/ebi.emblstatic.net-root-assets/tree/master/src
*/
function ebiFrameworkIncludeAnnouncements() {
// var downtimeScript = 'https://dev.ebi.emblstatic.net/announcements.js?' + Math.round(new Date().getTime() / 3600000);
// are there matching announcements for the current URL
function detectAnnouncements(messages) {
var currentHost = window.location.hostname,
currentPath = window.location.pathname;
// don't treat wwwdev as distinct from www
currentHost = currentHost.replace(/wwwdev/g , "www");
// try to show any possible variations of the url
// Note: this is pretty simple stupid, but maybe it's more effective than a sophisticated solution?
ebiInjectAnnouncements(messages[currentHost]);
ebiInjectAnnouncements(messages[currentHost+'/']);
ebiInjectAnnouncements(messages[currentHost+'/*']);
if (currentPath.length > 1) {
// don't try to much no path or '/'
var currentPathArray = currentPath.split('/');
// construct a list of possible paths to match
// /style-lab/frag1/frag2 =
// - /style-lab/frag1/frag2
// - /style-lab/frag1
// - /style-lab
var pathsToMatch = [currentHost+currentPathArray[0]];
for (var i = 1; i < currentPathArray.length; i++) {
var tempPath = pathsToMatch[i-1];
pathsToMatch.push(tempPath+'/'+currentPathArray[i])
}
for (var i = 0; i < pathsToMatch.length; i++) {
// console.log('matching:',pathsToMatch[i]);
ebiInjectAnnouncements(messages[pathsToMatch[i]]);
ebiInjectAnnouncements(messages[pathsToMatch[i]+'*']);
ebiInjectAnnouncements(messages[pathsToMatch[i]+'/*']);
}
}
}
function loadRemoteAnnouncements(file) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET", file, true);
xmlhttp.onload = function (e) {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200) {
eval(xmlhttp.responseText);
detectAnnouncements(m);
} else {
console.error(xmlhttp.statusText);
}
}
};
xmlhttp.onerror = function (e) {
console.error(xmlhttp.statusText);
};
xmlhttp.send(null);
}
if (window.location.hostname.indexOf('wwwdev.') === 0) {
// Load test message on wwwdev
loadRemoteAnnouncements('https://dev.ebi.emblstatic.net/announcements.js');
} else {
loadRemoteAnnouncements('https://ebi.emblstatic.net/announcements.js');
}
}