diff --git a/README.md b/README.md
index 532e6052492c22f321743ee0fd6f7a22b598059b..6222cb64bd3ca2c3dac3ae301b29e2ab7bc0fb28 100644
--- a/README.md
+++ b/README.md
@@ -144,6 +144,13 @@ We've configured the system to build with NPM (no need for gulp or bower).
#### Deploying with NPM
Releases are available via NPM at https://www.npmjs.com/package/ebi-framework
+## Developing locally
+1. Edit any CSS or JS and build with `npm run scss` or `npm run js`
+2. Serve index.html with `jekyll serve --port 99`
+3. Open http://127.0.0.1:99/EBI-Framework/
+
+Todo: Run the build process and serve with gulp and browsersync.
+
## Roadmap
- v1.1: Major update to the 2013 look and functionality
- v1.2: [Major improvements around modularity, structure and visual refinements](https://github.com/ebiwd/EBI-Framework/issues/61)
diff --git a/_includes/footer.html b/_includes/footer.html
index 40a9258e2eb8871e2eb7c3b6112b6d1f3ee8e483..282053e47c89f08d446dc68d7c8035d52e3ee307 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -21,7 +21,7 @@
<script defer="defer" src="{{ site.baseurl }}/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
-<script src="libraries/foundation-6/js/foundation.js"></script>
+<script src="{{ site.baseurl }}/libraries/foundation-6/js/foundation.js"></script>
<script src="{{ site.baseurl }}/js/foundationExtendEBI.js"></script>
<!-- <script src="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/js/foundation.js"></script> -->
<!-- <script src="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/foundationExtendEBI.js"></script> -->
diff --git a/_includes/head.html b/_includes/head.html
index 973ef85454acfa1e806d0eace4caccea20caa6bd..c0e82b42f163cf4dade46a705880a98833077479 100755
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -10,13 +10,21 @@
<meta name="theme-color" content="#70BDBD"> <!-- Android Chrome mobile browser tab color -->
<!-- Add information on the life cycle of this page -->
- <meta name="ebi:owner" content="John Doe"> <!-- Who should be contacted about changes -->
- <meta name="ebi:review-cycle" content="30"> <!-- In days, how often should the content be reviewed -->
- <meta name="ebi:last-review" content="2015-12-20"> <!-- The last time the content was reviewed -->
- <meta name="ebi:expiry" content="2016-01-20"> <!-- When this content is no longer relevant -->
+ <meta name="ebi:owner" content="EMBL-EBI Web Development"> <!-- Who should be contacted about changes -->
+ <meta name="ebi:review-cycle" content="180"> <!-- In days, how often should the content be reviewed -->
+ <meta name="ebi:last-review" content="2017-12-20"> <!-- The last time the content was reviewed -->
+ <meta name="ebi:expiry" content="2018-06-20"> <!-- When this content is no longer relevant -->
+
+ <!-- For the EMBL global nav (optional) -->
+ <meta name="embl:rational" content="{{page.embl_rational}}" />
+ <meta name="embl:external" content="{{page.embl_external}}" />
+ <meta name="embl:active" content="{{page.embl_active}}" />
+ <meta name="embl:parent-1" content="{{page.embl_parent_1}}" />
+ <meta name="embl:parent-2" content="{{page.embl_parent_2}}" />
<!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
- <link rel="dns-prefetch" href="//ebi.ac.uk" />
+ <link rel="dns-prefetch" href="https://ebi.ac.uk" />
+ <link rel="dns-prefetch" href="https://ebi.emblstatic.net" />
<!-- If you have custom icon, replace these as appropriate.
You can generate them at realfavicongenerator.net -->
diff --git a/_layouts/default.html b/_layouts/default.html
index 83489429548b39c51dea97ffae68b508d4ef89fc..78b3bc519caf6f040cae14b7816218adcbf9ff6b 100755
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -9,7 +9,7 @@
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-7" id="local-title">
- <h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ page.active_facet }}</a></h1>
+ <h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ page.title }}</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
diff --git a/index-test.html b/index-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..23627749605dbe679a2bcde2f20cf7b12df8df07
--- /dev/null
+++ b/index-test.html
@@ -0,0 +1,12 @@
+---
+layout: default
+title: Research sample
+embl_rational: 0
+embl_external: 0
+embl_active: "what:research"
+embl_parent_1: "where:ebi"
+embl_parent_2: "none"
+group: "in_local_navigation"
+order: 3
+---
+## Sample research overview page
diff --git a/index.html b/index.html
index 189dba47ccfaf4f489d0bc7dfaf71aaf4cb7b2f8..2ef623c0d8893df3e85853e4384ccb6e7be9b2a0 100755
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
---
layout: default
title: Project home
-active_facet: Research
+embl_active: Research
group: "in_local_navigation"
order: 1
---
diff --git a/js/ebi-global-includes/script/4_ebiFrameworkContent.js b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
index 7a2805caac9e6473c5a0895c054f734d83967652..d5e718faec8e2572db4bc270a9d7673877efe317 100644
--- a/js/ebi-global-includes/script/4_ebiFrameworkContent.js
+++ b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
@@ -12,6 +12,21 @@ function ebiToggleClass(element, 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
*/
@@ -66,12 +81,12 @@ function ebiFrameworkPopulateBlackBar() {
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="location embl hide"><a href="http://www.embl.org">EMBL</a></li>'+
- '<li class="location barcelona hide"><a href="#">Barcelona</a></li>'+
- '<li class="location hamburg hide"><a href="#">Hamburg</a></li>'+
- '<li class="location grenoble hide"><a href="#">Heidelberg</a></li>'+
- '<li class="location grenoble hide"><a href="#">Grenoble</a></li>'+
- '<li class="location rome hide"><a href="#">Rome</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">'+
'<button class="button float-right"> </button>'+
'</li>'+
@@ -84,7 +99,7 @@ function ebiFrameworkPopulateBlackBar() {
'<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="location ebi"><a href="https://www.ebi.ac.uk">EMBL-EBI</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>'+
@@ -96,40 +111,42 @@ function ebiFrameworkPopulateBlackBar() {
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` accoriding to metadata
*/
function ebiFrameworkActivateBlackBar() {
// Look at the embl:facet-* meta tags to set active states
- // <meta name="embl:facet-who" content="primary" data-tag="Sample group" />
- // <meta name="embl:facet-what" content="parent" data-tag="Research" />
- // <meta name="embl:facet-where" content="parent" data-tag="EBI" />
+ // <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 {
- function ebiGetFacet(passedAttribute){
- var tag = "#masthead-black-bar ." + passedAttribute.toLowerCase();
- return document.querySelectorAll(tag)[0];
- }
var metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
- if (metas[i].getAttribute("name") == "embl:facet-who") {
- if (metas[i].getAttribute("content").toLowerCase() == "parent") {
- var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
- // todo: insert this as a new facet, i think?
- }
+ 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:facet-what") {
- if (metas[i].getAttribute("content").toLowerCase() == "parent") {
- var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
- ebiToggleClass(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:facet-where") {
- if (metas[i].getAttribute("content").toLowerCase() == "parent") {
- var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
- ebiToggleClass(targetFacet,'active');
- ebiToggleClass(targetFacet,'hide'); // as we hide these by default
- }
+ if (metas[i].getAttribute("name") == "embl:parent-2") {
+ var targetFacet = ebiGetFacet(metas[i].getAttribute("content").replace(':','.'));
+ ebiRemoveClass(targetFacet,'hide');
+ ebiActivateClass(targetFacet,'active');
}
}
@@ -225,34 +242,26 @@ function ebiFrameworkInsertEMBLdropdown() {
window.scrollTo(0, 0);
}, false);
- // we do this bit with jquery to prototype, would need ro rewire as vanilla JS..
- $('#masthead-black-bar .where.active').on('mouseover', function() {
- emblResetContext(); // clear any other states
- $('#masthead-black-bar .where.hide').addClass('hover').removeClass('hide');
+ // 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');
- });
- $('#masthead-black-bar .what.active').on('mouseover', function() {
- emblResetContext(); // clear any other states
- $('#masthead-black-bar .what.mission').removeClass('hide');
- $('#masthead-black-bar .what').addClass('hover');
- });
-
+ }, 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);
- // reset when user engages with content
- function emblResetContext() {
- // ebiFrameworkActivateBlackBar();
- $('#masthead-black-bar .where.hover').removeClass('hover').addClass('hide');
+ // reset black bar contenxts when mousing out
+ blackBar.addEventListener("mouseleave", function( event ) {
+ console.log('purged');
+ $('#masthead-black-bar .hover').removeClass('hover float-left');
$('#masthead-black-bar .what').removeClass('hide');
- $('#masthead-black-bar .what.mission').addClass('hide');
- $('#masthead-black-bar .what.hover').removeClass('hover');
-
- // reset everything on the next mouse into content
- $('#content').one('mouseover', function() {
- console.log('purged');
- emblResetContext();
- });
- }
+ $('#masthead-black-bar .where').addClass('hide');
+ ebiFrameworkActivateBlackBar();
+ });
}
catch(err) {};