username mention auto completes

11 years ago · 414eaea413
parent a4ae9c70df
commit 414eaea413
4 changed files with 65 additions and 6 deletions
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@ -115,14 +115,70 @@ define(['taskbar'], function(taskbar) {
 			} else {
 				titleEl.val(postData.title);
 				titleEl.prop('readOnly', false);
-			}
+			}$

 			bodyEl.val(postData.body);

+
 			postContainer.on('change', 'input, textarea', function() {
 				composer.posts[post_uuid].modified = true;
 			});

+			function getUniqueUserslugs() {
+				var postContainer = $('#post-container');
+				if(postContainer.length) {
+					var elements = $('#post-container li[data-userslug]');
+					if(!elements.length) {
+						return [];
+					}
+
+					var slugs = [];
+					for(var i=0; i<elements.length; ++i) {
+						var slug = $(elements[i]).attr('data-userslug');
+						if(slugs.indexOf('@' + slug) === -1) {
+							slugs.push('@' + slug);
+						}
+					}
+
+					return slugs;
+				} else {
+					return [];
+				}
+			}
+
+			$(bodyEl).autocomplete({
+				source: function(request, response) {
+					var term = request.term;
+					var lastMention = request.term.lastIndexOf('@');
+					if(lastMention !== -1) {
+						term = request.term.substr(lastMention);
+					}
+
+					var userslugs = getUniqueUserslugs();
+					userslugs = userslugs.filter(function(slug) {
+						return term && slug.indexOf(term) === 0;
+					});
+
+					response(userslugs);
+					$('.ui-autocomplete a').attr('href', '#');
+				},
+				response: function(event, ui) {
+					var content = $(bodyEl).val();
+					var lastIndex = content.lastIndexOf('@');
+					if(content === '@') {
+						content = '';
+					} else if(lastIndex !== -1) {
+						content = content.substr(0, lastIndex);
+					}
+
+					for(var i=0; i<ui.content.length; ++i) {
+						ui.content[i].value = content + ui.content[i].value;
+					}
+				},
+				position: { my : "left bottom", at: "left bottom" }
+			});
+
+
 			postContainer.on('click', '.action-bar button', function() {
 				var	action = $(this).attr('data-action');

--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@ -28,6 +28,9 @@
 			}
 		});
 	</script>
+
+	<!-- TODO : this has to be refactored, maybe configured from ACP? -baris -->
+	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 </head>

 <body>
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@ -26,7 +26,7 @@

 	<ul id="post-container" class="posts" data-tid="{topic_id}">
 		<!-- BEGIN posts -->
-			<li class="row post-row infiniteloaded" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-index="{posts.index}" data-deleted="{posts.deleted}" itemscope itemtype="http://schema.org/Comment">
+			<li class="row post-row infiniteloaded" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-userslug="{posts.userslug}" data-index="{posts.index}" data-deleted="{posts.deleted}" itemscope itemtype="http://schema.org/Comment">
 				<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>

 				<meta itemprop="datePublished" content="{posts.relativeTime}">
--- a/public/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js
+++ b/public/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js