mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-27 14:48:19 +00:00
Optionally allow click outside to close modals (#7072)
* 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:
parent
45a7eb1c03
commit
451a3454b5
@ -26,6 +26,8 @@ Display a modal dialogue
|
|||||||
options: see below
|
options: see below
|
||||||
Options include:
|
Options include:
|
||||||
downloadLink: Text of a big download link to include
|
downloadLink: Text of a big download link to include
|
||||||
|
event: widget event
|
||||||
|
variables: from event.paramObject
|
||||||
*/
|
*/
|
||||||
Modal.prototype.display = function(title,options) {
|
Modal.prototype.display = function(title,options) {
|
||||||
options = options || {};
|
options = options || {};
|
||||||
@ -209,6 +211,10 @@ Modal.prototype.display = function(title,options) {
|
|||||||
headerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
|
headerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
|
||||||
bodyWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
|
bodyWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
|
||||||
footerWidgetNode.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
|
// Set the initial styles for the message
|
||||||
$tw.utils.setStyle(modalBackdrop,[
|
$tw.utils.setStyle(modalBackdrop,[
|
||||||
{opacity: "0"}
|
{opacity: "0"}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
title: $:/core/ui/SwitcherModal
|
title: $:/core/ui/SwitcherModal
|
||||||
subtitle: <$text text={{{[<switch>lookup[$:/language/Switcher/Subtitle/]]}}}/>
|
subtitle: <$text text={{{[<switch>lookup[$:/language/Switcher/Subtitle/]]}}}/>
|
||||||
class: tc-modal-centered
|
class: tc-modal-centered
|
||||||
|
mask-closable: yes
|
||||||
|
|
||||||
<$tiddler tiddler={{{[<switch>lookup[$:/config/SwitcherTargets/]]}}}>
|
<$tiddler tiddler={{{[<switch>lookup[$:/config/SwitcherTargets/]]}}}>
|
||||||
|
|
||||||
|
@ -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|
|
|subtitle|The subtitle text for a modal, displayed in a `h3` html tag|
|
||||||
|class|An additional class to apply to the modal wrapper|
|
|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"|
|
|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.
|
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]].
|
Modals are displayed with the [[WidgetMessage: tm-modal]].
|
||||||
|
|
||||||
<$button message="tm-modal" param="SampleWizard">Open demo modal</$button>
|
<$button message="tm-modal" param="SampleWizard">Open demo modal</$button>
|
||||||
|
|
||||||
|
<<.tip """<$macrocall $name=".from-version" version="5.2.4"/> allow using "mask-closable" field""">>
|
||||||
|
@ -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. |
|
|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 |
|
|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.
|
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.
|
[[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
|
! Example
|
||||||
|
|
||||||
Here is an example of displaying a modal and passing parameters to it:
|
Here is an example of displaying a modal and passing parameters to it:
|
||||||
|
Loading…
Reference in New Issue
Block a user