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

@@ -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.

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");
 		}
 	});
 }

plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid

@@ -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>