Intento reducir código drásticamente en mi programa, ya que tengo 3 funciones distintas, con exactamente la misma estructura, donde lo único que cambian son los nombres. Voy a poner solo una como ejemplo ya que son algo largas:
addPower(el) {
var self = this;
var temPower = document.querySelector("#temp-power").innerHTML;
let power = document.createElement("div");
power.innerHTML = temPower;
el.querySelector(".container-power").appendChild(power);
power.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
el.querySelectorAll("label[data-name=labe_power]").forEach((item,index)=>{
if(index>0){
item.remove();
}
});
power.querySelectorAll("input[name=t_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=v_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=p_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=plus_]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
this.disAble(e);
if (e.target.getAttribute("data-disable")==null){
e.target.setAttribute("data-disable",1);
} else {
e.target.removeAttribute("data-disable");
}
});
power.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
this.addInpt(e);
});
power.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
this.eraseBtn(e);
});
self.draggedNODE = null;
power.querySelectorAll(".sortable_p").forEach(item=>{
item.addEventListener("dragstart", function(){
self.draggedNODE = item;
});
item.addEventListener("dragover", function(evt){
evt.preventDefault();
});
item.addEventListener("drop", function(evt){
evt.preventDefault();
if (item != self.draggedNODE) {
item.parentNode.insertBefore(self.draggedNODE, item);
}
});
});
return power;
}
Esto sería exactamente igual con addEnergy()
y addButton()
(aunque bueno, este último tiene un pequeño cambio, pero no importa).
Pregunta:
¿Se podría hacer una función, que albergara la estructura de las 3 funciones aquí expuestas cambiando únicamente los nombres?
[EDIT]
Aquí pongo la funcionalidad del programa tal y como lo tengo hasta ahora, hay que dar al botón UPDATE TEXTAREA
para que llame a la función deseada, más tarde se añadiría la misma invocación a los otros dos botones adyacentes claro:
class cls0{
constructor(id, idtxt, params){
var tem = document.querySelectorAll("template");
this.id=id;
this.f0 = document.createElement('div');
this.f0.innerHTML = tem[3].innerHTML;
document.getElementById(id).appendChild(this.f0);
this.contentForm = this.f0.querySelector(".content-form");
var ff = this.f0.querySelectorAll("button");
for(let i = 0; i < ff.length; i++){
if(i==0&&ff[0].addEventListener("click", (el, mag)=>{
console.log('Hola');
this.addMagnitude(el, mag);
}));
if(i==1&&ff[1].addEventListener("click", ()=>{
console.log('adios');
}));
if(i==2&&ff[2].addEventListener("click", ()=>{
console.log('adiew');
}));
}
for (let i in params){
var hi0 = document.createElement('input');
hi0.type = 'hidden'; //cambiar a text si hay que verlo
hi0.name = i;
hi0.value = params[i];
this.f0.querySelector('form').appendChild(hi0);
}
}
addMagnitude(el, mag) {
var self = this;
console.log(el)
console.log(mag);
var temMag = document.querySelector(`#temp-${mag}`).innerHTML;
let magnitude = document.createElement("div");
magnitude.innerHTML = temMag;
el.querySelector(`.container-${mag}`).appendChild(magnitude);
magnitude.querySelectorAll(".lbl-tmp-crd").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
el.querySelectorAll(`label[data-name=labe_${mag}]`).forEach((item,index)=>{
if(index>0){
item.remove();
}
});
magnitude.querySelectorAll(`input[name=t_${mag}]`).forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
magnitude.querySelectorAll(`input[name=v_${mag}]`).forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
magnitude.querySelectorAll(`input[name=p_${mag}]`).forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
magnitude.querySelectorAll("input[name=plus_]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
magnitude.querySelector(".btn-event-disAble").addEventListener("click", (e)=>{
this.disAble(e);
if (e.target.getAttribute("data-disable")==null){
e.target.setAttribute("data-disable",1);
} else {
e.target.removeAttribute("data-disable");
}
});
magnitude.querySelector(".btn-event-addInpt").addEventListener("click", (e)=>{
this.addInpt(e);
});
magnitude.querySelector(".btn-event-erase").addEventListener("click", (e)=>{
this.eraseBtn(e);
});
self.draggedNODE = null;
magnitude.querySelectorAll(".sortable_p").forEach(item=>{
item.addEventListener("dragstart", function(){
self.draggedNODE = item;
});
item.addEventListener("dragover", function(evt){
evt.preventDefault();
});
item.addEventListener("drop", function(evt){
evt.preventDefault();
if (item != self.draggedNODE) {
item.parentNode.insertBefore(self.draggedNODE, item);
}
});
});
return magnitude;
}
}
window.addEventListener("load",()=>{
var id0 = new cls0("t0", "ta0", {key:100});
// var id1 = new cls0("t1", "ta1", {key:101});
});
<!DOCTYPE html>
<html>
<head>
<title>LOGOS Energía</title>
<meta charset="UTF-8"/>
<script src="app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-card">
<div class="templatecARD" data-group="0">
<label class="lbl-tmp-crd" contenteditable='true' data-name="label_gruop">Tarifa</label>
<input type="text" class="name_tarif" name="tarif"/>
<button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
<div>
<div class="container-power"></div>
<button class="btn-event-addPower" type="button" title="Añadir">+</button>
</div>
<div>
<div class="container-energy" ></div>
<button class="btn-event-addEnergy" type="button" title="Añadir">+</button>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-power">
<div class="box-power">
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">POWER</label>
<div class="sortable_p" draggable="true">
<input type="text" name="t_power"/>
<input type="text" name="v_power"/>
<button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
<button type="button" class="btn-event-erase" title="Borrar">-</button>
<div class="draggl">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-energy">
<div class="box-energy" >
<label class="lbl-tmp-crd" contenteditable='true' data-name="labe_energy">ENERGY</label>
<div class="sortable_t" draggable="true">
<input type="text" name="t_energy"/>
<input type="text" name="v_energy"/>
<button type="button" class="btn-event-disAble" title="Deshabilitar">X</button>
<button type="button" class="btn-event-erase" title="Borrar">-</button>
<div class="draggl">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</template>
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<template id="temp-form">
<form method="post">
<div class="content-form">
</div>
<div>
<button class="btn-event-sndFrm" type="button" title="Actualizar">UPDATE TEXTAREA</button>
<button class="btn-event-addFrm" type="button" title="Añadir tarifa">+</button>
<button class="btn-event-delFrm" type="button" title="Borrar tarifa">-</button>
</div>
</form>
</template>
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<!-- FORMULARIO -->
<div class="dv-content">
<div id="t0"></div>
<textarea id="ta0" class="test-atex"> </textarea>
<button class='btn-event-sndTo' type="button" title="Actualizar">UPDATE FORM</button>
</div>
</body>
</html>
De esta forma, ya mando el y mag a través del clic (creía que los tenía puestos de antes y no era así, he vuelto a editar), pero el (mag) me lo saca como undefined.