From 0e854119c6520e17556c58654f4f21cc9ebb6e89 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian.lam@gmail.com>
Date: Tue, 16 Jul 2013 11:03:51 -0400
Subject: [PATCH] removed duplicate id in topic template, closed #84, where
 opening a couple threads caused the reply window to load multiple times

---
 public/src/forum/topic.js      |  28 ++--
 public/src/modules/composer.js | 260 +++++++++++++++++----------------
 public/templates/topic.tpl     |   2 +-
 3 files changed, 147 insertions(+), 143 deletions(-)

diff --git a/public/src/forum/topic.js b/public/src/forum/topic.js
index 063183ffe5..03ff757387 100644
--- a/public/src/forum/topic.js
+++ b/public/src/forum/topic.js
@@ -221,21 +221,23 @@
 		});
 	});
 
-	$('#content').on('click', '.post_reply', function() {
-		var	selectionText = '',
-			selection = window.getSelection() || document.getSelection();
+	var reply_fn = function() {
+			var	selectionText = '',
+				selection = window.getSelection() || document.getSelection();
 
-		if ($(selection.baseNode).parents('.post-content').length > 0) {
-			var	snippet = selection.toString();
-			if (snippet.length > 0) selectionText = '> ' + snippet.replace(/\n/g, '\n> ');
-		}
+			if ($(selection.baseNode).parents('.post-content').length > 0) {
+				var	snippet = selection.toString();
+				if (snippet.length > 0) selectionText = '> ' + snippet.replace(/\n/g, '\n> ');
+			}
 
-		if (thread_state.locked !== '1') {
-			require(['composer'], function(cmp) {
-				cmp.push(tid, null, null, selectionText + '\n\n');
-			});
-		}
-	});
+			if (thread_state.locked !== '1') {
+				require(['composer'], function(cmp) {
+					cmp.push(tid, null, null, selectionText + '\n\n');
+				});
+			}
+		};
+	$('.post-container').on('click', '.post_reply', reply_fn);
+	$('#post_reply').on('click', reply_fn);
 
 	$('.post-container').on('click', '.quote', function() {
 		if (thread_state.locked !== '1') {
diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 7ee61144f7..bad6387110 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -8,140 +8,142 @@ define(['taskbar'], function(taskbar) {
 		};
 
 	composer.init = function() {
-		// Create the fixed bottom bar
-		var	taskbar = document.getElementById('taskbar');
-
-		composer.postContainer = document.createElement('div');
-		composer.postContainer.className = 'post-window row-fluid';
-		composer.postContainer.innerHTML =	'<div class="span10 offset1">' +
-												'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
-												'<div class="btn-toolbar">' +
-													'<div class="btn-group formatting-bar">' +
-														'<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>' +
-														'<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>' +
-														'<span class="btn btn-link" tabindex="-1"><i class="icon-list"></i></span>' +
-														'<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>' +
+		if (!composer.initialized) {
+			// Create the fixed bottom bar
+			var	taskbar = document.getElementById('taskbar');
+
+			composer.postContainer = document.createElement('div');
+			composer.postContainer.className = 'post-window row-fluid';
+			composer.postContainer.innerHTML =	'<div class="span10 offset1">' +
+													'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
+													'<div class="btn-toolbar">' +
+														'<div class="btn-group formatting-bar">' +
+															'<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>' +
+															'<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>' +
+															'<span class="btn btn-link" tabindex="-1"><i class="icon-list"></i></span>' +
+															'<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>' +
+														'</div>' +
+														'<div class="btn-group action-bar" style="float: right; margin-right: -12px">' +
+															'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
+															'<button data-action="minimize" class="btn hidden-phone" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
+															'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
+														'</div>' +
 													'</div>' +
-													'<div class="btn-group action-bar" style="float: right; margin-right: -12px">' +
-														'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
-														'<button data-action="minimize" class="btn hidden-phone" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
-														'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
-													'</div>' +
-												'</div>' +
-												'<textarea tabIndex="2"></textarea>' +
-											'</div>';
-
-		document.body.insertBefore(composer.postContainer, taskbar);
-
-		socket.on('api:composer.push', function(threadData) {
-			if (!threadData.error) {
-				var	uuid = utils.generateUUID();
-
-				composer.taskbar.push('composer', uuid, {
-					title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
-					icon: threadData.picture
-				});
-
-				composer.posts[uuid] = {
-					tid: threadData.tid,
-					cid: threadData.cid,
-					pid: threadData.pid,
-					title: threadData.title || '',
-					body: threadData.body || ''
-				};
-				composer.load(uuid);
-			} else {
-				app.alert({
-					type: 'error',
-					timeout: 5000,
-					alert_id: 'post_error',
-					title: 'Please Log In to Post',
-					message: 'Posting is currently restricted to registered members only, click here to log in',
-					clickfn: function() {
-						ajaxify.go('login');
-					}
-				});
-			}
-		});
+													'<textarea tabIndex="2"></textarea>' +
+												'</div>';
+
+			document.body.insertBefore(composer.postContainer, taskbar);
+
+			socket.on('api:composer.push', function(threadData) {
+				if (!threadData.error) {
+					var	uuid = utils.generateUUID();
+
+					composer.taskbar.push('composer', uuid, {
+						title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
+						icon: threadData.picture
+					});
+
+					composer.posts[uuid] = {
+						tid: threadData.tid,
+						cid: threadData.cid,
+						pid: threadData.pid,
+						title: threadData.title || '',
+						body: threadData.body || ''
+					};
+					composer.load(uuid);
+				} else {
+					app.alert({
+						type: 'error',
+						timeout: 5000,
+						alert_id: 'post_error',
+						title: 'Please Log In to Post',
+						message: 'Posting is currently restricted to registered members only, click here to log in',
+						clickfn: function() {
+							ajaxify.go('login');
+						}
+					});
+				}
+			});
 
-		socket.on('api:composer.editCheck', function(editCheck) {
-			if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
-		});
+			socket.on('api:composer.editCheck', function(editCheck) {
+				if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
+			});
 
-		// Post Window events
-		var	jPostContainer = $(composer.postContainer),
-			postContentEl = composer.postContainer.querySelector('textarea')
-		jPostContainer.on('change', 'input, textarea', function() {
-			var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
-			if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
-			else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
-		});
-		jPostContainer.on('click', '.action-bar button', function() {
-			var	action = this.getAttribute('data-action'),
-				uuid = $(this).parents('.post-window').attr('data-uuid');
-			switch(action) {
-				case 'post': composer.post(uuid); break;
-				case 'minimize': composer.minimize(uuid); break;
-				case 'discard': composer.discard(uuid); break;
-			}
-		});
-		jPostContainer.on('click', '.formatting-bar span', function() {
-			var iconClass = this.querySelector('i').className,
-				cursorEnd = postContentEl.value.length,
-				selectionStart = postContentEl.selectionStart,
-				selectionEnd = postContentEl.selectionEnd,
-				selectionLength = selectionEnd - selectionStart;
-
-			switch(iconClass) {
-				case 'icon-bold':
-					if (selectionStart === selectionEnd) {
-						// Nothing selected
-						postContentEl.value = postContentEl.value + '**bolded text**';
-						postContentEl.selectionStart = cursorEnd+2;
-						postContentEl.selectionEnd = postContentEl.value.length - 2;
-					} else {
-						// Text selected
-						postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
-						postContentEl.selectionStart = selectionStart + 2;
-						postContentEl.selectionEnd = selectionEnd + 2;
-					}
-				break;
-				case 'icon-italic':
-					if (selectionStart === selectionEnd) {
-						// Nothing selected
-						postContentEl.value = postContentEl.value + '*italicised text*';
-						postContentEl.selectionStart = cursorEnd+1;
-						postContentEl.selectionEnd = postContentEl.value.length - 1;
-					} else {
-						// Text selected
-						postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
-						postContentEl.selectionStart = selectionStart + 1;
-						postContentEl.selectionEnd = selectionEnd + 1;
-					}
-				break;
-				case 'icon-list':
-					// Nothing selected
-					postContentEl.value = postContentEl.value + "\n\n* list item";
-					postContentEl.selectionStart = cursorEnd+4;
-					postContentEl.selectionEnd = postContentEl.value.length;
-				break;
-				case 'icon-link':
-					if (selectionStart === selectionEnd) {
+			// Post Window events
+			var	jPostContainer = $(composer.postContainer),
+				postContentEl = composer.postContainer.querySelector('textarea')
+			jPostContainer.on('change', 'input, textarea', function() {
+				var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
+				if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
+				else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
+			});
+			jPostContainer.on('click', '.action-bar button', function() {
+				var	action = this.getAttribute('data-action'),
+					uuid = $(this).parents('.post-window').attr('data-uuid');
+				switch(action) {
+					case 'post': composer.post(uuid); break;
+					case 'minimize': composer.minimize(uuid); break;
+					case 'discard': composer.discard(uuid); break;
+				}
+			});
+			jPostContainer.on('click', '.formatting-bar span', function() {
+				var iconClass = this.querySelector('i').className,
+					cursorEnd = postContentEl.value.length,
+					selectionStart = postContentEl.selectionStart,
+					selectionEnd = postContentEl.selectionEnd,
+					selectionLength = selectionEnd - selectionStart;
+
+				switch(iconClass) {
+					case 'icon-bold':
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '**bolded text**';
+							postContentEl.selectionStart = cursorEnd+2;
+							postContentEl.selectionEnd = postContentEl.value.length - 2;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 2;
+							postContentEl.selectionEnd = selectionEnd + 2;
+						}
+					break;
+					case 'icon-italic':
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '*italicised text*';
+							postContentEl.selectionStart = cursorEnd+1;
+							postContentEl.selectionEnd = postContentEl.value.length - 1;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 1;
+							postContentEl.selectionEnd = selectionEnd + 1;
+						}
+					break;
+					case 'icon-list':
 						// Nothing selected
-						postContentEl.value = postContentEl.value + '[link text](link url)';
-						postContentEl.selectionStart = cursorEnd+12;
-						postContentEl.selectionEnd = postContentEl.value.length - 1;
-					} else {
-						// Text selected
-						postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
-						postContentEl.selectionStart = selectionStart + selectionLength + 3;
-						postContentEl.selectionEnd = selectionEnd + 11;
-					}
-				break;
-			}
-		});
+						postContentEl.value = postContentEl.value + "\n\n* list item";
+						postContentEl.selectionStart = cursorEnd+4;
+						postContentEl.selectionEnd = postContentEl.value.length;
+					break;
+					case 'icon-link':
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '[link text](link url)';
+							postContentEl.selectionStart = cursorEnd+12;
+							postContentEl.selectionEnd = postContentEl.value.length - 1;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + selectionLength + 3;
+							postContentEl.selectionEnd = selectionEnd + 11;
+						}
+					break;
+				}
+			});
 
-		composer.initialized = true;
+			composer.initialized = true;
+		}
 	}
 
 	composer.push = function(tid, cid, pid, text) {
diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index 177b95956c..287240e20c 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -48,7 +48,7 @@
 						<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn" type="button">
 							<span>Favourite</span>
 							<span class="post_rep_{main_posts.pid}">{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 hidden-phone" type="button">Reply <i class="icon-reply"></i></button>
+						<button 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>