From a8f6222824dc12236cc534608ac7ae185fcd64a0 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 6 Jun 2013 10:51:13 -0400
Subject: [PATCH] part2 of mobile sidebar menu. still disabled for now going to
 come back to this later.

---
 public/css/style.less         | 12 +++++++++
 public/src/app.js             | 51 +++++++++++++++++++++++++++++++----
 public/templates/category.tpl |  2 +-
 public/templates/footer.tpl   |  4 +++
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index fbb5618144..5903c56a7d 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -647,4 +647,16 @@ body .navbar .nodebb-inline-block {
 		}
 
 	}
+}
+
+
+
+
+#mobile-sidebar {
+	height: 100%;
+	position: absolute;
+	left: 100%;
+	top: 0px;
+	overflow: hidden;
+	margin-top: 60px;
 }
\ No newline at end of file
diff --git a/public/src/app.js b/public/src/app.js
index 2a30f3c867..6002156e4c 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -249,14 +249,55 @@ var socket,
 
 	
 	function addTouchEvents() {
+		return; // later.
+
+
+		// click simulation just for testing/sanity purposes.
+
 		var el = jQuery("#content"),
+			sidebar = jQuery('#mobile-sidebar'),
 			width = el.width();
 
-		el.on('touchmove', function(e) {
-			//this.style.marginLeft = - parseInt(width - event.touches[0].pageX) + 'px';
+		function onTouchMove(ev) {
+			var coordinates = window.event ? window.event.touches[0] : ev.touches[0];
+
+			el.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				paddingRight: parseInt(width - coordinates.pageX) + 'px'});
+
+			sidebar.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				width: parseInt(width - coordinates.pageX) + 'px'
+			});
+		}
+
+		function onMouseMove(ev) {
+			ev.touches = [{pageX: ev.pageX, pageY: ev.pageY}];
+			onTouchMove(ev);
+		}
+
+		function onTouchEnd() {
+			el.css({
+				marginLeft: '0px',
+				paddingRight: '0px'
+			});
+
+			sidebar.css({
+				marginLeft: '0px',
+				width: '0px'
+			});
+		}
+
+		el.on('touchmove', onTouchMove);
+		el.on('mousedown', function() {
+			el.on('mousemove', onMouseMove);
+		});
+
+		el.on('touchend', onTouchEnd);
+		el.on('mouseup', function() {
+			el.off('mousemove');
+			onTouchEnd();
 		});
-		el.on('touchend', function(e) {
-			this.style.marginLeft = 'auto';
-		})
+		
 	}
 }());
diff --git a/public/templates/category.tpl b/public/templates/category.tpl
index 39ccda6c94..e730e33e34 100644
--- a/public/templates/category.tpl
+++ b/public/templates/category.tpl
@@ -45,7 +45,7 @@
 		<hr />
 		<button id="new_post" class="btn btn-primary btn-large {show_category_features}">New Topic</button>
 	</div>
-	<div class="span3 {show_category_features} category-sidebar">
+	<div class="span3 {show_category_features} category-sidebar mobile-sidebar">
 		<div class="sidebar-block img-polaroid">
 			<div class="block-header">
 				<a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign icon-2x"></i></a>&nbsp;
diff --git a/public/templates/footer.tpl b/public/templates/footer.tpl
index a828b4f5c1..a73a705311 100644
--- a/public/templates/footer.tpl
+++ b/public/templates/footer.tpl
@@ -1,6 +1,10 @@
 
 
 	</div><!--END container -->
+
+	<div id="mobile-sidebar">
+	</div>
+
 	<!-- START Forum Info -->
 	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
 		<div class="alert alert-info">