tiddlywiki 5.2.2 → 5.2.4

package/editions/tw5.com/tiddlers/webserver/Using the external JavaScript template.tid

@@ -1,22 +1,22 @@
 created: 20180905075846391
-modified: 20210611055708739
+modified: 20221207112242775
 tags: [[WebServer Guides]]
 title: Using the external JavaScript template
 type: text/vnd.tiddlywiki
 
-You can use a special template to externalise TiddlyWiki's core code into a separate file. This configuration allows the browser to cache the core for improved efficiency. 
+You can use a special template to externalise ~TiddlyWiki's core code into a separate file. This configuration allows the browser to cache the core for improved efficiency. 
 
 ! Background
 
-TiddlyWiki in the single file configuration ordinarily packs everything into a single file: your data, and the ~JavaScript, CSS and HTML comprising TiddlyWiki itself. This lack of dependencies is usually very convenient: it means that it is impossible for the parts of a TiddlyWiki to become separated, and enormously improves the chances of it still functioning in the future.
+~TiddlyWiki in the single file configuration ordinarily packs everything into a single file: your data, and the ~JavaScript, CSS and HTML comprising ~TiddlyWiki itself. This lack of dependencies is usually very convenient: it means that it is impossible for the parts of a ~TiddlyWiki to become separated, and enormously improves the chances of it still functioning in the future.
 
 However, there is some inefficiency in this arrangement because the core code is repeatedly loaded and saved every time the content of the wiki is saved. This inefficiency is partially ameliorated when working in the client server configuration because once the wiki is loaded by the browser the synchronisation process only transmits individual tiddlers back and forth to the server.
 
-The remaining inefficiency when working in the client server configuration is that the single page wiki that is initially loaded will contain a copy of the entire core code of TiddlyWiki, making it impossible for the browser to cache it.
+The remaining inefficiency when working in the client server configuration is that the single page wiki that is initially loaded will contain a copy of the entire core code of ~TiddlyWiki, making it impossible for the browser to cache it.
 
-! Using the external JavaScript template with the client-server configuration
+! Using the external ~JavaScript template with the client-server configuration
 
-The mechanism is activated by setting the [[root-tiddler|WebServer Parameter: root-tiddler]] parameter to `$:/core/save/all-external-js`. This template externalises TiddlyWiki's core JavaScript into a separate file. For example, the following command will start your server with caching enabled. It will transfer the wiki with two GET requests, and the core can be cached by the browser.
+The mechanism is activated by setting the [[root-tiddler|WebServer Parameter: root-tiddler]] parameter to `$:/core/save/all-external-js`. This template externalises ~TiddlyWiki's core ~JavaScript into a separate file. For example, the following command will start your server with caching enabled. It will transfer the wiki with two GET requests, and the core can be cached by the browser.
 
 ```
 tiddlywiki YOUR_WIKI_FOLDER --listen 'root-tiddler=$:/core/save/all-external-js' use-browser-cache=yes
@@ -38,11 +38,11 @@ tiddlywiki ./myNewWiki --build listen
 The above commands perform the following:
 
 * Create a new wiki with external JavaScript customization included.
-* Start the server with external JavaScript enabled. The server listens on port 8080. Visit http://localhost:8080 in your browser.
+* Start the server with external ~JavaScript enabled. The server listens on port 8080. Visit http://localhost:8080 in your browser.
 
 To customize your `--build listen` command, see [[tiddlywiki.info Files]] and [[ListenCommand]].
 
-! Using the external JavaScript template with the single file configuration
+! Using the external ~JavaScript template with the single file configuration
 
 You can use the "external-js" template with your single file wiki, but this requires that you have ~TiddlyWiki's core ~JavaScript saved alongside your HTML file. You may prefer this configuration, for example, if you have several wikis on a ~WebDav server. (See: [[Saving via WebDAV]])
 
@@ -64,7 +64,7 @@ The files `index.html` and `tiddlywikicore-5.x.x.js` will be saved in your wiki
 
 !! Obtaining the ~TiddlyWiki core in the browser
 
-To download a copy of the TiddlyWiki core JavaScript file from any existing TiddlyWiki, visit the system tiddler $:/core/ui/ExportTiddlyWikiCore and click the download button. (You can search for ''~ExportTiddlyWikiCore'' in the ''Shadows'' tab of $:/AdvancedSearch).
+{{$:/core/ui/ExportTiddlyWikiCore}}
 
 !! Obtaining the ~TiddlyWiki core with Node.js
 
@@ -87,7 +87,7 @@ tiddlywiki YOUR_WIKI_FOLDER --build tiddlywikicore
 
 <<.warning "This procedure is experimental, please take care to backup your data">>
 
-Before you proceed, backup your wiki first! Follow the steps below to upgrade a single-file wiki with the external JavaScript template:
+Before you proceed, backup your wiki first! Follow the steps below to upgrade a single-file wiki with the external ~JavaScript template:
 
 # Proceed with the [[Upgrade Process for Standalone TiddlyWikis|Upgrading]]. Your wiki will be converted to a full standalone HTML.
 

package/editions/tw5.com/tiddlers/webserver/WebServer API_ Get All Tiddlers.tid

@@ -1,5 +1,5 @@
 created: 20181002131215403
-modified: 2020031109590546
+modified: 20220909094340097
 tags: [[WebServer API]]
 title: WebServer API: Get All Tiddlers
 type: text/vnd.tiddlywiki
@@ -17,6 +17,8 @@ Parameters:
 
 In order to avoid denial of service attacks with malformed filters in the default configuration the only filter that is accepted is the default filter "[all[tiddlers]!is[system]sort[title]]"; attempts to use any other filter will result in an HTTP 403 error.
 
+<<.note "System tiddlers will not be returned by this API unless the [[Hidden Setting: Sync System Tiddlers From Server]] is explicitly switched on by setting $:/config/SyncSystemTiddlersFromServer to `yes`">>
+
 To enable a particular filter, create a tiddler with the title "$:/config/Server/ExternalFilters/" concatenated with the filter text, and the text field set to "yes". For example, the TiddlyWeb plugin includes the following shadow tiddler to enable the filter that it requires:
 
 ```

package/editions/tw5.com/tiddlers/widgets/ActionPopupWidget.tid

@@ -1,6 +1,6 @@
 caption: action-popup
 created: 20200303114556528
-modified: 20210501203451387
+modified: 20220815205132124
 tags: Widgets ActionWidgets
 title: ActionPopupWidget
 type: text/vnd.tiddlywiki
@@ -15,10 +15,11 @@ The ''action-popup'' widget is invisible. Any content within it is ignored.
 
 |!Attribute |!Description |
 |$state |The title of the state tiddler for the popup |
-|$coords |Optional coordinates for the handle to which popup is positioned (in the format `(x,y,w,h)`) |
+|$coords |Optional coordinates for the handle to which popup is positioned (see [[Coordinate Systems]] for the supported formats) |
 |$floating |<<.from-version "5.2.0">> Optional. Defaults to `no`. Set to `yes` to create a popup that must be closed explicitly. |
 
-<<.from-version "5.1.23">> If the ''$coords'' attribute is missing or empty then all popups are cancelled.
+<<.from-version "5.1.23">> If the ''$coords'' attribute is missing or empty then all popups are cancelled.<br/>
+<<.from-version "5.2.4">> The ''$coords'' attribute supports absolute and relative coordinates. See [[Coordinate Systems]] for more information.
 
 <<.tip "Delete the state tiddler for a floating popup to close it.">>
 

package/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid

@@ -1,6 +1,6 @@
 caption: button
 created: 20131024141900000
-modified: 20211009121239795
+modified: 20220810192251345
 tags: Widgets TriggeringWidgets
 title: ButtonWidget
 type: text/vnd.tiddlywiki
@@ -37,6 +37,7 @@ The content of the `<$button>` widget is displayed within the button.
 |default |Default value if <<.attr set>> tiddler is missing for testing against <<.attr setTo>> to determine <<.attr selectedClass>> |
 |popup |Title of a state tiddler for a popup that is toggled when the button is clicked. See PopupMechanism for details |
 |popupTitle |Title of a state tiddler for a popup that is toggled when the button is clicked. In difference to the <<.attr popup>> attribute, ''no'' TextReference is used. See PopupMechanism for details |
+|popupAbsCoords |<<.from-version "5.2.4">> If set to ''yes'' writes absolute coordinates to the tiddler referenced by the <<.attr popup>>. If set to ''no'' (the default) uses relative coordinates. See [[Coordinate Systems]] for details |
 |aria-label |Optional [[Accessibility]] label |
 |tooltip |Optional tooltip |
 |class |An optional CSS class name to be assigned to the HTML element|

package/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid

@@ -1,7 +1,10 @@
 caption: checkbox
 created: 20131024141900000
-modified: 20211009121239806
+modified: 20220402023600000
 tags: Widgets TriggeringWidgets
+colors: red orange yellow blue
+fruits: bananas oranges grapes
+vegetables: carrots potatoes
 title: CheckboxWidget
 type: text/vnd.tiddlywiki
 
@@ -21,11 +24,15 @@ The content of the `<$checkbox>` widget is displayed within an HTML `<label>` el
 |tag |The name of the tag to which the checkbox is bound |
 |invertTag |When set to ''yes'', flips the tag binding logic so that the absence of the tag causes the checkbox to be checked  |
 |field |The name of the field to which the checkbox is bound |
+|listField |<<.from-version "5.2.3">> The name of the field that contains the list to which the checkbox is bound |
 |index|<<.from-version "5.1.14">> The index of the //tiddler//, a [[DataTiddler|DataTiddlers]], to which the checkbox is bound<<.tip "be sure to set the //tiddler// correctly">>|
+|listIndex |<<.from-version "5.2.3">> Like <<.attr index>>, but treats the value as a list the same way that <<.attr listField>> does |
+|filter |<<.from-version "5.2.3">> A filter whose output determines the checked state of the checkbox |
 |checked |The value of the field corresponding to the checkbox being checked |
 |unchecked |The value of the field corresponding to the checkbox being unchecked |
 |default |The default value to use if the field is not defined |
-|class |The class that will be assigned to the label element |
+|indeterminate |Whether ambiguous values can produce indeterminate checkboxes (see below) |
+|class |The class that will be assigned to the label element <$macrocall $name=".tip" _="""<<.from-version "5.2.3">> `tc-checkbox` is always applied by default, as well as `tc-checkbox-checked` when checked"""/> |
 |actions |<<.from-version "5.1.14">> A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
 |uncheckactions |<<.from-version "5.1.16">> A string containing ActionWidgets to be triggered when the checkbox is unchecked |
 |checkactions |<<.from-version "5.1.20">> A string containing ActionWidgets to be triggered when the checkbox is checked |
@@ -45,7 +52,19 @@ Using the checkbox widget in field mode requires the ''field'' attribute to spec
 
 This example creates a checkbox that is checked if the field ''status'' is equal to ''open'' and unchecked if the field is equal to ''closed''. If the field is undefined then it defaults to ''closed'', meaning that the checkbox will be unchecked if the ''status'' field is missing.
 
-<<wikitext-example-without-html """<$checkbox field="status" checked="open" unchecked="closed" default="closed"> Is it open?</$checkbox><br>''status:'' {{!!status}}""">>
+<<wikitext-example-without-html """<$checkbox field="status" checked="open" unchecked="closed" default="closed"> Is it open?</$checkbox><br />''status:'' {{!!status}}""">>
+
+!! List Mode
+
+Using the checkbox widget in list mode requires the ''listField'' attribute to specify the name of a field containing a list. The ''checked'' attribute specifies the value that should be present or absent in the list when the checkbox is checked or unchecked respectively. If ''checked'' is absent (or empty) but ''unchecked'' is present, then the logic will be inverted: the checkbox will be checked when the "unchecked" value is missing from the list, and unchecked when the "unchecked" value is found in the list. If both ''checked'' and ''unchecked'' are present, the checkbox will work like a toggle, replacing the ''checked'' value with the ''unchecked'' value and vice-versa. Finally, if neither ''checked'' nor ''unchecked'' is specified, the checkbox will be checked if the field has anything in it, but unchecked if the field is missing or empty. (This is rarely useful; most of the time you'll want to specify ''checked'' or ''unchecked'' or both.)
+
+The ''default'' attribute is used as a fallback for the checkbox state if the field is not defined.
+
+This example creates a checkbox that is checked if the list field named ''colors'' contains ''green'' and unchecked if the field contains ''red''. If the field is undefined, or if neither ''green'' nor ''red'' appears in the field, then it defaults to ''green'', meaning that the checkbox will be checked.
+
+<<wikitext-example-without-html """<$checkbox listField="colors" checked="green" unchecked="red" default="green"> Is it green?</$checkbox><br />''colors:'' {{!!colors}}""">>
+
+Try editing the ''colors'' field of this tiddler to see how the example changes.
 
 !! Index Mode
 
@@ -54,3 +73,58 @@ To use the checkbox widget in index mode set the ''index'' attribute to the inde
 The example below creates a checkbox that is checked if the index by the name of this tiddler in the tiddler ExampleData is equal to ''selected'' and unchecked if the index is an empty string. If the index is undefined then it defaults to an empty string, meaning the checkbox will be unchecked if the index is missing.
 
 <$macrocall $name="wikitext-example-without-html" src="""<$checkbox tiddler="ExampleData" index=<<currentTiddler>> checked="selected" unchecked="" default=""> Selected?</$checkbox>"""/>
+
+!! Index List Mode
+
+Using the checkbox widget in index list mode requires the ''listIndex'' attribute to specify the the index of a [[DataTiddler|DataTiddlers]] containing a list. The ''checked'' attribute specifies the value that should be present or absent in the list when the checkbox is checked or unchecked respectively. If ''checked'' is absent (or empty) but ''unchecked'' is present, then the logic will be inverted: the checkbox will be checked when the "unchecked" value is missing from the list, and unchecked when the "unchecked" value is found in the list. If both ''checked'' and ''unchecked'' are present, the checkbox will work like a toggle, replacing the ''checked'' value with the ''unchecked'' value and vice-versa. Finally, if neither ''checked'' nor ''unchecked'' is specified, the checkbox will be checked if the field has anything in it, but unchecked if the field is missing or empty. (This is rarely useful; most of the time you'll want to specify ''checked'' or ''unchecked'' or both.)
+
+The ''default'' attribute is used as a fallback for the checkbox state if the index is undefined.
+
+The example below creates three checkboxes that each control a different value in an index field of the ExampleData tiddler.
+
+<$macrocall $name="wikitext-example-without-html" src="""
+<$set name=indexName filter="[<currentTiddler>addsuffix[ Colors]]" >
+<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="green" unchecked="red" default="red"> Green or red?</$checkbox> <br/>
+<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="yellow" unchecked="blue" default="blue"> Yellow or blue?</$checkbox> <br/>
+<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="orange" unchecked="purple" default="purple"> Orange or purple?</$checkbox> <br />
+Colors list: {{{ [[ExampleData]getindex<indexName>] }}}
+</$set>
+"""/>
+
+!! Filter Mode
+
+Using the checkbox widget in filter mode requires the ''filter'' attribute to contain a filter whose output will determine the checked state of the checkbox. In filter mode, checking the checkbox will not automatically make changes to any field of any tiddler. Instead, you can use the ''actions'' attribute (or ''checkactions'' and ''uncheckactions'') to specify what should happen when the checkbox is toggled. It is your responsibility to make sure the actions cause changes to the tiddlers or fields that the filter results depend on, so that the checkbox becomes properly checked or unchecked after the actions have triggered.
+
+If the filter returns an empty result, the checkbox will be unchecked. Otherwise, if the filter result is non-empty, the checkbox will be checked. However, if either the ''checked'' or ''unchecked'' attributes (or both) are specified, then their values will be looked for in the filter result, instead of considering any non-empty value to mean "checked".
+
+This example creates the same checkbox as in the list mode example, selecting between ''red'' and ''green'' in the ''colors'' list field, but using filters and actions to make the change.
+
+<<wikitext-example-without-html """\define checkActions() <$action-listops $field="colors" $subfilter="-red green"/>
+\define uncheckActions() <$action-listops $field="colors" $subfilter="red -green"/>
+<$checkbox filter="[list[!!colors]]" checked="green" unchecked="red" default="red" checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> > Is "green" in colors?</$checkbox><br />''colors:'' {{!!colors}}
+""">>
+
+!! Indeterminate checkboxes
+
+If both the ''checked'' and ''unchecked'' attributes are specified, but neither one is found in the specified field (or index), the result can be ambiguous. Should the checkbox be checked or unchecked? Normally in such cases the checkbox will be unchecked, but if the ''indeterminate'' attribute is set to "yes" (default is "no"), the checkbox will instead be in an "indeterminate" state. An indeterminate checkbox counts as false for most purposes &mdash; if you click it, the checkbox will become checked and the ''checkactions'', if any, will be triggered &mdash; but indeterminate checkboxes are displayed differently in the browser.
+
+This example shows indeterminate checkboxes being used for categories in a shopping list (which could also be sub-tasks in a todo list, or many other things). If only some items in a category are selected, the category checkbox is indeterminate. You can click on the category checkboxes to see how indeterminate states are treated the same as the unchecked state, and clicking the box checks it and applies its check actions (in this case, checking all the boxes in that category). Try editing the <<.field fruits>> and <<.field vegetables>> fields on this tiddler and see what happens to the example when you do.
+
+<<wikitext-example-without-html """\define check-all(field-name:"items") <$action-listops $field="selected-$field-name$" $filter="[list[!!$field-name$]]" />
+\define uncheck-all(field-name:"items") <$action-listops $field="selected-$field-name$" $filter="[[]]" />
+
+<$checkbox filter="[list[!!selected-fruits]count[]]" checked={{{ [list[!!fruits]count[]] }}} unchecked="0" checkactions=<<check-all fruits>> uncheckactions=<<uncheck-all fruits>> indeterminate="yes"> fruits</$checkbox>
+<ul style="list-style: none">
+<$list variable="fruit" filter="[list[!!fruits]]">
+<li><$checkbox listField="selected-fruits" checked=<<fruit>>> <<fruit>></$checkbox></li>
+</$list>
+</ul>
+<$checkbox filter="[list[!!selected-vegetables]count[]]" checked={{{ [list[!!vegetables]count[]] }}} unchecked="0" checkactions=<<check-all vegetables>> uncheckactions=<<uncheck-all vegetables>> indeterminate="yes"> veggies</$checkbox>
+<ul style="list-style: none">
+<$list variable="veggie" filter="[list[!!vegetables]]">
+<li><$checkbox listField="selected-vegetables" checked=<<veggie>>> <<veggie>></$checkbox></li>
+</$list>
+</ul>
+
+<p>Selected veggies: {{!!selected-vegetables}}<br/>
+Selected fruits: {{!!selected-fruits}}</p>""">>

package/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid

@@ -1,6 +1,6 @@
 caption: draggable
 created: 20170406081938627
-modified: 20220223145136863
+modified: 20220715120213777
 tags: Widgets TriggeringWidgets
 title: DraggableWidget
 type: text/vnd.tiddlywiki
@@ -18,7 +18,8 @@ See DragAndDropMechanism for an overview.
 |filter |Optional filter defining the payload tiddlers for the drag |
 |tag |Optional tag to override the default "div" element created by the widget|
 |selector|<<.from-version 5.2.2>> Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle |
-|class |Optional CSS classes to assign to the DOM element created by the widget. The class `tc-draggable` is added to the drag handle, which is the same as the DOM element created by the widget unless the <<.param selector>> attribute is used. The class `tc-dragging` is applied to the drag handle while the element is being dragged |
+|class |Optional CSS classes to assign to the DOM element created by the widget. The class `tc-draggable` is added to the the DOM element created by the widget unless the <<.param selector>> attribute is used. The class `tc-dragging` is applied to the DOM element created by the widget while the element is being dragged |
+|enable |<<.from-version 5.2.3>> Optional value "no" to disable the draggable functionality (defaults to "yes") |
 
 |startactions |Optional action string that gets invoked when dragging ''starts'' |
 |endactions |Optional action string that gets invoked when dragging ''ends'' |
@@ -30,7 +31,23 @@ The [[actionTiddler Variable]] is accessible in both //startactions// and //enda
 
 <<.tip """Note that the [[actionTiddler Variable]] holds a [[Title List]] quoted with double square brackets. This is unlike the DroppableWidget which uses the same variable to pass a single unquoted title.""">>
 
-<<.tip """When specifying a DOM node to use as the drag handle with the <<.param selector>> attribute, give it the class `tc-draggable` in order for it to have the appropriate cursor.""">>
+<<.tip """When specifying a DOM node to use as the drag handle with the <<.param selector>> attribute, give it the class `tc-draggable` in order for it to have the appropriate cursor and the attribute `draggable` with the value `true` to make it draggable.""">>
 
 
 The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.
+
+<<.from-version 5.2.3>> The following variables are accessible in the //startactions// and the //endactions//:
+
+|!Variables |!Description |
+|`modifier` |The [[modifier Variable]] contains the Modifier Key held while dragging |
+|`dom-*` |All DOM attributes of the node being dragged are made available as variables, with the prefix `dom-` |
+|`tv-popup-coords` |A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
+|`tv-popup-abs-coords` |<<.from-version "5.2.4">> An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
+|`tv-selectednode-posx` |`x` offset position of the dragged DOM node |
+|`tv-selectednode-posy` |`y` offset position of the dragged DOM node  |
+|`tv-selectednode-width` |`offsetWidth` of the dragged DOM node |
+|`tv-selectednode-height` |`offsetHeight` of the dragged DOM node |
+|`event-fromselected-posx` |`x` position of the event relative to the dragged DOM node |
+|`event-fromselected-posy` |`y` position of the event relative to the dragged DOM node |
+|`event-fromviewport-posx` |`x` position of the event relative to the viewport |
+|`event-fromviewport-posy` |`y` position of the event relative to the viewport |

package/editions/tw5.com/tiddlers/widgets/ErrorWidget.tid

@@ -0,0 +1,17 @@
+caption: error
+created: 20220909111836951
+modified: 20220909111836951
+tags: Widgets
+title: ErrorWidget
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.2.4">> The <<.wlink ErrorWidget>> widget is used by the core to display error messages such as the recursion errors reported by the <<.wlink TranscludeWidget>> widget.
+
+The <<.wlink ErrorWidget>> does not provide any useful functionality to end users. It is only required by the core for technical reasons.
+
+! Content and Attributes
+
+The content of the <<.wlink ErrorWidget>> widget is ignored.
+
+|!Attribute |!Description |
+|$message |The error message |

package/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid

@@ -1,5 +1,5 @@
 created: 20201123113532200
-modified: 20220311154749139
+modified: 20221012194222875
 tags: Widgets TriggeringWidgets
 title: EventCatcherWidget
 type: text/vnd.tiddlywiki
@@ -10,7 +10,7 @@ type: text/vnd.tiddlywiki
 
 //This is an advanced widget intended for use by those familiar with HTML, CSS and JavaScript handling of DOM events.//
 
-The event catcher widget traps DOM-initiated Javascript events dispatched within its child content, and allows invoking a series of ActionWidgets in response to those events. 
+The event catcher widget traps DOM-initiated Javascript events dispatched within its child content, and allows invoking a series of ActionWidgets in response to those events.
 
 In order for the events to be trapped:
 
@@ -47,7 +47,10 @@ The following variables are made available to the actions:
 |`event-mousebutton` |The mouse button (if any) used to trigger the event (can be "left", "right" or "middle"). Note that not all event types support the mousebutton property |
 |`event-type` |The type property of the JavaScript event |
 |`event-detail-*` |Any properties in the detail attribute of the event are made available with the prefix `event-detail-` |
-|`tv-popup-coords` |A co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated |
+|`tv-popup-coords` |A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
+|`tv-popup-abs-coords` |<<.from-version "5.2.4">> An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
+|`tv-widgetnode-width` |<<.from-version "5.2.3">> `offsetWidth` of the DOM node created by the eventcatcher widget |
+|`tv-widgetnode-height` |<<.from-version "5.2.3">> `offsetHeight` of the DOM node created by the eventcatcher widget |
 |`tv-selectednode-posx` |`x` offset position of the selected DOM node |
 |`tv-selectednode-posy` |`y` offset position of the selected DOM node  |
 |`tv-selectednode-width` |`offsetWidth` of the selected DOM node |

package/editions/tw5.com/tiddlers/widgets/GenesisWidget.tid

@@ -0,0 +1,41 @@
+caption: genesis
+created: 20221101100729587
+modified: 20221101100729587
+tags: Widgets
+title: GenesisWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+<<.from-version "5.2.4">> The <<.wlink GenesisWidget>> widget allows the dynamic construction of another widget, where the name and attributes of the new widget can be dynamically determined, without needing to be known in advance.
+
+! Content and Attributes
+
+The content of the <<.wlink GenesisWidget>> widget is used as the content of the dynamically created widget.
+
+|!Attribute |!Description |
+|$type |The type of widget or element to create (an initial `$` indicates a widget, otherwise an HTML element will be created) |
+|$names |An optional filter evaluating to the names of a list of attributes to be applied to the widget |
+|$values |An optional filter evaluating to the values corresponding to the list of names specified in `$names` |
+|//{other attributes starting with $}// |Other attributes starting with a single dollar sign are reserved for future use |
+|//{attributes starting with $$}// |Attributes starting with two dollar signs are appplied as attributes to the output widget, but with the attribute name changed to use a single dollar sign |
+|//{attributes not starting with $}// |Any other attributes that do not start with a dollar are applied as attributes to the output widget |
+
+Note that attributes explicitly specified take precedence over attributes with the same name specified in the `$names` filter.
+
+! Examples
+
+<$macrocall $name='wikitext-example-without-html' 
+src='<$genesis $type="div" class="tc-thing" label="Squeak">Mouse</$genesis>'/>
+
+<$macrocall $name='wikitext-example-without-html' 
+src="""\define my-banner(mode:"inline",caption)
+<$genesis $type={{{ [<__mode__>match[inline]then[span]else[div]] }}} class="tc-mybanner">
+<<__caption__>>
+</$genesis>
+\end
+
+<<my-banner caption:"I'm in a SPAN">>
+
+<<my-banner mode:"block" caption:"I'm in a DIV">>
+"""/>

package/editions/tw5.com/tiddlers/widgets/ImageWidget.tid

@@ -1,8 +1,9 @@
-title: ImageWidget
+caption: image
 created: 20140416160234142
-modified: 20220101205921813
+modified: 20220721102303815
 tags: Widgets
-caption: image
+title: ImageWidget
+type: text/vnd.tiddlywiki
 
 ! Introduction
 
@@ -19,6 +20,7 @@ Any content of the `<$image>` widget is ignored.
 |tooltip |The tooltip to be displayed over the image |
 |alt |The alternative text to be associated with the image |
 |class |CSS classes to be assigned to the `<img>` element |
+|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
 
 The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
 

package/editions/tw5.com/tiddlers/widgets/JSONTiddlerWidget.tid

@@ -1,14 +1,15 @@
-title: JSONTiddlerWidget
+caption: jsontiddler
 created: 20210630100923398
-modified: 20210630100923398
+modified: 20220427171128693
 tags: Widgets
-caption: jsontiddler
+title: JSONTiddlerWidget
+type: text/vnd.tiddlywiki
 
 ! Introduction
 
 The jsontiddler widget renders the fields of a tiddler to display as a JSON object. The fields of the tiddler can be customised or excluded.
 
-The jsontiddler widget is used in system templates to generate JSON representations of tiddlers for saving.
+The jsontiddler widget is used in system templates to generate JSON representations of tiddlers for saving. See [[JSON in TiddlyWiki]] for an overview.
 
 ! Content and Attributes
 

package/editions/tw5.com/tiddlers/widgets/LetWidget.tid

@@ -1,5 +1,6 @@
 title: LetWidget
 created: 20211028115900000
+modified: 20221001094658854
 tags: Widgets
 caption: let
 
@@ -12,10 +13,12 @@ caption: let
 The content of the <<.wid let>> widget is the scope for the value assigned to the variable.
 
 |!Attribute |!Description |
-|//{attributes not starting with $}// |Each attribute name specifies a variable name. The attribute value is assigned to the variable |
+|//{attributes}// |Each attribute name specifies a variable name. The attribute value is assigned to the variable |
 
 Attributes are evaluated in the order they are written. Attributes with the same name are allowed. Each time a duplicate attribute is encountered, it will replace the existing value set by the earlier duplicate.
 
+<<.note """<<.from-version "5.2.4">> There is no longer any restriction on using variable names that start with the $ character.""">>
+
 ! Examples
 
 Consider a case where you need to set multiple variables, where some depend on the evaluation of others.

package/editions/tw5.com/tiddlers/widgets/ListWidget.tid

@@ -1,6 +1,6 @@
 caption: list
 created: 20131024141900000
-modified: 20210416175333981
+modified: 20220718120325494
 tags: Widgets Lists
 title: ListWidget
 type: text/vnd.tiddlywiki
@@ -117,7 +117,7 @@ Displays as:
 </$list>
 <<<
 
-Note that using the `counter` attribute can degrade the performance of the list widget in certain circumstances. In particular, it prevents an optimisation that normally occurs when dynamically adding or removing entries.
+Note that using the `counter` attribute can reduce performance when working with list items that dynamically reorder or update themselves. The best advice is only to use it when it is really necessary: to obtain a numeric index, or to detect the first or last entries in the list.
 
 !! Edit mode
 

package/editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid

@@ -1,9 +1,9 @@
+caption: scrollable
 created: 20140324223413403
-modified: 20150427123524945
+modified: 20220620115347910
 tags: Widgets
 title: ScrollableWidget
 type: text/vnd.tiddlywiki
-caption: scrollable
 
 ! Introduction
 
@@ -17,7 +17,7 @@ The content of the `<$scrollable>` widget is displayed within a pair of wrapper
 |class |The CSS class(es) to be applied to the outer DIV |
 |fallthrough |See below |
 
-If a scrollable widget can't handle the `tm-scroll` message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the ''fallthrough'' attribute to `no` prevents this behaviour.
+<$macrocall $name=".note" _="""If a scrollable widget can't handle the `tm-scroll` message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the ''fallthrough'' attribute to `no` prevents this behaviour."""/> 
 
 ! Examples
 
@@ -36,7 +36,7 @@ This example requires the following CSS definitions from [[$:/_tw5.com-styles]]:
 This wiki text shows how to display a list within the scrollable widget:
 
 <<wikitext-example-without-html "<$scrollable class='tc-scrollable-demo'>
-<$list filter='[!is[system]]'>
+<$list filter='[tag[Reference]]'>
 
 <$view field='title'/>: <$list filter='[all[current]links[]sort[title]]' storyview='pop'>
 <$link><$view field='title'/></$link>

package/editions/tw5.com/tiddlers/widgets/SelectWidget.tid

@@ -40,6 +40,7 @@ The content of the `<$select>` widget should be one or more HTML `<option>` or `
 |multiple |If present, switches to multiple selection mode |
 |size |The number of rows to display in multiple selection mode |
 |actions |A string containing ActionWidgets to be triggered when the key combination is detected |
+|focus |<<.from-version "5.2.4">> Optional. Set to "yes" to automatically focus the HTML select element after creation |
 
 ! Examples
 

package/editions/tw5.com/tiddlers/widgets/SetWidget.tid

@@ -1,6 +1,6 @@
 caption: set
 created: 20131115182700000
-modified: 20210505095640228
+modified: 20220523075522407
 tags: Widgets
 title: SetWidget
 type: text/vnd.tiddlywiki
@@ -71,6 +71,8 @@ src="""<$set name="myVariable" filter="[all[current]field:title[myMagicTitle]]"
 
 This form of the set variable widget evaluates the filter and assigns the result to the variable as a space-separated list (using double square brackets for titles containing spaces).
 
+<<.warning """The [[Title List]] format cannot reliably represent items that contain certain specific character sequences such as `]] `. Thus it should not be used where there is a possibility of such sequences occurring.""">>
+
 <<<
 
 <$macrocall $name='wikitext-example-without-html' 

package/editions/tw5.com/tiddlers/widgets/TranscludeWidget.tid

@@ -1,6 +1,6 @@
 caption: transclude
 created: 20130824142500000
-modified: 20220122190609396
+modified: 20220513114759336
 tags: Widgets
 title: TranscludeWidget
 type: text/vnd.tiddlywiki
@@ -65,7 +65,4 @@ The transclude widget allows access to the individual tiddlers stored within a [
 
 The following example will transclude the core version of the tiddler [[$:/DefaultTiddlers]] even if it has been overridden:
 
-<<wikitext-example-without-html '
-<$transclude tiddler="$:/core" subtiddler="$:/DefaultTiddlers"/>
-
-'>>
+<<wikitext-example-without-html """<$transclude tiddler="$:/core" subtiddler="$:/DefaultTiddlers"/>""">>

package/editions/tw5.com/tiddlers/wikitext/Code Blocks in WikiText.tid

@@ -1,14 +1,13 @@
 caption: Code Blocks
 created: 20131205160047557
-modified: 20160606140326254
+modified: 20220513120302826
 tags: WikiText
 title: Code Blocks in WikiText
 type: text/vnd.tiddlywiki
 
 You can use triple backticks <code>&#96;&#96;&#96;</code> to mark code blocks (<<.icon $:/core/images/mono-block>>):
 
-<pre>
-&#96;&#96;&#96;
+<pre>&#96;&#96;&#96;
 This will be monospaced
 &#96;&#96;&#96;
 </pre>
@@ -23,8 +22,7 @@ To be interpreted correctly, the three backticks need to be at the start of the
 
 Be aware that any preceding paragraph content should be properly terminated with a double line break, too. So, this example is wrong:
 
-<pre>
-This is an ordinary paragraph
+<pre>This is an ordinary paragraph
 &#96;&#96;&#96;
 This will be monospaced
 &#96;&#96;&#96;
@@ -32,8 +30,7 @@ This will be monospaced
 
 The correct version is:
 
-<pre>
-This is an ordinary paragraph
+<pre>This is an ordinary paragraph
 
 &#96;&#96;&#96;
 This will be monospaced

package/editions/tw5.com/tiddlers/wikitext/Dashes in WikiText.tid

@@ -1,8 +1,12 @@
+caption: Dashes
 created: 20131205160641986
-modified: 20131205160653909
+modified: 20220513111920644
+revision: 0
 tags: WikiText
 title: Dashes in WikiText
 type: text/vnd.tiddlywiki
-caption: Dashes
 
-You can create an n-dash with a double hyphen `--` and an m-dash with a triple hyphen `---`. For example -- this is an example --- and so is this
+You can create an n-dash with a double hyphen -- and an m-dash with a triple hyphen `---`.
+
+<<wikitext-example src:"""* -- n-dash example 
+* --- m-dash example --- have fun!""">>

package/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid

@@ -1,6 +1,6 @@
 caption: Formatting
 created: 20131205155959399
-modified: 20160606135946509
+modified: 20220513120211686
 tags: WikiText
 title: Formatting in WikiText
 type: text/vnd.tiddlywiki
@@ -8,12 +8,12 @@ type: text/vnd.tiddlywiki
 Available character formatting includes:
 
 * <code>&#96;backticks&#96;</code> for `code` (<<.icon $:/core/images/mono-line>>)
-** Alternatively, <code>&#96;&#96;double backticks allows &#96;embedded&#96; backticks&#96;&#96;</code>
-* `''bold''` for ''bold text'' (<<.icon $:/core/images/bold>>)
-* `//italic//` for //italic text// (<<.icon $:/core/images/italic>>)
-* `__underscore__` for __underscored text__ (<<.icon $:/core/images/underline>>)
-* `^^superscript^^` for ^^superscripted^^ text (<<.icon $:/core/images/superscript>>)
-* `,,subscript,,` for ,,subscripted,, text (<<.icon $:/core/images/subscript>>)
+** Alternatively, <code>&#96;&#96;double backticks allows &#96;embedded&#96; backticks&#96;&#96;</code><br><br>
+* `''bold''` for ''bold text'' (<<.icon $:/core/images/bold>>)<br><br>
+* `//italic//` for //italic text// (<<.icon $:/core/images/italic>>)<br><br>
+* `__underscore__` for __underscored text__ (<<.icon $:/core/images/underline>>)<br><br>
+* `^^superscript^^` for ^^superscripted^^ text (<<.icon $:/core/images/superscript>>)<br><br>
+* `,,subscript,,` for ,,subscripted,, text (<<.icon $:/core/images/subscript>>)<br><br>
 * `~~strikethrough~~` for ~~strikethrough~~ text (<<.icon $:/core/images/strikethrough>>)
 
 See also: [[Code Blocks in WikiText]]

package/editions/tw5.com/tiddlers/wikitext/Headings in WikiText.tid

@@ -1,9 +1,9 @@
+caption: Headings
 created: 20131205161234909
-modified: 20190412000000000
+modified: 20220513110830487
 tags: WikiText
 title: Headings in WikiText
 type: text/vnd.tiddlywiki
-caption: Headings
 
 Headings are specified with one up to six leading `!` characters:
 
@@ -17,4 +17,4 @@ Headings are specified with one up to six leading `!` characters:
 
 CSS classes can be assigned to individual headings like this:
 
-<<wikitext-example src:"" "!!.myStyle This heading has the class `myStyle`">>
+<<wikitext-example src:"""!!.myStyle This heading has the class `myStyle`""">>