From 9ded988c275e7baa7fffc8611ecb56a4084ab2f8 Mon Sep 17 00:00:00 2001
From: lavigor <lavigor@users.noreply.github.com>
Date: Tue, 3 Jul 2018 02:47:19 +0300
Subject: [PATCH] [ticket/13713] Refactor JS

PHPBB3-13713
---
 phpBB/assets/javascript/editor.js | 61 +++++++++++++++++--------------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js
index 076b7fd7ff..66f9fb3444 100644
--- a/phpBB/assets/javascript/editor.js
+++ b/phpBB/assets/javascript/editor.js
@@ -385,36 +385,43 @@ function getCaretPosition(txtarea) {
 }
 
 (function($) {
-	function mention_default_avatar(type) {
-		return (type === 'group') ? '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>' : '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg>';
-	}
+	function Mentions() {
+		function defaultAvatar(type) {
+			return (type === 'group') ? '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>' : '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg>';
+		}
 
-	function handle_mentions(txtarea) {
-		var $mentionDataContainer = $('[data-mention-url]'),
-			mentionURL = $mentionDataContainer.data('mentionUrl'),
-			mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'),
-			mentionTopicId = $mentionDataContainer.data('topicId');
-		$(txtarea).atwho({
-			at: "@",
-			displayTpl: function(data) {
-				var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "' class='mention-media-avatar'>" : mention_default_avatar(data.avatar.type),
-					rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
-				return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
-			},
-			insertTpl: "[mention ${param}=${id}]${name}[/mention]",
-			limit: mentionNamesLimit,
-			callbacks: {
-				remoteFilter: function(query, callback) {
-					$.getJSON(mentionURL, {keyword: query, topic_id: mentionTopicId}, function (data) {
-						callback(data)
-					});
+		this.isEnabled = function() {
+			return $('[data-mention-url]').length;
+		};
+
+		this.handle = function(txtarea) {
+			let $mentionDataContainer = $('[data-mention-url]'),
+				mentionURL = $mentionDataContainer.data('mentionUrl'),
+				mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'),
+				mentionTopicId = $mentionDataContainer.data('topicId');
+			$(txtarea).atwho({
+				at: "@",
+				displayTpl: function(data) {
+					let avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "' class='mention-media-avatar'>" : defaultAvatar(data.avatar.type),
+						rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
+					return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
+				},
+				insertTpl: "[mention ${param}=${id}]${name}[/mention]",
+				limit: mentionNamesLimit,
+				callbacks: {
+					remoteFilter: function(query, callback) {
+						$.getJSON(mentionURL, {keyword: query, topic_id: mentionTopicId}, function (data) {
+							callback(data)
+						});
+					}
 				}
-			}
-		});
+			});
+		};
 	}
+	phpbb.mentions = new Mentions();
 
 	$(document).ready(function() {
-		var doc, textarea;
+		let doc, textarea;
 
 		// find textarea, make sure browser supports necessary functions
 		if (document.forms[form_name]) {
@@ -439,8 +446,8 @@ function getCaretPosition(txtarea) {
 			phpbb.showDragNDrop(textarea);
 		}
 
-		if ($('[data-mention-url]').length) {
-			handle_mentions(textarea);
+		if (phpbb.mentions.isEnabled()) {
+			phpbb.mentions.handle(textarea);
 		}
 
 		$('textarea').on('keydown', function (e) {