navigation
This commit is contained in:
Nicky Case
parent
cf4ba999e0
commit
9714fd8d06
|
|
@ -8,7 +8,7 @@ body{
|
|||
margin:0;
|
||||
|
||||
font-family: "FuturaHandwritten";
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
|
|
@ -107,12 +107,100 @@ body{
|
|||
}
|
||||
|
||||
/* NAVIGATION */
|
||||
#navigation{
|
||||
#navigation_container{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
background: #222;
|
||||
width: 100%;
|
||||
height:60px;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#navigation{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(50% - 300px);
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
#navigation > div{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #222;
|
||||
color:#fff;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 1px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
line-height: 34px;
|
||||
}
|
||||
#navigation > div[highlight]{
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
#navigation > div > span:nth-child(1){
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: block;
|
||||
}
|
||||
#navigation > div > span:nth-child(2){
|
||||
display: none;
|
||||
}
|
||||
#navigation > div:hover{
|
||||
background: rgba(255,255,255,0.25);
|
||||
}
|
||||
#navigation > div[highlight]:hover{
|
||||
background: #fff;
|
||||
}
|
||||
#navigation > span.nav_divider{
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
#navigation > span#nav_bubble{
|
||||
|
||||
transition: opacity 0.2s ease-in-out,
|
||||
left 0.2s ease-in-out,
|
||||
top 0.2s ease-in-out;
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
position: absolute;
|
||||
top:-80px;
|
||||
left:0;
|
||||
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
font-size: 18px;
|
||||
|
||||
width: 220px;
|
||||
padding: 6px 0;
|
||||
|
||||
}
|
||||
#navigation > span#nav_bubble:after{
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
border-top-color: rgba(0,0,0,0.8);
|
||||
border-width: 15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
/* PENCIL */
|
||||
|
|
|
|||
|
|
@ -45,7 +45,62 @@ Cursor is allowed to flow EVERYWHERE though...
|
|||
</div>
|
||||
|
||||
<!-- Navigation: Audio, Contents, Share, Translations -->
|
||||
<div id="navigation">
|
||||
<div id="navigation_container">
|
||||
<div id="audio"></div>
|
||||
<div id="navigation">
|
||||
|
||||
<!-- The chapters -->
|
||||
<div chapter="Introduction">
|
||||
<span>0</span>
|
||||
<span>0. Introduction</span>
|
||||
</div>
|
||||
<div chapter="Networks">
|
||||
<span>1</span>
|
||||
<span>1. Networks</span>
|
||||
</div>
|
||||
<div chapter="Simple">
|
||||
<span>2</span>
|
||||
<span>2. Simple Contagion</span>
|
||||
</div>
|
||||
<div chapter="Complex">
|
||||
<span>3</span>
|
||||
<span>3. Complex Contagion</span>
|
||||
</div>
|
||||
<div chapter="BB">
|
||||
<span>4</span>
|
||||
<span>4. Bonding & Bridging</span>
|
||||
</div>
|
||||
<div chapter="Sandbox">
|
||||
<span>5</span>
|
||||
<span>5. Sandbox</span>
|
||||
</div>
|
||||
<div chapter="Conclusion">
|
||||
<span>6</span>
|
||||
<span>6. In Conclusion...</span>
|
||||
</div>
|
||||
<div chapter="Credits">
|
||||
<span>7</span>
|
||||
<span>7. Credits</span>
|
||||
</div>
|
||||
|
||||
<!-- A divider -->
|
||||
<span class="nav_divider"></span>
|
||||
|
||||
<!-- Bonus Notes & References -->
|
||||
<div modal="bonus">
|
||||
<span>?</span>
|
||||
<span>Bonus Boxes! (Notes)</span>
|
||||
</div>
|
||||
<div modal="references">
|
||||
<span style="margin-top:5px">*</span>
|
||||
<span>References</span>
|
||||
</div>
|
||||
|
||||
<!-- The hover bubble -->
|
||||
<span id="nav_bubble">AHHHHHH</span>
|
||||
|
||||
</div>
|
||||
<div id="social"></div>
|
||||
</div>
|
||||
|
||||
<canvas id="pencil"></canvas>
|
||||
|
|
@ -206,6 +261,10 @@ herp derp blah blah
|
|||
|
||||
<!-- 7. Credits -->
|
||||
|
||||
<words id="_7_credits">
|
||||
FWEEEEEE
|
||||
</words>
|
||||
|
||||
<!-- x. misc -->
|
||||
<words id="WIN">
|
||||
WIN
|
||||
|
|
@ -231,12 +290,12 @@ WIN
|
|||
</description>
|
||||
</bonus>
|
||||
|
||||
<!-- - - - - - -->
|
||||
<!-- GLOSSARY -->
|
||||
<!-- - - - - - -->
|
||||
<!-- - - - - - - -->
|
||||
<!-- REFERENCES -->
|
||||
<!-- - - - - - - -->
|
||||
|
||||
<glossary>
|
||||
</glossary>
|
||||
<references>
|
||||
</references>
|
||||
|
||||
<!-- - - - - -->
|
||||
<!-- SCRIPTS -->
|
||||
|
|
@ -252,6 +311,7 @@ WIN
|
|||
<script src="js/slideshow/Pencil.js"></script>
|
||||
<script src="js/slideshow/Boxes.js"></script>
|
||||
<script src="js/slideshow/Scratch.js"></script>
|
||||
<script src="js/slideshow/Navigation.js"></script>
|
||||
|
||||
<script src="js/sim/Peep.js"></script>
|
||||
<script src="js/sim/Connection.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// 0 - INTRODUCTION
|
||||
SLIDES.push(
|
||||
{
|
||||
chapter: "Introduction"
|
||||
chapter: "Introduction",
|
||||
clear:true
|
||||
}
|
||||
);
|
||||
|
|
@ -1,6 +1,22 @@
|
|||
// 0 - INTRODUCTION
|
||||
SLIDES.push(
|
||||
{
|
||||
chapter: "Sandbox"
|
||||
chapter: "Sandbox",
|
||||
clear:true,
|
||||
|
||||
add:[
|
||||
// The fullscreen simulation
|
||||
{
|
||||
type:"sim",
|
||||
x:0, y:0,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0,
|
||||
"peeps":[[443,213,1],[570,309,0],[686,194,0]],
|
||||
"connections":[[0,1,0],[1,2,0]]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
);
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// 0 - INTRODUCTION
|
||||
SLIDES.push(
|
||||
{
|
||||
chapter: "Conclusion"
|
||||
chapter: "Conclusion",
|
||||
clear:true
|
||||
}
|
||||
);
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
// 0 - INTRODUCTION
|
||||
SLIDES.push(
|
||||
{
|
||||
chapter: "Credits"
|
||||
chapter: "Credits",
|
||||
clear:true,
|
||||
add:[
|
||||
|
||||
// Background
|
||||
{
|
||||
type:"box",
|
||||
background:"#222"
|
||||
},
|
||||
|
||||
// CREDITS
|
||||
{
|
||||
type:"box",
|
||||
text:"_7_credits", x:280, y:0, w:400, h:70, align:"center", color:"#fff"
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
);
|
||||
|
|
@ -3,6 +3,7 @@ window.onload = function(){
|
|||
// Setting up the main stuff
|
||||
window.slideshow = new Slideshow();
|
||||
window.pencil = new Pencil();
|
||||
window.navigation = new Navigation();
|
||||
|
||||
// Initializing the Mouse
|
||||
Mouse.init(document.body);
|
||||
|
|
@ -28,6 +29,6 @@ window.onload = function(){
|
|||
window.requestAnimationFrame(update);
|
||||
|
||||
// First slide!
|
||||
slideshow.gotoChapter("BB-Both");
|
||||
slideshow.gotoChapter("Sandbox");
|
||||
|
||||
}
|
||||
|
|
@ -39,6 +39,15 @@ function Boxes(){
|
|||
if(config.h) box.style.height = config.h;
|
||||
if(config.hidden) box.style.display = "none";
|
||||
|
||||
// background
|
||||
if(config.background){
|
||||
box.style.left = "-1000px";
|
||||
box.style.top = "-1000px";
|
||||
box.style.width = 10000;
|
||||
box.style.height = 10000;
|
||||
box.style.background = config.background;
|
||||
}
|
||||
|
||||
// words:
|
||||
if(config.text){
|
||||
box.innerHTML = getWords(config.text);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
/*************************
|
||||
|
||||
Giant "everything" class that handles all the misc UI:
|
||||
navigation, modal dialogues, audio, etc
|
||||
|
||||
*************************/
|
||||
function Navigation(){
|
||||
|
||||
var self = this;
|
||||
|
||||
// Navigation buttons
|
||||
var nav_buttons = $all("#navigation > div");
|
||||
nav_buttons.forEach(function(nav){
|
||||
|
||||
// Show label bubble
|
||||
(function(nav){
|
||||
nav.onmouseover = function(){
|
||||
_showBubble(nav);
|
||||
};
|
||||
nav.onmouseout = function(){
|
||||
_hideBubble();
|
||||
};
|
||||
})(nav);
|
||||
|
||||
// If it's a chapter, when you click it, go to that chapter!
|
||||
var chapter = nav.getAttribute("chapter");
|
||||
if(chapter){
|
||||
(function(nav, chapter){
|
||||
nav.onclick = function(){
|
||||
slideshow.gotoChapter(chapter);
|
||||
};
|
||||
})(nav, chapter);
|
||||
}
|
||||
|
||||
});
|
||||
subscribe("slideshow/goto/",function(chapterID){
|
||||
|
||||
nav_buttons.forEach(function(nav){
|
||||
var chapter = nav.getAttribute("chapter");
|
||||
if(chapter==chapterID){
|
||||
nav.setAttribute("highlight", true);
|
||||
}else{
|
||||
nav.removeAttribute("highlight");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Navigation label bubble
|
||||
var bubble = $("#nav_bubble");
|
||||
var isShowingBubble = false;
|
||||
var _showBubble = function(nav){
|
||||
|
||||
var offset = nav.getBoundingClientRect().x - $("#navigation").getBoundingClientRect().x;
|
||||
var label = nav.querySelector("span:nth-child(2)").innerHTML;
|
||||
bubble.style.left = offset - (220/2) + (36/2);
|
||||
bubble.innerHTML = label;
|
||||
|
||||
bubble.style.display = "block";
|
||||
setTimeout(function(){
|
||||
bubble.style.opacity = 1;
|
||||
bubble.style.top = -85;
|
||||
},1);
|
||||
isShowingBubble = true;
|
||||
|
||||
};
|
||||
var _hideBubble = function(){
|
||||
isShowingBubble = false;
|
||||
bubble.style.opacity = 0;
|
||||
bubble.style.top = -80;
|
||||
};
|
||||
var _countdown = 0;
|
||||
subscribe("update", function(){
|
||||
if(isShowingBubble){
|
||||
_countdown = 0.25;
|
||||
}else{
|
||||
if(_countdown>0){
|
||||
_countdown -= 1/60;
|
||||
}else{
|
||||
bubble.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
function SandboxUI(){
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ function Scratch(){
|
|||
var handle = subscribe("update", function(){
|
||||
var yOffset = Math.floor(frame)*(-100);
|
||||
self.dom.style.backgroundPosition = xOffset+"% "+yOffset+"%";
|
||||
console.log(xOffset, yOffset);
|
||||
if(frame>19){
|
||||
unsubscribe(handle);
|
||||
if(callback) callback();
|
||||
|
|
|
|||
|
|
@ -29,13 +29,12 @@ function Slideshow(){
|
|||
|
||||
self.slideIndex = index;
|
||||
var isFirstSlide = (self.currentSlide==null);
|
||||
self.currentSlide = SLIDES[self.slideIndex];
|
||||
var slide = self.currentSlide;
|
||||
var slide = SLIDES[self.slideIndex];
|
||||
|
||||
// Clear?
|
||||
var _delayNewSlide = 0;
|
||||
if(slide.clear && !isFirstSlide){
|
||||
_delayNewSlide = 700;
|
||||
_delayNewSlide = 800;
|
||||
self.scratch.scratchOut(); // Scratch out
|
||||
$("#container").removeAttribute("sim_is_running"); // remove that UI
|
||||
}
|
||||
|
|
@ -99,12 +98,20 @@ function Slideshow(){
|
|||
|
||||
}, _delayAdd);
|
||||
|
||||
// I'm the new slide now
|
||||
self.currentSlide = slide;
|
||||
|
||||
// On start (if any)
|
||||
self.currentState = {};
|
||||
if(slide.onstart) slide.onstart(self, self.currentState);
|
||||
|
||||
}, _delayNewSlide);
|
||||
|
||||
// Tell everyone it's a new chapter
|
||||
if(slide.chapter && slide.chapter.indexOf("-")<0){ // is chapter and not sub-chapter
|
||||
publish("slideshow/goto/",[slide.chapter]);
|
||||
}
|
||||
|
||||
};
|
||||
var _setTimeout = function(callback, delay){
|
||||
if(delay==0) return callback();
|
||||
|
|
|
|||
Loading…
Reference in New Issue