feat: duplicate widget

sametcn99 · Jun 11, 2024 · 7026ace · 7026ace
1 parent 1b61725
commit 7026ace
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "electron-widgets",
   "productName": "electron-widgets",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A minimal widget application created with electron.js",
   "license": "GPL-3.0",
   "repository": {

diff --git a/public/widgets/app releases/index.html b/public/widgets/app releases/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -21,7 +21,8 @@ <h1 id="header">
           width="24px"
           height="24px"
         />
-        Releases
+        Releases<br />
+        <span id="version">Using version</span>
       </h1>
       <section id="container">
         <article id="item">

diff --git a/public/widgets/app releases/script.js b/public/widgets/app releases/script.js
@@ -36,6 +36,13 @@ async function fetchDataAndUpdateUI() {
     });
   }
 
+  // Check for app updates
+  const version = await window.electronAPI.getAppVersion();
+
+  // Update the UI with the app version
+  document.getElementById("version").textContent =
+    `You are using version ${version} of the app.`;
+
   // Update the UI if data is available
   if (data) updateUI();
 

diff --git a/public/widgets/hacker news/styles.css b/public/widgets/hacker news/styles.css
@@ -1,17 +1,12 @@
 /* Importing Google Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-/* Custom font face */
-@font-face {
-  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
-  src: url();
-}
-
 * {
   margin: 0;
   padding: 0;
   user-select: none;
   -webkit-user-select: none;
+  font-family: "Roboto", sans-serif;
 }
 
 :root {
@@ -63,7 +58,7 @@ body {
 
 #time {
   font-size: small;
-  font-weight: lighter;
+  font-weight: 600;
 }
 
 #footer {

diff --git a/public/widgets/r-programming/index.html b/public/widgets/r-programming/index.html
@@ -25,6 +25,7 @@ <h1 id="header">
       <section id="container">
         <article id="item">
           <div id="title">title goes here</div>
+          <p id="detail"></p>
           <div>
             <p id="pubDate">Published on: May 1, 2024</p>
             <div id="author" rel="noopener noreferrer">

diff --git a/public/widgets/r-programming/script.js b/public/widgets/r-programming/script.js
@@ -18,6 +18,10 @@ async function fetchDataAndUpdateUI() {
       node.style.display = "flex";
       // Set the title of the item
       node.querySelector("#title").textContent = element.title;
+      if(element.message) {
+        node.querySelector("#detail").textContent = element.message.substring(0, 250) + "...";
+        node.querySelector("#detail").style.display = "block";
+      }
       // Add an event listener to open the link when the title is clicked
       node.querySelector("#title").addEventListener("click", () => {
         window.electronAPI.openExternal(element.link);
@@ -40,7 +44,7 @@ async function fetchDataAndUpdateUI() {
 
   // Fetch the RSS feed data
   const data = await fetch(
-    "https://reddit-rss-api.deno.dev/r/programming?sort=desc",
+    "https://reddit-rss-api.deno.dev/r/programming?sort=desc"
   ).then((response) => response.json());
   // Log the data
   console.log(data);
@@ -49,7 +53,7 @@ async function fetchDataAndUpdateUI() {
   // Set an interval to reload the widget every hour
   setInterval(
     () => window.electronAPI.reloadWidget("r-turkey"),
-    1000 * 60 * 60, // reload every hour
+    1000 * 60 * 60 // reload every hour
   );
 }
 

diff --git a/public/widgets/r-programming/styles.css b/public/widgets/r-programming/styles.css
@@ -1,12 +1,6 @@
 /* Importing Google Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-/* Custom font face */
-@font-face {
-  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
-  src: url();
-}
-
 /* Global CSS styles */
 * {
   padding: 0px;
@@ -61,11 +55,10 @@ h1 {
   color: var(--text);
   position: sticky;
   top: 0;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
   width: 100%;
   padding-top: 10px;
   padding-bottom: 10px;
+  background-color: var(--background);
 }
 
 /* Anchor styles */

diff --git a/src/app/main/ipc-operations/widget-data.ts b/src/app/main/ipc-operations/widget-data.ts
@@ -142,3 +142,27 @@ ipcMain.handle(IpcChannels.REMOVE_WIDGET, async (event, widgetKey) => {
   setWidgetsJson(widgets, config.widgetsJsonPath);
   windowManager.reloadAllWindows();
 });
+
+/**
+ * Handles duplicating a widget.
+ * @param event - The event object.
+ * @param widgetKey - The key of the widget to duplicate.
+ */
+ipcMain.handle(IpcChannels.DUPLICATE_WIDGET, async (event, widgetKey) => {
+  const widgets = getWidgetsJson(config.widgetsJsonPath);
+  const widget = widgets[widgetKey];
+  const widgetFolderPath = path.join(config.widgetsDir, widgetKey);
+  const randomNumber = Math.floor(Math.random() * 1000);
+  const newWidgetId = `${widgetKey}-${randomNumber}`;
+  const newWidgetFolderPath = path.join(config.widgetsDir, newWidgetId);
+  copySync(widgetFolderPath, newWidgetFolderPath);
+  widgets[newWidgetId] = { ...widget };
+  widgets[newWidgetId].title = newWidgetId
+  widgets[newWidgetId].visible = false;
+  widgets[newWidgetId].x = 10;
+  widgets[newWidgetId].y = 10;
+  widgets[newWidgetId].locked = false;
+  widgets[newWidgetId].alwaysOnTop = false;
+  setWidgetsJson(widgets, config.widgetsJsonPath);
+  windowManager.reloadAllWindows();
+});
diff --git a/src/app/preload/electronAPI.ts b/src/app/preload/electronAPI.ts
@@ -24,6 +24,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
   removeWidget: (widgetId: string) =>
     ipcRenderer.invoke(IpcChannels.REMOVE_WIDGET, widgetId),
   sortWidgets: () => ipcRenderer.invoke(IpcChannels.SORT_WIDGETS),
+  duplicateWidget: (widgetId: string) =>
+    ipcRenderer.invoke(IpcChannels.DUPLICATE_WIDGET, widgetId),
 
   // widget window operations
   createWidgetWindow: (widgetKey: string) =>

diff --git a/src/app/renderer/components/DropdownButton.vue b/src/app/renderer/components/DropdownButton.vue
@@ -2,6 +2,8 @@
     <div class="relative" v-on:mouseover="isOpen = true" v-on:mouseleave="isOpen = false">
         <Bars4Icon class="w-6 h-6 rounded-xl hover:scale-105 hover:cursor-pointer" />
         <div v-if="isOpen" class="absolute right-0 z-10 py-2 text-sm bg-gray-300 rounded-lg shadow-xl w-36">
+            <button class="w-full p-2 text-gray-900 hover:bg-red-800 hover:text-white"
+            @click="duplicateWidget()">Duplicate</button>
             <button v-if="visible === true" class="w-full p-2 text-gray-900 hover:bg-gray-900 hover:text-white"
                 @click="show()">Show</button>
             <button v-if="alwaysOnTop === true" class="w-full p-2 text-gray-900 hover:bg-gray-900 hover:text-white"
@@ -32,6 +34,9 @@ export default {
         },
         show() {
             window.electronAPI.showWidget(this.title || '');
+        },
+        duplicateWidget() {
+            window.electronAPI.duplicateWidget(this.title || '');
         }
     },
     props: {

diff --git a/src/lib/ipc-channels.ts b/src/lib/ipc-channels.ts
@@ -19,6 +19,7 @@ export enum IpcChannels {
 
   SHOW_WIDGET = "show-widget", // Channel for showing widgets
   SHOW_ALL_WIDGETS = "show-all-widgets", // Channel for showing all widgets
+  DUPLICATE_WIDGET = "duplicate-widget", // Channel for duplicating widgets
   RELOAD_WIDGET = "reload-widget", // Channel for refreshing widgets
   RECREATE_WIDGET = "recreate-widget", // Channel for recreating widgets
   RESIZE_WIDGET_WINDOW = "resize-widget-window", // Channel for resizing widget windows

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -51,6 +51,7 @@ interface Window {
     // Widget actions
     reloadWidget: (widgetKey: string) => Promise<void>;
     recreateWidget: (widgetKey: string) => Promise<void>;
+    duplicateWidget: (widgetKey: string) => Promise<void>;
     lockWidget: (widgetId: string) => Promise<void>;
     getLocation: () => Promise<void>;
     showNotification: (title: string, body?: string) => Promise<void>;

diff --git a/src/utils/browser-windows/window-manager.ts b/src/utils/browser-windows/window-manager.ts
@@ -11,7 +11,7 @@ class WindowManager {
     try {
       let mainWindow: Electron.BrowserWindow | undefined;
       BrowserWindow.getAllWindows().forEach((win) => {
-        if (win.webContents.getTitle() === config.applicationName) {
+        if (win.title === config.applicationName) {
           mainWindow = win;
         }
       });
@@ -25,7 +25,7 @@ class WindowManager {
   minimizeAllWindowsExceptMain(): void {
     try {
       BrowserWindow.getAllWindows().forEach((win) => {
-        if (win.webContents.getTitle() !== config.applicationName) {
+        if (win.title !== config.applicationName) {
           win.minimize();
         }
       });
@@ -38,7 +38,7 @@ class WindowManager {
   closeAllWindowsExceptMain(): void {
     try {
       BrowserWindow.getAllWindows().forEach((win) => {
-        if (win.webContents.getTitle() !== config.applicationName) {
+        if (win.title !== config.applicationName) {
           win.close();
         }
       });
@@ -65,7 +65,7 @@ class WindowManager {
 
   reCreateWidget(widgetKey: string): void {
     this.getAllWindowsExceptMain().forEach((win) => {
-      if (win.webContents.getTitle() === widgetKey) {
+      if (win.title === widgetKey) {
         win.close();
         createSingleWindowForWidgets(widgetKey);
       }
@@ -81,7 +81,7 @@ class WindowManager {
 
   reloadWidget(widgetKey: string): void {
     this.getAllWindowsExceptMain().forEach((win) => {
-      if (win.webContents.getTitle() === widgetKey) {
+      if (win.title === widgetKey) {
         win.reload();
       }
     });
@@ -156,7 +156,7 @@ class WindowManager {
   hideAllWindowsExceptMain(): void {
     try {
       BrowserWindow.getAllWindows().forEach((win) => {
-        if (win.webContents.getTitle() !== config.applicationName) {
+        if (win.title !== config.applicationName) {
           win.hide();
         }
       });
@@ -169,7 +169,7 @@ class WindowManager {
   setAlwaysOnTopAllWindowsExceptMain(alwaysOnTop: boolean): void {
     try {
       BrowserWindow.getAllWindows().forEach((win) => {
-        if (win.webContents.getTitle() !== config.applicationName) {
+        if (win.title!== config.applicationName) {
           win.setAlwaysOnTop(alwaysOnTop);
         }
       });
@@ -209,7 +209,7 @@ class WindowManager {
     try {
       let foundWindow: BrowserWindow | null = null;
       this.getAllWindowsExceptMain().forEach((win) => {
-        if (win.webContents.getTitle() === title) {
+        if (win.title=== title) {
           foundWindow = win;
         }
       });