[3.0] Replace AT.js (@mentions) with Tribute.js

Sources/Actions/Credits.php

@@ -332,7 +332,7 @@ public function execute(): void
 				'<a href="https://github.com/code-of-kpp/jquery-animadrag/blob/master/animadrag.js">animaDrag</a> | © Abel Mohler | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
 				'<a href="https://github.com/mzubala/jquery-custom-scrollbar">jQuery Custom Scrollbar</a> | © Maciej Zubala | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
 				'<a href="https://slippry.com/">jQuery Responsive Slider</a> | © booncon ROCKETS | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
-				'<a href="https://github.com/ichord/At.js">At.js</a> | © [email protected] | Licensed under <a href="https://github.com/ichord/At.js/blob/master/LICENSE-MIT">The MIT License (MIT)</a>',
+				'<a href="https://github.com/SrPatinhas/tribute">Tribute</a> | © Matt York and contributors | Licensed under <a href="https://github.com/SrPatinhas/tribute#MIT-1-ov-file">The MIT License (MIT)</a>',
 				'<a href="https://github.com/ttsvetko/HTML5-Desktop-Notifications">HTML5 Desktop Notifications</a> | © Tsvetan Tsvetkov | Licensed under <a href="https://github.com/ttsvetko/HTML5-Desktop-Notifications/blob/master/License.txt">The Apache License Version 2.0</a>',
 				'<a href="https://github.com/enygma/gauth">GAuth Code Generator/Validator</a> | © Chris Cornutt | Licensed under <a href="https://github.com/enygma/gauth/blob/master/LICENSE">The MIT License (MIT)</a>',
 				'<a href="https://github.com/enyo/dropzone">Dropzone.js</a> | © Matias Meno | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',

Sources/Actions/Display.php

@@ -1041,8 +1041,8 @@ protected function setupTemplate(): void
 
 		// Mentions
 		if (!empty(Config::$modSettings['enable_mentions']) && User::$me->allowedTo('mention')) {
-			Theme::loadJavaScriptFile('jquery.atwho.min.js', ['defer' => true], 'smf_atwho');
-			Theme::loadJavaScriptFile('jquery.caret.min.js', ['defer' => true], 'smf_caret');
+			Theme::loadCSSFile('tribute.css', ['minimize' => true], 'smf_tribute');
+			Theme::loadJavaScriptFile('tribute.js', ['defer' => true, 'minimize' => true], 'smf_tribute');
 			Theme::loadJavaScriptFile('mentions.js', ['defer' => true, 'minimize' => true], 'smf_mentions');
 		}
 

Sources/Actions/Post.php

@@ -355,8 +355,8 @@ public function show(): void
 
 		// Mentions
 		if (!empty(Config::$modSettings['enable_mentions']) && User::$me->allowedTo('mention')) {
-			Theme::loadJavaScriptFile('jquery.caret.min.js', ['defer' => true], 'smf_caret');
-			Theme::loadJavaScriptFile('jquery.atwho.min.js', ['defer' => true], 'smf_atwho');
+			Theme::loadCSSFile('tribute.css', ['minimize' => true], 'smf_tribute');
+			Theme::loadJavaScriptFile('tribute.js', ['defer' => true, 'minimize' => true], 'smf_tribute');
 			Theme::loadJavaScriptFile('mentions.js', ['defer' => true, 'minimize' => true], 'smf_mentions');
 		}
 

Themes/default/GenericControls.template.php

@@ -14,6 +14,7 @@
 use SMF\Editor;
 use SMF\Lang;
 use SMF\Theme;
+use SMF\User;
 use SMF\Utils;
 use SMF\Verifier;
 
@@ -58,6 +59,10 @@ function template_control_richedit($editor_id, $smileyContainer = null, $bbcCont
 				$(".sceditor-container").find("textarea").each(function() {$(this).css({border: "1px solid red"})});
 				$(".sceditor-container").find("iframe").each(function() {$(this).css({border: "1px solid red"})});';
 
+	if (!empty(Config::$modSettings['enable_mentions']) && User::hasPermission('mention'))
+		echo '
+				$(".sceditor-container").find("textarea").each(function() { typeof tribute === "object" && tribute.attach($(this)) });';
+
 	echo '
 			});';
 

Themes/default/css/index.css

@@ -3814,50 +3814,6 @@ p.information img {
 .topic_pages::after {
 	content: " \00bb"
 }
-/* Mentions */
-.atwho-view {
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-	margin-top: 18px;
-	background: #fff;
-	border: 1px solid #ddd;
-	border-radius: 3px;
-	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-	min-width: 120px;
-	z-index: 11110 !important;
-}
-.atwho-view .cur {
-	background: #3366ff;
-	color: #fff;
-}
-.atwho-view .cur small {
-	color: #fff;
-}
-.atwho-view strong {
-	color: #3366ff;
-}
-.atwho-view .cur strong {
-	color: #fff;
-	font-weight: bold;
-}
-.atwho-view ul {
-	list-style: none;
-	padding: 0;
-	margin: auto;
-}
-.atwho-view ul li {
-	display: block;
-	padding: 5px 10px;
-	border-bottom: 1px solid #ddd;
-	cursor: pointer;
-}
-.atwho-view small {
-	font-size: smaller;
-	color: #777;
-	font-weight: normal;
-}
 /* On/Off Icons (User) */
 .on, .off {
 	display: inline-block;

Themes/default/css/tribute.css

@@ -0,0 +1,32 @@
+.tribute-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: auto;
+  overflow: auto;
+  display: block;
+  z-index: 999999;
+}
+.tribute-container ul {
+  margin: 0;
+  margin-top: 2px;
+  padding: 0;
+  list-style: none;
+  background: #efefef;
+}
+.tribute-container li {
+  padding: 5px 5px;
+  cursor: pointer;
+}
+.tribute-container li.highlight {
+  background: #ddd;
+}
+.tribute-container li span {
+  font-weight: bold;
+}
+.tribute-container li.no-match {
+  cursor: default;
+}
+.tribute-container .menu-highlighted {
+  font-weight: bold;
+}

Themes/default/scripts/mentions.js

@@ -1,56 +1,40 @@
-var fails = [];
+const tributeRemoteSearch = (query, callback) => {
+  const URL = smf_scripturl + '?action=suggest;' + smf_session_var + '=' + smf_session_id + ';xml';
 
-var atwhoConfig = {
-	at: '@',
-	data: [],
-	show_the_at: true,
-	startWithSpace: true,
-	limit: 10,
-	callbacks: {
-		remoteFilter: function (query, callback) {
-			if (typeof query == 'undefined' || query.length < 2 || query.length > 60)
-				return;
+  xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        const xmlDoc = xhr.responseXML;
+        const items = xmlDoc.getElementsByTagName('item');
+        const users = [];
 
-			for (i in fails)
-				if (query.substr(0, fails[i].length) == fails[i])
-					return;
+        for (let i = 0; i < items.length; i++) {
+          users.push({ key: items[i].id, value: items[i].textContent });
+        }
 
-			$.ajax({
-				url: smf_scripturl + '?action=suggest;' + smf_session_var + '=' + smf_session_id + ';xml',
-				method: 'GET',
-				headers: {
-					"X-SMF-AJAX": 1
-				},
-				xhrFields: {
-					withCredentials: typeof allow_xhjr_credentials !== "undefined" ? allow_xhjr_credentials : false
-				},
-				data: {
-					search: query,
-					suggest_type: 'member'
-				},
-				success: function (data) {
-					var members = $(data).find('smf > items > item');
-					if (members.length == 0)
-						fails[fails.length] = query;
-
-					var callbackArray = [];
-					$.each(members, function (index, item) {
-						callbackArray[callbackArray.length] = {
-							name: $(item).text()
-						};
-					});
+        callback(users);
+      } else if (xhr.status === 403) {
+        callback([]);
+      }
+    }
+  };
+  xhr.open('GET', URL + ';suggest_type=member;search=' + query, true);
+  xhr.setRequestHeader('X-SMF-AJAX', '1');
+  xhr.withCredentials =
+    typeof allow_xhjr_credentials !== 'undefined' ? allow_xhjr_credentials : false;
+  xhr.send();
+};
 
-					callback(callbackArray);
-				}
-			});
-		}
-	}
+const tributeConfig = {
+  values: function (query, callback) {
+    tributeRemoteSearch(query, (users) => callback(users));
+  },
+  lookup: 'value',
+  menuItemLimit: 10,
+  noMatchTemplate: function () {
+    return '<span style:"visibility: hidden;"></span>';
+  },
 };
-$(function()
-{
-	$('textarea[name=message]').atwho(atwhoConfig);
-	$('.sceditor-container').find('textarea').atwho(atwhoConfig);
-	var iframe = $('.sceditor-container').find('iframe')[0];
-	if (typeof iframe != 'undefined')
-		$(iframe.contentDocument.body).atwho(atwhoConfig);
-});
+
+const tribute = new Tribute(tributeConfig);