intro and contact page

app/event/models.py

@@ -32,31 +32,34 @@ class Event(models.Model):
 
     @property
     def display_date(self):
-        date = self.date.split(' ')
-        start = date[0].split('-')
-        if len(date) > 1:
-            end = date[1].split('-')
-        else:
-            end = start
-        end_only_month = False
-        start_only_month = False
-        while len(end) < 3:
-            end.append(1)
-            end_only_month = True
-        while len(start) < 3:
-            start.append(1)
-            start_only_month = True
-        start = [int(p) for p in start]
-        end = [int(p) for p in end]
+        if self.date:
+            date = self.date.split(' ')
+            start = date[0].split('-')
+            if len(date) > 1:
+                end = date[1].split('-')
+            else:
+                end = start
+            end_only_month = False
+            start_only_month = False
+            while len(end) < 3:
+                end.append(1)
+                end_only_month = True
+            while len(start) < 3:
+                start.append(1)
+                start_only_month = True
+            start = [int(p) for p in start]
+            end = [int(p) for p in end]
 
-        display_date = datetime(*start).strftime('%d %B, %Y')
-        if start_only_month:
-            display_date = ' '.join(display_date.split(' ')[1:])
-        if end != start:
-            end_date = datetime(*end).strftime('%d %B, %Y')
-            if end_only_month:
-                end_date = ' '.join(end_date.split(' ')[1:])
-            display_date += ' — ' + end_date
+            display_date = datetime(*start).strftime('%e %B, %Y')
+            if start_only_month:
+                display_date = ' '.join(display_date.split(' ')[1:])
+            if end != start:
+                end_date = datetime(*end).strftime('%e %B, %Y')
+                if end_only_month:
+                    end_date = ' '.join(end_date.split(' ')[1:])
+                display_date += ' — ' + end_date
+        else:
+            display_date = ''
         return display_date
 
     def media_html(self):

app/event/views.py

@@ -7,13 +7,14 @@ from .models import Event
 from ..page.models import Page
 
 
-def index(request, slug=''):
+def events(request, slug=''):
     context = {}
     context['settings'] = settings
     context['events'] = Event.objects.all().order_by('position')
     context['postscript'], c = Page.objects.get_or_create(slug='postscript')
     context['intro'], c = Page.objects.get_or_create(slug='intro')
-    return render(request, 'index.html', context)
+    return render(request, 'events.html', context)
+
 
 def timeline(request):
     context = {}

app/static/css/partials/_layout.scss

@@ -6,6 +6,11 @@
     margin: auto;
 }
 
+.reference {
+  color: #333;
+  font-size: 11px;
+}
+
 
 p {
 }

app/static/timeline/js/timeline.js

@@ -2699,7 +2699,7 @@ this._timenav.updateDisplay(this.options.width,this.options.timenav_height,e),th
 // Apply class
 this._el.container.className=a},
 // Update hashbookmark in the url bar
-_updateHashBookmark:function(t){var e="#event-"+t.toString();"file:"!=window.location.protocol&&window.history.replaceState(null,"Browsing TimelineJS",e),this.fire("hash_updated",{unique_id:this.current_id,hashbookmark:"#event-"+t.toString()},this)},
+_updateHashBookmark:function(t){var e="#"+t.toString();"file:"!=window.location.protocol&&window.history.replaceState(null,"Browsing TimelineJS",e),this.fire("hash_updated",{unique_id:this.current_id,hashbookmark:"#"+t.toString()},this)},
 /*  Init
 	================================================== */
 // Initialize the data
@@ -2754,4 +2754,4 @@ _onDataLoaded:function(t){this.fire("dataloaded"),this._initLayout(),this._initE
 	 */
 zoomIn:function(){this._timenav.zoomIn()},zoomOut:function(){this._timenav.zoomOut()},setZoom:function(t){this._timenav.setZoom(t)},_onZoomIn:function(t){this._timenav.zoomIn(),this.fire("zoom_in",{zoom_level:this._timenav.options.scale_factor},this)},_onZoomOut:function(t){this._timenav.zoomOut(),this.fire("zoom_out",{zoom_level:this._timenav.options.scale_factor},this)},_onTimeNavLoaded:function(){this._loaded.timenav=!0,this._onLoaded()},_onStorySliderLoaded:function(){this._loaded.storyslider=!0,this._onLoaded()},_onStorySliderNext:function(t){this.fire("nav_next",t)},_onStorySliderPrevious:function(t){this.fire("nav_previous",t)},_onLoaded:function(){this._loaded.storyslider&&this._loaded.timenav&&(this.fire("loaded",this.config),
 // Go to proper slide
-this.options.hash_bookmark&&""!=window.location.hash?this.goToId(window.location.hash.replace("#event-","")):(TL.Util.isTrue(this.options.start_at_end)||this.options.start_at_slide>this.config.events.length?this.goToEnd():this.goTo(this.options.start_at_slide),this.options.hash_bookmark&&this._updateHashBookmark(this.current_id)))}}),TL.Timeline.source_path=function(){var t=document.getElementsByTagName("script"),e=t[t.length-1].src;return e.substr(0,e.lastIndexOf("/"))}();
+this.options.hash_bookmark&&""!=window.location.hash?this.goToId(window.location.hash.replace("#","")):(TL.Util.isTrue(this.options.start_at_end)||this.options.start_at_slide>this.config.events.length?this.goToEnd():this.goTo(this.options.start_at_slide),this.options.hash_bookmark&&this._updateHashBookmark(this.current_id)))}}),TL.Timeline.source_path=function(){var t=document.getElementsByTagName("script"),e=t[t.length-1].src;return e.substr(0,e.lastIndexOf("/"))}();

app/templates/timeline.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>{% load sass_tags static %}
+<html>
   <head>
 	<title>{{ settings.title }}</title>
     <meta charset="utf-8">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-	<base target="_blank" >
+    <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
 	<link rel="stylesheet" href="{% static 'timeline/css/timeline.css' %}">
 	<link rel="stylesheet" href="{% static 'timeline/css/fonts/font.default.css' %}">
 	<style>
@@ -19,18 +19,70 @@
 		.tl-timeline {
 		
 		}
+		.tl-attribution {
+			display: none !important;
+		}
+
+		.active {
+			display: block
+		}
+		#intro, #contact {
+			display: none;
+		}
 	</style>
-  </head>
-  <body>
+	</head>
+	<body>
+	<div id="intro">
+		{{ intro.body | safe }}
+	</div>
     <div id="timeline"></div>
+    <div id="contact">
+		<form method="post">
+			<input type="text" placeholder="Subject"/><br>
+			<textarea placeholder="Message"></textarea><br>
+			<input type="submit" value="Send message">
+		</form>
+		{{ contact.body | safe }}
+	</div>
 	<script src="{% static 'timeline/js/timeline.js' %}"></script>
     <script>
 		var data = {{ timeline_json | safe }};
-		var timeline = new TL.Timeline('timeline', data, {
-			hash_bookmark: true,
-			debug: false,
-			timenav_height: 100,
-		});
+		var timeline
+
+		function load_timeline() {
+			timeline = new TL.Timeline('timeline', data, {
+				hash_bookmark: true,
+				debug: false,
+				timenav_height: 100,
+			});
+		}
+		document.querySelector('#intro').addEventListener('click', event => {
+			document.querySelector('#intro').style.display = 'none'
+			document.querySelector('#contact').style.display = 'none'
+			document.querySelector('#timeline').style.display = 'block'
+			load_timeline()
+		})
+		if (document.location.hash.slice(1).length) {
+			load_timeline()
+		}
+		function hashchange(event) {
+			console.log('hc', document.location.hash.slice(1).length, document.location.hash.slice(1))
+			if (document.location.hash.slice(1) == 'contact') {
+				document.querySelector('#intro').style.display = 'none'
+				document.querySelector('#contact').style.display = 'block'
+				document.querySelector('#timeline').style.display = 'none'
+			} else if (document.location.hash.slice(1).length) {
+				document.querySelector('#intro').style.display = 'none'
+				document.querySelector('#contact').style.display = 'none'
+				document.querySelector('#timeline').style.display = 'block'
+			} else {
+				document.querySelector('#intro').style.display = 'block'
+				document.querySelector('#contact').style.display = 'none'
+				document.querySelector('#timeline').style.display = 'none'
+			}
+		}
+		window.addEventListener('hashchange', hashchange)
+		hashchange()
     </script>
   </body>
 </html>

app/urls.py

@@ -22,7 +22,7 @@ from .event import views as event_views
 
 urlpatterns = [
     path(settings.URL_PREFIX + 'admin/', admin.site.urls),
-    path(settings.URL_PREFIX + 'timeline/', event_views.timeline, name='timeline'),
-    path(settings.URL_PREFIX + '<str:slug>', event_views.index, name='index'),
-    path(settings.URL_PREFIX + '', event_views.index, name='index'),
+    path(settings.URL_PREFIX + 'events/<str:slug>', event_views.events, name='event'),
+    path(settings.URL_PREFIX + 'events/', event_views.events, name='events'),
+    path(settings.URL_PREFIX + '', event_views.timeline, name='timeline'),
 ]