refactor: v3 support

library.js

@@ -84,6 +84,7 @@ plugin.query = async (query) => {
 		memo.push({
 			url: cur.media_formats.gif.url,
 			thumb: cur.media_formats.tinygif.url,
+			alt: cur.content_description,
 		});
 
 		return memo;

package.json

@@ -21,7 +21,7 @@
   },
   "readmeFilename": "README.md",
   "nbbpm": {
-    "compatibility": "^2.4.0"
+    "compatibility": "^3.0.0"
   },
   "dependencies": {
     "@commitlint/cli": "^9.1.2",

plugin.json

@@ -1,7 +1,6 @@
 {
 	"id": "nodebb-plugin-tenor-gif",
 	"url": "https://github.com/NodeBB/nodebb-plugin-tenor-gif",
-	"library": "./library.js",
 	"hooks": [
 		{ "hook": "static:app.load", "method": "init" },
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
@@ -13,8 +12,8 @@
 	"modules": {
 		"../admin/plugins/tenor-gif.js": "static/lib/admin.js"
 	},
-	"less": [
-		"static/less/modal.less"
+	"scss": [
+		"static/scss/modal.scss"
 	],
 	"templates": "static/templates"
 }

static/lib/main.js

@@ -24,8 +24,8 @@ $(document).ready(function () {
 		], function (formatting, controls) {
 			if (formatting && controls) {
 				formatting.addButtonDispatch('gif', function (textarea, selectionStart, selectionEnd) {
-					Tenor.showModal(function (url, query) {
-						Tenor.select(textarea, selectionStart, selectionEnd, url, query);
+					Tenor.showModal(function (url, query, alt) {
+						Tenor.select(textarea, selectionStart, selectionEnd, url, query, alt);
 					});
 				});
 			}
@@ -103,7 +103,7 @@ $(document).ready(function () {
 				});
 
 				resultsEl.on('click', 'img[data-url]', function () {
-					callback(this.getAttribute('data-url'), queryEl.val());
+					callback(this.getAttribute('data-url'), queryEl.val(), this.getAttribute('alt'));
 					modal.modal('hide');
 				});
 
@@ -113,15 +113,15 @@ $(document).ready(function () {
 		});
 	};
 
-	Tenor.select = function (textarea, selectionStart, selectionEnd, url, query) {
+	Tenor.select = function (textarea, selectionStart, selectionEnd, url, query, alt) {
 		require([
 			'composer/formatting',
 			'composer/controls',
 		], function (formatting, controls) {
 			if (selectionStart === selectionEnd) {
-				controls.insertIntoTextarea(textarea, '![' + query + '](' + url + ')');
+				controls.insertIntoTextarea(textarea, '![' + alt + '](' + url + ')');
 				controls.updateTextareaSelection(
-					textarea, selectionStart + query.length + 4, selectionEnd + query.length + url.length + 4
+					textarea, selectionStart + alt.length + 4, selectionEnd + alt.length + url.length + 4
 				);
 			} else {
 				var wrapDelta = controls.wrapSelectionInTextareaWith(textarea, '![', '](' + url + ')');

static/less/modal.less → static/scss/modal.scss

@@ -19,12 +19,12 @@
 /* Composer formatting icon override */
 .fa-tenor-gif::before {
 	content: 'GIF';
-	font-size: 1rem;
+	font-size: calc($font-size-base / 2);
 	font-family: sans;
 	background: #333;
 	color: #fff;
 	padding: 0.25rem 0.5rem;
 	border-radius: 0.5em;
 	position: relative;
-	top: -0.2rem;
+	top: -0.15rem;
 }

static/templates/admin/plugins/tenor-gif.tpl

@@ -1,18 +1,18 @@
 <form role="form" class="tenor-gif-settings">
 	<div class="row">
-		<div class="col-sm-2 col-xs-12 settings-header">General</div>
-		<div class="col-sm-10 col-xs-12">
+		<div class="col-sm-2 col-12 settings-header">General</div>
+		<div class="col-sm-10 col-12">
 			<p class="lead">
 				Sign up for your Tenor GIF API Key from the <a href="https://console.cloud.google.com/apis/credentials">Google Cloud Console</a>, then enter it below and reload your NodeBB.
 			</p>
 			<p>
 				<strong>Be careful</strong>: If you use the <i class="fa fa-copy"></i> button to copy the API key, it'll add spaces to the beginning and end. You'll need to remove those.
 			</p>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="key">API Key</label>
 				<input type="text" id="key" name="key" title="API Key" class="form-control" placeholder="API Key">
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="contentFilter">Content Filter</label>
 				<select class="form-control" id="contentFilter" name="contentFilter">
 					<option value="off">Off</option>
@@ -21,7 +21,7 @@
 					<option value="high">High</option>
 				</select>
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="limit">Limit results</label>
 				<input class="form-control" type="number" min="1" max="50" id="limit" placeholder="10" name="limit" />
 			</div>

static/templates/partials/tenor-gif/list.tpl

@@ -1 +1 @@
-<!-- BEGIN gifs --><img data-url="{../url}" src="{../thumb}" /><!-- END -->
+<!-- BEGIN gifs --><img data-url="{../url}" src="{../thumb}" alt="{../alt}" /><!-- END -->

static/templates/plugins/tenor-gif/modal.tpl

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="mb-3">
 	<input type="text" id="gif-query" class="form-control">
 	<div id="gif-results"></div>
 </div>