tiddlywiki 5.2.3 → 5.2.5

package/core/ui/PageTemplate.tid

@@ -3,9 +3,6 @@ name: {{$:/language/PageTemplate/Name}}
 description: {{$:/language/PageTemplate/Description}}
 
 \whitespace trim
-\define containerClasses()
-tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
-\end
 \import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
 
 <$vars
@@ -17,7 +14,7 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 	storyviewTitle={{$:/view}}
 	languageTitle={{{ [{$:/language}get[name]] }}}>
 
-<div class=<<containerClasses>>>
+<div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
 
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
 

package/core/ui/SideBar/More.tid

@@ -3,6 +3,6 @@ tags: $:/tags/SideBar
 caption: {{$:/language/SideBar/More/Caption}}
 
 \whitespace trim
-<div class="tc-more-sidebar">
-<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" default={{$:/config/DefaultMoreSidebarTab}} state="$:/state/tab/moresidebar" class="tc-vertical tc-sidebar-tabs-more" explicitState="$:/state/tab/moresidebar-1850697562"/>
+<div class={{{ [{$:/config/ui/SideBar/More/horizontal}match[yes]then[tc-sidebar-tabs]else[tc-more-sidebar]] }}}>
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" default={{$:/config/DefaultMoreSidebarTab}} state="$:/state/tab/moresidebar" class={{{ [{$:/config/ui/SideBar/More/horizontal}match[yes]then[tc-sidebar-tabs-more]else[tc-vertical tc-sidebar-tabs-more]] }}} explicitState="$:/state/tab/moresidebar-1850697562"/>
 </div>

package/core/ui/SwitcherModal.tid

@@ -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/]]}}}>
 

package/core/ui/TagManager.tid

@@ -3,89 +3,101 @@ icon: $:/core/images/tag-button
 color: #bbb
 
 \define lingo-base() $:/language/TagManager/
+
 \define iconEditorTab(type)
 \whitespace trim
 <$link to=""><<lingo Icons/None>></$link>
 <$list filter="[all[shadows+tiddlers]is[image]] [all[shadows+tiddlers]tag[$:/tags/Image]] -[type[application/pdf]] +[sort[title]] +[$type$is[system]]">
-<$link to={{!!title}}>
-<$transclude/> <$view field="title"/>
-</$link>
+	<$link to={{!!title}}>
+		<$transclude/> <$view field="title"/>
+	</$link>
 </$list>
 \end
+
 \define iconEditor(title)
 \whitespace trim
 <div class="tc-drop-down-wrapper">
-<$button popupTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} class="tc-btn-invisible tc-btn-dropdown">{{$:/core/images/down-arrow}}</$button>
-<$reveal stateTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} type="popup" position="belowleft" text="" default="">
-<div class="tc-drop-down">
-<$linkcatcher actions="""<$action-setfield $tiddler=<<__title__>> icon=<<navigateTo>>/>""">
-<<iconEditorTab type:"!">>
-<hr/>
-<<iconEditorTab type:"">>
-</$linkcatcher>
-</div>
-</$reveal>
+	<$button popupTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} class="tc-btn-invisible tc-btn-dropdown">
+		{{$:/core/images/down-arrow}}
+	</$button>
+	<$reveal stateTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} type="popup" position="belowleft" text="" default="">
+		<div class="tc-drop-down">
+			<$linkcatcher actions="""<$action-setfield $tiddler=<<__title__>> icon=<<navigateTo>>/>""">
+				<<iconEditorTab type:"!">>
+				<hr/>
+				<<iconEditorTab type:"">>
+			</$linkcatcher>
+		</div>
+	</$reveal>
 </div>
 \end
+
 \define toggleButton(state)
 \whitespace trim
 <$reveal stateTitle=<<__state__>> type="match" text="closed" default="closed">
-<$button setTitle=<<__state__>> setTo="open" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
-{{$:/core/images/info-button}}
-</$button>
+	<$button setTitle=<<__state__>> setTo="open" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
+		{{$:/core/images/info-button}}
+	</$button>
 </$reveal>
 <$reveal stateTitle=<<__state__>> type="match" text="open" default="closed">
-<$button setTitle=<<__state__>> setTo="closed" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
-{{$:/core/images/info-button}}
-</$button>
+	<$button setTitle=<<__state__>> setTo="closed" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
+		{{$:/core/images/info-button}}
+	</$button>
 </$reveal>
 \end
+
 \whitespace trim
 <table class="tc-tag-manager-table">
 <tbody>
-<tr>
-<th><<lingo Colour/Heading>></th>
-<th class="tc-tag-manager-tag"><<lingo Tag/Heading>></th>
-<th><<lingo Count/Heading>></th>
-<th><<lingo Icon/Heading>></th>
-<th><<lingo Info/Heading>></th>
-</tr>
-<$list filter="[tags[]!is[system]sort[title]]">
-<tr>
-<td><$edit-text field="color" tag="input" type="color"/></td>
-<td>{{||$:/core/ui/TagTemplate}}</td>
-<td><$count filter="[all[current]tagging[]]"/></td>
-<td>
-<$macrocall $name="iconEditor" title={{!!title}}/>
-</td>
-<td>
-<$macrocall $name="toggleButton" state={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} /> 
-</td>
-</tr>
-<tr>
-<td></td>
-<td colspan="4">
-<$reveal stateTitle={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} type="match" text="open" default="">
-<table>
-<tbody>
-<tr><td><<lingo Colour/Heading>></td><td><$edit-text field="color" tag="input" type="text" size="9"/></td></tr>
-<tr><td><<lingo Icon/Heading>></td><td><$edit-text field="icon" tag="input" size="45"/></td></tr>
-</tbody>
-</table>
-</$reveal>
-</td>
-</tr>
-</$list>
-<tr>
-<td></td>
-<td style="position:relative;">
-{{$:/core/ui/UntaggedTemplate}}
-</td>
-<td>
-<small class="tc-menu-list-count"><$count filter="[untagged[]!is[system]] -[tags[]]"/></small>
-</td>
-<td></td>
-<td></td>
-</tr>
+	<tr>
+		<th><<lingo Colour/Heading>></th>
+		<th class="tc-tag-manager-tag"><<lingo Tag/Heading>></th>
+		<th><<lingo Count/Heading>></th>
+		<th><<lingo Icon/Heading>></th>
+		<th><<lingo Info/Heading>></th>
+	</tr>
+	<$list filter="[tags[]!is[system]sort[title]]">
+		<tr>
+			<td><$edit-text field="color" tag="input" type="color"/></td>
+			<td>{{||$:/core/ui/TagTemplate}}</td>
+			<td><$count filter="[all[current]tagging[]]"/></td>
+			<td>
+				<$macrocall $name="iconEditor" title={{!!title}}/>
+			</td>
+			<td>
+				<$macrocall $name="toggleButton" state={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} />
+			</td>
+		</tr>
+		<tr>
+			<td></td>
+			<td colspan="4">
+				<$reveal stateTitle={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} type="match" text="open" default="">
+					<table>
+						<tbody>
+							<tr>
+								<td><<lingo Colour/Heading>></td>
+								<td><$edit-text field="color" tag="input" type="text" size="9"/></td>
+							</tr>
+							<tr>
+								<td><<lingo Icon/Heading>></td>
+								<td><$edit-text field="icon" tag="input" size="45"/></td>
+							</tr>
+						</tbody>
+					</table>
+				</$reveal>
+			</td>
+		</tr>
+	</$list>
+	<tr>
+		<td></td>
+		<td style="position:relative;">
+			{{$:/core/ui/UntaggedTemplate}}
+		</td>
+		<td>
+			<small class="tc-menu-list-count"><$count filter="[untagged[]!is[system]] -[tags[]]"/></small>
+		</td>
+		<td></td>
+		<td></td>
+	</tr>
 </tbody>
 </table>

package/core/ui/ViewTemplate/unfold.tid

@@ -2,17 +2,21 @@ title: $:/core/ui/ViewTemplate/unfold
 tags: $:/tags/ViewTemplate
 
 \whitespace trim
-<$reveal tag="div" type="nomatch" state="$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar" text="hide">
+<div class="tc-reveal">
+<$list filter="[{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}match[show]]" variable="ignore">
 <$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
 <$button tooltip={{$:/language/Buttons/Fold/Hint}} aria-label={{$:/language/Buttons/Fold/Caption}} class="tc-fold-banner">
 <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
 {{$:/core/images/chevron-up}}
 </$button>
 </$reveal>
+</$list>
+<$list filter="[{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}match[show]] :else[<folded-state>get[text]match[hide]]" variable="ignore">
 <$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
 <$button tooltip={{$:/language/Buttons/Unfold/Hint}} aria-label={{$:/language/Buttons/Unfold/Caption}} class="tc-unfold-banner">
 <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
 {{$:/core/images/chevron-down}}
 </$button>
 </$reveal>
-</$reveal>
+</$list>
+</div>

package/core/ui/ViewTemplate.tid

@@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
 \define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
 \import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
 <$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>>
-<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
+<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem">
 <$transclude tiddler=<<listItem>>/>
 </$list>

package/core/wiki/config/DefaultTiddlersRetainStory.tid

@@ -0,0 +1,3 @@
+title: $:/config/ControlPanel/Basics/DefaultTiddlers/RetainStory
+
+[list[$:/StoryList]]

package/core/wiki/config/OfficialPluginLibrary.tid

@@ -1,6 +1,6 @@
 title: $:/config/OfficialPluginLibrary
 tags: $:/tags/PluginLibrary
-url: https://tiddlywiki.com/library/v5.2.3/index.html
+url: https://tiddlywiki.com/library/v5.2.5/index.html
 caption: {{$:/language/OfficialPluginLibrary}}
 
 {{$:/language/OfficialPluginLibrary/Hint}}

package/core/wiki/config/PageControlButtons.multids

@@ -21,4 +21,5 @@ core/ui/Buttons/print: hide
 core/ui/Buttons/storyview: hide
 core/ui/Buttons/timestamp: hide
 core/ui/Buttons/theme: hide
+core/ui/Buttons/layout: hide
 core/ui/Buttons/unfold-all: hide

package/core/wiki/macros/list.tid

@@ -1,21 +1,21 @@
 title: $:/core/macros/list
 tags: $:/tags/Macro
 
-\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage)
+\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage,field:"caption")
 \whitespace trim
-<$type$ class="$class$">
-<$list filter="$filter$" emptyMessage=<<__emptyMessage__>>>
-<$subtype$>
+<$genesis $type=<<__type__>> class=<<__class__>>>
+<$list filter=<<__filter__>> emptyMessage=<<__emptyMessage__>>>
+<$genesis $type=<<__subtype__>>>
 <$link to={{!!title}}>
 <$let tv-wikilinks="no">
-<$transclude field="caption">
+<$transclude field=<<__field__>>>
 <$view field="title"/>
 </$transclude>
 </$let>
 </$link>
-</$subtype$>
+</$genesis>
 </$list>
-</$type$>
+</$genesis>
 \end
 
 \define list-links-draggable-drop-actions()

package/core/wiki/macros/timeline.tid

@@ -3,14 +3,11 @@ modified: 20141212110330815
 tags: $:/tags/Macro
 title: $:/core/macros/timeline
 
-\define timeline-title()
-\whitespace trim
-<!-- Override this macro with a global macro 
-     of the same name if you need to change 
-     how titles are displayed on the timeline 
-     -->
-<$view field="title"/>
-\end
+<!-- Override one or both of the following two macros with a global or local macro of the same name 
+if you need to change how titles are displayed on a timeline -->
+
+\define timeline-title() <$view field="title"/>
+\define timeline-link() <$link to={{!!title}}><<timeline-title>></$link>
 \define timeline(limit:"100",format:"DDth MMM YYYY",subfilter:"",dateField:"modified")
 \whitespace trim
 <div class="tc-timeline">
@@ -19,7 +16,7 @@ title: $:/core/macros/timeline
 <$view field="$dateField$" format="date" template="$format$"/>
 <$list filter="[sameday:$dateField${!!$dateField$}!is[system]$subfilter$!sort[$dateField$]]">
 <div class="tc-menu-list-subitem">
-<$link to={{!!title}}><<timeline-title>></$link>
+<<timeline-link>>
 </div>
 </$list>
 </div>

package/core/wiki/macros/toc.tid

@@ -1,6 +1,10 @@
 title: $:/core/macros/toc
 tags: $:/tags/Macro
 
+
+\define toc-open-icon() $:/core/images/down-arrow
+\define toc-closed-icon() $:/core/images/right-arrow
+
 \define toc-caption()
 \whitespace trim
 <span class="tc-toc-caption tc-tiny-gap-left">
@@ -45,12 +49,12 @@ tags: $:/tags/Macro
     <$link to={{{ [<currentTiddler>get[target]else<currentTiddler>] }}}>
       <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/right-arrow}}
+          <$transclude tiddler=<<toc-closed-icon>> />
         </$button>
       </$reveal>
       <$reveal type="match" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/down-arrow}}
+          <$transclude tiddler=<<toc-open-icon>> />
         </$button>
       </$reveal>
       <<toc-caption>>
@@ -71,13 +75,13 @@ tags: $:/tags/Macro
     <li class=<<toc-item-class>>>
       <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/right-arrow}}
+         <$transclude tiddler=<<toc-closed-icon>> />
           <<toc-caption>>
         </$button>
       </$reveal>
       <$reveal type="match" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/down-arrow}}
+          <$transclude tiddler=<<toc-open-icon>> />
           <<toc-caption>>
         </$button>
       </$reveal>
@@ -117,12 +121,12 @@ tags: $:/tags/Macro
           <$list filter="[all[current]tagging[]$sort$limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button>">
           <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
             <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-              {{$:/core/images/right-arrow}}
+            <$transclude tiddler=<<toc-closed-icon>> />
             </$button>
           </$reveal>
           <$reveal type="match" stateTitle=<<toc-state>> text="open">
             <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-              {{$:/core/images/down-arrow}}
+              <$transclude tiddler=<<toc-open-icon>> />
             </$button>
           </$reveal>
         </$list>
@@ -144,13 +148,13 @@ tags: $:/tags/Macro
       <$list filter="[all[current]tagging[]$sort$limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button> <$view field='caption'><$view field='title'/></$view>">
         <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
           <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-            {{$:/core/images/right-arrow}}
+            <$transclude tiddler=<<toc-closed-icon>> />
             <<toc-caption>>
           </$button>
         </$reveal>
         <$reveal type="match" stateTitle=<<toc-state>> text="open">
           <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-            {{$:/core/images/down-arrow}}
+            <$transclude tiddler=<<toc-open-icon>> />
             <<toc-caption>>
           </$button>
         </$reveal>

package/core/wiki/tags/PageControls.tid

@@ -1,2 +1,2 @@
 title: $:/tags/PageControls
-list: [[$:/core/ui/Buttons/home]] [[$:/core/ui/Buttons/close-all]] [[$:/core/ui/Buttons/fold-all]] [[$:/core/ui/Buttons/unfold-all]] [[$:/core/ui/Buttons/permaview]] [[$:/core/ui/Buttons/new-tiddler]] [[$:/core/ui/Buttons/new-journal]] [[$:/core/ui/Buttons/new-image]] [[$:/core/ui/Buttons/import]] [[$:/core/ui/Buttons/export-page]] [[$:/core/ui/Buttons/control-panel]] [[$:/core/ui/Buttons/advanced-search]] [[$:/core/ui/Buttons/manager]] [[$:/core/ui/Buttons/tag-manager]] [[$:/core/ui/Buttons/language]] [[$:/core/ui/Buttons/palette]] [[$:/core/ui/Buttons/theme]] [[$:/core/ui/Buttons/storyview]] [[$:/core/ui/Buttons/encryption]] [[$:/core/ui/Buttons/timestamp]] [[$:/core/ui/Buttons/full-screen]] [[$:/core/ui/Buttons/print]] [[$:/core/ui/Buttons/save-wiki]] [[$:/core/ui/Buttons/refresh]] [[$:/core/ui/Buttons/more-page-actions]]
+list: [[$:/core/ui/Buttons/home]] [[$:/core/ui/Buttons/close-all]] [[$:/core/ui/Buttons/fold-all]] [[$:/core/ui/Buttons/unfold-all]] [[$:/core/ui/Buttons/permaview]] [[$:/core/ui/Buttons/new-tiddler]] [[$:/core/ui/Buttons/new-journal]] [[$:/core/ui/Buttons/new-image]] [[$:/core/ui/Buttons/import]] [[$:/core/ui/Buttons/export-page]] [[$:/core/ui/Buttons/control-panel]] [[$:/core/ui/Buttons/advanced-search]] [[$:/core/ui/Buttons/manager]] [[$:/core/ui/Buttons/tag-manager]] [[$:/core/ui/Buttons/language]] [[$:/core/ui/Buttons/palette]] [[$:/core/ui/Buttons/theme]] [[$:/core/ui/Buttons/layout]] [[$:/core/ui/Buttons/storyview]] [[$:/core/ui/Buttons/encryption]] [[$:/core/ui/Buttons/timestamp]] [[$:/core/ui/Buttons/full-screen]] [[$:/core/ui/Buttons/print]] [[$:/core/ui/Buttons/save-wiki]] [[$:/core/ui/Buttons/refresh]] [[$:/core/ui/Buttons/more-page-actions]]

package/editions/de-AT/tiddlywiki.info

@@ -13,7 +13,6 @@
 		"tiddlywiki/internals"
 	],
 	"languages": [
-		"en-GB",
 		"de-AT",
 		"de-DE"
 	],

package/editions/de-AT-server/tiddlywiki.info

@@ -11,7 +11,6 @@
 		"tiddlywiki/snowwhite"
 	],
 	"languages": [
-		"en-GB",
 		"de-AT",
 		"de-DE"
 	],

package/editions/de-DE/tiddlywiki.info

@@ -13,7 +13,6 @@
 		"tiddlywiki/internals"
 	],
 	"languages": [
-		"en-GB",
 		"de-AT",
 		"de-DE"
 	],

package/editions/dev/tiddlers/HelloThere.tid

@@ -1,5 +1,5 @@
 created: 20190115173333457
-modified: 20190115173723915
+modified: 20221029175754753
 tags: TableOfContents
 title: HelloThere
 type: text/vnd.tiddlywiki
@@ -15,6 +15,7 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
 ** [[Using ES2016 for Writing Plugins]]
 ** [[Adding Babel Polyfill to TiddlyWiki]]
 ** [[TiddlyWiki Drag and Drop Interoperability]]
+** [[Javascript Widget Tutorial]]
 * The original developer documentation from https://tiddlywiki.com:
 ** [[TiddlyWiki for Developers]]
 ** [[TiddlyWiki Coding Style Guidelines]]

package/editions/dev/tiddlers/How to run a local plugin library for testing.tid

@@ -0,0 +1,42 @@
+created: 20221114225038703
+modified: 20221114230502925
+tags: howto
+title: How to run a local plugin library for testing
+type: text/vnd.tiddlywiki
+
+!! Start the Library Server
+
+The "pluginlibrary" edition contains the components needed to set up a local server for ~TiddlyWiki plugin library testing or development.
+
+The following commands will create the library files and start a test server at http://localhost:8888
+
+```
+cd /your/path/to/TiddlyWiki5/editions/pluginlibrary
+tiddlywiki --build test-server
+```
+
+!! Important
+
+''This server is read-only. Nothing is saved back to the filesystem''
+
+!! Test the Library with a Single File Wiki
+
+* Open a single file wiki and import the configuration tiddler form http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary
+* Open the ''$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+
+!! Test the Library with a Node.js Wiki
+
+* Create a new wiki with eg:
+
+<<<
+```
+cd /temp/
+tiddlywiki my-wiki --init server
+tiddlywiki my-wiki --listen
+```
+<<<
+
+* Open "my-wiki" from http://localhost:8080
+* Import the http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary tiddler into "my-wiki"
+* Open the ''$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+

package/editions/dev/tiddlers/javascript-widget-tutorial/Child widgets tutorial.tid

@@ -0,0 +1,140 @@
+created: 20190202160512541
+modified: 20190222231130254
+title: Child widgets tutorial
+type: text/vnd.tiddlywiki
+
+\define showTrees(wikitext)
+<table>
+<thead>
+<tr><th>wiki text</th><th>html</th><th>renders as</th></tr>
+</thead>
+<tbody>
+<tr>
+<td>`$wikitext$`</td>
+<td>
+<$wikify name=html text="""$wikitext$""" output=html mode=inline>
+<$text text=<<html>>/>
+</$wikify>
+</td>
+<td>$wikitext$</td>
+</tr>
+</tbody>
+</table>
+
+<table>
+<thead>
+<tr><th>parse tree</th><th>widget tree</th></tr>
+</thead>
+<tbody>
+<tr>
+<td style="vertical-align: text-top">
+<pre><code>
+<$wikify name=parsetree text="""$wikitext$""" output=parsetree mode=inline>
+<<parsetree>>
+</$wikify>
+</code></pre>
+</td>
+<td style="vertical-align: text-top">
+<pre><code>
+<$wikify name=widgettree text="""$wikitext$""" output=widgettree mode=inline>
+<<widgettree>>
+</$wikify>
+</code></pre>
+</td>
+</tr>
+</tbody>
+</table>
+\end
+
+! Introduction
+
+Until now the examples have covered only simple, leaf widgets, but widgets can be arranged into a hierarchy. Compared to a leaf-only widget, widget classes which support having children must contain code to instantiate the children.
+
+Not all widgets need to support having children. Widgets whose only purpose is to integrate third party javascript libraries, for example may not need it.
+
+! wiki text ⇨ parse tree ⇨ widget tree ⇨ DOM tree
+
+# [[wiki text|https://tiddlywiki.com/#WikiText]] - Users write content in tiddlers using wiki text.
+# [[parse tree|https://tiddlywiki.com/dev/#ParsingMechanism]] - A parse tree is a JSON data structure describing the wiki text. Wiki text can be converted into a parse tree using `this.wiki.parseText`.
+# ''widget tree'' - Most items in the parse tree correspond to one or more items in the widget tree. The `this.makeChildWidgets` method is used to convert the parse tree into a widget tree.
+# [[DOM tree|https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction]] - A DOM tree is a standard javascript datastructure used by browsers to display a web page. The `this.renderChildren` method is used to instantiate the widget class and then render each widget in the widget tree. If a given widget will be visible in the browser, then one or more DOM nodes will be created.
+
+!Examples
+
+!! Simple trees without nesting
+
+[[Widgets in wiki text|https://tiddlywiki.com/#Widgets%20in%20WikiText]] have a syntax similar to html (i.e. `<$list/>`). But all [[wiki markup|https://tiddlywiki.com/#WikiText]] is seen by the tiddlywiki code as widgets.
+
+Even a simple string with no special syntax will be treated as a widget. In this case a widget of type `text`:
+
+<<showTrees """hello""">>
+
+The above bare string of text is mostly just a synonym for this widget syntax:
+
+<<showTrees """<$text text=hello/>""">>
+
+Some of the details of the parseTree and widgetTree are different in the two examples, but the general structure is the same and the rendered output is the same.
+
+In these two simple examples, there is no nesting and so no child widgets are created. 
+
+!! Trees with one level of nesting
+
+This next example shows the structure for bold wiki syntax. It is still simple, but does introduce one level of nesting: `element`→`text`
+
+The wiki syntax for bold converts to the standard html element `strong`. Any standard html element is represented in tiddlywiki as a widget of type `element`:
+
+<<showTrees """''bold''""">>
+
+Another example showing one level of nesting (`link`→`text`):
+
+<<showTrees """<$link to=atiddler>link</$link>""">>
+
+!!Widgets with no DOM contribution
+Not all widgets contribute items to the DOM. The purpose of some widgets is to affect the display of descendant widgets by changing some state. The `$set` widget for example sets a variable which will be accessible to the descendant widgets:
+
+<<showTrees """<$set name=myvar value=hi/>""">>
+
+Nothing is rendered and there is no html, but the parse tree and widget tree contain information about the variable.
+
+!! Dynamic widget children using this.wiki.parseText
+
+In all the examples so far, there has been a close mapping between the nesting structure of the parse tree and the widget tree. If the item is in the parse tree, then it is in the widget tree. If the parse tree item has children, then the widget tree has the same number of children.
+
+However, there are several examples of widgets in which more levels of nesting are created dynamically during the widget rendering process
+
+The `$macrocall` widget is one example:
+
+<<showTrees """<$macrocall $name=now/>""" >>
+
+The parse tree has just a single type=$macrocall element with no children. The widget tree has that same type=$macrocall element, but it also has a child widget which wasn't in the parse tree.
+
+In all cases, the `$macrocall` widget calls the given macro and then calls `this.wiki.parseText` on the output. This results in a new parse tree which is used to make the child widgets.
+
+In this particular case, the `now` macro is called. It returns a simple string of text, so when it is parsed the result causes the creation of a single child text widget containing the current date and time.
+
+!! Widgets which do not support nesting
+
+Just as some widgets can cause widget trees to have more nesting than the parse tree, some widgets can cause widget trees to have less nesting.
+
+This happens when there is no use for the widget to have any children. The `$text` widget, for example, has no use for displaying any descendants.
+
+This behavior is accomplished by not calling the `makeChildWidgets` method. Without that method call, the child widgets are not created from the child parse tree items. For example:
+
+<$macrocall $name=showTrees wikitext="""<$text text="hi">ignored child text</$text>"""/>
+
+Since the `$text` widget does not have a call to `makeChildWidgets`, 'ignored child text' above is present in the parse tree, but not in the widget tree.
+
+!Reference
+
+|!method|!when to call|!what it does|
+|`makeChildWidgets`|directly or indirectly from `render` method|converts child parse tree items into widget tree items|
+|`renderChildren`|directly or indirectly from `render` method, after the `makeChildWidgets` call|calls the `render` method of the child widget|
+|`refreshChildren`|directly or indirectly from `refresh` method, only needed if `refreshSelf` is not called|calls the `refresh` method of of the child widgets so they can check if refresh is needed|
+|`this.wiki.parseText`|pass the output parse tree to `makeChildWidgets`|converts the given text to a parse tree...only needed for dynamically constructed parsetree|
+
+|!example call|!purpose|!widgets using this approach|
+|`this.makeChildWidgets()`|construct child widgets from the static parse tree|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc.|
+|`this.makeChildWidgets(parseTreeNodes)`|construct child widgets from a dynamic parse tree|[[$list|$:/core/modules/widgets/list.js]], [[$transclude|$:/core/modules/widgets/transclude.js]], [[$macrocall|$:/core/modules/widgets/macrocall.js]], etc|
+|`this.renderChildren(parent, nextSibling)`|when the widget adds nothing to the dom, just pass the `render` arguments through to the children|[[$set|$:/core/modules/widgets/set.js]], [[$importvariables|$:/core/modules/widgets/importvariables.js]], [[$tiddler|$:/core/modules/widgets/tiddler.js]], [[$wikify|$:/core/modules/widgets/wikify.js]], etc.|
+|`this.renderChildren(domNode, null)`|passes the dom node generated by this widget into the children|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc|
+