Add files via upload

tahasintonmoy2 · Jul 4, 2023 · 0809897 · 0809897
1 parent 6f198f0
commit 0809897
Show file tree

Hide file tree

Showing 10 changed files with 3,619 additions and 0 deletions.
diff --git a/assets/icon.ico b/assets/icon.ico
diff --git a/electron-builder.json b/electron-builder.json
@@ -0,0 +1,21 @@
+{
+    "appId": "com.tahasin.snxresizer",
+    "productName": "Snx Resizer",
+    "directories": {
+      "output": "dist"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "assets/icon.ico"
+    },
+    "nsis": {
+      "oneClick": false,
+      "installerIcon": "assets/icon.ico",
+      "uninstallerIcon": "assets/icon.ico",
+      "uninstallDisplayName": "Snx Resizer (Beta)",
+      "perMachine": false,
+      "allowElevation": false,
+      "allowToChangeInstallationDirectory": true
+    }
+  }
+
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "snx",
+  "productName": "Snx Resizer",
+  "version": "0.1.0-beta", 
+  "description": "A simple images resizer",
+  "main": "src/index.js",
+  "repository": "https://github.com/tahasintonmoy2/",
+  "author": "Tahasin",
+  "license": "MIT",
+  "bugs": { 
+    "url": "https://github.com/tahasintonmoy2/snx/issues"
+  },
+  "scripts": {
+    "start": "nodemon --exec electron ." 
+  }, 
+  "devDependencies": {
+    "electron": "^25.2.0",
+    "electron-builder": "^24.4.0"
+  },
+  "dependencies": {
+    "nodemon": "^2.0.22",
+    "resize-img": "^2.0.0",
+    "toastify-js": "^1.12.0"
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+    http-equiv="Content-Security-Policy"
+    content="script-src 'self' 'unsafe-inline'"
+  />
+  <link rel="stylesheet" href="./styles/index.css" />
+  <script src="./js/custom-css.js"></script>
+  <script src="./js/renderer.js" defer></script>
+  </head>
+  <body class="bg-indigo-600">
+    <div
+      class="max-w-xl m-auto h-screen flex flex-col align-center justify-center"
+    >
+      <div class="flex flex-col w-full items-center justify-center bg-grey-lighter">
+        <label
+          class="w-64 flex flex-col items-center px-4 py-7 bg-[#0f111a] text-gray-500 rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:text-white"
+        >
+          <img src="../assets/icon.ico" width="64" />
+          <span class="mt-2 leading-normal">Select an image to resize</span>
+          <input id="img" type="file" class="hidden" />
+        </label>
+      </div> 
+
+      <!-- Form -->
+      <form id="img-form" class="hidden">
+        <div class="mt-6">
+          <label class="mt-1 block text-white text-center w-80 m-auto py-3 shadow-sm border-gray-300 rounded-md">Width</label>
+          <input
+            type="number"
+            name="width"
+            id="width"
+            class="mt-1 focus:outline-none block w-80 m-auto p-3 shadow-sm border-gray-300 rounded-md"
+            placeholder="Width"
+          />
+        </div>
+
+        <div class="mt-4">
+          <label class="mt-1 block text-white text-center w-80 m-auto py-3 shadow-sm border-gray-300 rounded-md">Height</label>
+          <input
+            type="number"
+            name="height"
+            id="height"
+            class="mt-1 focus:outline-none block w-80 m-auto p-3 shadow-sm border-gray-300 rounded-md"
+            placeholder="Height"
+          />
+        </div>
+
+        <!-- Button -->
+        <div class="mt-6">
+          <button
+            type="submit"
+            class="w-80 m-auto flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Resize
+          </button>
+
+      </form>
+
+      <p class="text-white text-lg text-center font-mono mt-6"><strong>File Name: </strong><span id="filename"></span></p>
+      <p class="text-white text-lg text-center font-mono mt-2"><strong>Output directory: </strong><span id="output-path"></span></p>
+    </div>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,112 @@
+const path = require('path');
+const os = require('os');
+const resizeImg = require('resize-img');
+const fs = require('fs');
+const {
+  app,
+  BrowserWindow,
+  Menu,
+  ipcMain,
+  shell,
+  dialog,
+} = require('electron');
+
+let mainWin;
+
+const createWindow = () => {
+  mainWin = new BrowserWindow({
+    width: 440,
+    height: 670,
+    webPreferences: {
+      nodeIntegration:true,
+      contextIsolation:true,
+      preload: path.join(__dirname, 'preload.js'),  
+    },
+    icon: "assets/icon.ico",
+  });
+  mainWin.loadFile("src/index.html");
+};
+
+const menuTemt = [
+  {
+    label: "Help",
+    submenu: [
+      {
+        role: "toggledevtools",
+      },
+      {
+        type: "separator",
+      },
+      {
+        label: "Join Us on Twitter",
+        click: () => {
+          shell.openExternal("https://twitter.com/tahasintonmoy");
+        },
+      },
+      {
+        label: "Report Issues",
+        click: () => {
+          shell.openExternal("https://twitter.com/tahasintonmoy");
+        },
+      },
+      { type: "separator" },
+      {
+        label: "About",
+        click: async () => {
+          dialog.showMessageBoxSync({
+            type: "info",
+            buttons: ["OK"],
+            title: "About",
+            message: "SNX Resizer",
+            detail:
+              "SNX Resizer is an open-source project \ndeveloped by Tahasin Tonmoy \n" +
+              "and is a free software project developed\nby Tahasin Tonmoy." +
+              "\n\n Version 0.1.0 (Beta) \n Electron JS Version 25.2.0 \n Node.js Version 18.16.1 LTS " +
+              "\n Chromium Version 88.0.4324.190",
+          });
+        },
+      },
+    ],
+  },
+];
+
+const AppMenu = Menu.buildFromTemplate(menuTemt);
+Menu.setApplicationMenu(AppMenu);
+
+app.whenReady().then(() => {
+  createWindow();
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+ipcMain.on('image:resize', (e, options) => {
+  options.dest = path.join(os.homedir(), 'imageresizer');
+  resizeImage(options)
+});
+
+async function resizeImage({  imgPath, width, height, dest }){
+  try {
+    const newPath = await resizeImg(fs.readFileSync(imgPath),{
+      width: +width,
+      height: +height,
+    });
+
+    const filename = path.basename(imgPath);
+
+    if (!fs.existsSync(dest)) {
+        fs.mkdir(dest);
+    }
+
+    fs.writeFileSync(path.join(dest, filename), newPath);
+    mainWin.webContents.send('image:done');
+
+    shell.openPath(dest)
+  } catch (error) {
+    alert('Error: ' + error)
+  }
+}
+
+app.on("window-all-close", () => {
+  if (process.platform !== "drawing") app.quit();
+});
diff --git a/src/js/custom-css.js b/src/js/custom-css.js
diff --git a/src/js/renderer.js b/src/js/renderer.js
@@ -0,0 +1,103 @@
+const form = document.querySelector('#img-form');
+const img = document.querySelector('#img');
+const outputPath = document.querySelector('#output-path');
+const filename = document.querySelector('#filename');
+const heightInput = document.querySelector('#height');
+const widthInput = document.querySelector('#width');
+
+// Load image and show form
+function loadImage(e) {
+  const file = e.target.files[0];
+
+  // Check if file is an image 
+  if (!isFileImage(file)) {
+    alertError('Please select an image');
+    return;
+  }
+
+  // Add current height and width to form using the URL API
+  const image = new Image();
+  image.src = URL.createObjectURL(file);
+  image.onload = function () {
+    widthInput.value = this.width;
+    heightInput.value = this.height;
+  };
+
+  // Show form, image name and output path
+  form.style.display = 'block';
+  filename.innerHTML = img.files[0].name;
+  outputPath.innerText = path.join(os.homedir(), 'imageresizer');
+}
+
+// Make sure file is an image
+function isFileImage(file) {
+  const acceptedImageTypes = [
+    "image/png",
+    "image/gif",
+    "image/jpeg",
+    "image/ico",
+  ];
+  return file && acceptedImageTypes.includes(file['type']);
+}
+
+// Resize image
+function resizeImage(e) {
+  e.preventDefault();
+
+  if (!img.files[0]) {
+    alertError('Please upload an image');
+    return;
+  }
+
+  if (widthInput.value === '' || heightInput.value === '') {
+    alertError('Please enter a width and height');
+    return;
+  }
+
+  // Electron adds a bunch of extra properties to the file object including the path
+  const imgPath = img.files[0].path;
+  const width = widthInput.value;
+  const height = heightInput.value;
+
+  ipcRenderer.send('image:resize', {
+    imgPath,
+    height,
+    width,
+  });
+}
+
+// When done, show message
+ipcRenderer.on('image:done', () =>
+  alertSuccess(`Image resized to ${heightInput.value} x ${widthInput.value}`)
+);
+
+function alertSuccess(message) {
+  Toastify.toast({
+    text: message,
+    duration: 5000,
+    close: false,
+    style: {
+      background: 'green',
+      color: 'white',
+      textAlign: 'center',
+    },
+  });
+}
+
+function alertError(message) {
+  Toastify.toast({
+    text: message,
+    duration: 5000,
+    close: false,
+    style: {
+      background: 'red',
+      color: 'white',
+      textAlign: 'center',
+    },
+  });
+}
+
+// File select listener
+img.addEventListener('change', loadImage);
+// Form submit listener
+form.addEventListener('submit', resizeImage);
diff --git a/src/preload.js b/src/preload.js
@@ -0,0 +1,22 @@
+const os = require('os');
+const path = require('path');
+const {contextBridge, ipcRenderer} = require('electron')
+const Toastify = require('toastify-js')
+
+contextBridge.exposeInMainWorld('os', {
+    homedir:()=> os.homedir(),
+});
+
+contextBridge.exposeInMainWorld('path', {
+    join: (...args)=> path.join(...args),
+});
+
+contextBridge.exposeInMainWorld('ipcRenderer', {
+    send: (channel, data) => ipcRenderer.send(channel, data),
+    on: (channel, func) => 
+    ipcRenderer.on(channel, (event, ...args) => func(...args)),
+});
+
+contextBridge.exposeInMainWorld('Toastify', {
+    toast: (options) => Toastify(options).showToast(),
+});