Iterate on black bar facets

Author: khawkins98

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)

_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> -->

_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 -->

_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 -->

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

index.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Project home
-active_facet: Research
+embl_active: Research
 group: "in_local_navigation"
 order: 1
 ---

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">&nbsp;</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">&nbsp;</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) {};