chemicaljs 1.7.2 → 1.7.3

package/README.md

@@ -49,7 +49,7 @@ const [app, listen] = new ChemicalServer({
 3. Use `app` which is an express app. You may need to import express for certain APIs.
 
 ```js
-chemical.get("/", function(req, res){
+app.get("/", function(req, res){
     res.send("Hello World");
 });
 ```
@@ -294,9 +294,11 @@ Setup a proxy site with easy HTML components.
 An anchor link but it automatically encodes the URL.
 
 ```html
-<a href="https://example.com" is="chemical-link">Link</a>
+<a data-href="https://example.com" is="chemical-link">Link</a>
 ```
 
+You can also add `data-service="uv"`, `data-autoHttps`, and `data-search-engine="https://www.google.com/search?q=%s"`
+
 You can style the link as chemical is loading.
 
 ```css
@@ -310,19 +312,21 @@ a[data-chemical-loading="true"] {
 Opens in the current tab when the enter key is pressed.
 
 ```html
-<input target="_self" placeholder="Enter URL" is="chemical-input">
+<input data-target="_self" placeholder="Enter URL" is="chemical-input">
 ```
 
+You can also add `data-service="uv"`, `data-autoHttps`, and `data-search-engine="https://www.google.com/search?q=%s"`
+
 Opens in current tab when the enter key is pressed.
 
 ```html
-<input target="_blank" placeholder="Enter URL" is="chemical-input">
+<input data-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.
+Custom action when the enter key is pressed. Change `data-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">
+<input data-action="logURL" placeholder="Enter URL" is="chemical-input">
 <script>
     function logURL(url) {
         console.log(url)
@@ -335,8 +339,8 @@ Custom action when the enter key is pressed. Change `action` to your function na
 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>
+<input id="my-input" data-target="_blank" placeholder="Enter URL" is="chemical-input">
+<button data-for="my-input" is="chemical-button">Go!</button>
 ```
 
 ### With iframe
@@ -344,7 +348,7 @@ Opens when the enter key is pressed or button is clicked. Set the `for` attribut
 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">
+<input data-frame="my-iframe" placeholder="Enter URL" is="chemical-input">
 <iframe id="my-iframe" is="chemical-iframe"></iframe>
 ```
 
@@ -356,14 +360,14 @@ 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">
+<input data-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>
+<iframe data-controls="my-controls-2" id="my-iframe-2" is="chemical-iframe"></iframe>
 ```
 
 ## License

package/client/chemical.components.js

@@ -4,16 +4,23 @@ class ChemicalInput extends HTMLInputElement {
     }
     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 (e.key == "Enter" && window.chemical.loaded && e.target.value) {
+                let service = this.dataset.service || "uv";
+                let autoHttps = this.dataset.autoHttps !== undefined ? true : false;
+                let searchEngine = this.dataset.searchEngine;
+                let action = this.dataset.action
+                let target = this.dataset.target
+                let frame = this.dataset.frame
+                let encodedURL = await chemical.encode(e.target.value, {
+                    service,
+                    autoHttps,
+                    searchEngine
+                })
 
                 if (frame) {
-                    let forFrame = document.getElementById(this.getAttribute("frame"))
-                    forFrame.src = encodedURL
-                    forFrame.setAttribute("open", "true")
+                    let forFrame = document.getElementById(frame)
+                    forFrame.src = encodedURL;
+                    forFrame.setAttribute("data-open", "true")
                 }
 
                 if (action) {
@@ -38,7 +45,7 @@ class ChemicalButton extends HTMLButtonElement {
     }
     connectedCallback() {
         this.addEventListener("click", function (e) {
-            let forInput = document.getElementById(this.getAttribute("for"))
+            let forInput = document.getElementById(this.dataset.for)
 
             if (forInput) {
                 forInput.dispatchEvent(new KeyboardEvent("keydown", {
@@ -50,40 +57,40 @@ class ChemicalButton extends HTMLButtonElement {
 }
 
 class ChemicalIFrame extends HTMLIFrameElement {
-    static observedAttributes = ["open"];
+    static observedAttributes = ["data-open"];
     constructor() {
         super();
     }
     connectedCallback() {
-        let open = this.getAttribute("open")
+        let open = this.dataset.open
         this.style.display = open == "true" ? "" : "none"
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (name == "open") {
-            let open = this.getAttribute("open")
+        if (name == "data-open") {
+            let open = this.dataset.open
             this.style.display = open == "true" ? "" : "none"
 
-            let controls = document.getElementById(this.getAttribute("controls"))
+            let controls = document.getElementById(this.dataset.controls)
 
             if (controls) {
-                controls.setAttribute("open", open)
+                controls.dataset.open = open
             }
         }
     }
 }
 
 class ChemicalControls extends HTMLElement {
-    static observedAttributes = ["open"];
+    static observedAttributes = ["data-open"];
     constructor() {
         super();
     }
     connectedCallback() {
-        let open = this.getAttribute("open")
+        let open = this.dataset.open
         this.style.display = open == "true" ? "" : "none"
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (name == "open") {
-            let open = this.getAttribute("open")
+        if (name == "data-open") {
+            let open = this.dataset.open
             this.style.display = open == "true" ? "" : "none"
         }
     }
@@ -94,16 +101,26 @@ class ChemicalLink extends HTMLAnchorElement {
         super();
     }
     async connectedCallback() {
-        let href = this.getAttribute("href");
-        this.removeAttribute("href");
+        let href = this.dataset.href;
+        let service = this.dataset.service || "uv";
+        let autoHttps = this.dataset.autoHttps !== undefined ? true : false;
+        let searchEngine = this.dataset.searchEngine;
         this.dataset.chemicalLoading = "true";
 
-        if (window.chemicalLoaded) {
-            this.setAttribute("href", await chemicalEncode(href))
+        if (window.chemical.loaded) {
+            this.setAttribute("href", await chemical.encode(href, {
+                service,
+                autoHttps,
+                searchEngine
+            }))
             this.dataset.chemicalLoading = "false";
         } else {
             window.addEventListener("chemicalLoaded", async () => {
-                this.setAttribute("href", await chemicalEncode(href))
+                this.setAttribute("href", await chemical.encode(href, {
+                    service,
+                    autoHttps,
+                    searchEngine
+                }))
                 this.dataset.chemicalLoading = "false";
             })
         }
@@ -131,7 +148,7 @@ function chemicalAction(action, frameID) {
                 frame.contentWindow.location.reload()
                 break;
             case "close":
-                frame.setAttribute("open", "false")
+                frame.dataset.open = "false"
                 frame.src = ""
         }
     }

package/client/chemical.js

@@ -228,6 +228,14 @@ window.chemical.encode = async function (url, config) {
         }
     }
 
+    if (config.service == undefined) {
+        config.service = defaultService;
+    }
+
+    if (config.autoHttps == undefined) {
+        config.autoHttps = false;
+    }
+
     if (url.match(/^https?:\/\//)) {
         return await encodeService(url, config.service);
     } else if (config.autoHttps == true && (url.includes(".") && !url.includes(" "))) {