From 827e2aae5d97f35e1755e649ea70b606646aac08 Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Sat, 8 Sep 2018 01:13:11 +0200 Subject: [PATCH] - minor UI improvements with the captcha form field --- composer-dev.json | 2 + composer.json | 2 + js/app/ui/dialog/account_settings.js | 17 +- js/app/ui/dialog/delete_account.js | 30 +++- .../v1.4.1/app/ui/dialog/account_settings.js | 17 +- .../js/v1.4.1/app/ui/dialog/delete_account.js | 30 +++- .../js/v1.4.1/lib/pnotify/pnotify.confirm.js | 146 ------------------ public/templates/dialog/delete_account.html | 9 +- public/templates/dialog/map.html | 4 +- 9 files changed, 75 insertions(+), 182 deletions(-) delete mode 100644 public/js/v1.4.1/lib/pnotify/pnotify.confirm.js diff --git a/composer-dev.json b/composer-dev.json index ef935787..31399361 100644 --- a/composer-dev.json +++ b/composer-dev.json @@ -22,6 +22,8 @@ "require": { "php-64bit": ">=7.0", "ext-curl": "*", + "ext-json": "*", + "ext-ctype": "*", "ext-zmq": ">=1.1.3", "react/zmq": "0.3.*", "monolog/monolog": "1.*", diff --git a/composer.json b/composer.json index 56ba0a52..0f020b5f 100644 --- a/composer.json +++ b/composer.json @@ -22,6 +22,8 @@ "require": { "php-64bit": ">=7.0", "ext-curl": "*", + "ext-json": "*", + "ext-ctype": "*", "ext-zmq": ">=1.1.3", "react/zmq": "0.3.*", "monolog/monolog": "1.*", diff --git a/js/app/ui/dialog/account_settings.js b/js/app/ui/dialog/account_settings.js index 186ded0f..6194c9b2 100644 --- a/js/app/ui/dialog/account_settings.js +++ b/js/app/ui/dialog/account_settings.js @@ -62,6 +62,7 @@ define([ let accountSettingsDialog = bootbox.dialog({ title: 'Account settings', message: content, + show: false, buttons: { close: { label: 'cancel', @@ -170,12 +171,7 @@ define([ } }); - // after modal is shown ======================================================================= - accountSettingsDialog.on('shown.bs.modal', function(e) { - - let dialogElement = $(this); - let form = dialogElement.find('form'); - + accountSettingsDialog.on('show.bs.modal', function(e){ // request captcha image and show let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId); captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount); @@ -184,14 +180,21 @@ define([ captchaImageWrapperContainer.find('i').on('click', function(){ captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount); }); + }); + // after modal is shown ======================================================================= + accountSettingsDialog.on('shown.bs.modal', function(e) { + let dialogElement = $(this); + let form = dialogElement.find('form'); - // init dialog tooltips dialogElement.initTooltips(); form.initFormValidation(); }); + // show dialog + accountSettingsDialog.modal('show'); + // events for tab change accountSettingsDialog.find('.navbar a').on('shown.bs.tab', function(e){ diff --git a/js/app/ui/dialog/delete_account.js b/js/app/ui/dialog/delete_account.js index 6f9cbb4d..42ee943e 100644 --- a/js/app/ui/dialog/delete_account.js +++ b/js/app/ui/dialog/delete_account.js @@ -7,7 +7,7 @@ define([ 'app/init', 'app/util', 'bootbox' -], function($, Init, Util, bootbox) { +], ($, Init, Util, bootbox) => { 'use strict'; let config = { @@ -24,8 +24,7 @@ define([ */ $.fn.showDeleteAccountDialog = function(){ - - requirejs(['text!templates/dialog/delete_account.html', 'mustache'], function(template, Mustache) { + requirejs(['text!templates/dialog/delete_account.html', 'mustache'], (template, Mustache) => { let data = { deleteAccountId: config.deleteAccountId, @@ -39,6 +38,7 @@ define([ let deleteAccountDialog = bootbox.dialog({ title: 'Delete account', message: content, + show: false, buttons: { close: { label: 'cancel', @@ -47,7 +47,7 @@ define([ success: { label: ' delete account', className: 'btn-danger', - callback: function() { + callback: function(){ let dialogElement = $(this); let form = dialogElement.find('form'); @@ -88,7 +88,7 @@ define([ }); } - }).fail(function( jqXHR, status, error) { + }).fail(function( jqXHR, status, error){ dialogElement.find('.modal-content').hideLoadingAnimation(); let reason = status + ' ' + error; @@ -104,12 +104,26 @@ define([ } }); - // after modal is shown ======================================================================= - deleteAccountDialog.on('shown.bs.modal', function(e) { + deleteAccountDialog.on('show.bs.modal', function(e){ // request captcha image and show - $('#' + config.captchaImageWrapperId).showCaptchaImage(config.captchaKeyDeleteAccount); + let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId); + captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount); + + // init captcha refresh button + captchaImageWrapperContainer.find('i').on('click', function(){ + captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount); + }); }); + // after modal is shown ======================================================================= + deleteAccountDialog.on('shown.bs.modal', function(e){ + let dialogElement = $(this); + + dialogElement.initTooltips(); + }); + + // show dialog + deleteAccountDialog.modal('show'); }); }; diff --git a/public/js/v1.4.1/app/ui/dialog/account_settings.js b/public/js/v1.4.1/app/ui/dialog/account_settings.js index 186ded0f..6194c9b2 100644 --- a/public/js/v1.4.1/app/ui/dialog/account_settings.js +++ b/public/js/v1.4.1/app/ui/dialog/account_settings.js @@ -62,6 +62,7 @@ define([ let accountSettingsDialog = bootbox.dialog({ title: 'Account settings', message: content, + show: false, buttons: { close: { label: 'cancel', @@ -170,12 +171,7 @@ define([ } }); - // after modal is shown ======================================================================= - accountSettingsDialog.on('shown.bs.modal', function(e) { - - let dialogElement = $(this); - let form = dialogElement.find('form'); - + accountSettingsDialog.on('show.bs.modal', function(e){ // request captcha image and show let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId); captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount); @@ -184,14 +180,21 @@ define([ captchaImageWrapperContainer.find('i').on('click', function(){ captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount); }); + }); + // after modal is shown ======================================================================= + accountSettingsDialog.on('shown.bs.modal', function(e) { + let dialogElement = $(this); + let form = dialogElement.find('form'); - // init dialog tooltips dialogElement.initTooltips(); form.initFormValidation(); }); + // show dialog + accountSettingsDialog.modal('show'); + // events for tab change accountSettingsDialog.find('.navbar a').on('shown.bs.tab', function(e){ diff --git a/public/js/v1.4.1/app/ui/dialog/delete_account.js b/public/js/v1.4.1/app/ui/dialog/delete_account.js index 6f9cbb4d..42ee943e 100644 --- a/public/js/v1.4.1/app/ui/dialog/delete_account.js +++ b/public/js/v1.4.1/app/ui/dialog/delete_account.js @@ -7,7 +7,7 @@ define([ 'app/init', 'app/util', 'bootbox' -], function($, Init, Util, bootbox) { +], ($, Init, Util, bootbox) => { 'use strict'; let config = { @@ -24,8 +24,7 @@ define([ */ $.fn.showDeleteAccountDialog = function(){ - - requirejs(['text!templates/dialog/delete_account.html', 'mustache'], function(template, Mustache) { + requirejs(['text!templates/dialog/delete_account.html', 'mustache'], (template, Mustache) => { let data = { deleteAccountId: config.deleteAccountId, @@ -39,6 +38,7 @@ define([ let deleteAccountDialog = bootbox.dialog({ title: 'Delete account', message: content, + show: false, buttons: { close: { label: 'cancel', @@ -47,7 +47,7 @@ define([ success: { label: ' delete account', className: 'btn-danger', - callback: function() { + callback: function(){ let dialogElement = $(this); let form = dialogElement.find('form'); @@ -88,7 +88,7 @@ define([ }); } - }).fail(function( jqXHR, status, error) { + }).fail(function( jqXHR, status, error){ dialogElement.find('.modal-content').hideLoadingAnimation(); let reason = status + ' ' + error; @@ -104,12 +104,26 @@ define([ } }); - // after modal is shown ======================================================================= - deleteAccountDialog.on('shown.bs.modal', function(e) { + deleteAccountDialog.on('show.bs.modal', function(e){ // request captcha image and show - $('#' + config.captchaImageWrapperId).showCaptchaImage(config.captchaKeyDeleteAccount); + let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId); + captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount); + + // init captcha refresh button + captchaImageWrapperContainer.find('i').on('click', function(){ + captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount); + }); }); + // after modal is shown ======================================================================= + deleteAccountDialog.on('shown.bs.modal', function(e){ + let dialogElement = $(this); + + dialogElement.initTooltips(); + }); + + // show dialog + deleteAccountDialog.modal('show'); }); }; diff --git a/public/js/v1.4.1/lib/pnotify/pnotify.confirm.js b/public/js/v1.4.1/lib/pnotify/pnotify.confirm.js deleted file mode 100644 index ee11d62d..00000000 --- a/public/js/v1.4.1/lib/pnotify/pnotify.confirm.js +++ /dev/null @@ -1,146 +0,0 @@ -// Confirm -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as a module. - define('pnotify.confirm', ['jquery', 'pnotify'], factory); - } else if (typeof exports === 'object' && typeof module !== 'undefined') { - // CommonJS - module.exports = factory(require('jquery'), require('./pnotify')); - } else { - // Browser globals - factory(root.jQuery, root.PNotify); - } -}(typeof window !== "undefined" ? window : this, function($, PNotify){ - PNotify.prototype.options.confirm = { - // Make a confirmation box. - confirm: false, - // Make a prompt. - prompt: false, - // Classes to add to the input element of the prompt. - prompt_class: "", - // The default value of the prompt. - prompt_default: "", - // Whether the prompt should accept multiple lines of text. - prompt_multi_line: false, - // Where to align the buttons. (right, center, left, justify) - align: "right", - // The buttons to display, and their callbacks. - buttons: [ - { - text: "Ok", - addClass: "", - // Whether to trigger this button when the user hits enter in a single line prompt. - promptTrigger: true, - click: function(notice, value){ - notice.remove(); - notice.get().trigger("pnotify.confirm", [notice, value]); - } - }, - { - text: "Cancel", - addClass: "", - click: function(notice){ - notice.remove(); - notice.get().trigger("pnotify.cancel", notice); - } - } - ] - }; - PNotify.prototype.modules.confirm = { - init: function(notice, options){ - // The div that contains the buttons. - this.container = $('
').css('text-align', options.align).appendTo(notice.container); - - if (options.confirm || options.prompt) - this.makeDialog(notice, options); - else - this.container.hide(); - }, - - update: function(notice, options){ - if (options.confirm) { - this.makeDialog(notice, options); - this.container.show(); - } else { - this.container.hide().empty(); - } - }, - - afterOpen: function(notice, options){ - if (options.prompt) { - this.prompt.focus(); - } - }, - - makeDialog: function(notice, options) { - var already = false, that = this, btn, elem; - this.container.empty(); - if (options.prompt) { - // The input element of a prompt. - this.prompt = $('<'+(options.prompt_multi_line ? 'textarea rows="5"' : 'input type="text"')+' style="margin-bottom:5px;clear:both;" />') - .addClass((typeof notice.styles.input === "undefined" ? "" : notice.styles.input)+" "+(typeof options.prompt_class === "undefined" ? "" : options.prompt_class)) - .val(options.prompt_default) - .appendTo(this.container); - } - var customButtons = (options.buttons[0] && options.buttons[0] !== PNotify.prototype.options.confirm.buttons[0]); - for (var i = 0; i < options.buttons.length; i++) { - if (options.buttons[i] === null || (customButtons && PNotify.prototype.options.confirm.buttons[i] && PNotify.prototype.options.confirm.buttons[i] === options.buttons[i])) { - continue; - } - btn = options.buttons[i]; - if (already) { - this.container.append(' '); - } else { - already = true; - } - elem = $('