diff options
| -rw-r--r-- | routers/web/devtest/devtest.go | 10 | ||||
| -rw-r--r-- | templates/devtest/fomantic-modal.tmpl | 13 | ||||
| -rw-r--r-- | web_src/js/modules/aria/modal.js | 26 | ||||
| -rw-r--r-- | web_src/js/modules/fomantic.js | 2 |
4 files changed, 51 insertions, 0 deletions
diff --git a/routers/web/devtest/devtest.go b/routers/web/devtest/devtest.go index 48875e306d..857aa9b184 100644 --- a/routers/web/devtest/devtest.go +++ b/routers/web/devtest/devtest.go @@ -42,5 +42,15 @@ func Tmpl(ctx *context.Context) { ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second) ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second) + if ctx.Req.Method == "POST" { + _ = ctx.Req.ParseForm() + ctx.Flash.Info("form: "+ctx.Req.Method+" "+ctx.Req.RequestURI+"<br>"+ + "Form: "+ctx.Req.Form.Encode()+"<br>"+ + "PostForm: "+ctx.Req.PostForm.Encode(), + true, + ) + time.Sleep(2 * time.Second) + } + ctx.HTML(http.StatusOK, base.TplName("devtest"+path.Clean("/"+ctx.Params("sub")))) } diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl index aaa4c2c12d..799bab7594 100644 --- a/templates/devtest/fomantic-modal.tmpl +++ b/templates/devtest/fomantic-modal.tmpl @@ -1,5 +1,18 @@ {{template "base/head" .}} <div class="page-content devtest ui container"> + {{template "base/alert" .}} + + <button class="show-modal" data-modal="#test-modal-form">show modal form</button> + <div id="test-modal-form" class="ui mini modal"> + <div class="header">Form dialog</div> + <form class="content" method="post"> + <div class="ui input"><input name="user_input"></div> + {{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} + </form> + </div> + + <div class="divider"></div> + <div class="ui g-modal-confirm modal" id="test-modal-default"> <div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div> <div class="content"> diff --git a/web_src/js/modules/aria/modal.js b/web_src/js/modules/aria/modal.js new file mode 100644 index 0000000000..7c9aade790 --- /dev/null +++ b/web_src/js/modules/aria/modal.js @@ -0,0 +1,26 @@ +import $ from 'jquery'; + +const fomanticModalFn = $.fn.modal; + +// use our own `$.fn.modal` to patch Fomantic's modal module +export function initAriaModalPatch() { + if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once'); + $.fn.modal = ariaModalFn; + ariaModalFn.settings = fomanticModalFn.settings; +} + +// the patched `$.fn.modal` modal function +// * it does the one-time attaching on the first call +function ariaModalFn(...args) { + const ret = fomanticModalFn.apply(this, args); + if (args[0] === 'show' || args[0]?.autoShow) { + for (const el of this) { + // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default). + // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed. + // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form. + // So, all "cancel" buttons without "[type]" must be marked as "type=button". + $(el).find('form button.cancel:not([type])').attr('type', 'button'); + } + } + return ret; +} diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 5988584aca..b78a5fbf95 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -1,6 +1,7 @@ import $ from 'jquery'; import {initAriaCheckboxPatch} from './aria/checkbox.js'; import {initAriaDropdownPatch} from './aria/dropdown.js'; +import {initAriaModalPatch} from './aria/modal.js'; import {svg} from '../svg.js'; export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); @@ -26,6 +27,7 @@ export function initGiteaFomantic() { // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. initAriaCheckboxPatch(); initAriaDropdownPatch(); + initAriaModalPatch(); } function initFomanticApiPatch() { |