From 3ce6b401bbb7182d63443ab90cdcdfcb7c346f6d Mon Sep 17 00:00:00 2001 From: Matias De lellis Date: Fri, 8 Nov 2019 15:29:46 -0300 Subject: [PATCH] Add useless dialog where tags would be edited --- css/style.css | 22 +++++++ js/qn-dialogs.js | 113 ++++++++++++++++++++++++++++++++++ js/script.js | 19 ++++++ js/templates/notes.handlebars | 3 + templates/main.php | 1 + 5 files changed, 158 insertions(+) create mode 100644 js/qn-dialogs.js diff --git a/css/style.css b/css/style.css index 657af05..8558914 100644 --- a/css/style.css +++ b/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 { diff --git a/js/qn-dialogs.js b/js/qn-dialogs.js new file mode 100644 index 0000000..07e5f7a --- /dev/null +++ b/js/qn-dialogs.js @@ -0,0 +1,113 @@ +/* + * @copyright 2019 Matias De lellis + * + * @author 2019 Matias De lellis + * + * @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 . + */ + +/** + * 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.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(); + } + +} \ No newline at end of file diff --git a/js/script.js b/js/script.js index 63cebef..64e0c9f 100644 --- a/js/script.js +++ b/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(); diff --git a/js/templates/notes.handlebars b/js/templates/notes.handlebars index ce2a814..5ddb0e7 100644 --- a/js/templates/notes.handlebars +++ b/js/templates/notes.handlebars @@ -67,6 +67,9 @@ + diff --git a/templates/main.php b/templates/main.php index 8a9780b..db746e6 100644 --- a/templates/main.php +++ b/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'); ?>