estructure unsocial with app and api folders b00tc4mp#168

staff/javier-romera/unsocial/api/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "api",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

staff/javier-romera/unsocial/package.json → staff/javier-romera/unsocial/app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "unsocial",
+  "name": "app",
   "private": true,
   "version": "0.0.0",
   "type": "module",

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Button.js

@@ -0,0 +1,13 @@
+/**
+ * Constructs Button instances
+ * 
+ * @param {string} text The text of the button
+ * @param {string} type The button type
+ */
+class Button extends Compo {
+    constructor(type, text) {
+        super(document.createElement('button'))
+        this.container.innerText = text
+        this.container.type = type
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Code.js

@@ -0,0 +1,19 @@
+/**
+ * 
+ * @param {*} text 
+ */
+class Code extends Compo {
+    constructor(text) {
+        super(document.createElement('code'))
+
+        this.container.innerText = text
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    getText() {
+        return this.container.innerText
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Compo.js

@@ -0,0 +1,32 @@
+/**
+ * Constructs Compo instances
+ * 
+ * @param {HTMLElement} container The DOM container of the Compo instance
+ */
+class Compo {
+    constructor(container) {
+        this.children = []
+        this.container = container
+        this.parent = null
+    }
+
+    add(child) {
+        this.children.push(child)
+        child.parent = this
+
+        this.container.appendChild(child.container)
+    }
+
+    removeSelf() {
+        const index = this.parent.children.findIndex(child => child === this)
+
+        if (index > -1)
+            this.parent.children.splice(index, 1)
+
+        this.container.remove()
+    }
+
+    addBehavior(type, callback) {
+        this.container.addEventListener(type, callback)
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Form.js

@@ -0,0 +1,12 @@
+/**
+ * Constructs Form instances
+ */
+class Form extends Compo {
+    constructor() {
+        super(document.createElement('form'))
+    }
+
+    reset() {
+        this.container.reset()
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Heading.js

@@ -0,0 +1,12 @@
+/**
+ * Constructs Heading instances
+ * 
+ * @param {string} text The text of the heading
+ * @param {number} level The heading level
+ */
+class Heading extends Compo {
+    constructor(text, level) {
+        super(document.createElement('h' + level))
+        this.container.innerText = text
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Image.js

@@ -0,0 +1,11 @@
+/**
+ * 
+ */
+class Image extends Compo {
+    constructor(address) {
+        super(document.createElement('img'))
+
+        this.container.src = address
+        this.container.style.width = '100%'
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Input.js

@@ -0,0 +1,32 @@
+/**
+ * Constructs Input instances
+ * 
+ * @param {string} type The input type
+ * @param {string} id The input id
+ */
+class Input extends Compo {
+    constructor(id, type) {
+        super(document.createElement('input'))
+        // this.container.style.width = '100%'
+        // this.container.style.boxSizing = 'border-box'
+
+        this.container.id = id
+        this.container.type = type
+    }
+
+    getValue() {
+        return this.container.value
+    }
+
+    setValue(value) {
+        this.container.value = value
+    }
+
+    getType() {
+        return this.container.type
+    }
+
+    setType(type) {
+        this.container.type = type
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Label.js

@@ -0,0 +1,13 @@
+/**
+ * Constructs Label instances
+ * 
+ * @param {string} text The text of the label
+ * @param {string} id The id of the input to relate with
+ */
+class Label extends Compo {
+    constructor(text, id) {
+        super(document.createElement('label'))
+        this.container.innerText = text
+        this.container.htmlFor = id
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Link.js

@@ -0,0 +1,12 @@
+/**
+ * Constructs Link instances
+ * 
+ * @param {string} text The text of the link
+ */
+class Link extends Compo {
+    constructor(text) {
+        super(document.createElement('a'))
+        this.container.href = ''
+        this.container.innerText = text
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/ListItem.js

@@ -0,0 +1,8 @@
+/**
+ * 
+ */
+class ListItem extends Compo {
+    constructor() {
+        super(document.createElement('li'))
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Paragraph.js

@@ -0,0 +1,19 @@
+/**
+ * 
+ * @param {*} text 
+ */
+class Paragraph extends Compo {
+    constructor(text) {
+        super(document.createElement('p'))
+
+        this.container.innerText = text
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    getText() {
+        return this.container.innerText
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/PasswordInput.js

@@ -0,0 +1,39 @@
+/**
+ * Constructs PasswordInput instances
+ * 
+ * @param {string} id The input id
+ */
+class PasswordInput extends Compo {
+    constructor(id) {
+        super(document.createElement('div'))
+        this.container.style.display = 'flex'
+
+        const input = new Input('password', id)
+        input.container.style.paddingRight = '18px'
+        this.add(input)
+
+        const span = new Span('😌')
+        span.container.style.cursor = 'pointer'
+        span.container.style.position = 'absolute'
+        span.container.style.right = '10px'
+        this.add(span)
+
+        span.addBehavior('click', () => {
+            if (span.getText() === '😌') {
+                input.setType('text')
+                span.setText('😳')
+            } else {
+                input.setType('password')
+                span.setText('😌')
+            }
+        })
+    }
+
+    getValue() {
+        return this.children[0].container.value
+    }
+
+    setValue(value) {
+        this.container.value = value
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Preformatted.js

@@ -0,0 +1,19 @@
+/**
+ * 
+ * @param {*} text 
+ */
+class Preformatted extends Compo {
+    constructor(text) {
+        super(document.createElement('pre'))
+
+        this.container.innerText = text
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    getText() {
+        return this.container.innerText
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Snippet.js

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

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Span.js

@@ -0,0 +1,20 @@
+/**
+ * Constructs Span instances
+ * 
+ * @param {string} text The text inside span
+ */
+class Span extends Compo {
+    constructor(text) {
+        super(document.createElement('span'))
+
+        this.container.innerText = text
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    getText() {
+        return this.container.innerText
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/Time.js

@@ -0,0 +1,19 @@
+/**
+ * 
+ * @param {*} text 
+ */
+class Time extends Compo {
+    constructor(text) {
+        super(document.createElement('time'))
+
+        this.container.innerText = text
+    }
+
+    setText(text) {
+        this.container.innerText = text
+    }
+
+    getText() {
+        return this.container.innerText
+    }
+}

staff/javier-romera/unsocial/zzz/unsocial.01/compo/UnorderedList.js

@@ -0,0 +1,8 @@
+/**
+ * 
+ */
+class UnorderedList extends Compo {
+    constructor() {
+        super(document.createElement('ul'))
+    }
+}