Merge pull request #341 from pichalite/quick-reply

Quick reply option

less/topic.less

@@ -273,6 +273,51 @@
 			margin-left: 0;
 		}
 	}
+	
+	.quick-reply {
+		.icon {
+			position: relative;
+			border-radius: 50%;
+			min-width: 46px;
+			min-height: 46px;
+			margin-top: 2px;
+
+			> a > .status {
+				position: absolute;
+				right: 12px;
+				font-size: 12px;
+				top: 0px;
+
+				@media (min-width: @screen-md-min) {
+					top: 2px;
+					font-size: 16px;
+				}
+			}
+
+			img, .user-icon {
+				margin-right: 15px;
+				.user-icon-style(46px, 2.4rem, 50%);
+			}
+		}
+		
+		.quickreply-message {
+			margin-left: 61px;
+			margin-bottom: 5px;
+			
+			@media (max-width: @screen-sm-max) {
+				margin-left: 0;
+				
+				[component="topic/quickreply/text"] {
+					font-size: 16px;
+					padding: 10px;
+				}
+			}
+		}
+		
+		[component="topic/quickreply/button"] {
+			margin-bottom: 10px;
+		}
+	}
 }
 
 

lib/modules/quickreply.js

@@ -0,0 +1,46 @@
+"use strict";
+
+/*globals $, app, ajaxify, socket*/
+
+define('persona/quickreply', ['components'], function(components) {
+    var QuickReply = {};
+    
+    QuickReply.init = function() {
+    	
+    	var element = components.get('topic/quickreply/text');
+    	var data = {
+    		element: element,
+    		strategies: [],
+    		options: {
+    			zIndex: 100,
+    			listPosition: function(position) {
+    				this.$el.css(this._applyPlacement(position));
+				this.$el.css('position', 'absolute');
+				return this;
+    			}
+    		}
+    	};
+    	
+    	$(window).trigger('composer:autocomplete:init', data);
+		data.element.textcomplete(data.strategies, data.options);
+		$('.textcomplete-wrapper').css('height', '100%').find('textarea').css('height', '100%');
+    	
+		components.get('topic/quickreply/button').on('click', function(e) {
+			var replyMsg = components.get('topic/quickreply/text').val();
+			var replyData = {
+				tid: ajaxify.data.tid,
+				handle: undefined,
+				content: replyMsg
+			};
+
+			socket.emit('posts.reply', replyData, function(err, data) {
+				if (err) {
+					app.alertError(err.message);
+				}
+				components.get('topic/quickreply/text').val('');
+			});
+		});
+	};
+    
+    return QuickReply;
+});

lib/persona.js

@@ -9,6 +9,7 @@ $(document).ready(function() {
 	setupTaskbar();
 	setupEditedByIcon();
 	setupMobileMenu();
+	setupQuickReply();
 
 	if (env === 'xs' || env ==='sm') {
 		$(".navbar-fixed-top").autoHidingNavbar({
@@ -302,4 +303,14 @@ $(document).ready(function() {
 			drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
 		});
 	}
-});
+	
+	function setupQuickReply() {
+		$(window).on('action:ajaxify.end', function(ev, data) {
+			if (data.url && data.url.match('^topic/')) {
+				require(['persona/quickreply'], function(quickreply) {
+					quickreply.init();	
+				});
+			}
+		});
+	}
+});

library.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var S = require.main.require('string');
-var	meta = module.parent.require('./meta');
+var meta = module.parent.require('./meta');
+var user = module.parent.require('./user');
 
 var library = {};
 
 library.init = function(params, callback) {
 	var app = params.router;
-	var	middleware = params.middleware;
+	var middleware = params.middleware;
 
 	app.get('/admin/plugins/persona', middleware.admin.buildHeader, renderAdmin);
 	app.get('/api/admin/plugins/persona', renderAdmin);
@@ -91,6 +92,7 @@ library.getThemeConfig = function(config, callback) {
 	meta.settings.get('persona', function(err, settings) {
 		config.hideSubCategories = settings.hideSubCategories === 'on';
 		config.hideCategoryLastPost = settings.hideCategoryLastPost === 'on';
+		config.enableQuickReply = settings.enableQuickReply === 'on';
 	});
 
 	callback(false, config);
@@ -100,4 +102,19 @@ function renderAdmin(req, res, next) {
 	res.render('admin/plugins/persona', {});
 }
 
-module.exports = library;
+library.addUserToTopic = function(data, callback) {
+	if (data.req.user) {
+		user.getUserData(data.req.user.uid, function(err, userdata) {
+			if (err) {
+				return callback(err);
+			}
+			
+			data.templateData.loggedInUser = userdata;
+			callback(null, data);
+		});
+	} else {
+		callback(null, data);
+	}
+};
+
+module.exports = library;

plugin.json

@@ -6,13 +6,15 @@
 		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
 		{ "hook": "filter:config.get", "method": "getThemeConfig" },
 		{ "hook": "static:app.load", "method": "init" },
-		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" }
+		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
+		{ "hook": "filter:topic.build", "method": "addUserToTopic" }
 	],
 	"scripts": [
 		"lib/persona.js",
 		"lib/modules/nprogress.js",
 		"lib/modules/autohidingnavbar.min.js",
 		"lib/modules/slideout.min.js",
+		"lib/modules/quickreply.js",
 		"lib/client/chats.js"
 	],
 	"acpScripts": [

templates/admin/plugins/persona.tpl

@@ -14,6 +14,12 @@
 					<span class="mdl-switch__label"><strong>Hide last post on categories view</strong></span>
 				</label>
 			</div>
+			<div class="checkbox">
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" id="enableQuickReply" name="enableQuickReply">
+					<span class="mdl-switch__label"><strong>Enable quick reply</strong></span>
+				</label>
+			</div>
 		</form>
 	</div>
 </div>

templates/partials/topic/quickreply.tpl

@@ -0,0 +1,18 @@
+<!-- IF loggedIn -->
+<div class="clearfix quick-reply">
+	<div class="icon pull-left hidden-xs">
+		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
+			<!-- IF loggedInUser.picture -->
+			<img component="user/picture" data-uid="{loggedInUser.uid}" src="{loggedInUser.picture}" align="left" itemprop="image" />
+			<!-- ELSE -->
+			<div component="user/picture" data-uid="{loggedInUser.uid}" class="user-icon" style="background-color: {loggedInUser.icon:bgColor};">{loggedInUser.icon:text}</div>
+			<!-- ENDIF loggedInUser.picture -->
+			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
+		</a>
+	</div>
+	<div class="quickreply-message">
+		<textarea component="topic/quickreply/text" class="form-control" rows="5"></textarea>
+	</div>
+	<button component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button>
+</div>
+<!-- ENDIF loggedIn -->

templates/topic.tpl

@@ -32,7 +32,11 @@
 				</li>
 			<!-- END posts -->
 		</ul>
-
+		
+		<!-- IF config.enableQuickReply -->
+		<!-- IMPORT partials/topic/quickreply.tpl -->
+		<!-- ENDIF config.enableQuickReply -->
+		
 		<div class="post-bar">
 			<!-- IMPORT partials/post_bar.tpl -->
 		</div>