use ajaxify to load 404 (prevents weird refreshing bug); part 1 of client side refactor: moving all template javascript vars into dom;

templates.get, templates.set for dynamic variables populated via tpls

public/src/templates.js

@@ -5,7 +5,8 @@
 	var config = {},
 		templates,
 		fs = null,
-		available_templates = [];
+		available_templates = [],
+		parsed_variables = {};
 
 	module.exports = templates = {};
 
@@ -153,8 +154,8 @@
 			
 		(function() {
 			jQuery.get(API_URL + api_url, function(data) {
-				if(!data) {
-					window.location.href = '/404';
+				if(data === false) {
+					ajaxify.go('404');
 					return;
 				}
 
@@ -168,12 +169,25 @@
 			if (!templates[tpl_url] || !template_data) return;
 
 			document.getElementById('content').innerHTML = templates[tpl_url].parse(JSON.parse(template_data));
-			if (callback) callback(true);
+
+			jQuery('#content [template-variable]').each(function(index, element) {
+				templates.set(element.getAttribute('template-variable'), element.value);
+			});
+
+			if (callback) {
+				callback(true);
+			}
 		}
 
 	}
 
+	templates.get = function(key) {
+		return parsed_variables[key];
+	}
 
+	templates.set = function(key, value) {
+		parsed_variables[key] = value;
+	}
 
 	//modified from https://github.com/psychobunny/dcp.templates
 	var parse = function(data) {

public/templates/account.tpl

@@ -69,12 +69,16 @@
 	</div>
 	<br/>
 	<div id="user-action-alert" class="alert alert-success hide"></div>
+
 </div>
 
+<input type="hidden" template-variable="yourid" value="{yourid}" />
+<input type="hidden" template-variable="theirid" value="{theirid}" />
+
 <script type="text/javascript">
 
-var yourid = '{yourid}';
-var theirid = '{theirid}';
+var yourid = templates.get('yourid'),
+	theirid = templates.get('theirid');
 
 (function() {
 

public/templates/accountedit.tpl

@@ -137,11 +137,14 @@
     </div>  
 </div>
 
+<input type="hidden" template-variable="gravatarpicture" value="{gravatarpicture}" />
+<input type="hidden" template-variable="uploadedpicture" value="{uploadedpicture}" />
+
 <script type="text/javascript">
 
 
-var gravatarPicture = '{gravatarpicture}';
-var uploadedPicture = '{uploadedpicture}';
+var gravatarPicture = templates.get('gravatarpicture');
+var uploadedPicture = templates.get('uploadedpicture');
 
 $(document).ready(function() {
  

public/templates/category.tpl

@@ -81,10 +81,13 @@
 <button id="new_post" class="btn btn-primary btn-large {show_category_features}">New Topic</button>
 
 
+<input type="hidden" template-variable="category_id" value="{category_id}" />
+
 <script type="text/javascript">
 (function() {
-	var cid = '{category_id}';
-	var	room = 'category_' + '{category_id}';
+	var cid = templates.get('category_id'),
+		room = 'category_' + cid;
+		
 	app.enter_room(room);
 
 	var new_post = document.getElementById('new_post');

public/templates/friends.tpl

@@ -40,12 +40,15 @@
 	<div id="no-friend-notice" class="alert alert-warning hide">This user doesn't have any friends :(</div>
 </div>
 
-<script>
+<input type="hidden" template-variable="yourid" value="{yourid}" />
+<input type="hidden" template-variable="theirid" value="{theirid}" />
+<input type="hidden" template-variable="friendCount" value="{friendCount}" />
 
-var yourid = '{yourid}';
-var theirid = '{theirid}';
+<script type="text/javascript">
 
-var friendCount = '{friendCount}';
+var yourid = templates.get('yourid'),
+	theirid = templates.get('theirid'),
+	friendCount = templates.get('friendCount');
 
 (function() {
     

public/templates/reset_code.tpl

@@ -19,8 +19,13 @@
 		<button class="btn btn-primary" id="reset" type="submit" disabled>Reset Password</button>
 	</div>
 </div>
+<input type="hidden" template-variable="reset_code" value="{reset_code}" />
+
+
 <script type="text/javascript">
 (function() {
+	var reset_code = templates.get('reset_code');
+
 	var	resetEl = document.getElementById('reset'),
 		password = document.getElementById('password'),
 		repeat = document.getElementById('repeat'),
@@ -33,12 +38,12 @@
 			noticeEl.querySelector('p').innerHTML = 'The password entered it too short, please pick a different password!';
 			noticeEl.style.display = 'block';
 		} else if (password.value === repeat.value) {
-			socket.emit('user:reset.commit', { code: '{reset_code}', password: password.value });
+			socket.emit('user:reset.commit', { code: reset_code, password: password.value });
 		}
 	}, false);
 
 	// Enable the form if the code is valid
-	socket.emit('user:reset.valid', { code: '{reset_code}' });
+	socket.emit('user:reset.valid', { code: reset_code });
 
 
 	ajaxify.register_events(['user:reset.valid', 'user:reset.commit']);

public/templates/topic.tpl

@@ -114,18 +114,27 @@
 	</div>
 </div>
 
+<input type="hidden" template-variable="expose_tools" value="{expose_tools}" />
+<input type="hidden" template-variable="topic_id" value="{topic_id}" />
+<input type="hidden" template-variable="locked" value="{locked}" />
+<input type="hidden" template-variable="deleted" value="{deleted}" />
+<input type="hidden" template-variable="pinned" value="{pinned}" />
+<input type="hidden" template-variable="topic_name" value="{topic_name}" />
+
+
 
 <script type="text/javascript">
 	(function() {
-		var	expose_tools = '{expose_tools}',
-			tid = '{topic_id}',
+		var	expose_tools = templates.get('expose_tools'),
+			tid = templates.get('topic_id'),
 			postListEl = document.getElementById('post-container'),
 			editBtns = document.querySelectorAll('#post-container .post-buttons .edit, #post-container .post-buttons .edit i'),
 			thread_state = {
-				locked: '{locked}',
-				deleted: '{deleted}',
-				pinned: '{pinned}'
-			};
+				locked: templates.get('locked'),
+				deleted: templates.get('deleted'),
+				pinned: templates.get('pinned')
+			},
+			topic_name = templates.get('topic_name');
 
 		function addCommasToNumbers() {
 			$('.formatted-number').each(function(index, element) {
@@ -137,7 +146,7 @@
 
 			addCommasToNumbers();
 			
-			var	room = 'topic_' + '{topic_id}',
+			var	room = 'topic_' + tid,
 				adminTools = document.getElementById('thread-tools');
 
 			app.enter_room(room);
@@ -280,9 +289,9 @@
 
 			var main = $(this).parents('.main-post');
 			if(main.length > 0) 
-				app.open_post_window('edit', "{topic_id}", "{topic_name}", pid);
+				app.open_post_window('edit', tid, topic_name, pid);
 			else 
-				app.open_post_window('edit', "{topic_id}", "", pid);
+				app.open_post_window('edit', tid, "", pid);
 		
 		});
 
@@ -547,11 +556,11 @@
 			else div = '#' + div;
 
 			jQuery(div + ' .post_reply').click(function() {
-				if (thread_state.locked !== '1') app.open_post_window('reply', "{topic_id}", "{topic_name}");
+				if (thread_state.locked !== '1') app.open_post_window('reply', tid, topic_name);
 			});
 
 			jQuery(div + ' .quote').click(function() {
-				if (thread_state.locked !== '1') app.open_post_window('quote', "{topic_id}", "{topic_name}");
+				if (thread_state.locked !== '1') app.open_post_window('quote', tid, topic_name);
 				
 				var pid = $(this).parents('li').attr('data-pid');
 				

public/templates/users.tpl

@@ -1,8 +1,6 @@
-
 <h1>Users</h1>
 <div>
     <!-- BEGIN users -->
-
     <div class="users-box well">
 	 	<a href="/users/{users.username}">
 		    <img src="{users.picture}" class="user-8080-picture"/>
@@ -18,9 +16,7 @@
 			<span class='postcount'>{users.postcount}</span>
 			<i class='icon-pencil'></i>
 		</div>
-
 	</div>
-
 	<!-- END users -->
 </div>