From 5975459f2ca161816d5e6b84854ca28167eb1170 Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Mon, 26 Mar 2018 11:52:43 -0400 Subject: [PATCH] basic slideshow code --- slides/chapters/0_Introduction.js | 14 +++++ slides/chapters/1_Networks.js | 0 slides/chapters/2_Simple_Contagion.js | 0 slides/chapters/3_Complex_Contagion.js | 0 slides/chapters/4_Bonding_And_Bridging.js | 0 slides/chapters/5_Sandbox.js | 0 slides/chapters/6_Conclusion.js | 0 slides/chapters/7_Credits.js | 0 slides/index.css | 35 ++++++++++++ slides/index.html | 67 +++++++++++++++++++++++ slides/js/Slideshow.js | 59 ++++++++++++++++++++ slides/js/helpers.js | 7 +++ 12 files changed, 182 insertions(+) create mode 100644 slides/chapters/0_Introduction.js create mode 100644 slides/chapters/1_Networks.js create mode 100644 slides/chapters/2_Simple_Contagion.js create mode 100644 slides/chapters/3_Complex_Contagion.js create mode 100644 slides/chapters/4_Bonding_And_Bridging.js create mode 100644 slides/chapters/5_Sandbox.js create mode 100644 slides/chapters/6_Conclusion.js create mode 100644 slides/chapters/7_Credits.js create mode 100644 slides/index.css create mode 100644 slides/index.html create mode 100644 slides/js/Slideshow.js create mode 100644 slides/js/helpers.js diff --git a/slides/chapters/0_Introduction.js b/slides/chapters/0_Introduction.js new file mode 100644 index 0000000..43c3f21 --- /dev/null +++ b/slides/chapters/0_Introduction.js @@ -0,0 +1,14 @@ +// 0 - INTRODUCTION +SLIDES.push( +{ + chapter: "1", + boxes: [ + {words:"_0a", x:20, y:70, w:300, h:200} + ] +}, +{ + boxes: [ + {words:"_0b", x:300, y:70, w:250, h:200} + ] +} +); \ No newline at end of file diff --git a/slides/chapters/1_Networks.js b/slides/chapters/1_Networks.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/2_Simple_Contagion.js b/slides/chapters/2_Simple_Contagion.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/3_Complex_Contagion.js b/slides/chapters/3_Complex_Contagion.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/4_Bonding_And_Bridging.js b/slides/chapters/4_Bonding_And_Bridging.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/5_Sandbox.js b/slides/chapters/5_Sandbox.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/6_Conclusion.js b/slides/chapters/6_Conclusion.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/chapters/7_Credits.js b/slides/chapters/7_Credits.js new file mode 100644 index 0000000..e69de29 diff --git a/slides/index.css b/slides/index.css new file mode 100644 index 0000000..cffa220 --- /dev/null +++ b/slides/index.css @@ -0,0 +1,35 @@ +body{ + margin:0; + + font-family: "FuturaHandwritten"; + font-size: 20px; +} + +#slideshow_container{ + position: absolute; + width: 100%; + height: calc(100% - 60px); +} +#slideshow{ + position: absolute; + width: 960px; + height: 540px; + margin: auto; + top:0; left:0; right:0; bottom:0; + background: #eee; +} +#slideshow div{ + position: absolute; +} + +#navigation{ + position: absolute; + bottom:0; + background: #222; + width: 100%; + height:60px; +} + +words, bonus, glossary{ + display: none; +} \ No newline at end of file diff --git a/slides/index.html b/slides/index.html new file mode 100644 index 0000000..e6fc04e --- /dev/null +++ b/slides/index.html @@ -0,0 +1,67 @@ + + + + + + The Wisdom and/or Madness of Crowds + + + +
+
+
+
+ + + + + + + + + + + +Why is it that the same people, +in different groups, can be kind, cruel, smart, stupid? +In this explorable explanation, +I'll show how the network of a group itself +can shape the people caught in its web. + + +herp derp herp derp + + + + +herp derp herp derp herp derp + + +herp derp herp derp herp derp + + + + + + + + + + + + + + + + + + diff --git a/slides/js/Slideshow.js b/slides/js/Slideshow.js new file mode 100644 index 0000000..b79486a --- /dev/null +++ b/slides/js/Slideshow.js @@ -0,0 +1,59 @@ +////////////////////////// +// THE SLIDESHOW, YO ///// +////////////////////////// + +var SLIDES = []; +var slideshow = new Slideshow(); + +function Slideshow(){ + + var self = this; + + // The DOM & properties... + self.dom = $("#slideshow"); + self.slideIndex = 0; + + // GOTO and NEXT + self.goto = function(index){ + + self.slideIndex = index; + var slide = SLIDES[index]; + + // Clear DOM + self.clear(); + + // Add boxes + slide.boxes = slide.boxes || []; + slide.boxes.forEach(function(box){ + var boxDOM = document.createElement("div"); + boxDOM.className = "word_box"; + if(box.words) boxDOM.innerHTML = $("words#"+box.words).innerHTML; + if(box.x) boxDOM.style.left = box.x; + if(box.y) boxDOM.style.top = box.y; + if(box.w) boxDOM.style.width = box.w; + if(box.h) boxDOM.style.height = box.h; + self.dom.appendChild(boxDOM); + }); + + }; + self.gotoChapter = function(chapterID){ + var index = SLIDES.findIndex(function(slide){ + return slide.chapter == chapterID; + }); + self.goto(index); + }; + self.next = function(){ + self.goto(self.slideIndex+1); + }; + + // Clear out the DOM + self.clear = function(){ + self.dom.innerHTML = ""; + }; + +} + +// On load, set slideshow to first slide +window.addEventListener("load", function(){ + slideshow.goto(0); +}); \ No newline at end of file diff --git a/slides/js/helpers.js b/slides/js/helpers.js new file mode 100644 index 0000000..572cc22 --- /dev/null +++ b/slides/js/helpers.js @@ -0,0 +1,7 @@ +////////////////// +// HELPERS /////// +////////////////// + +function $(query){ + return document.querySelector(query); +} \ No newline at end of file