Merge branch 'master' of github.com:psychobunny/node-forum

Conflicts:
	public/templates/header.tpl

public/css/style.less

@@ -41,6 +41,10 @@ body {
 	}
 }
 
+button, a {
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
 .none {
 	display: none !important;
 }
@@ -583,15 +587,15 @@ body .navbar .nodebb-inline-block {
 }
 
 #mobile-menu {
-	#mobile-menu-btn {
+	button {
 		color: #eee;
 		padding: 10px;
 		text-shadow: none;
+		-webkit-tap-highlight-color: rgba(0,0,0,0);
 	}
 }
 
 #mobile-menu-overlay {
-	display: none;
 
 	background: rgba(0, 0, 0, 0.85);
 	position: fixed;
@@ -608,9 +612,9 @@ body .navbar .nodebb-inline-block {
 	-ms-transition: opacity 150ms ease;
 	-o-transition: opacity 150ms ease;
 	transition: opacity 150ms ease;
-
+	z-index: -1;
 	&.menu-visible {
-		display: block;
+		z-index: 99;
 		opacity: 1;
 	}
 
@@ -643,4 +647,16 @@ body .navbar .nodebb-inline-block {
 		}
 
 	}
+}
+
+
+
+
+#mobile-sidebar {
+	height: 100%;
+	position: absolute;
+	left: 100%;
+	top: 0px;
+	overflow: hidden;
+	margin-top: 60px;
 }

public/src/ajaxify.js

@@ -48,6 +48,7 @@ var ajaxify = {};
 
 			jQuery('#footer, #content').fadeOut(100);
 
+			templates.flush();
 			templates.load_template(function() {
 				exec_body_scripts(content);
 

public/src/app.js

@@ -191,9 +191,17 @@ var socket,
 			socket.emit('api:user.get_online_users', uids);
 		}
 
+		// here is where all modules' onNavigate should be called, I think.
+		require(['mobileMenu'], function(mobileMenu) {
+			mobileMenu.onNavigate();
+		});
+
 
 		populate_online_users();
 
+		setTimeout(function() {
+			window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.	
+		}, 100);
 	}
 
 	socket.on('api:user.get_online_users', function(users) {
@@ -232,5 +240,64 @@ var socket,
 				}
 			}
 		}, false);
+
+
+		addTouchEvents();
 	});
+
+
+
+	
+	function addTouchEvents() {
+		return; // later.
+
+
+		// click simulation just for testing/sanity purposes.
+
+		var el = jQuery("#content"),
+			sidebar = jQuery('#mobile-sidebar'),
+			width = el.width();
+
+		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();
+		});
+		
+	}
 }());

public/src/modules/mobileMenu.js

@@ -4,7 +4,8 @@ define(function() {
 
 	var categories = null,
 		overlay = null,
-		menuBtn = null;
+		menuBtn = null,
+		postBtn = null;
 
 
 	function loadCategories(callback) {
@@ -63,9 +64,37 @@ define(function() {
 	}
 
 
+	mobileMenu.onNavigate = function() {
+		var cid = templates.get('category_id'),
+			tid = templates.get('topic_id');
+
+		if (cid) {
+			postBtn.style.display = 'inline-block';
+			postBtn.onclick = function() {
+				require(['composer'], function(cmp) {
+				    cmp.push(0, cid);
+				});
+			};
+			postBtn.children[0].className = 'icon-plus icon-2x';
+		} else if (tid) {
+			postBtn.style.display = 'inline-block';
+			postBtn.onclick = function() {
+				require(['composer'], function(cmp) {
+				    cmp.push(tid);
+				});
+			};
+			postBtn.children[0].className = 'icon-reply icon-2x'
+		} else {
+			postBtn.style.display = 'none';
+		}
+
+	};
+
+
 	mobileMenu.init = function() {
 		overlay = overlay || document.getElementById('mobile-menu-overlay');
 		menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
+		postBtn = postBtn || document.getElementById('mobile-post-btn');
 		
 		menuBtn.onclick = function() {
 			animateIcons();
@@ -73,9 +102,11 @@ define(function() {
 
 
 		loadCategories(displayCategories);
+		mobileMenu.onNavigate();
 	}
 
 	return {
-		init: mobileMenu.init
+		init: mobileMenu.init,
+		onNavigate: mobileMenu.onNavigate
 	}
 });

public/src/templates.js

@@ -169,7 +169,7 @@
 			if (!templates[tpl_url] || !template_data) return;
 
 			document.getElementById('content').innerHTML = templates[tpl_url].parse(JSON.parse(template_data));
-
+			
 			jQuery('#content [template-variable]').each(function(index, element) {
 				templates.set(element.getAttribute('template-variable'), element.value);
 			});
@@ -181,6 +181,10 @@
 
 	}
 
+	templates.flush = function() {
+		parsed_variables = {};
+	}
+
 	templates.get = function(key) {
 		return parsed_variables[key];
 	}

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;

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">
@@ -13,6 +17,7 @@
 
 	<div id="mobile-menu">
 		<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
+		<button id="mobile-post-btn" type="button" class="btn btn-none"><i class="icon-plus icon-2x"></i></button>
 	</div>
 	<script type="text/javascript" src="/src/forum/footer.js"></script>
 	<!-- END Forum Info -->

public/templates/header.tpl

@@ -7,6 +7,7 @@
 	<meta name="keywords" content="" />
 	<meta name="description" content="" />
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<link href="{cssSrc}" rel="stylesheet" media="screen">
 	<link href="/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="/vendor/fontawesome/css/font-awesome.min.css">

public/templates/topic.tpl

@@ -29,14 +29,14 @@
 					<hr />
 
 					<div class="topic-buttons pull-left">
-						<a href="/users/{main_posts.username}" class="username-field btn">{main_posts.username}</a>
-						<a target="_blank" class="btn" href="../{topic_id}.rss"><i class="icon-rss-sign"></i></a>
+						<a href="/users/{main_posts.username}" class="username-field btn hidden-phone">{main_posts.username}</a>
+						<a target="_blank" class="btn hidden-phone" href="../{topic_id}.rss"><i class="icon-rss-sign"></i></a>
 						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}" type="button"><i class="icon-pencil"></i></button>
 						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}" type="button"><i class="icon-trash"></i></button>
 						<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote" type="button"><i class="icon-quote-left"></i></button>
 
 						<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn" type="button"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
-						<button id="post_reply" class="btn btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
+						<button id="post_reply" class="btn btn-primary btn post_reply hidden-phone" type="button">Reply <i class="icon-reply"></i></button>
 					</div>
 					<div style="clear:both; margin-bottom: 10px;"></div>
 
@@ -46,6 +46,9 @@
 						<img class="hidden-desktop" src="{main_posts.gravatar}?s=10&default=identicon" align="left" /> posted by <strong><a class="" href="/users/{main_posts.username}">{main_posts.username}</a></strong> {main_posts.relativeTime} ago
 						<span class="{main_posts.edited-class} hidden-phone">| last edited by <strong><a href="/users/{main_posts.editor}">{main_posts.editor}</a></strong> {main_posts.relativeEditTime} ago</span>
 						<span class="{main_posts.edited-class}"><i class="icon-edit visible-phone" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
+						<div class="post-buttons visible-phone">
+							<div class="post_reply"><i class="icon-reply"></i></div>
+						</div>
 					</div>
 				</div>
 			</div>