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

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

@ -137,10 +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
// 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;
}
// Calculate whether the element is visible
var elementRect = element.getBoundingClientRect(),
viewportWidth = window.innerWidth || document.documentElement.clientWidth,
viewportHeight = window.innerHeight || document.documentElement.clientHeight,
@ -149,7 +150,9 @@ function checkVisibility() {
right: viewportWidth,
top: 0,
bottom: viewportHeight
};
},
tiddler,
value;
if(element.classList.contains("tc-dynaview-expand-viewport")) {
viewportRect.left -= viewportWidth;
viewportRect.right += viewportWidth;
@ -160,39 +163,19 @@ function checkVisibility() {
elementRect.right < viewportRect.left ||
elementRect.top > viewportRect.bottom ||
elementRect.bottom < viewportRect.top) {
// Set the tiddler value
var tiddler = element.getAttribute("data-dynaview-unset-tiddler"),
// 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");
}
}
return;
}
// 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-set-tiddler"),
} 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}));