Skip to content
Snippets Groups Projects
Commit a2c94a5e authored by khawkins98's avatar khawkins98
Browse files

First cut of EMBL selector

parent b18ec638
No related branches found
Tags v1.2-alpha.1
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/ebi-css-build/_ebi_masthead_styles.scss
+ 54
− 25
View file @ a2c94a5e
......@@ -46,16 +46,61 @@
color: white;
}
ul.menu li.active a,
ul.menu li.active-trail a {
background: rgb(0,0,0);
}
// EMBL Selector dropdown
@include embl-selector;
.global-nav {
a,
a:hover {
color: white;
border-bottom: none;
}
li a:hover,
li a:active,
li a:focus,
li.active a,
li.active-trail a {
color: white;
border-bottom: none;
background: rgb(0,0,0);
}
li {
a:before {
font-family: 'EBI-Generic';
display: inline-block; // safari 9 & 10 fix
padding-right: .4rem;
}
// a:hover,
// a:active,
// a:focus {
// background-color: #000;
// }
}
ul {
li a:before {
font-family: 'EBI-Generic';
display: inline-block; // safari 9 & 10 fix
padding-right: .4rem;
li.home,
li.services,
li.research,
li.training,
li.about,
li.grenoble,
li.ebi,
li.hamburg,
li.heidelberg,
li.rome,
li.barcelona {
float: right;
&.active {
float: left;
}
}
li.location {
a:before {
content: '[';
}
}
// custom colour for Home
......@@ -136,25 +181,9 @@
margin-top: -2px;
color: #fff;
}
}
// masthead dropdwon styles
.dropdown-pane {
background-color: $ebi-colour-dark;
background-position: 100% 100%;
background-repeat: no-repeat;
color: #fff;
padding-right: 17rem;
min-width: 39.9375em;
left: 0; //fix position of menu, to prevent horizontal scrolling of page
h6 { color: white; font-weight: 700; }
.button { color: #007c82; background: #fff; }
}
// EMBL Selector dropdown
@include embl-selector;
}
.masthead-inner {
......
css/ebi-css-build/_embl_selector.scss
+ 49
− 5
View file @ a2c94a5e
......@@ -6,13 +6,44 @@
/// Classses to theme the embl dropdown selector for the .masthead-black-bar
@mixin embl-selector {
li.embl-selector {
margin-left: 0.5rem;
}
.embl-bar {
height: 0; overflow: hidden;
display: none;
background-color: #000;
// color: #fff;
a {
// color: #fff;
// border-bottom: 1px dashed #fff;
}
a:hover { border-bottom: 1px solid #fff; }
.youarehere {
margin-left: -1.5rem;
}
}
.embl-bar.active {
display: block;
height: auto; overflow: visible;
}
.dropdown-pane.embl-dropdown {
background-image: url('../images/map.png');
height: 21rem;
left: 0; //fix position of menu, to prevent horizontal scrolling of page
background-color: $ebi-colour-dark;
background-position: 100% 100%;
background-repeat: no-repeat;
color: #fff;
min-width: 30em;
left: 0; //fix position of menu, to prevent horizontal scrolling of page
h6 { color: white; font-weight: 700; }
.button { color: #007c82; background: #fff; }
a { border-bottom: 1px dashed $ebi-colour-dark-grey; }
a:hover { border-bottom: 1px solid $ebi-colour-dark-grey; }
}
@media screen and (max-width: 39.9375em) {
.dropdown-pane.embl-dropdown {
......@@ -23,16 +54,29 @@
}
}
.embl-selector {
.embl-selector.embl-ebi {
.button,
.button.hover,
.button:focus,
.button:hover {
background: no-repeat 4px 50% url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
padding-left: 108px;
padding-left: 95px;
background-size: 100px;
}
}
.embl-selector {
.button,
.button.hover,
.button:focus,
.button:hover {
background: no-repeat 100% 50% url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg);
padding-left: 2px;
background-size: 62px;
// background: no-repeat 4px 50% url("https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-white.svg");
// padding-left: 58px;
// background-size: 72px;
padding-right: 17px;
height: 37px;
line-height: 12px;
}
.button.hover,
......
js/script.js
+ 131
− 55
View file @ a2c94a5e
/* Copyright (c) EMBL-EBI 2017 */
// Copyright (c) EMBL-EBI 2017
// Do not edit this file directly.
// It is made by concating .js files with by npm into script.js.
// Source files: js/ebi-css-build/script/*.js
/**
* Utility function to get params from the URL.
*
* @param {string} name The string to look for
* @param {string} [url=browserURL] Optionally pass a specific URL to parse
*
* @example
* query string: ?foo=lorem&bar=&baz
* var foo = getParameterByName('foo'); // "lorem"
*/
function ebiGetParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function ebiFrameworkExternalLinks() {
// mark pdf/doc/txt links with link-pdf/link-doc/link-txt classes
// exclude links with images
......@@ -38,9 +58,11 @@ function ebiFrameworkExternalLinks() {
}
/**
* Disable the global search if a page defines a local search.<br/>
* Can also be disabled by adding class 'no-global-search' to the body element.
*/
function ebiFrameworkManageGlobalSearch() {
// Disable the global search if a page defines a local search.
// Can also be disable by adding class 'no-global-search' to the body element.
try {
var hasLocalSearch = document.getElementById('local-search') !== null;
var hasLocalEBISearch = document.getElementById('ebi_search') !== null;
......@@ -49,17 +71,17 @@ function ebiFrameworkManageGlobalSearch() {
} else {
// If the page gets a global search, we specify how the dropdown box should be. #RespectMyAuthoriti
var html = '<form id="global-search" name="global-search" action="/ebisearch/search.ebi" method="GET" class="large-8 large-push-2">' +
'<fieldset>' +
'<div class="input-group">' +
'<input type="text" name="query" id="global-searchbox" class="input-group-field" placeholder="Search all of EMBL-EBI">' +
'<div class="input-group-button">' +
'<input type="submit" name="submit" value="Search" class="button">' +
'<input type="hidden" name="db" value="allebi" checked="checked">' +
'<input type="hidden" name="requestFrom" value="masthead-black-bar" checked="checked">' +
'</div>' +
'</div>' +
'</fieldset>' +
'</form>';
'<fieldset>' +
'<div class="input-group">' +
'<input type="text" name="query" id="global-searchbox" class="input-group-field" placeholder="Search all of EMBL-EBI">' +
'<div class="input-group-button">' +
'<input type="submit" name="submit" value="Search" class="button">' +
'<input type="hidden" name="db" value="allebi" checked="checked">' +
'<input type="hidden" name="requestFrom" value="masthead-black-bar" checked="checked">' +
'</div>' +
'</div>' +
'</fieldset>' +
'</form>';
try {
var gloablSearch = document.getElementById('search-global-dropdown');
gloablSearch.innerHTML = html;
......@@ -71,9 +93,11 @@ function ebiFrameworkManageGlobalSearch() {
catch (err) {}
}
/**
* Add error alerts for 'no input' on search boxes.<br/>
* Todo: this, perhaps, shoule be moved to a value-add script file
*/
function ebiFrameworkSearchNullError() {
// Add error alerts for 'no input' on search boxes.
// Todo: this, perhaps, shoule be moved to a value-add script file
try {
var disabled = document.body.className.indexOf('no-search-error') !== -1;
// Array of search box definition objects, specify inputNode, defaultText (optional, default ''), errorText (optional, default 'Please enter a search term')
......@@ -119,9 +143,24 @@ function ebiFrameworkSearchNullError() {
catch (err) {}
}
/**
* 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();
}
/**
* Remove global-nav/global-nav-expanded from header/footer if body.no-global-nav is set
*/
function ebiFrameworkHideGlobalNav() {
// Remove global-nav/global-nav-expanded from header/footer
// if body.no-global-nav is set
try {
var hasGlobalMasthead = document.getElementById('masthead-black-bar') !== null;
var disabled = document.body.className.indexOf('no-global-nav') !== -1;
......@@ -139,8 +178,10 @@ function ebiFrameworkHideGlobalNav() {
catch (err) {}
}
/**
* Assign global nav background images through meta tags
*/
function ebiFrameworkAssignImageByMetaTags() {
// Assign global nav background images through meta tags
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']");
......@@ -156,8 +197,10 @@ function ebiFrameworkAssignImageByMetaTags() {
}
}
/**
* Insert EMBL dropdown menu into `#masthead-black-bar`
*/
function ebiFrameworkInsertEMBLdropdown() {
// Insert EMBL dropdown menu
try {
// remove any current dropdown
if ((elem=document.getElementById('embl-dropdown')) !== null) {
......@@ -165,41 +208,66 @@ function ebiFrameworkInsertEMBLdropdown() {
}
var dropdownDiv = document.createElement("div");
dropdownDiv.innerHTML = '<div id="embl-dropdown" class="embl-dropdown dropdown-pane bottom" data-dropdown>' +
'<p>EMBL-EBI in Hinxton, Cambridge is one of <br/>six EMBL locations across europe.<br/> <a href="//www.ebi.ac.uk/about" class="small readmore">More about EMBL-EBI</a></p>' +
'<h6>Connect to another EMBL location</h6>' +
'<div class="small-collapse padding-bottom-large clearfix">' +
'<div class="columns small-5 padding-bottom-medium">' +
'<a href="http://www.embl.de/">Heidelberg</a>' +
'<div class="small">Main laboratory</div>' +
'</div>' +
'<div class="columns small-7 padding-bottom-medium">' +
'<a href="http://www.embl-barcelona.es/">Barcelona</a>' +
'<div class="small">Tissue biology and disease modelling</div>' +
'</div>' +
'<div class="columns small-5 padding-bottom-medium">' +
'<a href="http://www.embl.fr/">Grenoble</a>' +
'<div class="small">Structural biology</div>' +
'</div>' +
'<div class="columns small-7 padding-bottom-medium">' +
'<a href="http://www.embl-hamburg.de/">Hamburg</a>' +
'<div class="small">Structural biology</div>' +
'</div>' +
'<div class="columns small-5 padding-bottom-medium">' +
'<a href="http://www.embl.it/">Rome</a>' +
'<div class="small">Epigenetics and neurobiology</div>' +
'</div>' +
'<div class="columns small-7 padding-bottom-medium">' +
'<a href="http://embl.org/" class="readmore">More about EMBL</a>' +
'</div>' +
'</div>' +
'</div>';
document.getElementById("masthead-black-bar").appendChild(dropdownDiv);
// We don't invoke the dropdown here, as that method depends on how you're using the Framework
dropdownDiv.innerHTML = '<nav id="embl-bar" class="embl-bar">'+
'<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-8">'+
'<div class="large-8 medium-12">'+
'<p><h3 class="inline white-color">EMBL</h3> was founded in 1974 by its member states to promote the molecular life sciences in Europe and beyond.</p>'+
'</div>'+
'<div class="row large-up-5 medium-up-3 small-up-2 no-underline">'+
'<div class="column"><a class="" href="#research"><h5 class="inline white-color underline">Research</h5> the molecular basis of life</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Services</h5> and infrastructure for research</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Training</h5> and inspiring scientists</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Transfer</h5> and deverlopment of technology</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Integrating</h5> life science research in Europe</a></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-4">'+
'<div class="large-10 medium-12">'+
'<p><h3 class="inline white-color">Six locations</h3> represent EMBL across Europe, each has its own focus.</p>'+
'</div>'+
'<div class="row large-up-3 medium-up-2 small-up-2">'+
'<div class="column"><h5><a href="//www.embl-barcelona.es/">Barcelona</a></h5><p class="small">Tissue biology and disease modelling</p></div>'+
'<div class="column"><h5><a href="//www.embl.fr/">Grenoble</a></h5><p class="small">Structural biology</p></div>'+
'<div class="column"><h5><a href="//www.embl-hamburg.de/">Hamburg</a></h5><p class="small">Structural biology</p></div>'+
'<div class="column"><h5><a href="//www.embl.de/">Heidelberg</a></h5><p class="small">Main laboratory</p></div>'+
'<div class="column">'+
'<h5><a href="//www.ebi.ac.uk/">Hinxton</a></h5>'+
'<span class="tag "><i class="icon icon-generic" data-icon="["></i> you are here</span>'+
'<p class="small margin-bottom-none">Bioinformatiocs at the EBI</p>'+
'</div>'+
'<div class="column"><h5><a href="//www.embl.it/">Rome</a></h5><p class="small">Epigenetics and neurobiology</p></div>'+
'</div>'+
'</div>'+
'</div>'+
'</nav>';
document.getElementById("masthead-black-bar").insertBefore(dropdownDiv,document.getElementById("masthead-black-bar").firstChild);
// toggle the .embl-bar
var emblBar = document.querySelectorAll(".embl-bar")[0];
var emblSelector = document.querySelectorAll(".embl-selector")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
window.scrollTo(0, 0);
}, false);
var emblSelectorClose = document.querySelectorAll(".embl-bar .close-button")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
window.scrollTo(0, 0);
}, false);
}
catch(err) {};
}
/**
* Insert EBI Footer into `#global-nav-expanded`
*/
function ebiFrameworkUpdateFoot() {
var html = '<div class="columns small-6 medium-2 ">' +
'<a href="//www.ebi.ac.uk" title="EMBL-EBI"><span class="ebi-logo"></span></a>' +
......@@ -229,6 +297,9 @@ function ebiFrameworkUpdateFoot() {
init();
}
/**
* Insert footer meta info into `#ebi-footer-meta`
*/
function ebiFrameworkUpdateFooterMeta() {
var d = new Date();
var html = '<div class="columns">' +
......@@ -255,6 +326,9 @@ function ebiFrameworkIncludeScripts() {
document.body.appendChild(putScript);
}
/**
* Insert and show the cookie banner.
*/
function ebiFrameworkCookieBanner() {
function setCookie(c_name, value, exdays) {
var exdate = new Date();
......@@ -325,6 +399,12 @@ function ebiFrameworkCookieBanner() {
init();
}
/**
* All scripts are automatically loaded, unless the page asked us not to.
* @example
* Configurable with a data attribute:
* <body data-ebiFrameworkInvokeScripts="false">
*/
function ebiFrameworkInvokeScripts() {
ebiFrameworkExternalLinks();
ebiFrameworkManageGlobalSearch();
......@@ -338,10 +418,6 @@ function ebiFrameworkInvokeScripts() {
ebiFrameworkCookieBanner();
}
/* All scripts are automatically loaded, unless the page asked us not to.
* Configurable with a data attribute:
* <body data-ebiFrameworkInvokeScripts="false">
**/
document.addEventListener("DOMContentLoaded", function(event) {
var bodyData = document.body.dataset;
if (bodyData["ebiframeworkinvokescripts"] != "false") {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment