Create a gist now

Instantly share code, notes, and snippets.

Swim Away!
var swimAway = function(radius) {
clones = [];
var startRunning = function() {
elements = Array.prototype.slice.call(document.querySelectorAll('a, button, input'));
makePlaceholders(elements);
document.body.onmousemove = function(e) {
var mouseX = e.pageX;
var mouseY = e.pageY;
evade(mouseX, mouseY);
};
};
var getPos = function(el) {
for (var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
return {
x: lx,
y: ly
};
};
var evade = function(mouseX, mouseY) {
for (var i = 0; i < clones.length; i++) {
var element = clones[i];
var coords = getPos(element);
var x = coords.x;
var y = coords.y;
//check if we're within the acceptable radius
if (distance(x, y, mouseX, mouseY) <= radius) {
if (y > mouseY) {
y = Math.min(y + Math.sqrt((Math.abs(mouseY - y))), document.body.clientHeight);
} else {
y = Math.max(y - Math.sqrt((Math.abs(mouseY - y))), 0);
}
if (x > mouseX) {
x = Math.min(x + Math.sqrt((Math.abs(mouseX - x))), document.body.clientHeight);
} else {
x = Math.max(x - Math.sqrt((Math.abs(mouseX - x))), 0);
}
element.style.top = y + 'px';
element.style.left = x + 'px';
}
}
};
//distance formula
var distance = function(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
};
var makePlaceholders = function(nodes) {
//add CSS
var elementStyles = '.monetate_placeholder_wrap { ' +
'display: inline-block; width: auto !important; margin: 0 !important; ' +
'padding: 0 !important; position: relative; }' +
'.monetate_placeholder_dup { display: inline-block; position: absolute !important; left: 0px; top: 0px}';
var head = document.head;
var e = document.createElement('style');
e.setAttribute('type', 'text/css');
if (e.styleSheet) { //IE
e.styleSheet.cssText = elementStyles;
} else { //EVERYONE ELSE
var stl = document.createTextNode(elementStyles);
e.appendChild(stl);
}
head.appendChild(e);
// Clone found node, add classes to both, hide original.
for (var i = 0; i < nodes.length; i++) {
var origNode = nodes[i];
var clonedNode = origNode.cloneNode(true);
origNode.className += ' monetate_placeholder_hide';
clonedNode.className += ' monetate_placeholder_dup';
origNode.style.visibility = 'hidden';
// Add a wrapper node as previous sibling to found node.
var wrapper = document.createElement('div');
wrapper.className = 'monetate_placeholder_wrap';
origNode.parentNode.insertBefore(wrapper, origNode);
// Add hidden original node and new cloned version to the wrapper.
wrapper.appendChild(origNode);
var coords = getPos(origNode);
if (coords.x !== 0 && coords.y !== 0) {
clonedNode.style.top = coords.y + 'px';
clonedNode.style.left = coords.x + 'px';
clonedNode.style.position = 'absolute';
document.body.appendChild(clonedNode);
clones.push(clonedNode);
}
}
};
startRunning();
};
// Bind to a clickzone with the href of #swimAway- only for use when delivered via Monetate.
// Otherwise, just call swimAway(200)
var clickzones = document.getElementsByTagName('area');
for (var i = 0, l = clickzones.length; i < l; i++) {
var cz = clickzones[i];
var href = cz.getAttribute('href');
if (href === '#swimAway') {
cz.onclick = function() {
swimAway(200);
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment