Add collapsable attribution and logo (fixes #2)

3 files changed, 86 insertions, 3 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index d5048d1..6248d54 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -37,7 +37,7 @@ body {
 
 body > header > h1 {
     background: var(--icon-menu-on) left top no-repeat;
-    margin: -0.1rem 0 -0.1rem 5rem;
+    margin: -0.1rem 0 -0.1rem 2rem;
     font-size: 2rem;
 }
 body > header > h1 span { line-height: 2rem; }
@@ -95,6 +95,10 @@ body > header {
     background-color: #008080;
     color: #000000;
 }
+body > header > h1 a:link span:first-child {
+    background: url(/assets/svg/wallonie-demain-sq.svg) left 0.5rem/contain no-repeat;
+    padding-left: 3rem;
+}
 body > aside {
     background-color: #67736280;
     color: #791515;
@@ -124,3 +128,25 @@ body > aside nav > ul > li#c-9 { background-color: #D3A9B5; }
 .marker.popup .change.c-13 { border-color: #677362; }
 .marker.popup .change.c-9 { border-color: #D3A9B5; }
 
+/**
+ * Attribution
+ **/
+
+#attribution {
+    width: 1.8rem;
+    height: 2.4rem;
+    background: #008080;
+    border-radius: 50%;
+}
+#attribution h1 {
+    margin: 0;
+    text-align:center;
+    line-height: 1.8;
+}
+#attribution.expanded {
+    background: #cdd9c8c0;
+    width: 20rem;
+    height: auto;
+    padding: 1rem;
+    border-radius: 0;
+}
diff --git a/assets/mapper.js b/assets/mapper.js
index cfdee54..a948202 100644
--- a/assets/mapper.js
+++ b/assets/mapper.js
@@ -115,8 +115,8 @@ const Categories = [
 // Store known sections (refs #3)
 const KnownSections = []
 
-// Our map
-const map = L.map('map')
+// Our map -- We customize attribution down below
+const map = L.map('map', {attributionControl: false})
 const mcg = L.markerClusterGroup({
     disableClusteringAtZoom: 18,
     spiderfyOnMaxZoom: false,
@@ -462,6 +462,39 @@ L.control.watermark = function(opts) {
 }
 L.control.watermark({ position: 'bottomleft' }).addTo(map);
 
+/**
+ * Collapsable attribution
+ **/
+const attribution = L.control({ position: 'bottomright' })
+attribution.onAdd = function(map) {
+    var div = L.DomUtil.create('div')
+    div.id = 'attribution'
+    div.innerHTML = '<h1>©</h1>'
+    div.setAttribute('onmouseenter', 'expandAttribution()')
+    div.setAttribute('onmouseleave', 'collapseAttribution()')
+    return div
+}
+function expandAttribution() {
+    $('#attribution').addClass('expanded')
+	.html(renderAttribution())
+}
+function collapseAttribution() {
+    $('#attribution').removeClass('expanded')
+	.html('<h1>©</h1>')
+}
+
+function renderAttribution() {
+    var template = $('#attribution-template').html()
+    var attribution = {
+	leaflet_url: 'http://leafletjs.com/',
+	osm_url: 'https://osm.org/',
+	rt_url: 'http://www.reseautransition.be/',
+	incommon_url: 'https://incommon.cc/'
+    }
+    return Mustache.render(template, { data: attribution })
+}
+    
+
 /*
 function show_markers(sec_id) {
     // Create corresponding layer
@@ -559,6 +592,8 @@ $(document).ready(function() {
 
     OpenStreetMap_HOT.addTo(map)
 
+    attribution.addTo(map)
+
     mcg.addTo(map)
     
     navSetup()
diff --git a/index.html b/index.html
index ace5bfe..f36cf25 100644
--- a/index.html
+++ b/index.html
@@ -56,5 +56,27 @@
 	</footer>
       </article>
     </script>
+    <script id="attribution-template" type="x-tmpl-mustache">
+      <article class="marker popup">
+	<h2>Crédits</h2>
+	<p>Cette carte est rendue possible grâce au soutien de la Région Wallone.</p>
+	<h3>Logiciel</h3>
+	<p>Réalisé par <a
+	href="{{ data.incommon_url }}">Incommon</a>, utilisant <a
+	href="{{ data.leaflet_url }}">Leaflet</a>, sous licence AGPL.
+	(<a href="https://code.cepheide.org/wallonie-demain-proto.git">source</a>)
+	</p>
+	<h3>Données</h3>
+	<p><a href="{{ data.dewey_url }}">Dewey ASBL</a> et
+	le <a href="{{ data.rt_url }}">Réseau Transition</a></p>
+	<p>© 2014-2018 Dewey Maps, Réseau Transition</p>
+	<p>Toutes les données sur cette carte sont libres et
+	disponibles selon les termes de la licence ODBL.</p>
+	<h3>Cartes</h3>
+	<p>© <a href="{{ data.osm_url }}">OpenStreetMap</a> contributors</p>
+	<h3>Création graphique</h3>
+	<p><a href="https://ps.lesoiseaux.io/" class="icon ps">Petites Singularités</a></p>
+      </article>
+    </script>
   </body>
 </html>