diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js index 0e3f588..9715c87 100644 --- a/src/content/mytinytodo.js +++ b/src/content/mytinytodo.js @@ -2628,50 +2628,101 @@ function saveSettings(frm) function mttConfirm(msg, callbackOk, callbackCancel) { - var r = confirm(msg); - if (r) { - if (typeof callbackOk === 'function') - callbackOk(); - } - else { - if (typeof callbackCancel === 'function') - callbackCancel(); - } + mttModalDialog('confirm').message(msg).ok(callbackOk).cancel(callbackCancel).show(); } function mttPrompt(msg, defaultValue, callbackOk, callbackCancel) { - var r = prompt(msg, defaultValue); - if (r !== null) { - if (typeof callbackOk === 'function') - callbackOk(r); - } - else { - if (typeof callbackCancel === 'function') - callbackCancel(); - } + mttModalDialog('prompt').message(msg).default(defaultValue).ok(callbackOk).cancel(callbackCancel).show(); } function mttAlert(msg, callbackOk) { - $("#btnModalOk").click(function() { - $("#modal_overlay, #modal").hide(); - $("body").css("overflow", ""); - if (typeof callbackOk === 'function') - callbackOk(); - }); - var modalOverlay = document.getElementById("modal_overlay"); - if (!modalOverlay) { - modalOverlay = document.createElement("div"); - modalOverlay.id = "modal_overlay"; - modalOverlay.style.cssText = "position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8; display:none;"; - document.getElementsByTagName('body')[0].appendChild(modalOverlay); - } - $("#modal .modal-content").text(msg); - $("body").css("overflow", "hidden"); - $("#modal_overlay, #modal").show(); + mttModalDialog().ok(callbackOk).message(msg).show(); } +function mttModalDialog(dialogType = 'alert') +{ + if ( ! (this instanceof mttModalDialog) ) return new mttModalDialog(dialogType); + var dialog = this; + this.type = dialogType; + + this.close = function() { + $("#modal_overlay, #modal").hide(); + $("body").css("overflow", ""); + $("#btnModalOk").off('click'); + $("#btnModalCancel").off('click'); + $("#modalMessage").text(''); + $("#modalTextInput").val('').off('keyup.mttmodal'); + $(document).off('keydown.mttmodal'); + } ; + + this.ok = function(callback) { + $("#btnModalOk").on('click', function() { + var value = $("#modalTextInput").val(); + dialog.close(); + if (typeof callback === 'function') + callback( dialog.type === 'prompt' ? value : null ); + }); + return dialog; + }; + + this.cancel = function(callback) { + $("#btnModalCancel").on('click', function() { + dialog.close(); + if (typeof callback === 'function') + callback(); + }); + return dialog; + }; + + this.message = function(msg = '') { + $("#modalMessage").text(msg); + return dialog; + }; + + this.default = function(value = '') { + $("#modalTextInput").val(value); + return dialog; + } + + this.show = function() { + var modalOverlay = document.getElementById("modal_overlay"); + if (!modalOverlay) { + modalOverlay = document.createElement("div"); + modalOverlay.id = "modal_overlay"; + modalOverlay.style.cssText = "position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8; display:none;"; + document.getElementsByTagName('body')[0].appendChild(modalOverlay); + } + + if (dialog.type === 'confirm') { + $("#btnModalCancel").show(); + $("#modalTextInput").hide(); + } + else if(dialog.type === 'prompt') { + $("#btnModalCancel").show(); + $("#modalTextInput").show(); + $("#modalTextInput").on("keyup.mttmodal", function(e) { + if (e.keyCode == 13) { + $("#btnModalOk").click(); + } + }); + } + else { + $("#btnModalCancel").hide(); + $("#modalTextInput").hide(); + } + + $(document).on('keydown.mttmodal', function(event) { + if (event.keyCode == 27) { + dialog.close(); + } + }); + $("body").css("overflow", "hidden"); + $("#modal_overlay, #modal").show(); + return dialog; + }; +} /* * History and Hash change diff --git a/src/content/theme/style.css b/src/content/theme/style.css index b95e695..838fce8 100644 --- a/src/content/theme/style.css +++ b/src/content/theme/style.css @@ -931,7 +931,7 @@ li.mtt-item-hidden { display:none; } left: 50%; top: 50%; transform: translate(-50%, -50%); - min-width: 200px; + min-width: 350px; max-width: 1000px; /* same as #mtt */ border: 1px solid var(--color-menu-border); background: var(--color-bg); @@ -942,6 +942,15 @@ li.mtt-item-hidden { display:none; } #modal .modal-content { padding: 1.5rem; } +#modal .modal-content input { + margin-top: 1.5rem; + width: 100%; +} +#modal input { + padding: 3px; + border: 1px solid var(--color-border-default); + border-radius: 2px; +} #modal .modal-bottom { border-top: 1px solid var(--color-border-default); text-align: center; diff --git a/src/includes/lang/en.json b/src/includes/lang/en.json index a9c24c9..4f64cad 100644 --- a/src/includes/lang/en.json +++ b/src/includes/lang/en.json @@ -118,6 +118,7 @@ "action_priority": "Priority", "action_move": "Move to", "action_ok": "OK", + "action_cancel": "Cancel", "notes": "Notes:", "notes_show": "Show", "notes_hide": "Hide", diff --git a/src/includes/lang/ru.json b/src/includes/lang/ru.json index 7ff765d..c2b86c3 100644 --- a/src/includes/lang/ru.json +++ b/src/includes/lang/ru.json @@ -118,6 +118,7 @@ "action_priority": "Приоритет", "action_move": "Переместить в", "action_ok": "ОК", + "action_cancel": "Отмена", "notes": "Заметки:", "notes_show": "Показать", "notes_hide": "Скрыть", diff --git a/src/includes/theme.php b/src/includes/theme.php index 2e88854..c5567aa 100644 --- a/src/includes/theme.php +++ b/src/includes/theme.php @@ -279,8 +279,12 @@ $().ready(function(){