114 lines
3.2 KiB
HTML
114 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title></title>
|
||
<style>
|
||
label { display: inline-block; margin-right: 10px; }
|
||
|
||
a { display: inline-block; margin-right: 10px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="zoznampoloziek">
|
||
|
||
</div>
|
||
<div class="jednapolozka" id="hlavnanovapolozka">
|
||
<input type="text" class="polozkamenu" data-id="0" data-parent="0">
|
||
<a href="javascript:void(0);" onclick="pridajPolozku(this.parentNode.getElementsByClassName('polozkamenu')[0])">pridaj
|
||
polozku</a>
|
||
</div>
|
||
<hr>
|
||
<a href="javascript:console.info(model)">printni model do conosoly</a>
|
||
<script type="text/javascript">
|
||
var model = {};
|
||
var counter = 0;
|
||
var zoznam = document.getElementById ('zoznampoloziek');
|
||
var hlavnapolozka = document.getElementById ('hlavnanovapolozka');
|
||
|
||
function pridajPolozku(element) {
|
||
if (element.value == '') {
|
||
alert ('prazdnu polozku nepridas');
|
||
return false;
|
||
}
|
||
|
||
counter++;
|
||
element.setAttribute ('data-id', counter);
|
||
model[element.getAttribute ('data-id')] = {
|
||
'name': element.value,
|
||
'parent': element.getAttribute ('data-parent'),
|
||
};
|
||
|
||
element.value = '';
|
||
|
||
aktualizujZoznam ();
|
||
}
|
||
function zmazat(element) {
|
||
var polozka = element.parentNode.getElementsByTagName ('LABEL')[0];
|
||
if (confirm ('naozaj zmazat id: ' + polozka.getAttribute ('data-id') + ' : "' + polozka.textContent + '" ?')) {
|
||
delete model[polozka.getAttribute ('data-id')];
|
||
aktualizujZoznam ();
|
||
}
|
||
}
|
||
|
||
function novePridajPolozku(element) {
|
||
var polozka = element.parentNode.getElementsByTagName ('LABEL')[0],
|
||
subpolozkainput = hlavnapolozka.cloneNode (true),
|
||
subinput = subpolozkainput.getElementsByClassName ('polozkamenu')[0];
|
||
|
||
counter++;
|
||
subpolozkainput.removeAttribute ('id');
|
||
subinput.setAttribute ('data-id', counter.toString ());
|
||
subinput.setAttribute ('data-parent', polozka.getAttribute ('data-id'));
|
||
|
||
element.parentNode.appendChild (subpolozkainput);
|
||
}
|
||
|
||
function novyDomPrePolozky(id, parent, name) {
|
||
var div = document.createElement ('div'),
|
||
popis = document.createElement ('label'),
|
||
zmaz = document.createElement ('a'),
|
||
sub = document.createElement ('a');
|
||
|
||
popis.textContent = name;
|
||
popis.setAttribute ('data-id', id);
|
||
popis.setAttribute ('data-parent', parent);
|
||
|
||
zmaz.textContent = 'zmaz';
|
||
zmaz.href = 'javascript:void(0);';
|
||
zmaz.setAttribute ('onclick', 'zmazat(this);');
|
||
|
||
sub.textContent = 'pridaj sub';
|
||
sub.href = 'javascript:void(0)';
|
||
sub.setAttribute ('onclick', 'novePridajPolozku(this);');
|
||
div.appendChild (popis);
|
||
div.appendChild (zmaz);
|
||
div.appendChild (sub);
|
||
|
||
return div;
|
||
}
|
||
function aktualizujZoznam() {
|
||
var key,
|
||
novydom,
|
||
zoznamitems = zoznam.childNodes,
|
||
zoznamitems_i = zoznamitems.length;
|
||
while (zoznamitems_i--) {
|
||
zoznam.removeChild (zoznamitems[zoznamitems_i]);
|
||
}
|
||
|
||
for (key in model) {
|
||
if (model.hasOwnProperty (key)) {
|
||
novydom = novyDomPrePolozky (key, model[key].parent, model[key].name);
|
||
if (model[key].parent == 0) {
|
||
zoznam.appendChild (novydom);
|
||
} else {
|
||
zoznam.insertBefore (novydom, zoznam.querySelector ('[data-id="' + model[key].parent + '"]').parentNode.nextSibling);
|
||
}
|
||
}
|
||
}
|
||
zoznam.appendChild (document.createElement ('div'));
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |