Skip to content

Luciano Barletta / mini-web

Go to a project
Toggle navigation
Toggle navigation pinning
Commit e52f81cc by Luciano Barletta
Options

fixed sorting

1 parent 44805a53
Inline Side-by-side
Showing 2 changed files with 56 additions and 30 deletions
Luciano/static/Scripts/construct.js
/** /**
* Lambdas
*/
var accessNumber = e => {
if (e.childElementCount == 0) return 0;
if (e.children[0].childElementCount == 0) return 0;
return e.children[0].children[0];
}
var getAncestorByAttribute = (elem,attr,val) => {
while (elem.getAttribute(attr) != val || elem == null) elem = elem.parentElement;
return elem;
}
/**
* Armado de formulario * Armado de formulario
*/ */
function removeField(b){ function removeTab(button){
while(b.getAttribute("name") != "Field") b = b.parentElement; let tabs = document.getElementById('tabs')
if(b.nodeElement == "body") return; tabs.removeChild(
b.parentElement.removeChild(b); getAncestorByAttribute(button,'name','Tab')
)
if (tabs.childElementCount > 0){
document.getElementById("ContinuarText").style.display = 'none';
document.getElementById("ContinuarButton").style.display = 'none';
}
} }
function addField(b){ function addField(b,n){
let newfield = document.createElement("div"); let newfield = document.createElement("div");
newfield.setAttribute("name","Field"); newfield.setAttribute("name","Field");
newfield.innerHTML = document.getElementById("fieldTemplate").innerHTML; newfield.innerHTML = document.getElementById("fieldTemplate").innerHTML;
let tab = b.parentElement; accessNumber(newfield).setAttribute("value",n);
// swap // swap
tab.removeChild(b); let tab = b.parentElement;
tab.appendChild(newfield); tab.appendChild(newfield);
tab.appendChild(b); tab.appendChild(b);
} }
function removeTab(b){ function addTab(t,n){
while(b.getAttribute("name") != "Tab") b = b.parentElement;
if(b.nodeElement == "body") return;
b.parentElement.removeChild(b);
}
function addTab(t){
document.getElementById("ContinuarText").style.display = 'block'; document.getElementById("ContinuarText").style.display = 'block';
document.getElementById("ContinuarButton").style.display = 'block'; document.getElementById("ContinuarButton").style.display = 'block';
let newtab = document.createElement("div"); let newtab = document.createElement("div");
newtab.setAttribute("name","Tab"); newtab.setAttribute("name","Tab");
newtab.innerHTML = document.getElementById("tabTemplate").innerHTML; newtab.innerHTML = document.getElementById("tabTemplate").innerHTML;
accessNumber(newtab).setAttribute("value",n);
t.appendChild(newtab); t.appendChild(newtab);
} }
/** /**
* Lectura de información y formateado * Lectura de información y formateado
*/ */
function processField(field){ function processField(field){
return { return {
'Title' : field.children[0], 'Title' : field.children[0],
...@@ -65,19 +78,19 @@ function generate(tabs){ ...@@ -65,19 +78,19 @@ function generate(tabs){
console.log(JSON.stringify(dict)); console.log(JSON.stringify(dict));
} }
function sortTabs(){ function sortChildren(container,number){
let tabs = document.getElementById("tabs"); fixparse
Array.from(tabs.children).sort( Array.from(container.children).sort(
(a,b) => a.children[0].value < b.children[0].value ? -1 : a.children[0].value > b.children[0].value ? 1 : 0 (a,b) => number(a).value < number(b).value ? -1 : number(a).value > number(b).value ? 1 : 0
).forEach( ).forEach(
c => tabs.appendChild(c) c => tabs.appendChild(c)
) )
} }
function sortFields(tab){ function maxChild(container,number){
Array.from(tab.children).sort( if (container.childElementCount == 0) return 1;
(a,b) => a.children[0].value < b.children[0].value ? -1 : a.children[0].value > b.children[0].value ? 1 : 0 let max = Array.from(container.children).reduce(
).forEach( (a,b) => number(a).value > number(b).value ? a : b
c => tabs.appendChild(c)
) )
return parseInt(number(max).value) == NaN ? 1 : parseInt(number(max).value) + 1;
} }
\ No newline at end of file \ No newline at end of file
Luciano/templates/generate.html
...@@ -18,7 +18,11 @@ ...@@ -18,7 +18,11 @@
<br> <br>
<div id="tabs"></div> <div id="tabs"></div>
<div style="text-align: center;"> <div style="text-align: center;">
<button class="NewTabButton" onclick="addTab(document.getElementById('tabs'))"> <button class="NewTabButton"
onclick="addTab(
document.getElementById('tabs'),
maxChild(document.getElementById('tabs'),accessNumber)
)">
+ +
</button> </button>
</div> </div>
...@@ -29,14 +33,18 @@ ...@@ -29,14 +33,18 @@
<!-- templates --> <!-- templates -->
<template id="tabTemplate"> <template id="tabTemplate">
<div class="TabCards"> <div class="TabCards">
<input type="number" class="TabNumber"> <input type="number" class="TabNumber" onchange="sortChildren(document.getElementById('tabs'),accessNumber)">
<input class="TabTitle" placeholder="Titulo del Tab" type="text"> <input class="TabTitle" placeholder="Titulo del Tab" type="text">
<button class="RemoveTabButton" onclick="removeTab(this)"> <button class="RemoveTabButton" onclick="removeTab(this)">
X X
</button> </button>
<br> <br>
<div style="text-align: center;"> <div style="text-align: center;">
<button class="NewInputButton" onclick="addField(this)"> <button class="NewInputButton"
onclick="addField(
this,
maxChild(getAncestorByAttribute(this,'name','Tab'),accessNumber)
)">
+ +
</button> </button>
</div> </div>
...@@ -46,7 +54,11 @@ ...@@ -46,7 +54,11 @@
<template id="fieldTemplate"> <template id="fieldTemplate">
<div class="InputContainer"> <div class="InputContainer">
<input type="number" class="InputNumber"> <input type="number" class="InputNumber"
onchange="sortChildren(
getAncestorByAttribute(this,'name','Tab'),
accessNumber
)">
<input type="text" id="Titulo" class="Input" placeholder="Título"> <input type="text" id="Titulo" class="Input" placeholder="Título">
<select name="input" class="Input"> <select name="input" class="Input">
...@@ -61,7 +73,8 @@ ...@@ -61,7 +73,8 @@
<option id="checkbox" value="checkbox">Selección</option> <option id="checkbox" value="checkbox">Selección</option>
</select> </select>
Obligatorio : <input type="checkbox"> Obligatorio : <input type="checkbox">
<button class="RemoveInputButton" onclick="removeField(this)"> <button class="RemoveInputButton"
onclick="getAncestorByAttribute(this,'name','Tab').removeChild(getAncestorByAttribute(this,'name','Field'))">
- -
</button> </button>
</div> </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!