compo stuff, posts add, b00tc4mp#174

aaronbmaartin · Oct 14, 2024 · 4369737 · 4369737
1 parent 32edbf3
commit 4369737
Show file tree

Hide file tree

Showing 8 changed files with 614 additions and 251 deletions.
diff --git a/staff/aaron-barrios/unsocial/compo.demo.html b/staff/aaron-barrios/unsocial/compo.demo.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compo v0.0.0</title>
+</head>
+
+<body>
+
+    <script src="compo.js"></script>
+
+    <script src="compo.demo.js"></script>
+
+</body>
+
+</html>
diff --git a/staff/aaron-barrios/unsocial/compo.demo.js b/staff/aaron-barrios/unsocial/compo.demo.js
@@ -0,0 +1,22 @@
+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 input = new Input('password', 'password')
+page.add(input)
+
+var linkTitle = new Heading('Link', 2)
+page.add(linkTitle)
+
+var link = new Link('Google')
+page.add(link)
+
+var passwordInputTitle = new Heading('PasswordInput', 2)
+page.add(passwordInputTitle)
+
+var passwordInput = new PasswordInput('password')
+page.add(passwordInput)
diff --git a/staff/aaron-barrios/unsocial/compo.js b/staff/aaron-barrios/unsocial/compo.js
@@ -0,0 +1,240 @@
+//FUNCIÓN PADRE
+function Compo(container) {
+    this.children = []
+    this.container = container
+
+    // 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 (type, callback) {
+    this.container.addEventListener(type, callback)
+}
+
+
+//FORMULARIOS
+function Form(container) {
+    Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.container = Form
+
+Form.prototype.reset = function () {
+    this.container.reset()
+}
+
+
+//BUTTON INSTANCES 
+function Button(text, type) {
+    Compo.call(this, document.createElement('button'))
+
+    this.container.innerText = text
+    this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+
+//LABEL INSTANCES
+function Label(text, id) {
+    Compo.call(this, document.createElement('label'))
+
+    this.container.innerText = text
+    this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+
+
+//INPUT Instances
+function Input(type, id) {
+    Compo.call(this, document.createElement('input'))
+    this.container.style.width = '100%'
+    this.container.style.boxSizing = 'border-box'
+
+    this.container.type = type
+    this.container.id = id
+}
+
+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
+}
+
+Input.prototype.getType = function () {
+    return this.container.type
+}
+
+Input.prototype.setType = function (type) {
+    this.container.type = type
+}
+
+
+//HEADING INSTANCES
+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
+
+
+//LINK INSTANCES 
+function Link(text) {
+    Compo.call(this, document.createElement('a'))
+
+    this.container.innerText = text
+    this.container.href = ''
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
+
+
+//SPAN INSTANCES
+function Span(text) {
+    Compo.call(this, document.createElement('span'))
+
+    this.container.innerText = text
+}
+
+Span.prototype = Object.create(Compo.prototype)
+Span.prototype.constructor = Span
+
+
+Span.prototype.getText = function () {
+    return this.container.innerText
+}
+
+Span.prototype.setText = function (text) {
+    this.container.innerText = text
+}
+
+//PASSWORDINPUT INSTANCES
+function PasswordInput(id) {
+    Compo.call(this, document.createElement('div'))
+    this.container.style.display = 'flex'
+
+    var input = new Input('password', id)
+    input.container.style.paddingRight = '18px'
+    this.add(input)
+
+    var span = new Span('🔒')
+    span.container.style.cursor = 'pointer'
+    span.container.style.position = 'absolute'
+    span.container.style.right = '10px'
+    this.add(span)
+
+    span.addBehavior('click', function () {
+        if (span.getText() === '🔒') {
+            input.setType('text')
+            span.setText('👁️‍🗨️')
+        } else {
+            input.setType('password')
+            span.setText('🔒')
+        }
+    })
+}
+
+PasswordInput.prototype = Object.create(Compo.prototype)
+PasswordInput.prototype.constructor = PasswordInput
+
+PasswordInput.prototype.getValue = function () {
+    return this.children[0].container.value
+}
+
+PasswordInput.prototype.setValue = function (value) {
+    this.container.value = value
+}
+
+
+//----- POST STUFF -----
+function UnorderedList() {
+    Compo.call(this, document.createElement('ul'))
+}
+
+UnorderedList.prototype = Object.create(Compo.prototype)
+UnorderedList.prototype.constructor = UnorderedList
+
+function ListItem() {
+    Compo.call(this, document.createElement('li'))
+}
+
+ListItem.prototype = Object.create(Compo.prototype)
+ListItem.prototype.constructor = ListItem
+
+function Image(address) {
+    Compo.call(this, document.createElement('img'))
+
+    this.container.src = address
+    this.container.style.width = '100%'
+}
+
+Image.prototype = Object.create(Compo.prototype)
+Image.prototype.constructor = Image
+
+function Paragraph(text) {
+    Compo.call(this, document.createElement('p'))
+
+    this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+Paragraph.prototype.getText = function () {
+    return this.container.innerText
+}
+
+Paragraph.prototype.setText = function (text) {
+    this.container.innerText = text
+}
+
+
+function Time(text) {
+    Compo.call(this, document.createElement('time'))
+
+    this.container.innerText = text
+}
+
+Time.prototype = Object.create(Compo.prototype)
+Time.prototype.constructor = Time
+
+Time.prototype.getText = function () {
+    return this.container.innerText
+}
+
+Time.prototype.setText = function (text) {
+    this.container.innerText = text
+}
diff --git a/staff/aaron-barrios/unsocial/data.js b/staff/aaron-barrios/unsocial/data.js
@@ -3,4 +3,22 @@ var users = [
     { name: 'Juan Pablo', email: '[email protected]', username: 'juanpablo', password: '123' },
     { name: 'Aaron', email: '[email protected]', username: 'aaron', password: '123' },
     { name: 'Claudi', email: '[email protected]', username: 'claudi', password: '123' }
+]
+
+var posts = [
+    {
+        image:
+            'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+        text: 'JUANPA',
+        username: 'juanpablo',
+        date: new Date
+    },
+
+    {
+        image:
+            'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
+        text: 'AARON',
+        username: 'aaron',
+        date: new Date
+    }
 ]
diff --git a/staff/aaron-barrios/unsocial/index.html b/staff/aaron-barrios/unsocial/index.html
@@ -11,13 +11,14 @@
 </head>
 
 <body>
-
-    <script src="main.js"></script>
-
     <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>
diff --git a/staff/aaron-barrios/unsocial/logic.js b/staff/aaron-barrios/unsocial/logic.js
@@ -53,4 +53,28 @@ function authenticateUser(username, password) {
         throw new Error('Wrong credentials')
 
     return user
-}
+}
+
+
+// ----- POSTS STUFF ------
+function createPost(username, image, text) {
+
+    if (username.length < 4 || username.length > 12)
+        throw new Error('Invalid username')
+
+    //TO DO: input validation (and throw error)
+
+    var post = {
+        image: image,
+        text: text,
+        username: username,
+        date: new Date
+    }
+
+    posts.push(post)
+}
+
+function getPosts() {
+    return posts
+}
+