Skip to content

Instantly share code, notes, and snippets.

@seth10
Last active August 7, 2016 19:57
Show Gist options
  • Save seth10/f963a585e53b4f79bb7e57ccd79f5e27 to your computer and use it in GitHub Desktop.
Save seth10/f963a585e53b4f79bb7e57ccd79f5e27 to your computer and use it in GitHub Desktop.
Alternate approaches for handling multiple changing styles of spotlight in snipmodeClickHandler
var clickGetImg = (function() {
var count = 3;
return function(event) {
count--;
if(event.target.src) {
chrome.runtime.sendMessage({image: event.target.src});
count = -1;
}
if(count <= 0){
document.removeEventListener('click', clickGetImg);
spotlight.fade = 'fadeOut'; // only starts when user moves mouse next
spotlight.element.addEventListener('animationend', function() {
document.removeEventListener('mousemove', updateSpotlight);
document.body.removeChild(spotlight.element);
document.head.removeChild(spotlightStyle);
});
document.body.style.cursor = 'auto';
}
event.preventDefault(); // if the image is a link, don't follow it
}
})(); // closure/IIFE to hide count
document.addEventListener('click', clickGetImg, false);
document.body.style.cursor = 'crosshair';
var spotlightStyle = document.createElement('style');
spotlightStyle.type = 'text/css';
spotlightStyle.innerHTML =
'@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } \
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }';
document.head.appendChild(spotlightStyle);
var spotlight = {
element: document.createElement('div'),
fade: 'fadeIn',
x: window.outerWidth-45,
y: 0,
FULL_WHITE_RADIUS: 30, // GRADIENT_START_RADIUS
BEGIN_FULL_GREY_RADIUS: 100, // GRADIENT_END_RADIUS
DARKNESS: 0.5, // const: http://stackoverflow.com/questions/10843572/
setStyle: function() {
this.element.style =
`position: fixed; height: 100%; width: 100%; top: 0; left: 0; \
z-index: 10; pointer-events: none; animation: ${this.fade} 1s; \
background: radial-gradient(circle at ${this.x}px ${this.y}px, \
transparent 0, transparent ${this.FULL_WHITE_RADIUS}px, \
rgba(0, 0, 0, ${this.DARKNESS}) ${this.BEGIN_FULL_GREY_RADIUS}px);`;
},
move: function(x, y) {
this.x = x;
this.y = y;
this.setStyle();
}
}
spotlight.element.id = 'spotlight';
document.body.appendChild(spotlight.element);
document.addEventListener('mousemove', function updateSpotlight(event) {
spotlight.move(event.x, event.y);
}, false);
var snipmodeClickHandler = (function() {
var count = 3;
return function(event) {
count--;
if(event.target.src) {
chrome.runtime.sendMessage({image: event.target.src});
count = -1;
}
if(count <= 0){
document.removeEventListener('click', snipmodeClickHandler);
// fade slowly if image clicked, but quickly if canceled
spotlight.fade = `fadeOut ${count==-1?2:0.5}s`;
styleSpotlight(); // make sure animation style is updated
spotlight.addEventListener('animationend', function() {
document.removeEventListener('mousemove', styleSpotlight);
document.body.removeChild(spotlight);
document.head.removeChild(spotlightAnimations);
});
document.body.style.cursor = 'auto';
}
event.preventDefault(); // if the image is a link, don't follow it
}
})(); // closure/IIFE to hide count
document.addEventListener('click', snipmodeClickHandler, false);
document.body.style.cursor = 'crosshair';
var spotlight = document.createElement('div');
spotlight.id = 'spotlight';
var spotlightAnimations = document.createElement('style');
spotlightAnimations.type = 'text/css';
spotlightAnimations.innerHTML =
'@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } \
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }';
document.head.appendChild(spotlightAnimations);
spotlight.fade = 'fadeIn 1s';
var styleSpotlight = function() {
const FULL_WHITE_RADIUS = 30, // GRADIENT_START_RADIUS
BEGIN_FULL_GREY_RADIUS = 100, // GRADIENT_END_RADIUS
DARKNESS = 0.5;
spotlight.style =
`position: fixed; height: 100%; width: 100%; top: 0; left: 0;
z-index: 10; pointer-events: none; animation: ${spotlight.fade};
background: radial-gradient(circle at ${spotlight.x}px ${spotlight.y}px,
transparent 0, transparent ${FULL_WHITE_RADIUS}px,
rgba(0, 0, 0, ${DARKNESS}) ${BEGIN_FULL_GREY_RADIUS}px);`;
}
document.addEventListener('mousemove', function(event) {
spotlight.x = event.x;
spotlight.y = event.y;
styleSpotlight();
}, false);
spotlight.x = window.outerWidth-45;
spotlight.y = 0;
document.body.appendChild(spotlight);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment