mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00
Code Issues Releases Wiki Activity

Dynaview: unset functionality when scrolling out (#3212)

Browse Source 
* try adding data-dynaview-unset-tiddler

I obviously lied

* dynaview unset functionality when scrolling out of view

* additional undefined check

* Update docs.tid

* update true and false to "true" and "false"

* add example of unset functionality

* Update reveal-on-scroll.tid
This commit is contained in:
BurningTreeC 2018-04-12 14:23:50 +02:00 committed by Jeremy Ruston
parent 5ea6c9a273
commit 462d0a9402
3 changed files with 62 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/tiddlywiki/dynaview/docs.tid
View File

@ -17,6 +17,10 @@ The components of this plugin include:
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.
!! Unset tiddler field when set visible before but then scrolled out of view
The background task detects when elements with the class `tc-dynaview-set-tiddler-when-visible` scroll out view after they have scrolled into view. When scrolling out of view after they have scrolled in, the background task assigns the value in the attribute `data-dynaview-unset-value` to the tiddler whose title is in the attribute `data-dynaview-unset-tiddler`. This assignment can be tied to a reveal widget to cause content to be hidden when it becomes invisible. 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.
!! Update address bar when scrolling
The background task detects the tiddler at the top of the viewport and sets the address bar location hash to the title of that tiddler.

32
plugins/tiddlywiki/dynaview/dynaview.js
View File

@ -139,6 +139,36 @@ function checkVisibility() {
$tw.utils.each(elements,function(element) {
// Bail if we've already triggered this element
if(element.getAttribute("data-dynaview-has-triggered") === "true") {
if(element.getAttribute("data-dynaview-unset-tiddler") !== undefined && element.getAttribute("data-dynaview-unset-value") !== undefined) {
// 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-unset-tiddler"),
value = element.getAttribute("data-dynaview-unset-value") || "";
if(tiddler && $tw.wiki.getTiddlerText(tiddler) !== value) {
$tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value}));
}
element.setAttribute("data-dynaview-has-triggered","false");
}
}
return;
}
// Check if the element is visible
@ -167,7 +197,7 @@ function checkVisibility() {
if(tiddler && $tw.wiki.getTiddlerText(tiddler) !== value) {
$tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value}));
}
element.setAttribute("data-dynaview-has-triggered",true);
element.setAttribute("data-dynaview-has-triggered","true");
}
});
}

27
plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid
View File

@ -17,10 +17,37 @@ $index$
</div>
\end
\define lorem-ipsum-unset(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" data-dynaview-unset-tiddler="$:/state/reveal-on-scroll/example$index$" data-dynaview-unset-value="no">
<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
<$reveal state="$:/state/dynaview-example/reveal-scroll/unset" type="nomatch" text="yes">
!!!Same example, showing elements when they scroll into view and hiding elements when they scroll out of view:<br>
<$button set="$:/state/dynaview-example/reveal-scroll/unset" setTo="yes">Change Example</$button>
</$reveal>
<$reveal state="$:/state/dynaview-example/reveal-scroll/unset" type="match" text="yes">
!!!Same example, but only showing elements when they scroll into view:<br>
<$button set="$:/state/dynaview-example/reveal-scroll/unset" setTo="no">Change Example</$button>
</$reveal>
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>
<$reveal state="$:/state/dynaview-example/reveal-scroll/unset" type="nomatch" text="yes">
<$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>
</$reveal>
<$reveal state="$:/state/dynaview-example/reveal-scroll/unset" type="match" text="yes">
<$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16">
<$macrocall $name="lorem-ipsum-unset" index=<<currentTiddler>>/>
</$list>
</$reveal>