The inputs should only be targeted with mouse click, not mouse hover.
Click on one input, then hover over another input to reproduce it.
How do I remove mouse hover from the inputs?
/*jslint browser, es6:true */
(function iife() {
"use strict";
var list = (function list_iife() {
var linesSelector = "#lines";
var select = document.querySelector(linesSelector);
function getSelect() {
return select;
}
function getSelectedOption() {
var selectedIndex = select.selectedIndex;
return select.options[selectedIndex];
}
function addOption(value, text) {
var option = document.createElement("option");
option.value = value;
option.text = text;
select.add(option);
}
return {
getSelect,
getSelectedOption,
addOption
};
}());
var fields = (function fields_iife() {
var selector = {
shapes: "#shapes",
strokes: "#strokes",
viewed: "#viewed",
active: "#active"
};
function getAllWithin(el) {
return el.querySelectorAll("input");
}
function clearAll(els) {
els.forEach(function clearField(field) {
field.value = "";
});
}
function getAllShapes() {
var container = document.querySelector(selector.shapes);
return getAllWithin(container);
}
function getAllStrokes() {
var container = document.querySelector(selector.strokes);
return getAllWithin(container);
}
function getViewed() {
return document.querySelector(selector.viewed);
}
function getActive() {
return document.querySelector(selector.active);
}
return {
getAllWithin,
clearAll,
getAllShapes,
getAllStrokes,
getViewed,
getActive
};
}());
var shape = (function shape_iife() {
var svgSelector = "svg";
function addToList(shape) {
var shapeAttrs = {
line: "stroke",
circle: "fill",
rect: "stroke"
};
var shapeAttr = shapeAttrs[shape.nodeName];
var shapeName = shape.getAttribute(shapeAttr);
list.addOption(shapeName, shapeName);
}
function setStrokeWidth(shape, size) {
shape.setAttribute("stroke-width", size);
}
function updateField(shape) {
return function shapeFieldWrapper(field) {
field.value = shape.getAttribute(field.id);
};
}
function removeWidth(shape) {
shape.removeAttribute("stroke-width");
}
function applyStrokes(activeShape) {
var svg = document.querySelector(svgSelector);
var viewed = fields.getViewed();
var active = fields.getActive();
setStrokeWidth(svg, viewed.value);
if (activeShape) {
setStrokeWidth(activeShape, active.value);
}
}
function updateShape(input, activeShape) {
if (!activeShape) {
return;
}
activeShape.setAttribute(input.id, input.value);
}
return {
addToList,
updateField,
removeWidth,
applyStrokes,
updateShape
};
}());
var shapes = (function shapes_iife() {
var svgSelector = "svg";
function getAll() {
var svg = document.querySelector(svgSelector);
return svg.querySelectorAll("*");
}
function addAllToList() {
getAll().forEach(shape.addToList);
}
function getByColor(color) {
function getAttrByColor(attr) {
var selector = `${svgSelector} [${attr}=${color}]`;
return document.querySelector(selector);
}
var attrs = ["stroke", "fill"];
var attr = attrs.find(getAttrByColor);
return getAttrByColor(attr);
}
function getActive() {
var option = list.getSelectedOption();
if (!option.value) {
return;
}
return getByColor(option.value);
}
function selectNewShape() {
var activeShape = getActive();
var shapeFields = fields.getAllShapes();
shapeFields.forEach(shape.updateField(activeShape));
getAll().forEach(shape.removeWidth);
shape.applyStrokes(activeShape);
}
return {
getAll,
addAllToList,
getActive,
selectNewShape
};
}());
var display = (function display_iife() {
function escapeHTML(html) {
var div = document.createElement("div");
var text = document.createTextNode(html);
return div.appendChild(text).parentNode.innerHTML;
}
function showSVGCode() {
var svgSelector = "svg";
var resultSelector = "#result";
var activeShape = shapes.getActive();
var code = document.querySelector(svgSelector).innerHTML;
shape.removeWidth(activeShape);
document.querySelector(resultSelector).innerHTML = escapeHTML(code);
shape.applyStrokes(activeShape);
}
return {
showSVGCode
};
}());
(function iife_zoom() {
var range = document.querySelector("#zoom");
var rv = document.querySelector("#rv");
var svg = document.querySelector("svg");
var rect = svg.getBoundingClientRect();
var w = parseFloat(rect.width);
var h = parseFloat(rect.height);
range.addEventListener("input", function updateSVGSize() {
rv.textContent = range.value;
svg.style.width = w + range.valueAsNumber + "px";
svg.style.height = h + range.valueAsNumber * h / w + "px";
});
}());
shapes.addAllToList();
list.getSelect().addEventListener("change", function selectShapeHandler() {
shapes.selectNewShape();
display.showSVGCode();
});
function addInputHandlers(input, handler) {
var events = ["input", "mousewheel", "DOMMouseScroll"];
events.forEach(function addEventHandler(eventType) {
input.addEventListener(eventType, handler);
});
input.addEventListener("mouseover", function focusInput(evt) {
evt.target.focus();
});
}
fields.getAllShapes().forEach(function eachShapeInput(input) {
addInputHandlers(input, function updateShapesHandler(evt) {
var activeShape = shapes.getActive();
shape.updateShape(evt.target, activeShape);
display.showSVGCode();
});
});
fields.getAllStrokes().forEach(function eachStrokeInput(input) {
addInputHandlers(input, function updateStrokesHandler() {
shape.applyStrokes(shapes.getActive());
});
});
}());