53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
|
var items = [],
|
||
|
|
point = document.querySelector("svg").createSVGPoint();
|
||
|
|
|
||
|
|
function getCoordinates(e, svg) {
|
||
|
|
point.x = e.clientX;
|
||
|
|
point.y = e.clientY;
|
||
|
|
return point.matrixTransform(svg.getScreenCTM().inverse());
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeColor(e) {
|
||
|
|
document.body.className = e.currentTarget.className;
|
||
|
|
}
|
||
|
|
|
||
|
|
function Item(config) {
|
||
|
|
Object.keys(config).forEach(function (item) {
|
||
|
|
this[item] = config[item];
|
||
|
|
}, this);
|
||
|
|
this.el.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
|
||
|
|
this.el.addEventListener("touchmove", this.touchMoveHandler.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
Item.prototype = {
|
||
|
|
update: function update(c) {
|
||
|
|
this.clip.setAttribute("cx", c.x);
|
||
|
|
this.clip.setAttribute("cy", c.y);
|
||
|
|
},
|
||
|
|
mouseMoveHandler: function mouseMoveHandler(e) {
|
||
|
|
this.update(getCoordinates(e, this.svg));
|
||
|
|
},
|
||
|
|
touchMoveHandler: function touchMoveHandler(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var touch = e.targetTouches[0];
|
||
|
|
if (touch) return this.update(getCoordinates(touch, this.svg));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
[].slice
|
||
|
|
.call(document.querySelectorAll(".item"), 0)
|
||
|
|
.forEach(function (item, index) {
|
||
|
|
items.push(
|
||
|
|
new Item({
|
||
|
|
el: item,
|
||
|
|
svg: item.querySelector("svg"),
|
||
|
|
clip: document.querySelector("#clip-" + index + " circle")
|
||
|
|
})
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
[].slice
|
||
|
|
.call(document.querySelectorAll("button"), 0)
|
||
|
|
.forEach(function (button) {
|
||
|
|
button.addEventListener("click", changeColor);
|
||
|
|
});
|