mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
Introduce new dynaview plugin
This commit is contained in:
Jermolene
parent
413894e3e7
commit
5fee52beac
@ -15,7 +15,8 @@
|
||||
"tiddlywiki/bibtex",
|
||||
"tiddlywiki/savetrail",
|
||||
"tiddlywiki/twitter",
|
||||
"tiddlywiki/external-attachments"
|
||||
"tiddlywiki/external-attachments",
|
||||
"tiddlywiki/dynaview"
|
||||
],
|
||||
"themes": [
|
||||
"tiddlywiki/vanilla",
|
||||
|
||||
7
plugins/tiddlywiki/dynaview/above-story.tid
Normal file
7
plugins/tiddlywiki/dynaview/above-story.tid
Normal file
@ -0,0 +1,7 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/above-story
|
||||
tags: $:/tags/AboveStory-disabled
|
||||
|
||||
<!-- Remove the "-disabled" part of the tag to cause the currently selected example to appear at the top of the story river. Intended to make it easier to make clean screencaps -->
|
||||
<div style="height:100em;">
|
||||
<$transclude tiddler={{$:/state/tab--1915807570}} mode="block"/>
|
||||
</div>
|
||||
53
plugins/tiddlywiki/dynaview/docs.tid
Normal file
53
plugins/tiddlywiki/dynaview/docs.tid
Normal file
@ -0,0 +1,53 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/docs
|
||||
|
||||
! Documentation
|
||||
|
||||
The components of this plugin include:
|
||||
|
||||
* A background task that:
|
||||
** performs specified actions when elements are scrolled into view
|
||||
** updates certain base classes on the `document.body` according to the current zoom level
|
||||
* Pre-configured CSS classes to simplify using those base classes
|
||||
* Usage examples
|
||||
|
||||
! Scroll Features
|
||||
|
||||
The background task detects when elements with the class `tc-dynaview-set-tiddler-when-visible` scroll into view. The first time that they do, the background task assigns the value in the attribute `data-dynaview-set-value` to the tiddler whose title is in the attribute `data-dynaview-set-tiddler`. This assignment can be tied to a reveal widget to cause content to be displayed when it becomes visible. If the class `tc-dynaview-expand-viewport` is set then the viewport is expanded so that the processing occurs when elements move near the viewport.
|
||||
|
||||
! Zoom Features
|
||||
|
||||
!! Document Body Zoom Classes
|
||||
|
||||
The background task sets the following classes on `document.body` according to the current zoom level.
|
||||
|
||||
|!Class |!Description |
|
||||
|`tc-dynaview-zoom-factor-1` |Set when the zoom level is less than 2.00 |
|
||||
|`tc-dynaview-zoom-factor-2` |Set when the zoom level is greater than 2.00 and less than 3.00 |
|
||||
|`tc-dynaview-zoom-factor-3` |Set when the zoom level is greater than 3.00 and less than 4.00 |
|
||||
|`tc-dynaview-zoom-factor-4` |Set when the zoom level is greater than 4.00 |
|
||||
|`tc-dynaview-zoom-factor-1-and-above` |Set when the zoom level is greater than or equal to 1.00 |
|
||||
|`tc-dynaview-zoom-factor-1a-and-above` |Set when the zoom level is greater than or equal to 1.14 |
|
||||
|`tc-dynaview-zoom-factor-1b-and-above` |Set when the zoom level is greater than or equal to 1.33 |
|
||||
|`tc-dynaview-zoom-factor-1c-and-above` |Set when the zoom level is greater than or equal to 1.60 |
|
||||
|`tc-dynaview-zoom-factor-2-and-above` |Set when the zoom level is greater than or equal to 2.00 |
|
||||
|`tc-dynaview-zoom-factor-2a-and-above` |Set when the zoom level is greater than or equal to 2.66 |
|
||||
|`tc-dynaview-zoom-factor-3-and-above` |Set when the zoom level is greater than or equal to 3.00 |
|
||||
|`tc-dynaview-zoom-factor-4-and-above` |Set when the zoom level is greater than or equal to 4.00 |
|
||||
|
||||
!! Pre-configured Classes
|
||||
|
||||
These classes can be used on any element to control its visibility at different zoom levels.
|
||||
|
||||
|!Class |!Description |
|
||||
|`tc-dynaview-zoom-visible-1-and-above` |Visible when the zoom level is 1.00 or more |
|
||||
|`tc-dynaview-zoom-visible-1a-and-above` |Visible when the zoom level is 1.14 or more |
|
||||
|`tc-dynaview-zoom-visible-1b-and-above` |Visible when the zoom level is 1.33 or more |
|
||||
|`tc-dynaview-zoom-visible-1c-and-above` |Visible when the zoom level is 1.60 or more |
|
||||
|`tc-dynaview-zoom-visible-2-and-above` |Visible when the zoom level is 2.00 or more |
|
||||
|`tc-dynaview-zoom-visible-2a-and-above` |Visible when the zoom level is 2.66 or more |
|
||||
|`tc-dynaview-zoom-visible-3-and-above` |Visible when the zoom level is 3.00 or more |
|
||||
|`tc-dynaview-zoom-visible-4-and-above` |Visible when the zoom level is 4.00 or more |
|
||||
|`tc-dynaview-zoom-visible-1` |Visible when the zoom level is less than 2.00 |
|
||||
|`tc-dynaview-zoom-visible-2` |Visible when the zoom level is greater than or equal to 2.00 and less than 3.00 |
|
||||
|`tc-dynaview-zoom-visible-3` |Visible when the zoom level is greater than or equal to 3.00 and less than 4.00 |
|
||||
|`tc-dynaview-zoom-visible-4` |Visible when the zoom level is greater than or equal to 4.00 |
|
||||
94
plugins/tiddlywiki/dynaview/dynaview.js
Normal file
94
plugins/tiddlywiki/dynaview/dynaview.js
Normal file
@ -0,0 +1,94 @@
|
||||
/*\
|
||||
title: $:/plugins/tiddlywiki/dynaview/dynaview.js
|
||||
type: application/javascript
|
||||
module-type: startup
|
||||
|
||||
Zoom everything
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
// Export name and synchronous status
|
||||
exports.name = "dynaview";
|
||||
exports.platforms = ["browser"];
|
||||
exports.after = ["render"];
|
||||
exports.synchronous = true;
|
||||
|
||||
var isWaitingForAnimationFrame = false;
|
||||
|
||||
exports.startup = function() {
|
||||
window.addEventListener("load",onScrollOrResize,false);
|
||||
window.addEventListener("scroll",onScrollOrResize,false);
|
||||
window.addEventListener("resize",onScrollOrResize,false);
|
||||
$tw.hooks.addHook("th-page-refreshed",function() {
|
||||
checkVisibility();
|
||||
});
|
||||
};
|
||||
|
||||
function onScrollOrResize(event) {
|
||||
if(!isWaitingForAnimationFrame) {
|
||||
window.requestAnimationFrame(function() {
|
||||
setZoomClasses();
|
||||
checkVisibility();
|
||||
isWaitingForAnimationFrame = false;
|
||||
});
|
||||
}
|
||||
isWaitingForAnimationFrame = true;
|
||||
}
|
||||
|
||||
function setZoomClasses() {
|
||||
var zoomFactor = document.body.scrollWidth / window.innerWidth,
|
||||
classList = document.body.classList;
|
||||
classList.add("tc-dynaview")
|
||||
classList.toggle("tc-dynaview-zoom-factor-1",zoomFactor <= 2);
|
||||
classList.toggle("tc-dynaview-zoom-factor-1-and-above",zoomFactor >= 1);
|
||||
classList.toggle("tc-dynaview-zoom-factor-1a-and-above",zoomFactor >= 1.14);
|
||||
classList.toggle("tc-dynaview-zoom-factor-1b-and-above",zoomFactor >= 1.33);
|
||||
classList.toggle("tc-dynaview-zoom-factor-1c-and-above",zoomFactor >= 1.6);
|
||||
classList.toggle("tc-dynaview-zoom-factor-2",zoomFactor >= 2 && zoomFactor <= 3);
|
||||
classList.toggle("tc-dynaview-zoom-factor-2-and-above",zoomFactor >= 2);
|
||||
classList.toggle("tc-dynaview-zoom-factor-2a-and-above",zoomFactor >= 2.66);
|
||||
classList.toggle("tc-dynaview-zoom-factor-3",zoomFactor >= 3 && zoomFactor <= 4);
|
||||
classList.toggle("tc-dynaview-zoom-factor-3-and-above",zoomFactor >= 3);
|
||||
classList.toggle("tc-dynaview-zoom-factor-4",zoomFactor >= 4);
|
||||
classList.toggle("tc-dynaview-zoom-factor-4-and-above",zoomFactor >= 4);
|
||||
}
|
||||
|
||||
function checkVisibility() {
|
||||
var elements = document.querySelectorAll(".tc-dynaview-set-tiddler-when-visible");
|
||||
$tw.utils.each(elements,function(element) {
|
||||
// Check if the element is visible
|
||||
var elementRect = element.getBoundingClientRect(),
|
||||
viewportWidth = window.innerWidth || document.documentElement.clientWidth,
|
||||
viewportHeight = window.innerHeight || document.documentElement.clientHeight,
|
||||
viewportRect = {
|
||||
left: 0,
|
||||
right: viewportWidth,
|
||||
top: 0,
|
||||
bottom: viewportHeight
|
||||
};
|
||||
if(element.classList.contains("tc-dynaview-expand-viewport")) {
|
||||
viewportRect.left -= viewportWidth;
|
||||
viewportRect.right += viewportWidth;
|
||||
viewportRect.top -= viewportHeight;
|
||||
viewportRect.bottom += viewportHeight;
|
||||
}
|
||||
if(!(elementRect.left > viewportRect.right ||
|
||||
elementRect.right < viewportRect.left ||
|
||||
elementRect.top > viewportRect.bottom ||
|
||||
elementRect.bottom < viewportRect.top)) {
|
||||
// Set the tiddler value
|
||||
var tiddler = element.getAttribute("data-dynaview-set-tiddler"),
|
||||
value = element.getAttribute("data-dynaview-set-value") || "";
|
||||
if(tiddler && $tw.wiki.getTiddlerText(tiddler) !== value) {
|
||||
$tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value}));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
3
plugins/tiddlywiki/dynaview/examples.tid
Normal file
3
plugins/tiddlywiki/dynaview/examples.tid
Normal file
@ -0,0 +1,3 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/examples
|
||||
|
||||
<<tabs "[all[tiddlers+shadows]tag[$:/tags/dynaviewExamples]!has[draft.of]]" "$:/plugins/tiddlywiki/dynaview/examples/progressive-text">>
|
||||
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>
|
||||
13
plugins/tiddlywiki/dynaview/macros.tid
Normal file
13
plugins/tiddlywiki/dynaview/macros.tid
Normal file
@ -0,0 +1,13 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/macros
|
||||
tags: $:/tags/Macro
|
||||
|
||||
\define transclude-when-visible(tiddler,mode:"block",state,minHeight:"1em",loadingText:"…")
|
||||
<div class="tc-dynaview-set-tiddler-when-visible tc-dynaview-expand-viewport" style="min-height: $minHeight$;" data-dynaview-set-tiddler=<<__state__>> data-dynaview-set-value="visible">
|
||||
<$reveal state=<<__state__>> type="match" text="visible">
|
||||
<$transclude tiddler=<<__tiddler__>> mode=<<__block__>>/>
|
||||
</$reveal>
|
||||
<$reveal state=<<__state__>> type="nomatch" text="visible">
|
||||
$loadingText$
|
||||
</$reveal>
|
||||
</div>
|
||||
\end
|
||||
7
plugins/tiddlywiki/dynaview/plugin.info
Normal file
7
plugins/tiddlywiki/dynaview/plugin.info
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"title": "$:/plugins/tiddlywiki/dynaview",
|
||||
"description": "Dynamic scrolling and zooming effects",
|
||||
"author": "JeremyRuston",
|
||||
"core-version": ">=5.0.0",
|
||||
"list": "readme docs examples"
|
||||
}
|
||||
16
plugins/tiddlywiki/dynaview/readme.tid
Normal file
16
plugins/tiddlywiki/dynaview/readme.tid
Normal file
@ -0,0 +1,16 @@
|
||||
title: $:/plugins/tiddlywiki/dynaview/readme
|
||||
|
||||
! Dynaview
|
||||
|
||||
This plugin makes it possible to build user interfaces that dynamically respond to changes in the browser viewport via scrolling or zooming:
|
||||
|
||||
* CSS classes that allow rendering to be deferred until the output is scrolled into view
|
||||
* CSS classes that allow the opacity of DOM elements to vary according to the current zoom level
|
||||
|
||||
Some points to note about the zoom features:
|
||||
|
||||
* The zoom level currently only works on Safari, both on Mac OS and on the iPhone/iPad
|
||||
* The zoom level tracked by the plugin is the pinch-zoom level, and not the text-zoom level
|
||||
* Rather than being progressively rendered as needed, hidden item are rendered with zero opacity. Which means that they can still be interacted with
|
||||
|
||||
This is really just a proof of concept to allow the user experience to be evaluated. A production version would need to work in all browsers, which would mean adopting a polyfill such as [[Hammer.js|http://hammerjs.github.io/]] to give us manual pan and zoom support. It would also allow deeper levels of zoom.
|
||||
34
plugins/tiddlywiki/dynaview/styles.tid
Normal file
34
plugins/tiddlywiki/dynaview/styles.tid
Normal file
@ -0,0 +1,34 @@
|
||||
title: $:/plugins/tiddlywiki/help/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
|
||||
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1a-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1b-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1c-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-2-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-2a-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-3-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-4-and-above,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-2,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-3,
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-4 {
|
||||
transition: opacity 150ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.tc-dynaview .tc-dynaview-zoom-visible-1-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1a-and-above .tc-dynaview-zoom-visible-1a-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1b-and-above .tc-dynaview-zoom-visible-1b-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1c-and-above .tc-dynaview-zoom-visible-1c-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2-and-above .tc-dynaview-zoom-visible-2-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2a-and-above .tc-dynaview-zoom-visible-2a-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3-and-above .tc-dynaview-zoom-visible-3-and-above {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4-and-above .tc-dynaview-zoom-visible-4-and-above {opacity: 1;}
|
||||
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-1 .tc-dynaview-zoom-visible-1 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-2 .tc-dynaview-zoom-visible-2 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-3 .tc-dynaview-zoom-visible-3 {opacity: 1;}
|
||||
body.tc-dynaview.tc-dynaview-zoom-factor-4 .tc-dynaview-zoom-visible-4 {opacity: 1;}
|
||||
Loading…
Reference in New Issue
Block a user