refactor unsocial w/ composite functions in v7 b00tc4mp#181

staff/rafael-infante/unsocial.7/compo.2.js

@@ -0,0 +1,63 @@
+function Compo(container) {
+  this.container = container
+  this.children = []
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  this.container.remove()
+}
+
+function Form(className) {
+  Compo.call(this, document.createElement('form'))
+  this.container.classList.add(className)
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}
+
+function Label(id, text) {
+  Compo.call(this, document.createElement('label'))
+  this.container.htmlFor = id
+  this.container.innerText = text
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+function Input(id, type, placeholder, required) {
+  Compo.call(this, document.createElement('input'))
+  this.container.id = id
+  this.container.type = type
+  this.container.placeholder = placeholder
+  this.container.required = required
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+
+function Button(id, type, text) {
+  Compo.call(this, document.createElement('button'))
+  this.container.id = id
+  this.container.type = type
+  this.container.innerText = text
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button

staff/rafael-infante/unsocial.7/compo.3.js

@@ -0,0 +1,88 @@
+function Compo(container) {
+  this.container = container
+  this.children = []
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  this.container.remove()
+}
+
+function Header(className) {
+  Compo.call(this, document.createElement('header'))
+  this.container.classList.add(className)
+}
+
+Header.prototype = Object.create(Compo.prototype)
+Header.prototype.constructor = Header
+
+function Heading(text, level) {
+  Compo.call(this, document.createElement('h' + level))
+  this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+function Picture(imageSrc, imageClass) {
+  Compo.call(this, document.createElement('img'))
+  this.container.src = imageSrc
+  this.container.classList.add(imageClass)
+}
+
+Picture.prototype = Object.create(Compo.prototype)
+Picture.prototype.constructor = Picture
+
+function Form(className) {
+  Compo.call(this, document.createElement('form'))
+  this.container.classList.add(className)
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}
+
+function Label(id, text) {
+  Compo.call(this, document.createElement('label'))
+  this.container.htmlFor = id
+  this.container.innerText = text
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+function Input(id, type, placeholder, required) {
+  Compo.call(this, document.createElement('input'))
+  this.container.id = id
+  this.container.type = type
+  this.container.placeholder = placeholder
+  this.container.required = required
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+
+function Button(id, type, text) {
+  Compo.call(this, document.createElement('button'))
+  this.container.id = id
+  this.container.type = type
+  this.container.innerText = text
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button

staff/rafael-infante/unsocial.7/compo.4.js

@@ -0,0 +1,96 @@
+function Compo(container) {
+  this.container = container
+  this.children = []
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  this.container.remove()
+}
+
+function Header(className) {
+  Compo.call(this, document.createElement('header'))
+  this.container.classList.add(className)
+}
+
+Header.prototype = Object.create(Compo.prototype)
+Header.prototype.constructor = Header
+
+function Heading(text, level) {
+  Compo.call(this, document.createElement('h' + level))
+  this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+function Picture(imageSrc, imageClass) {
+  Compo.call(this, document.createElement('img'))
+  this.container.src = imageSrc
+  this.container.classList.add(imageClass)
+}
+
+Picture.prototype = Object.create(Compo.prototype)
+Picture.prototype.constructor = Picture
+
+function Form(className) {
+  Compo.call(this, document.createElement('form'))
+  this.container.classList.add(className)
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}
+
+function Label(id, text) {
+  Compo.call(this, document.createElement('label'))
+  this.container.htmlFor = id
+  this.container.innerText = text
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+function Input(id, type, placeholder, required) {
+  Compo.call(this, document.createElement('input'))
+  this.container.id = id
+  this.container.type = type
+  this.container.placeholder = placeholder
+  this.container.required = required
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+function Button(id, type, text) {
+  Compo.call(this, document.createElement('button'))
+  this.container.id = id
+  this.container.type = type
+  this.container.innerText = text
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+function Link(text, href) {
+  Compo.call(this, document.createElement('a'))
+  this.container.innerText = text
+  this.container.href = href
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link

staff/rafael-infante/unsocial.7/compo.js

@@ -0,0 +1,100 @@
+function Compo(container) {
+  this.container = container
+  this.children = []
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  this.container.remove()
+}
+
+Compo.prototype.addBehavior = function (action, callback) {
+  this.container.addEventListener(action, callback)
+}
+
+function Header(className) {
+  Compo.call(this, document.createElement('header'))
+  this.container.classList.add(className)
+}
+
+Header.prototype = Object.create(Compo.prototype)
+Header.prototype.constructor = Header
+
+function Heading(text, level) {
+  Compo.call(this, document.createElement('h' + level))
+  this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+function Picture(imageSrc, imageClass) {
+  Compo.call(this, document.createElement('img'))
+  this.container.src = imageSrc
+  this.container.classList.add(imageClass)
+}
+
+Picture.prototype = Object.create(Compo.prototype)
+Picture.prototype.constructor = Picture
+
+function Form(className) {
+  Compo.call(this, document.createElement('form'))
+  this.container.classList.add(className)
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}
+
+function Label(id, text) {
+  Compo.call(this, document.createElement('label'))
+  this.container.htmlFor = id
+  this.container.innerText = text
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+function Input(id, type, placeholder, required) {
+  Compo.call(this, document.createElement('input'))
+  this.container.id = id
+  this.container.type = type
+  this.container.placeholder = placeholder
+  this.container.required = required
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+function Button(id, type, text) {
+  Compo.call(this, document.createElement('button'))
+  this.container.id = id
+  this.container.type = type
+  this.container.innerText = text
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+function Link(text, href) {
+  Compo.call(this, document.createElement('a'))
+  this.container.innerText = text
+  this.container.href = href
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link

staff/rafael-infante/unsocial.7/data.js

@@ -0,0 +1,4 @@
+var users = [
+  { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+  { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]

staff/rafael-infante/unsocial.7/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Unsocial</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="shortcut icon" href="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <script src="data.js"></script>
+
+  <script src="logic.js"></script>
+
+  <script src="compo.js"></script>
+
+  <script src="view.js"></script>
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>