@kano/desktop-shell
Abstraction layer on top of electron to provide common features in a shell ready to use.
Last updated a year ago by rpazdera .
ISC · Original npm · Tarball · package.json
$ cnpm install @kano/desktop-shell 
SYNC missed versions from official npm registry.

Kano Desktop Shell

Abstraction layer on top of electron to provide common features in a shell ready to use.

Features

  • Static SPA content delivery (Through registered custom protocol)
  • Window state managment (electron-window-state)
  • UWP style titlebar for windows with dropdown menu
  • Default menu items (clipboard, selection, help)
  • About page (Help/About or AppName/About on macOS)
  • Developer mode option (5 clicks on icon in the about page)

Future Features

  • Update checking and menu options

Style

Windows

UWP style Titlebar

Classic Classic

Classic style titlebar (Windows 10)

Classic Classic

API

Shell: Use this class to create a new app with a browser window serving content from a local directory

options:

  • root, (required) Root of the local directory you want to serve in the browser window.
  • scheme, Scheme that will be used in the server protocol (Default: shell)
  • width, Width of the main window (Default: 800).
  • height, Height of the main window (Default: 600).
  • preload, path to a preload script (Default: none).
  • titlebar, Enables the titlebar (Default: true).
  • uwpTitlebar, Enables the UWP style titlebar for windows (Default: true).
  • devMode, Enables developer mode (DevTool options) (Default: false).
  • menuTransform, Function that will receive the shell menu and should return a modified version of it to add custom menu and menu items.
  • windowOptions, Any option that will be passed down to electron's BrowserWindow constructor.
  • userDataDirName, (optional) Change the name of the directory where user data will be stored. The location is platform-specific. Defaults to the app name as specified in package.json.

Methods:

  • updateMenu(): Triggers an update of the menu bar.
  • isDevMode(): Return a boolean. true if in developer mode false if not.

Example

The following examnple can be run with npm run demo and the sources are in the app directory

const { app } = require('electron');
const { Shell, Shellmenu } = require('kano-desktop-shell');
const path = require('path');

const CONTENT_SCHEME = 'my-custom-app';
// Location of the static content to serve. This will be served through a custom protocol
const CONTENT_ROOT = path.join(__dirname, './src');

// Custom menu Item added
ShellMenu.addItem('my-item', { label: 'My Menu Item', click() { console.log('My Menu Item') } });

// Create new Shell with custom options
// Includes automatic window state managment and UWP style titlebar for windows
// Custom preload as module supported
const shell = new Shell({
    name: 'My App',
    root: CONTENT_ROOT,
    scheme: CONTENT_SCHEME,
    // Can provide custom width and height
    width: 1440,
    height: 900,
    // Supports preload script
    preload: path.join(__dirname, 'preload.js'),
    titlebar: true,
    // Enable UWP style titlebar
    uwpTitlebar: true,
    devMode: false,
    menu: {
        transform(menu) {
            const submenu = [ShellMenu.createMenuItem('my-item')];
            // Can update when dev mode changes
            if (shell.isDevMode()) {
                submenu.push(ShellMenu.createMenuItem('separator'));
                // Can add custom runtime generated menu items
                submenu.push({ label: 'Dev option' });
            }
            // Inject in list of menus
            menu.splice(1, 0, {
                label: 'Custom Menu',
                submenu,
            });
            return menu;
        },
    },
    windowOptions: {
        icon: path.join(__dirname, 'res/icon_180.png'),
    },
    // Log options allows to customize logging
    log: {
        // Default output lod level
        level: 'debug',
        // File options. Log files are located in the app.getPath('userData') directory
        file: {
            // Options passed down to bunyan 'rotating-file'
            period: '12h',
            count: 14,
        },
        // options applied once devMode is enabled
        devMode: {
            level: 'debug',
            file: {
                level: 'debug',
            },
        }
    },
});

app.on('ready', () => {
    shell.createWindow();
    // Logger can be found here
    const { log } = shell;
    // The main window is accessible through properties
    console.log(shell.window);
});

Current Tags

  • 1.1.0                                ...           latest (a year ago)

10 Versions

  • 1.1.0                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (6)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |