chemicaljs 1.3.3 → 1.4.1

package/README.md

@@ -7,6 +7,9 @@ A simple example can be found in [`/example/`](https://github.com/chemicaljs/che
 
 A example with the vite plugin can be found in [`/example-vite/`](https://github.com/chemicaljs/chemical/tree/main/example-vite).
 
+A example with all the components can be found in [`/example-components/`](https://github.com/chemicaljs/chemical/tree/main/example-components).
+
+
 ### Server
 
 Create a new Node.js project and create a script file for the server.
@@ -69,7 +72,7 @@ chemical.server.listen(port, () => {
 
 In your project create a folder to store your static assets. Create an index.html file which will be the homepage of your website.
 
-1. Add the Chemical script to the top of your page. This will load all needed scripts for Ultraviolet and Chemical.
+1. Add the Chemical script to the top of your page. This will load all needed scripts for Chemical and other packages.
 
 ```html
 <script src="/chemical.js"></script>
@@ -93,7 +96,7 @@ If you want to set the transport just change the `transport` attribute. Choose `
 await window.chemicalEncode("https://example.com")
 ```
 
-Optional: Change service to `ultraviolet`, `scramjet`, or `rammerhead`. Defaults to `uv` or server option.
+Optional: Change service to `uv`, `scramjet`, or `rammerhead`. Defaults to `uv` or server option.
 
 ```js
 await window.chemicalEncode("https://example.com", "rammerhead")
@@ -137,7 +140,7 @@ Below is a simple example of a simple input that redirects to the encoded URL wh
 </script>
 ```
 
-### Vite Plugin
+## Vite Plugin
 
 1. Create a new vite app and open `vite.config.js` or `vite.config.ts`
 
@@ -167,5 +170,78 @@ export default defineConfig({
 })
 ```
 
+## Components
+Setup a proxy site with easy HTML components.
+
+1. Add the Chemical components along with the main script to the top of your page.
+
+```html
+<script src="/chemical.js"></script>
+<script src="/chemical.components.js"></script>
+```
+
+2. Now add any component to your site!
+
+### Basic Input
+
+Opens in the current tab when the enter key is pressed.
+
+```html
+<input target="_self" placeholder="Enter URL" is="chemical-input">
+```
+
+Opens in current tab when the enter key is pressed.
+
+```html
+<input target="_blank" placeholder="Enter URL" is="chemical-input">
+```
+
+Custom action when the enter key is pressed. Change `action` to your function name. The first parameter of the action will be the encoded URL.
+
+```html
+<input action="logURL" placeholder="Enter URL" is="chemical-input">
+<script>
+    function logURL(url) {
+        console.log(url)
+    }
+</script>
+```
+
+### Input with Button
+
+Opens when the enter key is pressed or button is clicked. Set the `for` attribute to the `id` of the button.
+
+```html
+<input id="my-input" target="_blank" placeholder="Enter URL" is="chemical-input">
+<button for="my-input" is="chemical-button">Go!</button>
+```
+
+### With iframe
+
+A hidden iframe that is shown when the enter key is pressed. Set the `frame` attribute to the `id` of the iframe.
+
+```html
+<input frame="my-iframe" placeholder="Enter URL" is="chemical-input">
+<iframe id="my-iframe" is="chemical-iframe"></iframe>
+```
+
+A hidden iframe that is shown when the enter key is pressed. Includes controls the are hidden when the iframe is hidden and can control websites in the iframe as well as hiding the iframe and controls.
+
+Set the `frame` attribute to the `id` of the iframe.
+Set the `controls` attribute to the `id` of the controls.
+
+Set the second parameter of `chemicalAction` to the `id` of the iframe.
+
+```html
+<input frame="my-iframe-2" placeholder="Enter URL" is="chemical-input">
+<section id="my-controls-2" is="chemical-controls">
+    <button onclick="chemicalAction('back', 'my-iframe-2')">←</button>
+    <button onclick="chemicalAction('forward', 'my-iframe-2')">→</button>
+    <button onclick="chemicalAction('reload', 'my-iframe-2')">⟳</button>
+    <button onclick="chemicalAction('close', 'my-iframe-2')">🗙</button>
+</section>
+<iframe controls="my-controls-2" id="my-iframe-2" is="chemical-iframe"></iframe>
+```
+
 ## License
 Chemical Uses the MIT license.

package/client/chemical.components.js

@@ -0,0 +1,116 @@
+class ChemicalInput extends HTMLInputElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.addEventListener("keydown", async function (e) {
+            if (e.key == "Enter" && window.chemicalLoaded && e.target.value) {
+                let encodedURL = await window.chemicalEncode(e.target.value)
+                let action = this.getAttribute("action")
+                let target = this.getAttribute("target")
+                let frame = this.getAttribute("frame")
+
+                if (frame) {
+                    let forFrame = document.getElementById(this.getAttribute("frame"))
+                    forFrame.src = encodedURL
+                    forFrame.setAttribute("open", "true")
+                }
+
+                if (action) {
+                    window[action](encodedURL)
+                }
+
+                if (target) {
+                    if (target == "_self") {
+                        window.location = encodedURL
+                    } else if (target == "_blank") {
+                        window.open(encodedURL)
+                    }
+                }
+            }
+        })
+    }
+}
+
+class ChemicalButton extends HTMLButtonElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.addEventListener("click", function (e) {
+            let forInput = document.getElementById(this.getAttribute("for"))
+
+            if (forInput) {
+                forInput.dispatchEvent(new KeyboardEvent("keydown", {
+                    key: "Enter"
+                }))
+            }
+        })
+    }
+}
+
+class ChemicalIFrame extends HTMLIFrameElement {
+    static observedAttributes = ["open"];
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        let open = this.getAttribute("open")
+        this.style.display = open == "true" ? "" : "none"
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name == "open") {
+            let open = this.getAttribute("open")
+            this.style.display = open == "true" ? "" : "none"
+
+            let controls = document.getElementById(this.getAttribute("controls"))
+
+            if (controls) {
+                controls.setAttribute("open", open)
+            }
+        }
+    }
+}
+
+class ChemicalControls extends HTMLElement {
+    static observedAttributes = ["open"];
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        let open = this.getAttribute("open")
+        this.style.display = open == "true" ? "" : "none"
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name == "open") {
+            let open = this.getAttribute("open")
+            this.style.display = open == "true" ? "" : "none"
+        }
+    }
+}
+
+customElements.define("chemical-input", ChemicalInput, { extends: "input" });
+customElements.define("chemical-button", ChemicalButton, { extends: "button" });
+customElements.define("chemical-iframe", ChemicalIFrame, { extends: "iframe" });
+customElements.define("chemical-controls", ChemicalControls, { extends: "section" });
+
+function chemicalAction(action, frameID) {
+    let frame = document.getElementById(frameID)
+
+    if (frame) {
+        switch (action) {
+            case "back":
+                frame.contentWindow.history.back()
+                break;
+            case "forward":
+                frame.contentWindow.history.forward()
+                break;
+            case "reload":
+                frame.contentWindow.location.reload()
+                break;
+            case "close":
+                frame.setAttribute("open", "false")
+                frame.src = ""
+        }
+    }
+}

package/example/package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "chemicaljs": "^1.3.2",
+        "chemicaljs": "^1.4.0",
         "express": "^4.19.2"
       }
     },
@@ -1158,9 +1158,9 @@
       }
     },
     "node_modules/chemicaljs": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/chemicaljs/-/chemicaljs-1.3.2.tgz",
-      "integrity": "sha512-3CBzTiNou/oFrDIN7gT7wSu5GSMTaRQUzdVDvztM9anqgW76v109W0oZXYuqQ4eW6+Cab2+t3iohC3H2mOGFUQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/chemicaljs/-/chemicaljs-1.4.0.tgz",
+      "integrity": "sha512-FyB/RVkT3c3prjQAVnU6NQaYPJFEG8XOuGz9N3tvtC4LneT6oCmjqmK5M5lU/y0baFviF+vSonaI3z3l5NxXBg==",
       "dependencies": {
         "@mercuryworkshop/bare-mux": "^2.0.1",
         "@mercuryworkshop/epoxy-transport": "^2.1.3",

package/example/package.json

@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/chemicaljs/chemical#readme",
   "dependencies": {
-    "chemicaljs": "^1.3.2",
+    "chemicaljs": "^1.4.0",
     "express": "^4.19.2"
   }
 }

package/example-components/README.md

@@ -0,0 +1,3 @@
+# Chemical Example Components
+
+Run `npm install` to install dependencies and then `npm start` to start.

package/example-components/index.js

@@ -0,0 +1,14 @@
+import { ChemicalServer } from "chemicaljs";
+import express from "express";
+
+const chemical = new ChemicalServer();
+const port = process.env.PORT || 3000;
+
+chemical.app.use(express.static("public", {
+    index: "index.html",
+    extensions: ["html"]
+}));
+
+chemical.server.listen(port, () => {
+    console.log(`Chemical example components listening on port ${port}`);
+});