merge in UI, add static file hosting, move old js to proto folder

slaporte · May 19, 2012 · 2d06bf4 · 2d06bf4
1 parent 3477fb7
commit 2d06bf4
Show file tree

Hide file tree

Showing 10 changed files with 866 additions and 7 deletions.
diff --git a/dabnabbit.py b/dabnabbit.py
@@ -413,7 +413,7 @@ def test():
 
 if __name__ == '__main__':
     import time
-    dcount = 200
+    dcount = 2000
     start = time.time()
     print 'Saving a bunch (',dcount,') of Dabblets.'
     dabblets = save_a_bunch(dcount)

diff --git a/dabserver.py b/dabserver.py
@@ -1,8 +1,8 @@
-import bottle
-from bottle import route, run, request, response
-import bottle_jsonp
+import os
 
-from peewee import R
+import bottle
+from bottle import route, run, request, response, static_file
+#import bottle_jsonp
 
 from dabnabbit import api_req, replace_dabblet
 import dabase
@@ -12,6 +12,13 @@
 
 # TODO: sequencing/session/"next"
 
+STATIC_DIR = os.path.join(os.path.dirname(__file__), 'static')
+
+@route('/')
+@route('/<path:path>')
+def home_path(path="index.html"):
+    return static_file(path, root=STATIC_DIR)
+
 @route('/get/')
 def get_dabblet():
     dab_id = request.GET.get('id')
@@ -28,7 +35,14 @@ def get_random_dabblet():
 
     return { 'dabs': [ d.jsondict() for d in rdabs ] }
 
+class SlashMiddleware(object):
+    def __init__(self, app):
+        self.app = app
+    def __call__(self, e, h):
+        e['PATH_INFO'] = e['PATH_INFO'].rstrip('/')+'/'
+        return self.app(e,h)
+
 if __name__ == '__main__':
     dabase.init('abunch')
-    print get_random_dabblet()
-    run(host='0.0.0.0', port=8080, server='gevent')
+    app = SlashMiddleware(bottle.app())
+    run(app=app, host='0.0.0.0', port=8080, server='gevent')
diff --git a/js/dab.js → proto/dab.js b/js/dab.js → proto/dab.js
diff --git a/js/jquery.js → proto/jquery.js b/js/jquery.js → proto/jquery.js
diff --git a/static/about.html b/static/about.html
@@ -0,0 +1,101 @@
+<html>
+	<head>
+
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
+
+		<title></title>
+		<meta name="description" content="">
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+		<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
+		<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+
+
+		<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
+		<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
+
+		<link rel="stylesheet" type="text/css" href="styles.css">
+
+
+	</head>
+
+	<body class="light_bg stub">
+		<div id="statsbar" class="accent_bg"><h3></h3></div>
+ 		<!-- <div class="bar" id="topbar"></div> -->
+		<div class="bar light_bg" id="bottombar">
+			<nav>
+				<a href="#">About</a>
+				<a href="#">Blah</a>
+				<a href="#">About</a>
+				<a href="#">Blah</a>
+			</nav>
+			<div id="home" class="footer accent_text"><a href="index.html">◀ Back to questions</a></div>
+		</div>
+
+		<div id="sectorwrapper" class="sectorwrappertransition">
+
+			<div id="left-center">	
+				<h2 id="stubtitle" class="accent_border" style="">About</h2>
+				<div id="left" class="sector">
+						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+				</div>
+				<div id="center" class="sector">
+					<div class='filmstrip_frame'><div class="filmstrip_img"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Grants_Gazelle_Gazella_granti_in_Tanzania_2645_Nevit.jpg/800px-Grants_Gazelle_Gazella_granti_in_Tanzania_2645_Nevit.jpg"/></div></div>
+				</div>
+
+				<!--	<ul id="option_list">
+						<li>
+							<div class="option">
+								<span class="opt_title">An impala</span>
+								<span class="opt_desc">is an African antelope</span>
+							</div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+
+						<li>
+							<div class="option"><span class="opt_title">IMPALA</span><span class="opt_desc">Independent Music Companies Association</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/IMPALA_Independent_Music_Companies_Association"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Impala (album),</span><span class="opt_desc">the 2nd album by American band Songs: Ohia</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala_(album)"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Impala (DC Comics),</span><span class="opt_desc">a superhero in the DC Comics universe a superhero in the DC Comics universe a superhero in the DC Comics universe a superhero in the DC Comics universe</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala_(DC_Comics)"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Impala (Marvel Comics),</span><span class="opt_desc">a supervillain in the Marvel Comics universe</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala_(Marvel_Comics)"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Impala RFC,</span><span class="opt_desc">a Kenyan rugby club based in Nairobi, Kenya</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Aermacchi MB-326,</span><span class="opt_desc">an aircraft used by the South African Air Force</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Chevrolet Impala,</span><span class="opt_desc">an automobile produced by General Motors</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">The Impalas,</span><span class="opt_desc">an American 1950s doowop group</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+						<li>
+							<div class="option"><span class="opt_title">Impala,</span><span class="opt_desc">a famous Spanish motorcycle model from Montesa</span></div>
+							<div class="preview" link="http://en.wikipedia.org/wiki/Impala"></div>
+						</li>
+					</ul>
+				</div> -->
+			</div>
+
+		</div>
+
+		<script type="text/javascript" src="custom.js"></script>
+
+	</body>
+
+</html>
diff --git a/static/custom.js b/static/custom.js
@@ -0,0 +1,183 @@
+$(document).ready(function() {
+
+// VARIABLES /////////////////////////////
+	var fullDuration = 2500;
+	var slide_distance = $('div#left').width();
+	var i = 1;
+	var colors_array = [['#ebf2f6', '#DAF0FC', '#25b8eb'], ['#EAEAEF','#E1E1F4','#6161BC'], ['#EBF7F0','#BDF2D3','#2DAD86'],  ['#F4ECE9','#FCC4B6','#F76C48'], ['#ECF2E9','#C9E0B1','#87B52D']]
+	var light = colors_array[0][0]
+	var med = colors_array[0][1]
+	var accent = colors_array[0][2]
+	var bodytext = '#808285';
+	var expandedWidth = "2200px";
+
+// CACHE /////////////////////////////////
+	var sectorwrapper = $('#sectorwrapper');
+	var statsbar = $('div#statsbar')
+	var back = $('#back')
+	var topbar = $('#topbar')
+	var bottombar = $('#bottombar')
+
+
+// FUNCTIONS /////////////////////////////
+	function resetContent() {
+
+	}
+
+	function resetStats() {
+		$('div#statsbar h3').text("124,321 dabs completed!")
+		// $('div#statsbar').delay(fullDuration*.1).animate({height: 40}, fullDuration*.2).delay(fullDuration*.5).animate({height: 8}, fullDuration*.2);
+	}
+
+	function resetLeft() {
+		$('.preview').removeClass('viewing')
+		topbar.css('margin-left', '80px');
+		bottombar.css('margin-left', '80px');
+		sectorwrapper.css('width', 0);
+		sectorwrapper.css('left', '0px')
+		back.css('visibility', 'hidden')
+		$('.unpreview').removeClass('unpreview');
+		document.getElementById('wikipedia_preview').src = '';
+	}
+
+	function swipe(i) {	
+		$('header#question').animate({opacity: 0}, fullDuration*.2).delay(fullDuration*.7).animate({opacity: 1}, fullDuration*.1);
+		topbar.animate({opacity: 0}, fullDuration*.2).delay(fullDuration*.7).animate({opacity: 1}, fullDuration*.1);	
+		bottombar.animate({opacity: 0}, fullDuration*.2).delay(fullDuration*.7).animate({opacity: 1}, fullDuration*.1);	
+		sectorwrapper.removeClass('sectorwrappertransition').delay(fullDuration*.3).animate({
+			top: "-100%",
+		}, fullDuration*.3, function() {
+			resetLeft();
+			resetContent();
+			$('#option_list li').css("opacity", 1);
+			sectorwrapper.css('top', '100%');
+			sectorwrapper.animate({
+				top: "0%",
+			}, fullDuration*.3, function() {
+				$('#sectorwrapper').addClass('sectorwrappertransition')
+			});
+		});
+
+
+	}
+
+	function colorChange(palette) {
+		statsbar.delay(fullDuration*.1).animate({height: 40}, fullDuration*.2).animate({
+		      backgroundColor: palette[2]
+		}, fullDuration*.6, function() {}).delay(fullDuration*.1).animate({height: 8}, fullDuration*.2);;
+
+		$('body').animate({
+		      backgroundColor: palette[0]
+		}, fullDuration*.6, function() {
+			light = palette[0];
+			med = palette[1];
+			accent = palette[2];
+			$('.light_bg').css('backgroundColor', light)
+			$('.light_text').css('color', light)
+			$('.accent_bg').css('backgroundColor', accent)
+			$('.med_bg').css('backgroundColor', med)
+			$('.med_text').css('color', med)
+			$('.accent_text').css('color', accent)
+			$('.accent_border').css('border-color', accent)
+
+		});
+
+
+	}
+
+
+// BEHAVIORS ////////////////////////////////////////////////////
+
+	window.onscroll = function(e) {
+		console.log(e)
+	}
+
+
+	$('div.option').on({
+		click: function() {
+			$(this).parents('li').siblings('li').animate({
+			    opacity: 0,
+			}, 500);
+			resetStats();	
+			colorChange(colors_array[i]);	
+			swipe(i);
+			i++; //i rotates through the colors
+			if (i == colors_array.length) {i=0;}
+		},
+		mouseover: function() {
+			$(this).css('backgroundColor', accent)
+			$(this).children('.opt_title').css('color', "white")
+			$(this).children('.opt_desc').css('color', light)
+
+		},
+		mouseleave: function() {
+			$(this).css('backgroundColor', med)
+			$(this).children('.opt_title').css('color', accent);
+			$(this).children('.opt_desc').css('color', bodytext);
+		}
+	});
+
+	$('#option_list li').on({
+		mouseenter: function(){
+			$(this).addClass('active')
+		},
+		mouseleave: function(){
+			$(this).removeClass('active')
+		}
+	});
+
+	$('div.preview').on({
+		click: function(){
+			$('.preview').removeClass('viewing')
+			$(this).addClass('viewing')
+			if (sectorwrapper.css('left') == "0px") {
+				topbar.css('margin-left', "-"+(slide_distance-80)+"px");
+				bottombar.css('margin-left', "-"+(slide_distance-80)+"px");
+				sectorwrapper.css('width', expandedWidth)
+				sectorwrapper.css('left', "-"+slide_distance+"px")
+			}
+			var location = $(this).attr('link')
+			back.css('visibility', 'visible');
+			back.animate({opacity: 1}, 600, function() {
+				document.getElementById('wikipedia_preview').src = location;
+			});
+		}
+	});
+
+	back.on({
+		click: function(){
+			resetLeft();
+		}
+	});
+
+	$('#skip').on({
+		click: function(){
+			swipe(i);	
+		}
+	});
+
+	statsbar.on({
+		mouseenter: function(){
+			statsbar.delay(200).animate({height: 40}, 200)
+		},
+		mouseleave: function(){
+			statsbar.stop(true, true);
+			statsbar.animate({height: 8}, 200)
+		}
+	});
+
+	$('a').on({ //to override default link colors
+		mouseenter: function(){
+			$(this).addClass('accent_text')
+		},
+		mouseleave: function(){
+			$(this).removeClass('accent_text')
+	    }
+	});
+
+// INITIALIZING THE PAGE ///////////////////////
+
+	resetContent();
+	// resetStats();
+
+});