Skip to content

Instantly share code, notes, and snippets.

@tomayac
Created April 18, 2011 14:46
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 tomayac/925487 to your computer and use it in GitHub Desktop.
Save tomayac/925487 to your computer and use it in GitHub Desktop.
The core "magic" of the Creative Commons Laser Highlighter Chrome extension (https://chrome.google.com/extensions/detail/iceopjodmdipccjbknbjolkfogkgloei)
// namespaced my implementation of the RDFa
// API using "LinkedData.API" to avoid confusion
// with real (and correcter) implementations.
LinkedData.API.data.setMapping(
'cc',
'http://creativecommons.org/ns#');
// capture @rel="license"...
var licensedElements = LinkedData.API.getElementsByProperty('license');
// ...and @rel="cc:license"
licensedElements = licensedElements.concat(
LinkedData.API.getElementsByProperty('cc:license'));
if (licensedElements.length > 0) {
for (var i = 0, length = licensedElements.length; i < length; i++) {
var element = licensedElements[i];
// no check at all is made with regards to the actual license, so the
// name "Creative Commons" is a bit misleading, as it highlights any
// licensed content whatsoever the license might be (although in practice
// almost all licenses expressed that way seem to be CC ones).
element.outerHTML =
'<img id="laser' + i + '" style="position:absolute; left:' + element.x +
'px; width:' + element.offsetWidth + 'px; height:' +
element.offsetHeight + 'px; z-index:1000; opacity: 0.8; ' +
'pointer-events: none; -webkit-transition: opacity 1s linear;" ' +
'src="' + chrome.extension.getURL("lasers.jpg") + '" />' +
element.outerHTML;
// the animation (pretty low-tech and ugly, but works)
var script = document.createElement('script');
script.innerHTML =
'var laser' + i + ' = document.getElementById("laser' + i + '"); ' +
'var interval' + i + ' = window.setInterval(' +
'function() {' +
'if (laser' + i + '.style.opacity == 0.8) {' +
'laser' + i + '.style.opacity = 0.4;' +
'} else {' +
'laser' + i + '.style.opacity = 0.8;' +
'}' +
'}, 1500);';
document.body.appendChild(script);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment