FEATURE: *in progress* working on menu widgets

2016-03-22 15:53:23 +01:00
parent 6c7122b494
commit 7788a598f4
10 changed files with 317 additions and 31 deletions
@@ -1,5 +1,5 @@
 <?php
 return [
-    'name'        => 'Menu',
-    'description' => 'User defined menu'
+    'widgetName'        => 'Menu',
+    'widgetDescription' => 'User defined menu'
 ];
@@ -0,0 +1,114 @@
+<!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>