Added components and more

interaapps · Mar 21, 2023 · af93d28 · af93d28
1 parent 087d46e
commit af93d28
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 16 deletions.
diff --git a/JDOM.js b/JDOM.js
@@ -81,7 +81,19 @@ class JDOM {
 
     getAttr(name) {
         const el = this.first()
-        return el ? el.innerHTML : null
+        return el ? el.getAttribute(name) : null
+    }
+
+    getAttributes() {
+        const el = this.first()
+        const attribs = {}
+        if (el) {
+            const elAttributes = el.attributes
+            for (const { nodeName, nodeValue } of elAttributes){
+                attribs[nodeName] = nodeValue
+            }
+        }
+        return attribs
     }
 
     setAttr(name, val) {
@@ -106,17 +118,40 @@ class JDOM {
         return this;
     }
 
+    attrs() {
+        return this.getAttributes()
+    }
+
     hasClass(name) {
         const el = this.first()
         return el ? el.classList.contains(name) : false
     }
 
-    addClass(name) {
+    addClass(...names) {
         return this.each(el => {
-            el.classList.add(name)
+            for (let name of names) {
+                el.classList.add(name)
+            }
         })
     }
 
+    addClasses(...names) {
+        return this.addClass(...names)
+    }
+
+    getClasses() {
+        const el = this.first()
+        return el ? [...el.classList] : []
+    }
+
+    classes(...names) {
+        if (names.length === 0) {
+            return this.getClasses()
+        }
+        return this.addClasses(...names)
+
+    }
+
     removeClass(name) {
         return this.each(el => {
             el.classList.remove(name)
@@ -337,6 +372,30 @@ class JDOM {
     static new(tag = 'div') {
         return new JDOM(document.createElement(tag))
     }
+
+    static component(component, {shadowed = false} = {}) {
+        return class extends HTMLElement {
+            constructor() {
+                super()
+
+                let el = this
+                if (shadowed) {
+                    el = this.attachShadow({mode: 'closed'});
+                }
+
+                const $el = new JDOM(el)
+                component($el, $el)
+            }
+        }
+    }
+
+    static registerComponent(tag, component) {
+        return window.customElements.define(tag, component)
+    }
+
+    static fromHTML(html) {
+        return JDOM.new('template').html(html || '')
+    }
 }
 
 export default JDOM
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# JDOM `2.0.1`
+# JDOM `2.0.2`
 # A wrapper for query selector and html elements
 
 ## Install
@@ -9,12 +9,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].1/index.js'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].2/index.js'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/cajax.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/cajax.js"></script>
 ```
 
 ## Usage
@@ -33,6 +33,14 @@ el.text('Hello world')
 
 el.html('<span>Hello</span> world')
 
+el.attr('key', value)
+
+el.classes('hello', 'world')
+
+if (el.hasClass('hello')) {}
+
+
+
 el.click(e => {
     console.log(e)
 })
@@ -60,4 +68,30 @@ $('#test').animator([
         }
     }
 ])
+```
+
+### Create Element
+```js
+$('#app').append(
+    // Creates a new div with 'Hey' text
+    $n('div').text('Hey')
+)
+```
+
+### Web-Components
+```html
+<my-component></my-component>
+
+<script>
+// Create HTMLElement
+const MyComponent = $c(c => {
+    c.text('Hello World')
+    c.click(() => {
+        alert('Hey')
+    })
+})
+
+// Register component
+$r('my-component', MyComponent)
+</script>
 ```
diff --git a/dist/jdom.js b/dist/jdom.js
diff --git a/example.html b/example.html
@@ -9,20 +9,19 @@
     <title>Document</title>
 </head>
 <body>
-    <h1 id="ney"></h1>
-<div id="app">
-    <h1 id="hay"></h1>
-</div>
+    <!-- <h1 id="ney"></h1>
+    <div id="app">
+        <h1 id="hay"></h1>
+    </div> -->
+    <my-element my-attr="Hey" class="btn-primary"></my-element>
 </body>
 </html>
 
 <script type="module">
-    import {$, $n, JDOM} from './index.js'
+    import {$, $n, $c, $r, $h, JDOM} from './index.js'
 
     const app = $('#app')
 
-    console.log($('h1'))
-    console.log(app.$('h1'))
 
     app.append(
         $n('button')
@@ -54,6 +53,14 @@ <h1 id="hay"></h1>
             duration: 1000
         },
     ])
+
+
+    $r('my-element', $c(c => {
+        return c.append(c.attr('my-attr'))
+    }))
+
+
+
 </script>
 <style>
     a {

diff --git a/index.js b/index.js
@@ -2,10 +2,16 @@ import _JDOM from './JDOM.js'
 
 export const $ = el => new JDOM(el)
 export const $n = el => JDOM.new(el)
+export const $c = (tag, comp) => JDOM.component(tag, comp)
+export const $r = (tag, comp) => JDOM.registerComponent(tag, comp)
+export const $h = html => JDOM.fromHTML(html)
 export const JDOM = _JDOM
 
 export default {
     $,
     $n,
+    $c,
+    $r,
+    $h,
     JDOM
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A wrapper for query selector and html elements",
   "main": "JDOM.js",
   "scripts": {

diff --git a/uppm.json b/uppm.json
@@ -1,6 +1,6 @@
 {
     "name": "jdom",
-    "version": "2.0",
+    "version": "2.0.2",
     "description": "Javascript DOM-Selector",
     "author": "InteraApps",
     "keywords": [