mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Optionally allow click outside to close modals (#7072)

Browse Source 
* feat: option to allow click on modalBackdrop to close modal

* feat: allow switcher modals closable

* feat: allow use caption field as modal title

* refactor: make maskClosable a variable

* fix: use "true"

* fix: code style

* docs: add description about maskClosable

* fix: convention is to have double quotes for strings in the TW core

* refactor: using a "mask-closable" field on the modal tiddlers instead of as a message parameter

* docs: move to modal tid

* Update WidgetMessage_ tm-modal.tid
This commit is contained in:
lin onetwo 2022-12-04 01:26:44 +08:00 committed by GitHub
parent 45a7eb1c03
commit 451a3454b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/modules/utils/dom/modal.js
View File

@ -26,6 +26,8 @@ Display a modal dialogue
options: see below
Options include:
downloadLink: Text of a big download link to include
event: widget event
variables: from event.paramObject
*/
Modal.prototype.display = function(title,options) {
options = options || {};
@ -209,6 +211,10 @@ Modal.prototype.display = function(title,options) {
headerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
bodyWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
footerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
// Whether to close the modal dialog when the mask (area outside the modal) is clicked
if(tiddler.fields && (tiddler.fields["mask-closable"] === "yes" || tiddler.fields["mask-closable"] === "true")) {
modalBackdrop.addEventListener("click",closeHandler,false);
}
// Set the initial styles for the message
$tw.utils.setStyle(modalBackdrop,[
{opacity: "0"}

1
core/ui/SwitcherModal.tid
View File

@ -1,6 +1,7 @@
title: $:/core/ui/SwitcherModal
subtitle: <$text text={{{[<switch>lookup[$:/language/Switcher/Subtitle/]]}}}/>
class: tc-modal-centered
mask-closable: yes
<$tiddler tiddler={{{[<switch>lookup[$:/config/SwitcherTargets/]]}}}>

3
editions/tw5.com/tiddlers/features/Modals.tid
View File

@ -13,9 +13,12 @@ The tiddler to be displayed can contain the following optional fields that are u
|subtitle|The subtitle text for a modal, displayed in a `h3` html tag|
|class|An additional class to apply to the modal wrapper|
|help|An optional external link that will be displayed at the left of the footer with the text "Help"|
|mask-closable|When set to ''yes'' or ''true'', will close the modal dialog when the mask (area outside the modal) is clicked|
Note that the footer and subtitle fields are not limited to plain text, and wiki text features such as widgets and transclusions can be used as well.
Modals are displayed with the [[WidgetMessage: tm-modal]].
<$button message="tm-modal" param="SampleWizard">Open demo modal</$button>
<<.tip """<$macrocall $name=".from-version" version="5.2.4"/> allow using "mask-closable" field""">>

6
editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-modal.tid
View File

@ -10,12 +10,14 @@ type: text/vnd.tiddlywiki
|paramObject |Hashmap of variables to be provided to the modal, contains all extra parameters passed to the widget sending the message. |
|rootwindow |<<.from-version 5.1.18>> ''yes'' or ''true'' will always display a modal in the wiki-root-window |
The "currentTiddler" variable is set to the title of the modal tiddler, but can be overridden by specifying a different value in `paramObject`.
The modal message is usually generated with the ButtonWidget. The modal message is handled by the TiddlyWiki core.
[[Fields within the tiddler|Modals]] being displayed in the modal can be used to customize its appearance.
!! paramObject
The "currentTiddler" variable is set to the title of the modal tiddler, but can be overridden by specifying a different value in `paramObject`.
! Example
Here is an example of displaying a modal and passing parameters to it: