Merge pull request #7 from lmachens/lmachens/issue6

v1.6.0
lmachens · Jan 14, 2022 · a636e0e · a636e0e
2 parents c924943 + 1979d2b
commit a636e0e
Show file tree

Hide file tree

Showing 14 changed files with 356 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skeleton",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Simply add any website in customizable windows",
   "main": "src/main.js",
   "author": "Leon Machens",

diff --git a/src/child.html b/src/child.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'"
+    />
+    <meta
+      http-equiv="X-Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'"
+    />
+    <title>Skeleton - Child</title>
+    <link rel="stylesheet" href="styles/child.css" />
+  </head>
+  <body>
+    <!-- <webview
+      id="foo"
+      src="data:text/plain,Hello, world!"
+      style="display: inline-flex; width: 640px; height: 480px"
+    ></webview> -->
+  </body>
+</html>
diff --git a/src/child.js b/src/child.js
@@ -0,0 +1,35 @@
+const { ipcRenderer } = require("electron");
+
+window.addEventListener("DOMContentLoaded", () => {
+  //   alert("CHILD");
+  //   const webview = document.querySelector("webview");
+  //   console.log(webview);
+  //   webview.src = "https://github.com/";
+
+  ipcRenderer.on("update", (_event, website) => {
+    const crop = website.crop || {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    };
+    const widthOffset = crop.left + crop.right;
+    const heightOffset = crop.top + crop.bottom;
+
+    let webview = document.querySelector("webview");
+    if (!webview) {
+      document.title = website.name;
+      document.body.innerHTML = `<webview src="${website.url}"></webview>`;
+      webview = document.querySelector("webview");
+      webview.addEventListener("did-stop-loading", () => {
+        webview.style = `top: ${-crop.top}px; left: ${-crop.left}px; right: ${-crop.right}px; width: calc(100% + ${widthOffset}px); bottom: ${-website
+          .crop
+          .bottom}px; top: ${-crop.top}px; height: calc(100% + ${heightOffset}px);`;
+      });
+    } else {
+      webview.style = `top: ${-crop.top}px; left: ${-crop.left}px; right: ${-crop.right}px; width: calc(100% + ${widthOffset}px); bottom: ${-crop.bottom}px; top: ${-crop.top}px; height: calc(100% + ${heightOffset}px);`;
+    }
+  });
+
+  ipcRenderer.send("whoami");
+});
diff --git a/src/components/App.js b/src/components/App.js
@@ -4,6 +4,7 @@ const NewLink = require("./NewLink");
 const Title = require("./Title");
 const WebsiteForm = require("./WebsiteForm");
 const WebsiteNav = require("./WebsiteNav");
+const { shell } = require("electron");
 
 const App = () => {
   const newLink = NewLink();
@@ -49,10 +50,20 @@ const App = () => {
         {
           className: "aside",
         },
-        [Title(), newLink, websiteNav]
+        [
+          Title(),
+          newLink,
+          websiteNav,
+          createElement("button", {
+            className: "support",
+            innerText: "💙 Support me",
+            onclick: () =>
+              shell.openExternal("https://github.com/sponsors/lmachens"),
+          }),
+        ]
       ),
+      createElement("div", { className: "toolbar" }, [CloseButton()]),
       main,
-      CloseButton(),
     ]
   );
 };

diff --git a/src/components/HotkeyInput.js b/src/components/HotkeyInput.js
@@ -1,12 +1,13 @@
 const LabeledInput = require("./LabeledInput");
 
-const HotkeyInput = ({ value }) => {
+const HotkeyInput = ({ value, oninput }) => {
   return LabeledInput({
     type: "text",
     text: "Show/Hide Hotkey",
     name: "toggleHotkey",
     placeholder: "Unassigned",
     value: value || "",
+    oninput: oninput,
     onkeyup(event) {
       event.preventDefault();
       event.stopPropagation();

diff --git a/src/components/WebsiteForm.js b/src/components/WebsiteForm.js
@@ -4,6 +4,7 @@ const {
   deleteWebsite,
   updateWebsite,
   addWebsite,
+  listenWebsites,
 } = require("../lib/storage");
 const HotkeyInput = require("./HotkeyInput");
 const LabeledInput = require("./LabeledInput");
@@ -14,15 +15,65 @@ const WebsiteForm = () => {
   let isNew = false;
   if (!website) {
     isNew = true;
-    website = { bounds: {} };
+    website = { bounds: {}, crop: {} };
   }
+  const handleChange = () => {
+    if (!isNew) {
+      form.requestSubmit();
+    }
+  };
+
+  const xInput = LabeledInput({
+    type: "number",
+    text: "X",
+    name: "x",
+    value: website.bounds.x ?? 100,
+    oninput: handleChange,
+  });
+
+  const yInput = LabeledInput({
+    type: "number",
+    text: "Y",
+    name: "y",
+    value: website.bounds.y ?? 100,
+    oninput: handleChange,
+  });
+
+  const widthInput = LabeledInput({
+    type: "number",
+    text: "Width",
+    name: "width",
+    value: website.bounds.width ?? 800,
+    oninput: handleChange,
+  });
+
+  const heightInput = LabeledInput({
+    type: "number",
+    text: "Height",
+    name: "height",
+    value: website.bounds.height ?? 600,
+    oninput: handleChange,
+  });
+
+  listenWebsites((websites) => {
+    const existingWebsite = websites.find(
+      (website) => website.id === websiteId
+    );
+    if (existingWebsite) {
+      xInput.children[0].value = existingWebsite.bounds.x;
+      yInput.children[0].value = existingWebsite.bounds.y;
+      widthInput.children[0].value = existingWebsite.bounds.width;
+      heightInput.children[0].value = existingWebsite.bounds.height;
+    }
+  });
 
   const form = createElement(
     "form",
     {
       className: "form",
       onsubmit: (event) => {
         event.preventDefault();
+        website = getWebsite(websiteId);
         const {
           name,
           height,
@@ -37,6 +88,10 @@ const WebsiteForm = () => {
           toggleHotkey,
           x,
           y,
+          cropLeft,
+          cropRight,
+          cropTop,
+          cropBottom,
         } = event.target.elements;
         website.name = name.value;
         if (!website.id) {
@@ -48,6 +103,12 @@ const WebsiteForm = () => {
           x: +x.value,
           y: +y.value,
         };
+        website.crop = {
+          left: +cropLeft.value,
+          right: +cropRight.value,
+          top: +cropTop.value,
+          bottom: +cropBottom.value,
+        };
         website.url = url.value;
         website.frame = frame.checked;
         website.transparent = transparent.checked;
@@ -56,7 +117,6 @@ const WebsiteForm = () => {
         website.clickThrough = clickThrough.checked;
         website.movable = movable.checked;
         website.toggleHotkey = toggleHotkey.value;
-
         if (isNew) {
           addWebsite(website);
           location.href = `#${website.id}`;
@@ -82,67 +142,81 @@ const WebsiteForm = () => {
         value: website.url ?? "",
         required: true,
       }),
+      xInput,
+      yInput,
+      widthInput,
+      heightInput,
       LabeledInput({
         type: "number",
-        text: "X",
-        name: "x",
-        value: website.bounds.x ?? 100,
+        text: "Crop Left",
+        name: "cropLeft",
+        value: website.crop?.left ?? 0,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "number",
-        text: "Y",
-        name: "y",
-        value: website.bounds.y ?? 100,
+        text: "Crop Right",
+        name: "cropRight",
+        value: website.crop?.right ?? 0,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "number",
-        text: "Width",
-        name: "width",
-        value: website.bounds.width ?? 800,
+        text: "Crop Top",
+        name: "cropTop",
+        value: website.crop?.top ?? 0,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "number",
-        text: "Height",
-        name: "height",
-        value: website.bounds.height ?? 600,
+        text: "Crop Bottom",
+        name: "cropBottom",
+        value: website.crop?.bottom ?? 0,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Frame",
         name: "frame",
         checked: website.frame ?? true,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Transparent",
         name: "transparent",
         checked: website.transparent ?? true,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Movable",
         name: "movable",
         checked: website.movable ?? true,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Always on top",
         name: "alwaysOnTop",
         checked: website.alwaysOnTop ?? true,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Resizable",
         name: "resizable",
         checked: website.resizable ?? true,
+        oninput: handleChange,
       }),
       LabeledInput({
         type: "checkbox",
         text: "Click through",
         name: "clickThrough",
         checked: website.clickThrough ?? false,
+        oninput: handleChange,
       }),
-      HotkeyInput({ value: website.toggleHotkey }),
+      HotkeyInput({ value: website.toggleHotkey, oninput: handleChange }),
       createElement("input", {
         className: "full",
         type: "submit",

diff --git a/src/components/WebsiteNav.js b/src/components/WebsiteNav.js
@@ -3,7 +3,7 @@ const { listenWebsites } = require("../lib/storage");
 const WebsiteLink = require("./WebsiteLink");
 
 const WebsiteNav = () => {
-  const nav = createElement("nav");
+  const nav = createElement("nav", { className: "nav" });
 
   listenWebsites((websites) => {
     const websitesToAdd = [...websites];

diff --git a/src/lib/storage.js b/src/lib/storage.js
@@ -1,3 +1,4 @@
+const { ipcRenderer } = require("electron");
 const Store = require("electron-store");
 
 const store = new Store({ watch: true });
@@ -41,6 +42,7 @@ const updateWebsite = (id, partialWebsite) => {
   if (existingWebsite) {
     Object.assign(existingWebsite, partialWebsite);
     setWebsites(websites);
+    ipcRenderer?.send("updated-website", existingWebsite);
   }
 };