Skip to content

Instantly share code, notes, and snippets.

@japboy
Last active August 10, 2017 15:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save japboy/200ddd41321106dee3f046f756b7e339 to your computer and use it in GitHub Desktop.
Save japboy/200ddd41321106dee3f046f756b7e339 to your computer and use it in GitHub Desktop.
Bookmarklet to copy image path from HTML elements
javascript:
/**
* WIP
*/
function copyToClipboard(text) {
const input = document.createElement('input');
input.style.position = 'fixed';
input.style.opacity = 0;
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand('Copy');
document.body.removeChild(input);
};
function handleMouseenter(event) {
const targetElement = event.target;
targetElement.style.borderColor = 'red';
targetElement.style.borderStyle = 'solid';
targetElement.style.borderWidth = '6px';
}
function handleMouseleave(event) {
const targetElement = event.target;
targetElement.style.borderColor = '';
targetElement.style.borderStyle = '';
targetElement.style.borderWidth = '';
}
function handleClick(event) {
event.target.removeEventListener('mouseenter', handleMouseenter);
event.target.removeEventListener('mouseleave', handleMouseleave);
event.target.removeEventListener(event.type, handleClick);
//const imagePath = event.target.style.backgroundImage.replace(/url\("(.+)"\)/, '$1');
//copyToClipboard(imagePath);
}
function init() {
const imageElements = Array.prototype.slice.call(document.querySelectorAll('img[src]'));
imageElements.addEventListener('mouseenter', handleMouseenter, false);
imageElements.addEventListener('mouseleave', handleMouseleave, false);
imageElements.addEventListener('click', handleClick, false);
const pictureElements = Array.prototype.slice.call(document.querySelectorAll('picture source[srcset]'));
pictureElements.addEventListener('mouseenter', handleMouseenter, false);
pictureElements.addEventListener('mouseleave', handleMouseleave, false);
pictureElements.addEventListener('click', handleClick, false);
const backgroundImageElements = (function () {
const styledElements = document.querySelectorAll('*[style]');
return Array.prototype.filter.call(styledElements, function (styledElement) {
return styledElements.style.backgroundImage;
});
})();
backgroundImageElements.addEventListener('mouseenter', handleMouseenter, false);
backgroundImageElements.addEventListener('mouseleave', handleMouseleave, false);
backgroundImageElements.addEventListener('click', handleClick, false);
}
init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment