change sintax to javascript 6 b00tc4mp#181

staff/rafael-infante/unsocial.12/compo/Button.js

@@ -0,0 +1,13 @@
+/**
+ * Builds a Button instance
+ * @param {string} id name the id of the Button instance
+ * @param {string} type name the type of Button instance
+ * @param {string} text text inside the Button instance
+ */
+function Button(id, type, text) {
+  Compo.call(this, document.createElement('button'))
+  this.container.id = id
+  this.container.type = type
+  this.container.innerText = text
+}
+Button.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Code.js

@@ -0,0 +1,16 @@
+/**
+ * Builds a Code instance
+ * @param {string} text text inside the Code instance
+ */
+function Code(text) {
+  Compo.call(this, document.createElement('code'))
+  this.container.innerText = text
+}
+Code.extends(Compo)
+
+Code.prototype.setText = function (text) {
+  this.container.innerText = text
+}
+Code.prototype.getText = function () {
+  return this.container.innerText
+}

staff/rafael-infante/unsocial.12/compo/Compo.js

@@ -0,0 +1,29 @@
+/**
+ * Builds Compo instances
+ * @param {HTMLElement} container The DOM container of the compo instance
+ */
+function Compo(container) {
+  this.container = container
+  this.children = []
+  this.parent = null
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  child.parent = this
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  var index = this.parent.children.findIndex(function (child) {
+    return child === this
+  }.bind(this))
+
+  if (index > -1) this.parent.children.splice(index, 1)
+
+  this.container.remove()
+}
+
+Compo.prototype.addBehavior = function (action, callback) {
+  this.container.addEventListener(action, callback)
+}

staff/rafael-infante/unsocial.12/compo/Form.js

@@ -0,0 +1,13 @@
+/**
+ * Builds a Form instance
+ * @param {string} className Name the CSS class of the Form instance
+ */
+function Form(className) {
+  Compo.call(this, document.createElement('form'))
+  this.container.classList.add(className)
+}
+Form.extends(Compo)
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}

staff/rafael-infante/unsocial.12/compo/Header.js

@@ -0,0 +1,9 @@
+/**
+ * Builds Header instances
+ * @param {string} className Name the CSS class of the Header instance
+ */
+function Header(className) {
+  Compo.call(this, document.createElement('header'))
+  this.container.classList.add(className)
+}
+Header.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Heading.js

@@ -0,0 +1,10 @@
+/**
+ * Builds a Heading instance
+ * @param {string} text Text inside the heading tag
+ * @param {number} level Size of the heading
+ */
+function Heading(text, level) {
+  Compo.call(this, document.createElement('h' + level))
+  this.container.innerText = text
+}
+Heading.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Icon.js

@@ -0,0 +1,7 @@
+function Icon() {
+  Compo.call(this, document.createElement('i'))
+  this.container.classList.add('far')
+  this.container.classList.add('fa-eye')
+  this.container.id = 'icon'
+}
+Icon.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Input.js

@@ -0,0 +1,25 @@
+/**
+ * Builds an Input instance
+ * @param {string} id Name the id attribute of the Input instance
+ * @param {string} type Name the type of input
+ * @param {string} placeholder Text inside the Input instance
+ * @param {boolean} required Gives required attribute to the Input instance
+ */
+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.extends(Compo)
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+Input.prototype.setType = function (type) {
+  this.container.type = type
+}

staff/rafael-infante/unsocial.12/compo/Label.js

@@ -0,0 +1,11 @@
+/**
+ * Builds a Label instance
+ * @param {string} id Name the for attribute of the Label instance
+ * @param {string} text Text inside the label tag
+ */
+function Label(id, text) {
+  Compo.call(this, document.createElement('label'))
+  this.container.htmlFor = id
+  this.container.innerText = text
+}
+Label.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Link.js

@@ -0,0 +1,11 @@
+/**
+ * Builds a Link instance
+ * @param {string} text text inside the Link instance
+ * @param {string} href URL of the Link instance
+ */
+function Link(text, href) {
+  Compo.call(this, document.createElement('a'))
+  this.container.innerText = text
+  this.container.href = href
+}
+Link.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Paragraph.js

@@ -0,0 +1,16 @@
+/**
+ * Builds a Paragraph instance
+ * @param {string} text text inside the Paragraph instance
+ */
+function Paragraph(text) {
+  Compo.call(this, document.createElement('p'))
+  this.container.innerText = text
+}
+Paragraph.extends(Compo)
+
+Paragraph.prototype.setText = function (text) {
+  this.container.innerText = text
+}
+Paragraph.prototype.getText = function () {
+  return this.container.innerText
+}

staff/rafael-infante/unsocial.12/compo/PasswordInput.js

@@ -0,0 +1,30 @@
+function Passwordinput(className, id, type, placeholder, required) {
+  Compo.call(this, document.createElement('div'))
+  this.container.classList.add(className)
+
+  var input = new Input(id, type, placeholder, required)
+  this.add(input)
+
+  var icon = new Icon()
+  this.add(icon)
+
+  var isVisible = false
+  icon.addBehavior('click', function (event) {
+    icon.container.classList.toggle('fa-eye-slash')
+    if (!isVisible) {
+      input.setType('text')
+      isVisible = true
+    } else {
+      input.setType('password')
+      isVisible = false
+    }
+  })
+}
+Passwordinput.extends(Compo)
+
+Passwordinput.prototype.getValue = function () {
+  return this.children[0].container.value
+}
+Passwordinput.prototype.setValue = function (value) {
+  this.children[0].container.value = value
+}

staff/rafael-infante/unsocial.12/compo/Picture.js

@@ -0,0 +1,11 @@
+/**
+ * Builds a Picture instance
+ * @param {string} imageSrc directory/path of the image
+ * @param {string} imageClass Name the CSS class of the Picture instance
+ */
+function Picture(imageSrc, imageClass) {
+  Compo.call(this, document.createElement('img'))
+  this.container.src = imageSrc
+  this.container.classList.add(imageClass)
+}
+Picture.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Preformatted.js

@@ -0,0 +1,16 @@
+/**
+ * Builds a Preformatted instance
+ * @param {string} text text inside the Preformatted instance
+ */
+function Preformatted(text) {
+  Compo.call(this, document.createElement('pre'))
+  this.container.innerText = text
+}
+Preformatted.extends(Compo)
+
+Preformatted.prototype.setText = function (text) {
+  this.container.innerText = text
+}
+Preformatted.prototype.getText = function () {
+  return this.container.innerText
+}

staff/rafael-infante/unsocial.12/compo/Snippet.js

@@ -0,0 +1,18 @@
+/**
+ * 
+ * @param {*} text 
+ */
+function Snippet(title, text) {
+  Compo.call(this, document.createElement('div'))
+
+  var title = new Heading(title, 4)
+  this.add(title)
+
+  var pre = new Preformatted('')
+  var code = new Code(text)
+  pre.add(code)
+
+  this.add(pre)
+}
+
+Snippet.extends(Compo)

staff/rafael-infante/unsocial.12/compo/Time.js

@@ -0,0 +1,16 @@
+/**
+ * Builds a Time instance
+ * @param {string} text text inside the Time instance
+ */
+function Time(text) {
+  Compo.call(this, document.createElement('time'))
+  this.container.innerText = text
+}
+Time.extends(Compo)
+
+Time.prototype.setText = function (text) {
+  this.container.innerText = text
+}
+Time.prototype.getText = function () {
+  return this.container.innerText
+}

staff/rafael-infante/unsocial.12/compo/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Compo v0.0.5</title>
+</head>
+
+<body>
+
+  <script src="../proto-chain/index.js"></script>
+  <script src="Compo.js"></script>
+  <script src="Heading.js"></script>
+  <script src="Button.js"></script>
+  <script src="Snippet.js"></script>
+  <script src="Input.js"></script>
+  <script src="Link.js"></script>
+  <script src="Preformatted.js"></script>
+  <script src="Code.js"></script>
+  <script src="main.js"></script>
+
+</body>
+
+</html>

staff/rafael-infante/unsocial.12/compo/main.js

@@ -0,0 +1,24 @@
+var page = new Compo(document.body)
+
+var title = new Heading('Compo', 1)
+page.add(title)
+
+var inputTitle = new Heading('Input', 2)
+page.add(inputTitle)
+
+var button = new Button('button', 'button', 'Submit')
+page.add(button)
+
+var snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
+page.add(snippet)
+
+var input = new Input('password', 'password', 'Enter password', true)
+page.add(input)
+
+var linkTitle = new Heading('Link', 2)
+
+var snippet = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)')
+page.add(snippet)
+
+var link = new Link('Google')
+page.add(link)

staff/rafael-infante/unsocial.12/data/posts.js

@@ -0,0 +1,20 @@
+var posts = [
+  {
+    image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+    text: 'here we are',
+    username: 'peterpan',
+    date: new Date
+  },
+  {
+    image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
+    text: 'here i am',
+    username: 'wendydarling',
+    date: new Date
+  },
+  {
+    image: 'https://png.pngtree.com/png-clipart/20231020/original/pngtree-couple-dressed-up-like-a-pirate-and-vampire-taking-a-selfie-png-image_13385873.png',
+    text: 'muajajajaja',
+    username: 'captainhook',
+    date: new Date
+  }
+]

staff/rafael-infante/unsocial.12/data/users.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' }
+]