HumbleDialog - tutorial | GutZofter<\/title>\n \n <\/head>\n\n <body>\n\n <h1>Contacts<\/h1>\n\n <div id=\"contacts-toggle\"><\/div>\n\n <div id=\"contacts\">\n\n <ul>\n <li>Contact 1<\/li>\n <li>Contact 2<\/li>\n <li>Contact 3<\/li>\n <li>Contact 4<\/li>\n <li>Contact 5<\/li>\n <\/ul>\n\n <\/div>\n\n <\/body>\n<\/html>\n\n", javascript : "var dom;\nvar view;\nvar model;\nvar controller;\n\nfunction newContactsController(view, model) {\n var Controller = new Object();\n\n Controller.view = view;\n Controller.model = model;\n\n Controller.isShow = true;\n\n Controller.click = function() {\n var action = null;\n\n if(this.isShow){\n action = this.model.hideAction();\n this.isShow = false;\n }\n else {\n action = this.model.showAction();\n this.isShow = true;\n }\n\n this.view.changeContactsDisplay(action);\n }\n\n Controller.view.changeContactsDisplay(Controller.model.showAction());\n\n return Controller;\n}\n\nfunction newDOMWrapper() {\n var DOM = new Object();\n \n DOM.insertInnerHTML = function(id, html) {\n document.getElementById(id).innerHTML = html;\n }\n\n DOM.changeDisplayStyle = function(id, style) {\n document.getElementById(id).style.display = style;\n }\n\n return DOM;\n\n}\n\nvar linkHTML = function(label) {\n return '<a href=\"#\" onclick = \"controller.click(); return false;\">' + label + '<\/a>';\n}\n\nfunction newContactsView(dom) {\n var View = new Object();\n\n View.dom = dom;\n\n View.changeContactsDisplay = function(action) {\n this.dom.insertInnerHTML(action.control, linkHTML(action.label));\n this.dom.changeDisplayStyle(action.list, action.style);\n }\n\n return View;\n}\n\nvar control = 'contacts-toggle';\nvar list = 'contacts';\n\nvar actions =\n {\n hide: {\n label: 'show',\n control: control,\n list: list,\n style: 'none'\n },\n show: {\n label: 'hide',\n control: control,\n list: list,\n style: 'block'\n }\n};\n\nfunction newInMemoryContactsModel() {\n var Elements = new Object();\n\n Elements.hideAction = function() {\n return actions.hide;\n }\n\n Elements.showAction = function() {\n return actions.show;\n }\n\n return Elements;\n}\n\nfunction init() {\n dom = newDOMWrapper();\n model = newInMemoryContactsModel();\n view = newContactsView(dom);\n controller = newContactsController(view, model);\n}\n\nwindow.onload = init;\n\n" };