nodebb-plugin-tenor-gif 3.1.2 → 3.1.4

package/library.js

@@ -46,10 +46,20 @@ plugin.registerFormatting = async (payload) => {
 	return payload;
 };
 
+plugin.filterMessagingLoadRoom = (payload) => {
+	payload.room.composerActions.push({
+		action: 'tenor-gif',
+		class: 'd-none d-md-flex',
+		icon: 'fa-tenor-gif',
+		title: 'Tenor GIF',
+	});
+	return payload;
+};
+
 plugin.query = async (query) => {
 	let { contentFilter, key, limit } = await meta.settings.get('tenor-gif');
 	if (!limit || limit < 1 || limit > 50) {
-		limit = 12;
+		limit = 15;
 	}
 
 	query = String(query).trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-tenor-gif",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "",
   "main": "library.js",
   "repository": {

package/plugin.json

@@ -4,7 +4,8 @@
 	"hooks": [
 		{ "hook": "static:app.load", "method": "init" },
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
-		{ "hook": "filter:composer.formatting", "method": "registerFormatting" }
+		{ "hook": "filter:composer.formatting", "method": "registerFormatting" },
+		{ "hook": "filter:messaging.loadRoom", "method": "filterMessagingLoadRoom" }
 	],
 	"scripts": [
 		"static/lib/main.js"

package/static/lib/admin.js

@@ -7,14 +7,7 @@ define('admin/plugins/tenor-gif', ['settings'], function (Settings) {
 		Settings.load('tenor-gif', $('.tenor-gif-settings'));
 
 		$('#save').on('click', function () {
-			Settings.save('tenor-gif', $('.tenor-gif-settings'), function () {
-				app.alert({
-					type: 'success',
-					alert_id: 'tenor-gif-saved',
-					title: 'Settings Saved',
-					timeout: 5000,
-				});
-			});
+			Settings.save('tenor-gif', $('.tenor-gif-settings'));
 		});
 	};
 

package/static/lib/main.js

@@ -17,6 +17,30 @@ $(document).ready(function () {
 		}
 	});
 
+	$(window).on('action:chat.loaded', (ev, container) => {
+		const containerEl = $(container);
+		const textarea = containerEl.find('[component="chat/input"]')[0];
+		containerEl.find('[data-action="tenor-gif"]').on('click', () => {
+			require([
+				'composer/controls',
+			], function (controls) {
+				Tenor.showModal(function (url, query, alt) {
+					const selectionStart = textarea.selectionStart;
+					const selectionEnd = textarea.selectionEnd;
+					if (selectionStart === selectionEnd) {
+						controls.insertIntoTextarea(textarea, '![' + alt + '](' + url + ')');
+					} else {
+						const wrapDelta = controls.wrapSelectionInTextareaWith(textarea, '![', '](' + url + ')');
+						controls.updateTextareaSelection(
+							textarea, selectionEnd + 4 - wrapDelta[1], selectionEnd + url.length + 4 - wrapDelta[1]
+						);
+					}
+					containerEl.find('[component="chat/input"]').trigger('input');
+				});
+			});
+		});
+	});
+
 	Tenor.prepareFormattingTools = function () {
 		require([
 			'composer/formatting',
@@ -82,6 +106,13 @@ $(document).ready(function () {
 					queryEl.focus();
 				});
 
+				resultsEl.on('wheel', (e) => {
+					e.preventDefault();
+					resultsEl.get(0).scrollBy({
+						left: e.originalEvent.deltaY < 0 ? -50 : 50,
+					});
+				});
+
 				queryEl.on('keyup', function () {
 					if (queryTimeout) {
 						clearTimeout(queryTimeout);

package/static/scss/modal.scss

@@ -2,10 +2,11 @@
 	#gif-results {
 		overflow-x: auto;
 		white-space: nowrap;
-
+		max-height: 80vh;
 		img {
 			cursor: pointer;
-
+			width: 33%;
+			padding: $spacer * 0.25;
 			&:hover {
 				opacity: 0.8;
 			}
@@ -20,8 +21,8 @@
 	font-family: sans;
 	background: #333;
 	color: #fff;
-	padding: 0.25rem 0.5rem;
+	padding: 0.25rem 0.25rem;
 	border-radius: 0.5em;
 	position: relative;
-	top: -0.15rem;
+	top: -0.1rem;
 }

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

@@ -28,7 +28,7 @@
 						</div>
 						<div class="mb-3">
 							<label for="limit">Limit results</label>
-							<input class="form-control" type="number" min="1" max="50" id="limit" placeholder="12" name="limit" />
+							<input class="form-control" type="number" min="1" max="50" id="limit" placeholder="15" name="limit" />
 						</div>
 					</div>
 				</div>

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

@@ -1,4 +1,4 @@
 <div class="mb-3 d-flex flex-column gap-2">
 	<input type="text" id="gif-query" class="form-control">
-	<div id="gif-results" class="row row-cols-3 gy-3"></div>
+	<div id="gif-results" class="d-flex flex-column flex-wrap"></div>
 </div>