Breakdown of the Javascript code -
Basically here there is involvement of DOM to SVG Coordinate Translation. SVGs provide their own matrix factoring mechanisms to translate cordinates.
var point = document.querySelector("svg").createSVGPoint();
This returns a svg point.Basically a svg point is a 2D or 3D point in the SVG coordinate system.The coordinate system is defined by the viewBox which is also referred to as the 'real' coordinate system.
point.x = e.clientX;
point.y = e.clientY;
These returns the horizontal and the vertical cordinate of the mouse over the svg canvas.Remember,here the svg canvas exists for each hexagonal structure and therefore the cordinates are given in reference to that.Also remember here the coordinates provided are the pixel coordinates and not the svg ones.
return point.matrixTransform(svg.getScreenCTM().inverse());
Here we do the matrix transformation.That matrix is created from an inverse of the SVG’s.getScreenCTM() method which maps SVG units to screen coordinates.For detailed representation of the conversion refer -https://msdn.microsoft.com/en-us/library/hh535760(v=vs.85).aspx
Now we can create the svg circle on the hovered portion-
this.clip.setAttribute("cx", c.x);
this.clip.setAttribute("cy", c.y);
Array.prototype.slice.call(document.querySelectorAll(".grid--item"), 0) -
Array.prototype.slice.call is one way to turn that NodeList;here the grid--item classes (which acts like an array, but doesn’t have the methods from Array.prototype) into a real array.
Array.prototype.slice.call(document.querySelectorAll(".grid--item"), 0)
.forEach(function(item, index) {
items.push(
new Item({
el: item,
svg: item.querySelector("svg"),
clip: document.querySelector("#clip-" + index + " circle")
})
);
});
the function here first converts the given nodelist to a real array and then it pushes the following methods to the item array.
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));
}
Object.keys(config) extracts keys from a given object, the returned array has been used with a forEach loop.
Also remember to bind(this) in the handler functions otherwise we get this error-
Uncaught TypeError: Object [object global] has no method 'function'