Simple menu editor

by Alon Rotem

HTML

<div class="menulayout">
  <div id="menuitems">
  
  </div>
<!--
  <span class="item">
    Item 1
    <span class="addsubitem">+</span>
    <span class="removeitem">X</span>
  </span>
  -->
  <a id="addmain" href="#">+</a>
</div>

<div id="menuitemeditor" class="menuitemeditor">
  <div class="menueditortitle">
    <span>Menu item</span>
    <span id="closeEditor" class="removeitem">X</span>
  </div>
  <div class="field">
   <span class="fieldname">Title</span>
   <span class="fieldvalue"><input id="txtTitle" type="text"></span>
  </div>
</div>

<div id="menuobject">

</div>

CSS

.menulayout
{
  background-color: lightgray;
  padding: 15px;
  font-family: arial;
  font-size: 10pt;
}

.menulayout .item, .menulayout a
{
  background-color: gray;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  display: inline-block;
}

.menulayout #addmain
{
  color: yellow;
  text-decoration: none;
  display: inline-block;
}

.addsubitem
{
  background-color: lightgray;
  color: black;
  padding: 2px 6px;
  margin: 0px 5px;
  cursor: pointer;
}

.removeitem
{
  background-color: lightgray;
  color: red;
  padding: 2px 6px;
  margin: 0px 0px 0px 0px;
  cursor: pointer;
}

.menulayout #addmain:hover
{
  color: yellow;
  text-decoration: none;
}

.menuitemeditor
{
  margin-top: 50px;
  border: 1px solid black;
  font-family: arial;
  display: none;
}

.visible
{
  display: block;
}

.menueditortitle
{
  background-color: bisque; 
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.field
{
  margin: 20px 0px;
}

.fieldname
{
   padding: 0px 20px;
   /*background-color: yellow;*/
   min-width: 100px;
   display: inline-block;
}


#menuobject
{
  margin-top: 40px;
  background-color: lightgray;
  padding: 20px;
  font-family: Courier;
  font-size: 10pt;
}

#menuitems
{
  display: inline-block;
}

JavaScript

var items = [];
var menuitem = function(title){
	this.title = title;
}
var itemcount = 0;
var editedItem = -1;

/*
	the array reflects the ui order
  the array contains the properties
  
  adding item:
  add item to the end of the array
  add item to the end of the ui
  edited item = last
  
  <span class="item">
    Item 1
    <span class="addsubitem">+</span>
    <span class="removeitem">X</span>
  </span>  
*/

document.onreadystatechange = function () {

  if (document.readyState == "interactive") {

    var addmain = document.getElementById("addmain");
    var closeEditor = document.getElementById("closeEditor");

		addmain.addEventListener('click', createNewItem);
    closeEditor.addEventListener('click', hideEditor);
    
    updateitemsobj();
  }
}

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

function createNewItem()
{
	var item = new menuitem("item " + itemcount);
  items.push(item);
	var editor = document.getElementById("menuitemeditor");
  editor.classList.add("visible");
  itemcount++;
  updateitemsobj();
}

function hideEditor()
{
	var editor = document.getElementById("menuitemeditor");
  editor.classList.remove("visible");
}

function updateitemsobj()
{
	var menuobject = document.getElementById("menuobject");
  var menuitems = document.getElementById("menuitems");
  menuobject.innerHTML =  "<pre>" + JSON.stringify(items, null, 2) + "</pre>";
  
  var inner = "";
  for(var i=0; i<items.length; i++)
  {
  	inner += "<span class=\"item\">\
    " + items[i].title + " \
    <span class=\"addsubitem\">+</span>\
    <span class=\"removeitem\">X</span>\
  	</span>";
  }
  menuitems.innerHTML = inner;
  //alert(JSON.stringify(items, null, 2));
}