Unverified Commit 9adaac7f authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

feature: revised-events-page (#30)

* feature: revised-events-page

For https://gitlab.ebi.ac.uk/emblorg/backlog/-/issues/460, this is to migrate the EBI evens pages to the new backend.
parent f333b3d6
Pipeline #145291 passed with stages
in 1 minute and 36 seconds
......@@ -7,7 +7,7 @@
//--><!]]>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
......@@ -17,4 +17,12 @@
<script type="text/JavaScript">$(document).foundationExtendEBI();</script>
<!-- VF 2.0 JS -->
<script src="https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js"></script>
{# <!-- Disable 1.x cookie banner -->
<span data-protection-message-disable="true"></span> #}
<style>
.vf-banner.vf-banner--fixed.vf-banner--bottom.vf-banner--notice {
display: none !important;
/* never show 2.x banner for now */
}
</style>
<script src="https://assets.emblstatic.net/vf/v2.4.12/scripts/scripts.js"></script>
\ No newline at end of file
<link rel="icon" type="image/x-icon"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192×192"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" />
<!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" />
<!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" />
<!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" />
<!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" />
<!-- For iPhone (57px) -->
<link rel="mask-icon"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg"
color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage"
content="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
<!-- CSS -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.12/css/styles.css">
......@@ -25,23 +25,10 @@
<!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
<link rel="dns-prefetch" href="//www.ebi.ac.uk" />
<!-- If you have custom icon, replace these as appropriate.
You can generate them at realfavicongenerator.net -->
<link rel="icon" type="image/x-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
<link rel="mask-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage" content="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
{% include "header.njk" %}
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.11/css/styles.css" />
<!-- If you have a custom header image or colour -->
<!--
......
......@@ -25,28 +25,9 @@ templateEngineOverride: njk
<!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
<link rel="dns-prefetch" href="//www.ebi.ac.uk" />
<!-- If you have custom icon, replace these as appropriate.
You can generate them at realfavicongenerator.net -->
<link rel="icon" type="image/x-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192×192" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
<link rel="mask-icon" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage" content="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
{% include "header.njk" %}
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all" />
<!-- Use this CSS file for any custom styling -->
<!--
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
-->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all" />
<meta name="ebi:masthead-color" content="#000000" />
<meta name="ebi:masthead-image" content="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.1/images/backgrounds/embl-ebi-background-4.jpg" />
......@@ -59,11 +40,6 @@ templateEngineOverride: njk
<meta name="twitter:url" content="http://www.ebi.ac.uk/about/contact" />
<meta name="twitter:description" content="Contact details for EMBL-EBI" />
<!-- you can replace this with theme-[projectname].css. See http://www.ebi.ac.uk/web/style/colour for details of how to do this -->
<!-- also inform ES so we can host your colour palette file -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all" />
<!-- end CSS-->
</head>
<body class=""><!-- add any of your classes or IDs -->
......
......@@ -24,37 +24,8 @@ templateEngineOverride: njk
<meta name="ebi:last-review" content="2017-05-02" /> <!-- The last time the content was reviewed -->
<meta name="ebi:expiry" content="2017-06-20" /> <!-- When this content is no longer relevant -->
<link rel="icon" type="image/x-icon"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192×192"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" />
<!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" />
<!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" />
<!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" />
<!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" />
<!-- For iPhone (57px) -->
<link rel="mask-icon"
href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg"
color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage"
content="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.min.css"
type="text/css" media="all" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css"
media="all" />
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.1/css/styles.css" />
{% include "header.njk" %}
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.min.css" type="text/css" media="all" />
</head>
<body class="ebi-vf1-integration">
......@@ -423,10 +394,10 @@ templateEngineOverride: njk
</script>
<script id="template-upcoming-events" type="text/x-handlebars-template">
{{#each this}}
<span class="vf-summary__date">{{smartDates json.starts json.ends}}</span>
<span class="vf-summary__date">| {{json.bundle_name}}</span>
<h6><a href="//www.ebi.ac.uk/{{this.json.path}}">{{json.title}}</a></h6>
<!--<p><a class="no-underline" href="//www.ebi.ac.uk/{{this.json.path}}">{{{truncate json.short_description 150}}}</a></p>-->
<span class="vf-summary__date">{{smartDates field_event_start_date_time field_event_end_date_time}}</span>
<span class="vf-summary__date">| {{field_event_type}}</span>
<h6><a href="//www.ebi.ac.uk/{{this.json.path}}">{{title}}</a></h6>
<!--<p><a class="no-underline" href="//www.ebi.ac.uk/{{this.json.path}}">{{{truncate field_event_summary 150}}}</a></p>-->
{{/each}}
</script>
{% endraw %}
......@@ -474,6 +445,7 @@ templateEngineOverride: njk
var unixMinute = Math.floor(Date.now() / 1000 / 300);
// handlebars stuff
Handlebars.registerHelper('truncate', function(str, len) {
var str = str || "";
if (str.length > len) {
var new_str = str.substr(0, len + 1);
while (new_str.length) {
......@@ -495,6 +467,9 @@ templateEngineOverride: njk
if (typeof(date) == "undefined") {
return "Unknown";
}
if (date == "") {
return "";
}
date = date.replace(" ", "T"); // drupal date format needs a "T"
// "2015-10-19 08:15:00" >> "2015-10-19T08:15:00"
var dateAway = new Date(date),
......@@ -520,6 +495,8 @@ templateEngineOverride: njk
}
// we want to show a start and end, a la: Oct 16th; Oct 12th-15th, Oct 21st - Nov 1st
Handlebars.registerHelper("smartDates", function(date1, date2) {
var date2 = date2 || date1; // if no end date, use the start date
// if start = end, just return the first
if (date1 == date2) {
return formatDate(date1);
......@@ -533,12 +510,12 @@ templateEngineOverride: njk
return formatDate(date1);
}
//don't return the month on the second date..
jointDate = formatDate(date1) + ' - ' + formatDate(date2).split(' ')[0] + ' ' + formatDate(date2)
jointDate = formatDate(date1) + " - " + formatDate(date2).split(' ')[0] + ' ' + formatDate(date2)
.split(' ')[1];
return jointDate;
}
// ok, so just tell us it all
jointDate = formatDate(date1) + ' - ' + formatDate(date2);
jointDate = formatDate(date1) + " - " + formatDate(date2);
return jointDate;
});
// simple filter for json data
......@@ -553,7 +530,8 @@ templateEngineOverride: njk
// pull json from http://www.ebi.ac.uk/admin/structure/views/view/news_rollup/edit/page_1
function getNewsData() {
// $.getJSON("/feed.json?cachedate="+unixMinute, function(data) { // local testing
$.getJSON("https://www.ebi.ac.uk/about/news/feed.json?cachedate=" + unixMinute, function(data) {
var jsonFeed = "https://www.ebi.ac.uk/about/news/feed.json";
$.getJSON(jsonFeed + "?cachedate=" + unixMinute, function(data) {
// keep only press releases
var topNewsItem = simpleFilter(data.nodes, function(node) {
return (node.node.type === 'News');
......@@ -581,9 +559,20 @@ templateEngineOverride: njk
function getEventData() {
// /api/v1/events/home
$.getJSON("https://www.ebi.ac.uk/api/v1/events/home", function(data) {
//var jsonFeed = "https://www.ebi.ac.uk/api/v1/events/home";
var jsonFeed = "https://www.embl.org/api/v1/events?_format=json&body=0&start_date=today&source=contenthub";
$.getJSON(jsonFeed, function(data) {
var itemsPassed = 0; // so wec can keep just five items
var eventsToShow = simpleFilter(data.results, function(node) {
// only event where field_event_unique_identifier is a training contenthub, TH-5556063c-0870-4135-81b4-54d7f6514d3b
data = data.filter(function(item){
return item.field_event_unique_identifier.indexOf("TH-") >= 0;
});
// sort by date
data = data.sort(function(a,b){
return new Date(a.field_event_start_date_time) - new Date(b.field_event_start_date_time);
});
var eventsToShow = simpleFilter(data, function(node) {
if (itemsPassed >= 3) { // we can do any other filtering we might need here...
return false;
}
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
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