Skip to content

Instantly share code, notes, and snippets.

@ppazos

ppazos/index.html

Forked from CliftonH/index.html
Created May 9, 2024 22:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ppazos/db75cd3f8bbb6cb75e2e84e4a2ea65fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ppazos/db75cd3f8bbb6cb75e2e84e4a2ea65fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @CliftonH CliftonH revised this gist May 4, 2024. 1 changed file with 5 additions and 9 deletions.
    14 changes: 5 additions & 9 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,22 +14,18 @@ function createWindow () {
    mainWindow.loadFile('index.html')
    }

    function showDialog (_, hasParent) {
    function showDialog (_, shouldAttachToMainWindow) {
    const abortCtrl = new AbortController()
    setTimeout(() => abortCtrl.abort(), 3_000)

    let parent
    if (hasParent) {
    parent = mainWindow
    }
    const parentWindow = shouldAttachToMainWindow ? mainWindow : undefined

    dialog.showMessageBox(
    // If parent is undefined, this will behave like showMessageBoxSync on MacOS,
    // Windows will behave correctly and dismiss the dialog
    parent,
    // On MacOS if parentWindow is undefined this will behave like showMessageBoxSync
    // and will ignore the abort signal. Windows will dismiss the dialog
    parentWindow,
    {
    message: 'This should dismiss in 3 seconds',
    type: 'none',
    signal: abortCtrl.signal
    }
    )
  2. @CliftonH CliftonH revised this gist May 3, 2024. 1 changed file with 4 additions and 16 deletions.
    20 changes: 4 additions & 16 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,8 @@
    // Modules to control application life and create native browser window
    const {app, BrowserWindow, dialog, ipcMain} = require('electron')
    const path = require('path')
    let mainWindow

    function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    @@ -13,7 +11,6 @@ function createWindow () {
    }
    })

    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
    }

    @@ -25,8 +22,10 @@ function showDialog (_, hasParent) {
    if (hasParent) {
    parent = mainWindow
    }

    dialog.showMessageBox(
    // If parent is undefined, this will behave like showMessageBoxSync on MacOS,
    // Windows will behave correctly and dismiss the dialog
    parent,
    {
    message: 'This should dismiss in 3 seconds',
    @@ -36,27 +35,16 @@ function showDialog (_, hasParent) {
    )
    }

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    ipcMain.on('show-dialog', showDialog)
    })

    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
    })

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    })
  3. @CliftonH CliftonH revised this gist May 3, 2024. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,13 +18,14 @@ function createWindow () {
    }

    function showDialog (_, hasParent) {
    console.log('HAS PARENT: ', hasParent);
    const abortCtrl = new AbortController()
    setTimeout(() => abortCtrl.abort(), 3_000)

    let parent
    if (hasParent) {
    parent = mainWindow
    }

    dialog.showMessageBox(
    parent,
    {
  4. @CliftonH CliftonH revised this gist May 3, 2024. 5 changed files with 47 additions and 34 deletions.
    15 changes: 10 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,14 +3,19 @@
    <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <button id="parent_button">
    With Parent Window
    </button>
    <br />
    <button id="no_parent_button">
    No Parent Window
    </button>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    28 changes: 23 additions & 5 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,11 @@
    // Modules to control application life and create native browser window
    const { app, BrowserWindow } = require('electron')
    const path = require('node:path')
    const {app, BrowserWindow, dialog, ipcMain} = require('electron')
    const path = require('path')
    let mainWindow

    function createWindow () {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
    mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    @@ -14,9 +15,24 @@ function createWindow () {

    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
    }

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
    function showDialog (_, hasParent) {
    console.log('HAS PARENT: ', hasParent);
    const abortCtrl = new AbortController()
    setTimeout(() => abortCtrl.abort(), 3_000)
    let parent
    if (hasParent) {
    parent = mainWindow
    }
    dialog.showMessageBox(
    parent,
    {
    message: 'This should dismiss in 3 seconds',
    type: 'none',
    signal: abortCtrl.signal
    }
    )
    }

    // This method will be called when Electron has finished
    @@ -30,6 +46,8 @@ app.whenReady().then(() => {
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    ipcMain.on('show-dialog', showDialog)
    })

    // Quit when all windows are closed, except on macOS. There, it's common
    21 changes: 4 additions & 17 deletions preload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,5 @@
    /**
    * The preload script runs before `index.html` is loaded
    * in the renderer. It has access to web APIs as well as
    * Electron's renderer process modules and some polyfilled
    * Node.js functions.
    *
    * https://www.electronjs.org/docs/latest/tutorial/sandbox
    */
    window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
    }
    const { contextBridge, ipcRenderer } = require('electron')

    for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
    }
    })
    contextBridge.exposeInMainWorld('electronAPI', {
    showDialog: (hasParent) => ipcRenderer.send('show-dialog', hasParent)
    })
    14 changes: 7 additions & 7 deletions renderer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /**
    * This file is loaded via the <script> tag in the index.html file and will
    * be executed in the renderer process for that window. No Node.js APIs are
    * available in this process because `nodeIntegration` is turned off and
    * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
    * to expose Node.js functionality from the main process.
    */
    document.getElementById('parent_button').onclick = () => {
    window.electronAPI.showDialog(true)
    }

    document.getElementById('no_parent_button').onclick = () => {
    window.electronAPI.showDialog(false)
    }
    3 changes: 3 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    /* styles.css */

    /* Add styles here to customize the appearance of your app */
  5. @CliftonH CliftonH created this gist May 3, 2024.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    </body>
    </html>
    43 changes: 43 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    // Modules to control application life and create native browser window
    const { app, BrowserWindow } = require('electron')
    const path = require('node:path')

    function createWindow () {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    preload: path.join(__dirname, 'preload.js')
    }
    })

    // and load the index.html of the app.
    mainWindow.loadFile('index.html')

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
    }

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    })

    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
    })

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    16 changes: 16 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    {
    "name": "therapeutic-garden-face-zac1g",
    "productName": "therapeutic-garden-face-zac1g",
    "description": "My Electron application description",
    "keywords": [],
    "main": "./main.js",
    "version": "1.0.0",
    "author": "chensley",
    "scripts": {
    "start": "electron ."
    },
    "dependencies": {},
    "devDependencies": {
    "electron": "30.0.2"
    }
    }
    18 changes: 18 additions & 0 deletions preload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    /**
    * The preload script runs before `index.html` is loaded
    * in the renderer. It has access to web APIs as well as
    * Electron's renderer process modules and some polyfilled
    * Node.js functions.
    *
    * https://www.electronjs.org/docs/latest/tutorial/sandbox
    */
    window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
    }
    })
    7 changes: 7 additions & 0 deletions renderer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    /**
    * This file is loaded via the <script> tag in the index.html file and will
    * be executed in the renderer process for that window. No Node.js APIs are
    * available in this process because `nodeIntegration` is turned off and
    * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
    * to expose Node.js functionality from the main process.
    */