mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-12-05 16:28:05 +00:00
Introduce new dynaview plugin
This commit is contained in:
Jermolene
47
plugins/tiddlywiki/dynaview/examples/progressive-text.tid
Normal file
47
plugins/tiddlywiki/dynaview/examples/progressive-text.tid
Normal file
@@ -0,0 +1,47 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/examples/progressive-text
|
||||
tags: $:/tags/dynaviewExamples
|
||||
caption: Progressive Text
|
||||
|
||||
//Zoom into the space below to see a poem//
|
||||
|
||||
''N.B. This example only works in Safari at the moment''
|
||||
|
||||
<pre><div class="tc-dynaview-zoom-visible-1-and-above" style="font-size: 0.7em;line-height:1.5;">
|
||||
'Fury said to a
|
||||
mouse, That he
|
||||
met in the
|
||||
house,</div><div class="tc-dynaview-zoom-visible-1a-and-above" style="font-size: 0.6em;line-height:1.5;"> "Let us
|
||||
both go to
|
||||
law: I will
|
||||
prosecute
|
||||
YOU.--Come,</div><div class="tc-dynaview-zoom-visible-1b-and-above" style="font-size: 0.5em;line-height:1.5;"> I'll take no
|
||||
denial; We
|
||||
must have a
|
||||
trial: For</div><div class="tc-dynaview-zoom-visible-1c-and-above" style="font-size: 0.4em;line-height:1.5;"> really this
|
||||
morning I've
|
||||
nothing
|
||||
to do."</div><div class="tc-dynaview-zoom-visible-2-and-above" style="font-size: 0.3em;line-height:1.5;"> Said the
|
||||
mouse to the
|
||||
cur, "Such
|
||||
a trial,
|
||||
dear Sir,</div><div class="tc-dynaview-zoom-visible-2a-and-above" style="font-size: 0.25em;line-height:1.5;"> With
|
||||
no jury
|
||||
or judge,
|
||||
would be
|
||||
wasting
|
||||
our
|
||||
breath."</div><div class="tc-dynaview-zoom-visible-3-and-above" style="font-size: 0.2em;line-height:1.5;"> "I'll be
|
||||
judge, I'll
|
||||
be jury,"
|
||||
Said
|
||||
cunning
|
||||
old Fury:
|
||||
"I'll
|
||||
try the
|
||||
whole
|
||||
cause,</div><div class="tc-dynaview-zoom-visible-4-and-above" style="font-size: 0.15em;line-height:1.5;"> and
|
||||
condemn
|
||||
you
|
||||
to
|
||||
death."'
|
||||
</div></pre>
|
||||
26
plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid
Normal file
26
plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid
Normal file
@@ -0,0 +1,26 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll
|
||||
tags: $:/tags/dynaviewExamples
|
||||
caption: Reveal on Scroll
|
||||
|
||||
\define indicator(index)
|
||||
<$reveal state="$:/state/reveal-on-scroll/example$index$" type="match" text="yes">
|
||||
$index$
|
||||
</$reveal>
|
||||
\end
|
||||
|
||||
\define lorem-ipsum(index)
|
||||
<div class="tc-dynaview-set-tiddler-when-visible" style="min-height: 75px;" data-dynaview-set-tiddler="$:/state/reveal-on-scroll/example$index$" data-dynaview-set-value="yes">
|
||||
<h1>Heading $index$</h1>
|
||||
<$reveal state="$:/state/reveal-on-scroll/example$index$" type="match" text="yes">
|
||||
(Rendered at <<now "[UTC]YYYY-0MM-0DD 0hh:0mm:0ss.XXX">>) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</$reveal>
|
||||
</div>
|
||||
\end
|
||||
|
||||
Visible: <$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16">
|
||||
<$macrocall $name="indicator" index=<<currentTiddler>>/>
|
||||
</$list>
|
||||
|
||||
<$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16">
|
||||
<$macrocall $name="lorem-ipsum" index=<<currentTiddler>>/>
|
||||
</$list>
|
||||
@@ -0,0 +1,134 @@
|
||||
[
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture",
|
||||
"caption": "TiddlyWiki Architecture",
|
||||
"tags": "[[$:/tags:/ZoomableDiagram]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture",
|
||||
"caption": "Browser Architecture",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers",
|
||||
"caption": "Service Workers",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Bosses",
|
||||
"caption": "Service Bosses",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Out of Service Workers",
|
||||
"caption": "Out of Service Workers",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events",
|
||||
"caption": "Events",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Non Events",
|
||||
"caption": "Non Events",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Past Events",
|
||||
"caption": "Past Events",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM",
|
||||
"caption": "DOM",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Nodes",
|
||||
"caption": "Nodes",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Attributes",
|
||||
"caption": "Attributes",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Pathogens",
|
||||
"caption": "Pathogens",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Connection",
|
||||
"caption": "Connection",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/HTTP",
|
||||
"caption": "HTTP",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Connection]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture",
|
||||
"caption": "Server Architecture",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js",
|
||||
"caption": "Node.js",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/C/C++",
|
||||
"caption": "C/C++",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Quotation Marks",
|
||||
"caption": "Quotation Marks",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Asterisks",
|
||||
"caption": "Asterisks",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes",
|
||||
"caption": "Potatoes",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Carrots",
|
||||
"caption": "Carrots",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
},
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Apricots",
|
||||
"caption": "Apricots",
|
||||
"tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes]]",
|
||||
"text": "<<lorem-ipsum>>"
|
||||
}
|
||||
]
|
||||
111
plugins/tiddlywiki/dynaview/examples/zoomable-diagram.tid
Normal file
111
plugins/tiddlywiki/dynaview/examples/zoomable-diagram.tid
Normal file
@@ -0,0 +1,111 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/examples/zoomable-diagram
|
||||
tags: $:/tags/dynaviewExamples
|
||||
caption: Zoomable Diagram
|
||||
|
||||
\define lorem-ipsum()
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
\end
|
||||
|
||||
\define zoomable-diagram(tag,level:"1 2 3 4 5 6 7")
|
||||
<div class={{{ $level$ +[addprefix[zoomable-diagram-level-]addprefix[zoomable-diagram-list ]] }}}>
|
||||
<$list filter="[all[shadows+tiddlers]tag[$tag$]]">
|
||||
<div class="zoomable-diagram-item">
|
||||
<div class="zoomable-diagram-title">
|
||||
<$transclude field="caption" mode="inline"/>
|
||||
</div>
|
||||
<div class="zoomable-diagram-body">
|
||||
<div class="zoomable-diagram-text">
|
||||
<$transclude field="text" mode="block"/>
|
||||
</div>
|
||||
<div class="zoomable-diagram-children">
|
||||
<$set name="new-level" filter=""" $level$ +[butfirst[]] """>
|
||||
<$macrocall $name="zoomable-diagram" tag=<<currentTiddler>> level=<<new-level>>/>
|
||||
</$set>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</$list>
|
||||
</div>
|
||||
\end
|
||||
|
||||
//Zoom into the diagram below to find out more//
|
||||
|
||||
''N.B. This example only works in Safari at the moment''
|
||||
|
||||
<style>
|
||||
.zoomable-diagram-wrapper {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.zoomable-diagram-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.zoomable-diagram-level-1 {font-size: 1em;}
|
||||
.zoomable-diagram-level-2 {font-size: 0.8em;}
|
||||
.zoomable-diagram-level-3 {font-size: 0.6em;}
|
||||
.zoomable-diagram-level-4 {font-size: 0.4em;}
|
||||
|
||||
.zoomable-diagram-level-1,
|
||||
.zoomable-diagram-level-2,
|
||||
.zoomable-diagram-level-3,
|
||||
.zoomable-diagram-level-4,
|
||||
.zoomable-diagram-text {
|
||||
transition: opacity 150ms ease-in-out;
|
||||
}
|
||||
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1 .zoomable-diagram-level-1 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1 .zoomable-diagram-level-2 {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1 .zoomable-diagram-level-3 {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1 .zoomable-diagram-level-4 {opacity: 0;}
|
||||
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .zoomable-diagram-level-1 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .zoomable-diagram-level-1 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .zoomable-diagram-level-2 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .zoomable-diagram-level-3 {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .zoomable-diagram-level-4 {opacity: 0;}
|
||||
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-1 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-1 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-2 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-2 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-3 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .zoomable-diagram-level-4 {opacity: 0;}
|
||||
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-1 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-1 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-2 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-2 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-3 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-3 > .zoomable-diagram-item > .zoomable-diagram-body > .zoomable-diagram-text {opacity: 0;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .zoomable-diagram-level-4 {opacity: 1;}
|
||||
|
||||
.zoomable-diagram-item {
|
||||
margin: 0.5em;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.zoomable-diagram-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zoomable-diagram-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zoomable-diagram-text {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.zoomable-diagram-children {
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="zoomable-diagram-wrapper">
|
||||
<<zoomable-diagram "$:/tags:/ZoomableDiagram">>
|
||||
</div>
|
||||
56
plugins/tiddlywiki/dynaview/examples/zoomable-tooltips.tid
Normal file
56
plugins/tiddlywiki/dynaview/examples/zoomable-tooltips.tid
Normal file
@@ -0,0 +1,56 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/examples/zoomable-tooltips
|
||||
tags: $:/tags/dynaviewExamples
|
||||
caption: Zoomable Tooltips
|
||||
|
||||
//Zoom into the images below to see their titles//
|
||||
|
||||
''N.B. This example only works in Safari at the moment''
|
||||
|
||||
<style>
|
||||
.zoomable-tooltip-demo-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zoomable-tooltip-demo-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
padding: 4px;
|
||||
width: 5em;
|
||||
height: 7em;
|
||||
}
|
||||
|
||||
.zoomable-tooltip-demo-item-image {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.zoomable-tooltip-demo-item-image svg {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.zoomable-tooltip-demo-item-text {
|
||||
font-size:0.3em;
|
||||
flex: 0 0 auto;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
background: #f7f747;
|
||||
border: 1px solid #c2c235;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
<div class="zoomable-tooltip-demo-container">
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]]">
|
||||
<div class="zoomable-tooltip-demo-item">
|
||||
<span class="zoomable-tooltip-demo-item-image">
|
||||
<$transclude/>
|
||||
</span>
|
||||
<span class="zoomable-tooltip-demo-item-text tc-dynaview-zoom-visible-3-and-above">
|
||||
<$text text=<<currentTiddler>>/>
|
||||
</span>
|
||||
</div>
|
||||
</$list>
|
||||
</div>
|
||||
Reference in New Issue
Block a user