Coder Social home page Coder Social logo

electron-window's Introduction

electron-window

Convenience methods for Electron windows.

Installation

npm i --save electron-window

Usage

TL;DR:

electron-window converts this:

const { 
  app, 
  BrowserWindow 
} = require('electron')

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
let mainWindow = null

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 1000, height: 400, show: false })

  const someArgs = { data: 'hi' }
  const indexPath = path.resolve(__dirname, '..', 'weird-location', 'index.html')
  const indexUrl = url.format({
    protocol: 'file',
    pathname: indexPath,
    slashes: true,
    hash: encodeURIComponent(JSON.stringify(someArgs))
  })

  mainWindow.on('closed', () => {
    mainWindow = null
  })

  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.show()
    console.log('window is now visible!')
  })

  mainWindow.loadUrl(indexUrl)
})

to this:

const { app } = require('electron')
const path = require('path')
const window = require('electron-window')

app.on('ready', () => {
  const mainWindow = window.createWindow({ width: 1000, height: 400 })
  const someArgs = { data: 'hi' }
  const indexPath = path.resolve(__dirname, '..', 'weird-location', 'index.html')
  
  mainWindow.showUrl(indexPath, someArgs, () => {
    console.log('window is now visible!')
  })
})

API Methods

createWindow(options)

Class method that creates a new BrowserWindow with the following default options: { show: false }. No need to worry about keeping a global reference to prevent garbage collection, this is handled for you.

parseArgs()

Instance method to parse arguments in window. You would only need to call from your renderer preload script if you pass in preload.

showUrl(httpOrFileUrl, [argsForRenderer], [callback])

Instance method that shows the url. When the url is finished loading, the callback is returned. If the optional argsForRenderer is set then __args__ will be a global object for the page in the renderer process. This is a convenient way to pass arguments from the main process to the renderer process.

unref()

Instance method to call if you ever want to remove the global reference. Should only need to be called if destroy() is ever called. Most likely, you won't need to use this.

API Properties

windows

Class property to get a reference to all windows created and their ids. This is in the form of an object where the keys are window ids, and the values are instances of BrowserWindow.

Example

main process

const window = require('electron-window')

const windowOptions = {
  width: 1000,
  height: 400
}

const mainWindow = window.createWindow(windowOptions)

// can access at window.__args__ from scripts
// ran from index.html
const args = {
  data: 'some secret data'
}

mainWindow.showUrl('index.html', args, () => {
  console.log('the window should be showing with the contents of the URL now')
})

renderer process

// only call if `preload` is set in `windowOptions`
require('electron-window').parseArgs()

console.log(window.__args__)
// => Object {data: "some secret data"}

License

MIT

electron-window's People

Contributors

anaisbetts avatar atdrago avatar inukshuk avatar jprichardson avatar parro-it avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

electron-window's Issues

Update README

The README examples could use some updates:

  • New methods of referencing Electron modules (e.g., const { app } = require('electron') instead of const app = require('app'))
  • Usage of ES6 syntax
    • const and let instead of var
    • arrow functions
    • destructuring assignment

Let me know what you think of this. I can do it at some point. Just wanted to write it down so I remember. :)

Error message when closing window

As of Electron v0.35.4, the following error message is shown within an alert dialog whenever a window is closed that was created with ElectronWindow.

Uncaught Exception:
Error: Object has been destroyed
at Error (native)
at BrowserWindow._unref (/Users/adamdrago/Documents/git/negative/node_modules/electron-window/lib/main.js:25:23)
at BrowserWindow.g (events.js:260:16)
at emitOne (events.js:82:20)
at BrowserWindow.emit (events.js:169:7)

screen shot 2015-12-05 at 8 15 04 am

I haven't had time to look into the actual cause of the issue. Will update once I know more.

BrowserWindow Methods?

First off, fantastic library. I had written a similar script for a project, just using this instead now.

Would it be possible to return the BrowserWindow object, with your additional methods added, so that calls like window.getFocusedWindow() would be possible? Or could you alias some of the methods from BrowserWindow, e.g. window.focused()?

Option to keep window hidden on `did-finish-load`

I think there should be an option to disable the automatic .show() on a browser window.

Use cases:

  • We want the app to start in the tray and then open the main application window when the tray icon is clicked.
// Use case 1
app.on('ready', () => {
  const mainWindow = window.createWindow({
    width: 100,
    height: 100,
    show: false
  });
  mainWindow.showUrl(somePath);
  trayIcon.on('click', () => mainWindow.show());
});
  • Application requires additional steps before it is ready to be shown.
// Use case 2
app.on('ready', () => {
  const mainWindow = window.createWindow({
    width: 100,
    height: 100,
    show: false
  });
  mainWindow.showUrl(somePath, () => {
    calculatePi();
    someAsyncFunction(() => {
        mainWindow.show();
    });
  });
});

Preventing the removal of window on close

Hey jprichardson,
I've been utilizing your package on an app that I've been developing, though I've run into an issue when trying to add a dialog that prompts the user if there are unsaved changes in a window.
I've managed to get everything working properly by adding the logic to close event listener, though it appears that at that point electron-window has already removed the window reference.

Is there a way to preserve the reference until after the close event is emitted or restore the window reference without creating a totally new window?

specify win.show or win.showInactive

Hi, I've just seen that there's a window.show() that is called in the showURL method.
My electron windows focus 3 times - once at open, once dom content start load, and once everything is loaded.
It's really annoying, I'd like to call showInactive() method which should solve the issue.

Do you need a PR ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.