Commit 9f2385c4 authored by cervoneluca's avatar cervoneluca

Improved timeline

parent f52ffabc
......@@ -17,7 +17,6 @@ standard-minifier-js # JS minifier run for production mode
es5-shim # ECMAScript 5 compatibility for older browsers.
ecmascript # Enable ECMAScript2015+ syntax in app code
autopublish # Publish all data to the clients (for prototyping)
insecure # Allow all DB writes from clients (for prototyping)
less
dapearce:material-icons
......@@ -28,3 +27,4 @@ zimme:active-route
fortawesome:fontawesome
mdg:validated-method
materialize:materialize
webtempest:animate
allow-deny@1.0.5
arillo:flow-router-helpers@0.5.2
autopublish@1.0.7
autoupdate@1.2.10
babel-compiler@6.8.3
babel-runtime@0.1.9_1
......@@ -77,4 +76,5 @@ underscore@1.0.9
url@1.0.10
webapp@1.2.9_1
webapp-hashing@1.0.9
webtempest:animate@0.1.9
zimme:active-route@2.3.2
......@@ -16,18 +16,23 @@
color: @primary-color-text !important;
}
.brand-logo{
font-family: 'Gorditas', Arial, sans-serif;
}
.mdi{
&.logo-icon{
display:inline;
padding:0px;
margin:0px;
color:@secondary-color;
font-size:0.8em;
}
}
.fa{
&.logo-icon{
font-size:0.95em;
font-size:0.7em;
padding:3px;
}
}
......
import { Mongo } from 'meteor/mongo';
import { Years } from '../../api/years/years.js';
import { YearsShortTitles } from '../../api/years-short-titles/years-short-titles.js';
Meteor.publish('years', function yearsPublication() {
return Years.find();
});
Meteor.publish('years-short-titles', function yearsShortTitlesPublication() {
return YearsShortTitles.find();
});
\ No newline at end of file
import { Mongo } from 'meteor/mongo';
export const YearsShortTitles = new Mongo.Collection('years_short_titles');
\ No newline at end of file
import { Mongo } from 'meteor/mongo';
export const Years = new Mongo.Collection('years');
\ No newline at end of file
import { Mongo } from 'meteor/mongo';
import { Years } from '../../api/years/years.js';
import { YearsShortTitles } from '../../api/years-short-titles/years-short-titles.js';
import { _ } from 'underscore-node';
Years.remove({});
......@@ -9,6 +10,14 @@ data.years.year.forEach(function(year){
Years.insert(mapYear(year));
});
YearsShortTitles.remove({});
const dataShortTitles = JSON.parse(Assets.getText('extracted-topic.json'));
dataShortTitles.years.year.forEach(function(year){
let yearArray = Object.keys(year).map(key => year[key])
YearsShortTitles.insert(mapYear(year));
});
function relevantKeyword(item) {
return !( item.value == 'legislation' ||
item.value == 'courts of law' ||
......@@ -21,7 +30,7 @@ function mapYear(year) {
year.keywords.k = _.isArray(year.keywords.k) ? year.keywords.k: [year.keywords.k];
year.keywords = year.keywords.k.map(function(keyword) {
return {
frequency: keyword['frequency-in-year'],
frequency: Math.round(keyword['frequency-in-year']),
value: keyword['#text']
}
}).filter(relevantKeyword);
......
<template name="header">
<div class="navbar-fixed">
<nav class="primary-color" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="{{pathFor 'home'}}" class="brand-logo">S<i class="fa fa-smile-o logo-icon"></i>CIEV<i class="mdi mdi-chart-pie logo-icon"></i>LE</a>
<div class="nav-wrapper container"><a id="logo-container" href="{{pathFor 'home'}}" class="brand-logo">S<i class="fa fa-smile-o logo-icon"></i>cievo<i class="mdi mdi-chart-pie logo-icon"></i>le</a>
<ul class="right hide-on-med-and-down">
<li><a class="{{isActiveRoute 'timeline'}}" href="{{pathFor 'timeline'}}"><i class="mdi mdi-clock-start nav-icon"> Timeline</i></a></li>
<li><a class="{{isActiveRoute 'team'}}" href="#"><i class="mdi mdi-account-multiple-outline nav-icon"> Team</i></a></li>
......
<template name="timeline">
<div class="container">
<div class="section timeline">
<div class="section timeline-section">
<header class="clearfix">
<h2>Timeline of topics in United Kingdom Public Acts</h2>
<div class="row">
<form class="col s12" action="#">
<!-- <form class="col s12" action="#">
<p class="range-field">
<label for="start-year" class="primary-color-text">Select the start year</label>
<input value="1801" name="start-year" class="primary-color period-select" type="range" id="start-year" min="1801" max="2016" />
<label for="end-year" class="primary-color-text">Select the end year</label>
<label for="start-year" class="primary-color-text">Select the start year. The current one is <span class="range-start-year">{{getStartYear}}</span></label>
<input value="1981" name="start-year" class="primary-color period-select" type="range" id="start-year" min="1801" max="2016" />
<label for="end-year" class="primary-color-text">Select the end year. The current one is <span class="range-end-year">{{getEndYear}}</span></label>
<input value="2016" name="end-year" class="primary-color period-select" type="range" id="end-year" min="1801" max="2016" />
</p>
</form>
<p>
<input class="keywords-type with-gap" name="keywords-type" type="radio" id="keywords-tags-radio" checked="checked"/>
<label class="primary-color-text" for="keywords-tags-radio">Topics extracted from AkomaNtoso "keyword" element</label>
<input class="keywords-type with-gap" name="keywords-type" type="radio" id="keywords-short-titles-radio" />
<label class="primary-color-text" for="keywords-short-titles-radio">Topics extracted with NLP from Akoma Ntoso "shortTitle" element.</label>
</p>
</form> -->
</div>
<h2><span>Topics {{getKeywordsType}}, since <span class="range-start-year">{{getStartYear}}</span> until <span class="range-end-year">{{getEndYear}}</span></span></h2>
<div class="filter-button-container center-align">
<a class="btn primary-color center-align modal-trigger" href="#modal1"><i class="mdi mdi-settings left"></i>settings</a>
</div>
<h2><span>Currently you are loking at all topics since {{getStartYear}} until {{getEndYear}}</span></h2>
<!-- <div class="divider"></div> -->
<!-- <div class="divider"></div> -->
</header>
<section class="main">
<ul class="timeline">
{{#if Template.subscriptionsReady}}
{{#each years}}
{{#if @index=0}}
{{#transition in="bounceInLeft" out="bounceOutRight"}}
<li class="event">
{{#if @index=0}}
<input type="radio" name="tl-group" checked/>
{{else}}
<input type="radio" name="tl-group"/>
{{/if}}
<label></label>
<div class="thumb">
<span>{{value}}</span>
......@@ -57,10 +65,53 @@
</div>
</div>
</div>
</li>
</li>
{{/transition}}
{{/if}}
{{/each}}
{{else}}
{{> loader}}
{{/if}}
</ul>
</section>
</section>
</div>
</div>
<div id="modal1" class="modal top-sheet">
<div class="modal-content">
<div class="row">
<form class="col s12" action="#">
<p class="range-field">
<label for="start-year" class="primary-color-text">Select the start year. The current one is <span class="range-start-year">{{getStartYear}}</span></label>
<input value="1981" name="start-year" class="primary-color period-select" type="range" id="start-year" min="1801" max="2016" />
<label for="end-year" class="primary-color-text">Select the end year. The current one is <span class="range-end-year">{{getEndYear}}</span></label>
<input value="2016" name="end-year" class="primary-color period-select" type="range" id="end-year" min="1801" max="2016" />
</p>
<p>
<input class="keywords-type with-gap" name="keywords-type" type="radio" id="keywords-tags-radio" checked="checked"/>
<label class="primary-color-text" for="keywords-tags-radio">Topics extracted from AkomaNtoso "keyword" element</label>
<input class="keywords-type with-gap" name="keywords-type" type="radio" id="keywords-short-titles-radio" />
<label class="primary-color-text" for="keywords-short-titles-radio">Topics extracted with NLP from Akoma Ntoso "shortTitle" element.</label>
</p>
</form>
</div>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
</template>
<template name="loader">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</template>
\ No newline at end of file
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
import { Years } from '../../api/years/years.js';
import { YearsShortTitles } from '../../api/years-short-titles/years-short-titles.js';
import './timeline.html';
Template.timeline.onCreated(function bodyOnCreated() {
Template.timeline.onCreated(function timelinOnCreated() {
this.state = new ReactiveDict();
this.state.set('start-year','1801');
Meteor.subscribe('years');
Meteor.subscribe('years-short-titles');
this.state.set('start-year','1981');
this.state.set('end-year','2016');
this.state.set('keywords-type','extracted from Akoma Ntoso "keyword" element')
this.state.set('keywords-type-numeric','1')
});
Template.timeline.onRendered(function(){
$('.modal-trigger').leanModal();
});
Template.timeline.helpers({
years(){
return Years.find({
value: {
$gt : '2000'
}},{
sort: {
value: 1
}
});
const instance = Template.instance();
if (instance.state.get('keywords-type-numeric') == '1')
return Years.find({
value: {
$gte : instance.state.get('start-year'),
$lte : instance.state.get('end-year'),
$ne : 'undated'
}},{
sort: {
value: 1
}
});
else if (instance.state.get('keywords-type-numeric') == '2')
return YearsShortTitles.find({
value: {
$gte : instance.state.get('start-year'),
$lte : instance.state.get('end-year'),
$ne : 'undated'
}},{
sort: {
value: 1
}
});
},
getStartYear(){
const instance = Template.instance();
......@@ -31,6 +53,10 @@ Template.timeline.helpers({
getEndYear(){
const instance = Template.instance();
return instance.state.get('end-year');
},
getKeywordsType(){
const instance = Template.instance();
return instance.state.get('keywords-type');
}
});
......@@ -42,5 +68,13 @@ Template.timeline.events({
'change #end-year'(event, instance){
event.preventDefault();
instance.state.set('end-year', event.target.value);
},
'click #keywords-tags-radio'(event, instance){
instance.state.set('keywords-type', 'extracted from Akoma Ntoso "keyword" element');
instance.state.set('keywords-type-numeric', '1');
},
'click #keywords-short-titles-radio'(event, instance){
instance.state.set('keywords-type', 'extracted with NLP from Akoma Ntoso "shortTitle" element');
instance.state.set('keywords-type-numeric', '2');
}
});
\ No newline at end of file
.timeline{
position: relative;
list-style-type: none;
padding: 30px 0 50px 0;
font-family: 'Gorditas', Arial, sans-serif;
*{
&:after,&:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
&:before {
content: '';
position: absolute;
width: 5px;
height: 100%;
top: 201px;
left: 165px;
/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
background-color:@primary-color;*/
}
.timeline-section{
header{
width: 100%;
max-width: 1060px;
margin: 0 auto;
padding: 0 30px;
padding: 30px 30px 0px 30px;
font-family: 'Gorditas', Arial, sans-serif;
/*font-family: 'Gorditas', Arial, sans-serif;*/
.clearfix{
zoom: 1;
......@@ -55,7 +29,7 @@
margin: 0;
font-weight: 400;
color: @primary-color;
font-size: 16px;
font-size: 13px;
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
span{
......@@ -66,20 +40,20 @@
h2{
padding: 10px 0;
margin: 0;
font-size: 62px;
line-height: 58px;
font-size: 43px;
line-height: 41px;
color: #fff;
font-weight: 400;
font-weight: bold;
position: relative;
color:@primary-color-text;
text-shadow: 4px 4px 0px @active-color-shadow;
/*text-shadow: 4px 4px 0px @active-color-shadow;*/
span{
>span{
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 18px;
letter-spacing: 5px;
font-size: 13px;
color: @secondary-color;
text-shadow: none;
}
......@@ -91,12 +65,41 @@
background-color:@primary-color;*/
}
}
}
.timeline{
position: relative;
list-style-type: none;
padding: 30px 0 50px 0;
font-family: 'Gorditas', Arial, sans-serif;
*{
&:after,&:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
&:before {
content: '';
position: absolute;
width: 5px;
height: 100%;
/*top: 201px;*/
left: 165px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
background-color:@primary-color;
}
.event{
position: relative;
margin-bottom: 80px;
padding-right: 40px;
label,input[type="radio"]{
width: 24px;
height: 24px;
......@@ -337,7 +340,7 @@
height: 30px;
color: @primary-color;
left: -22px;
top: 19px;
top: 13px;
z-index: -1;
}
......
......@@ -5,6 +5,7 @@
"start": "meteor run"
},
"dependencies": {
"bower": "^1.7.9",
"material-icons": "^0.1.0",
"meteor-node-stubs": "~0.2.0",
"underscore-node": "^0.1.2"
......
This diff is collapsed.
import { Meteor } from 'meteor/meteor';
import '../imports/startup/server/fixtures.js';
import '../imports/api/server/publications.js';
Meteor.startup(() => {
});
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