137 lines
4.0 KiB
JavaScript
137 lines
4.0 KiB
JavaScript
/*\
|
|
title: $:/plugins/tiddlywiki/dynannotate/element-spotlight.js
|
|
type: application/javascript
|
|
module-type: library
|
|
|
|
Manages the element spotlight effect
|
|
|
|
\*/
|
|
(function(){
|
|
|
|
/*jslint node: true, browser: true */
|
|
/*global $tw: false */
|
|
"use strict";
|
|
|
|
function ElementSpotlight() {
|
|
this.animationStartTime; // Undefined if no animation is in progress
|
|
// Create DOM nodes
|
|
this.spotlightElement = $tw.utils.domMaker("div",{
|
|
"class": "tc-dynannotate-spotlight"
|
|
});
|
|
this.spotlightWrapper = $tw.utils.domMaker("div",{
|
|
"class": "tc-dynannotate-spotlight-wrapper",
|
|
children: [
|
|
this.spotlightElement
|
|
]
|
|
});
|
|
document.body.appendChild(this.spotlightWrapper);
|
|
}
|
|
|
|
/*
|
|
Return the first visible element that matches a selector
|
|
*/
|
|
ElementSpotlight.prototype.querySelectorSafe = function(selector) {
|
|
var targetNodes;
|
|
// Get the matching elements
|
|
try {
|
|
targetNodes = document.querySelectorAll(selector);
|
|
} catch(e) {
|
|
console.log("Error with selector: " + selector);
|
|
}
|
|
if(!targetNodes) {
|
|
return undefined;
|
|
}
|
|
// Remove any elements from the start of the list that are hidden, or have hidden ancestors
|
|
var didRemoveFirstEntry;
|
|
do {
|
|
didRemoveFirstEntry = false;
|
|
var hasHiddenAncestor = false,
|
|
n = targetNodes[0];
|
|
while(n) {
|
|
if(n.hidden || (n instanceof Element && window.getComputedStyle(n).display === "none")) {
|
|
hasHiddenAncestor = true;
|
|
break;
|
|
}
|
|
n = n.parentNode;
|
|
}
|
|
if(hasHiddenAncestor) {
|
|
// Remove first entry from targetNodes array
|
|
targetNodes = [].slice.call(targetNodes, 1);
|
|
didRemoveFirstEntry = true;
|
|
}
|
|
} while(didRemoveFirstEntry)
|
|
// Return the first result
|
|
return targetNodes[0];
|
|
};
|
|
|
|
ElementSpotlight.prototype.positionSpotlight = function(x,y,innerRadius,outerRadius,opacity) {
|
|
this.spotlightElement.style.display = "block";
|
|
this.spotlightElement.style.backgroundImage = "radial-gradient(circle at " + (x / window.innerWidth * 100) + "% " + (y / window.innerHeight * 100) + "%, transparent " + innerRadius + "px, rgba(0, 0, 0, " + opacity + ") " + outerRadius + "px)";
|
|
};
|
|
|
|
ElementSpotlight.prototype.easeInOut = function(v) {
|
|
return (Math.sin((v - 0.5) * Math.PI) + 1) / 2;
|
|
};
|
|
|
|
/*
|
|
Shine a spotlight on the first element that matches an array of selectors
|
|
*/
|
|
ElementSpotlight.prototype.shineSpotlight = function(selectors) {
|
|
var self = this;
|
|
function animationLoop(selectors) {
|
|
// Calculate how far through the animation we are
|
|
// 0...1 = zoom in
|
|
// 1...2 = hold
|
|
// 2...3 = fade out
|
|
var now = new Date(),
|
|
t = (now - self.animationStartTime) / ($tw.utils.getAnimationDuration() * 2);
|
|
t = t >= 3 ? 3 : t;
|
|
// Query the selector for the target element
|
|
var targetNode, selectorIndex = 0;
|
|
while(!targetNode && selectorIndex < selectors.length) {
|
|
targetNode = self.querySelectorSafe(selectors[selectorIndex]);
|
|
selectorIndex += 1;
|
|
}
|
|
// Position the spotlight if we've got the target
|
|
if(targetNode) {
|
|
var rect = targetNode.getBoundingClientRect();
|
|
var innerRadius, outerRadius, opacity;
|
|
if(t <= 1) {
|
|
t = self.easeInOut(t);
|
|
innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
|
|
outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
|
|
opacity = 0.2 + t / 4;
|
|
} else if(t <= 2) {
|
|
innerRadius = rect.width / 2;
|
|
outerRadius = rect.width;
|
|
opacity = 0.45;
|
|
} else {
|
|
t = self.easeInOut(3 - t);
|
|
innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
|
|
outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
|
|
opacity = t / 3;
|
|
}
|
|
self.positionSpotlight((rect.left + rect.right) / 2,(rect.top + rect.bottom) / 2,innerRadius,outerRadius,opacity);
|
|
} else {
|
|
self.spotlightElement.style.display = "none";
|
|
}
|
|
// Call the next frame unless we're at the end
|
|
if(t <= 3) {
|
|
window.requestAnimationFrame(function () {
|
|
animationLoop(selectors);
|
|
});
|
|
} else {
|
|
// End the animation if we've exceeded the time limit
|
|
self.animationStartTime = undefined;
|
|
}
|
|
}
|
|
this.animationStartTime = new Date();
|
|
window.requestAnimationFrame(function () {
|
|
animationLoop(selectors);
|
|
});
|
|
};
|
|
|
|
exports.ElementSpotlight = ElementSpotlight;
|
|
|
|
})();
|