From 462d0a9402ff8c576b522ca7e645022063851bac Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Thu, 12 Apr 2018 14:23:50 +0200 Subject: [PATCH] Dynaview: unset functionality when scrolling out (#3212) * 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 --- plugins/tiddlywiki/dynaview/docs.tid | 4 +++ plugins/tiddlywiki/dynaview/dynaview.js | 32 ++++++++++++++++++- .../dynaview/examples/reveal-on-scroll.tid | 27 ++++++++++++++++ 3 files changed, 62 insertions(+), 1 deletion(-) diff --git a/plugins/tiddlywiki/dynaview/docs.tid b/plugins/tiddlywiki/dynaview/docs.tid index cee43e1ab..822b10cfc 100644 --- a/plugins/tiddlywiki/dynaview/docs.tid +++ b/plugins/tiddlywiki/dynaview/docs.tid @@ -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. diff --git a/plugins/tiddlywiki/dynaview/dynaview.js b/plugins/tiddlywiki/dynaview/dynaview.js index 26bdbae30..8bc725de6 100644 --- a/plugins/tiddlywiki/dynaview/dynaview.js +++ b/plugins/tiddlywiki/dynaview/dynaview.js @@ -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"); } }); } diff --git a/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid b/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid index a9abbebb2..77a443c29 100644 --- a/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid +++ b/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid @@ -17,10 +17,37 @@ $index$ \end +\define lorem-ipsum-unset(index) +
+

Heading $index$

+<$reveal state="$:/state/reveal-on-scroll/example$index$" type="match" text="yes"> +(Rendered at <>) 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 + +<$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:
+<$button set="$:/state/dynaview-example/reveal-scroll/unset" setTo="yes">Change Example + +<$reveal state="$:/state/dynaview-example/reveal-scroll/unset" type="match" text="yes"> + +!!!Same example, but only showing elements when they scroll into view:
+<$button set="$:/state/dynaview-example/reveal-scroll/unset" setTo="no">Change Example + + Visible: <$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16"> <$macrocall $name="indicator" index=<>/> +<$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=<>/> + +<$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=<>/> + +