Created
April 18, 2011 14:46
-
-
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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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