mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00
Code Issues Releases Wiki Activity

DynaView: refactor checkVisibility for performance and readability

Browse Source
This commit is contained in:
Jermolene 2018-05-23 14:17:49 +01:00
parent 01bdaff005
commit 4b42173962
1 changed files with 24 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,41 +137,11 @@ function setZoomClasses() {
function checkVisibility() { function checkVisibility() {
var elements = document.querySelectorAll(".tc-dynaview-set-tiddler-when-visible"); var elements = document.querySelectorAll(".tc-dynaview-set-tiddler-when-visible");
$tw.utils.each(elements,function(element) { $tw.utils.each(elements,function(element) {
// Bail if we've already triggered this element // 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") { if(element.getAttribute("data-dynaview-has-triggered") === "true" && !element.hasAttribute("data-dynaview-unset-tiddler")) {
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; return;
} }
// Check if the element is visible // Calculate whether the element is visible
var elementRect = element.getBoundingClientRect(), var elementRect = element.getBoundingClientRect(),
viewportWidth = window.innerWidth || document.documentElement.clientWidth, viewportWidth = window.innerWidth || document.documentElement.clientWidth,
viewportHeight = window.innerHeight || document.documentElement.clientHeight, viewportHeight = window.innerHeight || document.documentElement.clientHeight,
@ -180,20 +150,33 @@ function checkVisibility() {
right: viewportWidth, right: viewportWidth,
top: 0, top: 0,
bottom: viewportHeight bottom: viewportHeight
}; },
tiddler,
value;
if(element.classList.contains("tc-dynaview-expand-viewport")) { if(element.classList.contains("tc-dynaview-expand-viewport")) {
viewportRect.left -= viewportWidth; viewportRect.left -= viewportWidth;
viewportRect.right += viewportWidth; viewportRect.right += viewportWidth;
viewportRect.top -= viewportHeight; viewportRect.top -= viewportHeight;
viewportRect.bottom += viewportHeight; viewportRect.bottom += viewportHeight;
} }
if(!(elementRect.left > viewportRect.right || if(elementRect.left > viewportRect.right ||
elementRect.right < viewportRect.left || elementRect.right < viewportRect.left ||
elementRect.top > viewportRect.bottom || elementRect.top > viewportRect.bottom ||
elementRect.bottom < viewportRect.top)) { elementRect.bottom < viewportRect.top) {
// Set the tiddler value // Element is not visible
var tiddler = element.getAttribute("data-dynaview-set-tiddler"), // Set the unset tiddler if required and this element has previously been triggered
value = element.getAttribute("data-dynaview-set-value") || ""; 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) { if(tiddler && $tw.wiki.getTiddlerText(tiddler) !== value) {
$tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value})); $tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value}));
} }