diff --git a/plugins/tiddlywiki/dynaview/dynaview.js b/plugins/tiddlywiki/dynaview/dynaview.js index 8bc725de6..0272ac0d8 100644 --- a/plugins/tiddlywiki/dynaview/dynaview.js +++ b/plugins/tiddlywiki/dynaview/dynaview.js @@ -137,41 +137,11 @@ function setZoomClasses() { function checkVisibility() { var elements = document.querySelectorAll(".tc-dynaview-set-tiddler-when-visible"); $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"); - } - } + // Bail if we've already triggered this element and we're not unsetting a tiddler when this element leaves the viewport + if(element.getAttribute("data-dynaview-has-triggered") === "true" && !element.hasAttribute("data-dynaview-unset-tiddler")) { return; } - // Check if the element is visible + // Calculate whether the element is visible var elementRect = element.getBoundingClientRect(), viewportWidth = window.innerWidth || document.documentElement.clientWidth, viewportHeight = window.innerHeight || document.documentElement.clientHeight, @@ -180,20 +150,33 @@ function checkVisibility() { right: viewportWidth, top: 0, bottom: viewportHeight - }; + }, + tiddler, + value; 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(elementRect.left > viewportRect.right || + elementRect.right < viewportRect.left || + elementRect.top > viewportRect.bottom || + elementRect.bottom < viewportRect.top) { + // Element is not visible + // Set the unset tiddler if required and this element has previously been triggered + if(element.getAttribute("data-dynaview-has-triggered") === "true" && element.hasAttribute("data-dynaview-unset-tiddler")) { + 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"); + } + } else { + // Element is visible + 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})); }