Add useless dialog where tags would be edited

css/style.css

@@ -226,6 +226,28 @@ div[contenteditable="true"] {
     border-radius: 12px;
 }
 
+/* Restore defaults select2 rules */
+
+.select2-container-multi
+.select2-choices
+.select2-search-choice {
+    padding: 3px 5px 3px 18px !important;
+    margin: 3px 0 3px 5px !important;
+    line-height: 13px !important;
+}
+
+.select2-search-choice-close {
+    display: block !important;
+}
+
+.select2-container {
+    min-width: 200px;
+}
+
+#select2-drop {
+    z-index: 10000;
+}
+
 /* Modal Content */
 
 .modal-content {

js/qn-dialogs.js

@@ -0,0 +1,113 @@
+/*
+ * @copyright 2019 Matias De lellis <mati86dl@gmail.com>
+ *
+ * @author 2019 Matias De lellis <mati86dl@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * this class to ease the usage of jquery dialogs
+ */
+const QnDialogs = {
+
+	tags: function (callback) {
+		return $.when(this._getMessageTemplate()).then(function ($tmpl) {
+			var dialogName = 'qn-dialog-content';
+			var dialogId = '#' + dialogName;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialogName,
+				title: t('quicknotes', 'Tag note'),
+				message: t('quicknotes', 'Enter tags to organize your note'),
+				type: 'none'
+			});
+
+			var input = $('<input/>');
+			input.attr('type', 'text');
+			input.attr('id', dialogName + '-input');
+			input.attr('multiple', 'multiple');
+
+			$dlg.append(input);
+			$('body').append($dlg);
+
+			input.select2({
+				placeholder: t('quicknotes', 'Enter tag name'),
+				tokenSeparators: [',', ' '],
+				tags: true,
+				allowClear: true
+			});
+
+			// wrap callback in _.once():
+			// only call callback once and not twice (button handler and close
+			// event) but call it for the close event, if ESC or the x is hit
+			if (callback !== undefined) {
+				callback = _.once(callback);
+			}
+
+			var buttonlist = [{
+				text: t('quicknotes', 'Cancel'),
+				click: function () {
+					input.select2('close');
+					if (callback !== undefined) {
+						callback(false, input.val());
+					}
+					$(dialogId).ocdialog('close');
+				}
+			}, {
+				text: t('quicknotes', 'Done'),
+				click: function () {
+					input.select2('close');
+					if (callback !== undefined) {
+						callback(true, input.val());
+					}
+					$(dialogId).ocdialog('close');
+				},
+				defaultButton: true
+			}
+			];
+
+			$(dialogId).ocdialog({
+				closeOnEscape: true,
+				modal: true,
+				buttons: buttonlist,
+				close: function () {
+					// callback is already fired if Yes/No is clicked directly
+					if (callback !== undefined) {
+						callback(false, input.val());
+					}
+				}
+			});
+			input.focus();
+		});
+	},
+	_getMessageTemplate: function () {
+		var defer = $.Deferred();
+		if (!this.$messageTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'message.html'), function (tmpl) {
+				self.$messageTemplate = $(tmpl);
+				defer.resolve(self.$messageTemplate);
+			})
+			.fail(function (jqXHR, textStatus, errorThrown) {
+				defer.reject(jqXHR.status, errorThrown);
+			});
+		} else {
+			defer.resolve(this.$messageTemplate);
+		}
+		return defer.promise();
+	}
+
+}

js/script.js

@@ -404,6 +404,7 @@ View.prototype = {
         var html = Handlebars.templates['notes']({
             loaded: this._notes.isLoaded(),
             notes: this._notes.getAll(),
+            tagTxt: t('quicknotes', 'Tags'),
             cancelTxt: t('quicknotes', 'Cancel'),
             saveTxt: t('quicknotes', 'Save'),
             loadingMsg: t('quicknotes', 'Looking for your notes'),
@@ -611,6 +612,24 @@ View.prototype = {
            });
         });
 
+        // handle tags button.
+        $('#modal-note-div #tag-button').click(function (event) {
+            event.stopPropagation();
+            QnDialogs.tags(
+                function(result, value) {
+                    if (result === true && value) {
+                        OC.Notification.showTemporary("TEST TAGS DIALOG OK");
+                    }
+                    else {
+                        OC.Notification.showTemporary("TEST TAGS DIALOG CANCEL");
+                    }
+                },
+                true,
+                t('quicknotes', 'Tags'),
+                false
+            );
+        });
+
         // handle cancel editing notes.
         $('#modal-note-div #cancel-button').click(function (event) {
             event.stopPropagation();

js/templates/notes.handlebars

@@ -67,6 +67,9 @@
 					<!--
 					<button id='share-button'><?php p($l->t('Share'));?></button>
 					-->
+					<button id='tag-button'>
+						{{ tagTxt }}
+					</button>
 					<button id='cancel-button'>
 						{{ cancelTxt }}
 					</button>

templates/main.php

@@ -6,6 +6,7 @@ vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'beagle');
 vendor_script('quicknotes', 'autolist');
+script('quicknotes', 'qn-dialogs');
 script('quicknotes', 'script');
 style('quicknotes', 'style');
 ?>