Start with campus map

7 files changed, 148 insertions, 29 deletions

diff --git a/images/campus.jpg b/images/campus.jpg
new file mode 100644
index 0000000..c3b7d88
--- /dev/null
+++ b/images/campus.jpg
diff --git a/js/campus-coords.js b/js/campus-coords.js
new file mode 100644
index 0000000..798bf69
--- /dev/null
+++ b/js/campus-coords.js
@@ -0,0 +1,78 @@
+define(function() {
+    'use strict';
+    return [
+        {
+            "name": "Sportpark",
+            "coords": [
+                [355,134],
+                [355,221],
+                [648,221],
+                [648,134]
+            ]
+        }, {
+            "name" : "Zwarte doos",
+            "coords": [
+                [297,647],
+                [321,647],
+                [321,666],
+                [304,666],
+                [304,659],
+                [297,659],
+            ]
+        }, {
+            "name": "Metaforum",
+            "coords": [
+                [453,492],
+                [512,492],
+                [512,607],
+                [453,607],
+            ]
+        }, {
+            "name": "Auditorium",
+            "coords": [
+                [278,496],
+                [278,528],
+                [281,528],
+                [281,540],
+                [343,540],
+                [343,531],
+                [345,531],
+                [345,518],
+                [348,518],
+                [348,513],
+                [345,513],
+                [345,507],
+                [343,507],
+                [343,496],
+                [331,496],
+                [331,488],
+                [329,488],
+                [329,496],
+            ]
+        }, {
+            "name": "Hoofdgebouw",
+            "coords": [
+                [400,454],
+                [400,482],
+                [387,482],
+                [387,510],
+                [397,510],
+                [397,528],
+                [391,528],
+                [391,558],
+                [401,558],
+                [401,587],
+                [416,587],
+                [416,558],
+                [429,558],
+                [429,528],
+                [419,528],
+                [419,519],
+                [429,519],
+                [430,482],
+                [416,482],
+                [416,454],
+            ]
+        }
+    ];
+});
diff --git a/js/campus.js b/js/campus.js
new file mode 100644
index 0000000..941d5bb
--- /dev/null
+++ b/js/campus.js
@@ -0,0 +1,39 @@
+define(['campus-coords', 'd3'], function(coords, d3) {
+    'use strict';
+
+    var imageUrl = 'images/campus.jpg';
+
+    function initSvg(svg) {
+        svg
+            .attr('width', 1280)
+            .attr('height', 893);
+
+        svg.append('image')
+            .attr('xlink:href', imageUrl)
+            .attr('width', 1280)
+            .attr('height', 893);
+
+        svg.append('g')
+            .selectAll('polygon')
+                .data(coords)
+            .enter()
+                .append('a')
+                    .attr('xlink:href', function(d) {
+                        return '#/campus/' + d.name;
+                    })
+                .append('polygon')
+                    .attr('class', 'building')
+                    .attr('points', function(d) {
+                        return d.coords.join(' ');
+                    })
+                    .append('title')
+                        .text(function(d) {
+                            return d.name;
+                        });
+    }
+
+    return function() {
+        var svg = d3.select('#campus-map').append('svg');
+        initSvg(svg);
+    };
+});
diff --git a/pages/campus.html b/pages/campus.html
index 59a64cd..fe62b9b 100644
--- a/pages/campus.html
+++ b/pages/campus.html
@@ -1,30 +1,5 @@
-<p>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus.
-Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis
-accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id
-volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim
-nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu
-vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu,
-ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend
-consequat.
-</p>
+<script>
+require(['campus'], function(main) { main(); });
+</script>
 
-<p>
-In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam
-eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus
-condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc
-neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus.
-Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed
-hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum
-elit. Curabitur lobortis metus nec felis condimentum cursus.
-</p>
-
-<p>
-Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas
-nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit
-amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi
-feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse
-lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus
-vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac,
-venenatis sit amet ipsum.
-</p>
+<div id="campus-map"></div>
diff --git a/style/campus.less b/style/campus.less
new file mode 100644
index 0000000..e93f4fa
--- /dev/null
+++ b/style/campus.less
@@ -0,0 +1,20 @@
+@import "colors.less";
+
+body[data-page="campus"] #campus-map {
+    /* NOTE: you cannot use all CSS properties here on SVG elements.
+     * Things like border-radius and box-shadow do not work here. */
+    svg {
+        .building {
+            stroke: @color-campus-building-border;
+            stroke-width: 3;
+            fill: @color-campus-building-fill;
+            opacity: .3;
+
+            &:hover {
+                opacity: .7;
+                stroke-width: 6;
+            }
+        }
+    }
+}
+/* vim: set sw=4 et ts=4: */
diff --git a/style/colors.less b/style/colors.less
index 2518b5c..0f3fe7f 100644
--- a/style/colors.less
+++ b/style/colors.less
@@ -1,3 +1,9 @@
+/* Lovely colors! */
+
+/* Campus map */
+@color-campus-building-border: #f00;
+@color-campus-building-fill: #ccf;
+
 /* Color scheme from http://paletton.com/#uid=53v0u0k7UUa3cZA5wXlaiQ5cFL3 */
 
 @color-primary-0: #B5D6EB;	/* Main Primary color */
diff --git a/style/main.less b/style/main.less
index 65d7340..1a5f854 100644
--- a/style/main.less
+++ b/style/main.less
@@ -73,6 +73,7 @@ body[data-page="home"] {
 }
 
 @import "curriculum.less";
+@import "campus.less";
 
 /* footer */
 footer {