From 40813b1bb637e5f895028c3cdeae1413a002af03 Mon Sep 17 00:00:00 2001 From: tigerbot Date: Fri, 21 Apr 2017 13:24:57 -0600 Subject: [PATCH] added drag-and-drop handling --- drag-drop-main.js | 55 +++++++++++++++++++++++++++++++++++++++++++++ drag-drop-render.js | 43 +++++++++++++++++++++++++++++++++++ index.html | 13 ++++++----- index.js | 21 ++++++++++++----- 4 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 drag-drop-main.js create mode 100644 drag-drop-render.js diff --git a/drag-drop-main.js b/drag-drop-main.js new file mode 100644 index 0000000..2dc802d --- /dev/null +++ b/drag-drop-main.js @@ -0,0 +1,55 @@ +var electron = require('electron'); +var app = electron.app; +var ipc = electron.ipcMain; + +var argv = sliceArgv(process.argv); +var win; +function init(window) { + if (win) { + console.error("can't initiliaze drag-and-drop multiple times"); + return; + } + win = window; + + ipc.once('ipcReady', function () { + app.ipcReady = true; + processArgv(argv); + }); +} + +app.on('open-file', onOpen); +app.on('open-url', onOpen); +function onOpen(e, filename) { + e.preventDefault(); + + if (app.ipcReady) { + processArgv([ filename ]); + } else { + argv.push(filename); + } +} +function sliceArgv(argv) { + var count = 1; + // We need to determine if we were run using electron or as a system installed app. + if (argv[0].search('electron') >= 0) { + count += 1; + } + return argv.slice(count); +} + +function processArgv(argv) { + var files = []; + argv.forEach(function(arg) { + if (arg.substr(0 ,2) == '--') { + console.log('received argument', arg); + } else { + files.push(arg); + } + }); + + if (files.length > 0) { + win.webContents.send('files', files); + } +} + +module.exports.init = init; diff --git a/drag-drop-render.js b/drag-drop-render.js new file mode 100644 index 0000000..642ee05 --- /dev/null +++ b/drag-drop-render.js @@ -0,0 +1,43 @@ +var electron = require('electron'); +var ipc = electron.ipcRenderer; + +function handleFiles(files) { + if (!Array.isArray(files)) { + files = [ files ]; + } + + document.body.appendChild(document.createElement('br')); + files.forEach(function (name) { + var div = document.createElement('div'); + div.innerHTML = name; + document.body.appendChild(div); + }); +} + +// Need to prevent default for some of the document drag-and-drop events to be able +// to properly get events. This doesn't explain why I need to preventDefault on all +// the events (or whichever combination is actually needed - haven't really spent +// time trying different combinations), but it is what put me down this path. +// https://discuss.atom.io/t/possible-to-get-local-filesystem-path-from-drag-and-drop-file/28858 +function preventDefault(ev) { + ev.preventDefault(); +} +var events = ['drag','dragend','dragenter','dragexit','dragleave','dragover','dragstart','drop']; +events.forEach(function (event) { + document.addEventListener(event, preventDefault); +}); + +document.body.addEventListener('drop', function (ev) { + var files = Array.prototype.map.call(ev.dataTransfer.files, function (file) { + return file.path; + }); + + if (files.length > 0) { + handleFiles(files); + } +}); + +ipc.on('files', function (e, files) { + handleFiles(files); +}); +ipc.send('ipcReady'); diff --git a/index.html b/index.html index ef06b98..3b96b30 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,14 @@ -

Hello World!

- We are using node , - Chrome , - and Electron . + + - +
+

Hello World!

+ We are using node , + Chrome , + and Electron . +
diff --git a/index.js b/index.js index 3deeae5..dabd020 100644 --- a/index.js +++ b/index.js @@ -25,16 +25,18 @@ function createWindow () { var menu = require('./menu'); menu.init(win); - // and load the index.html of the app. - win.loadURL(url.format({ - pathname: path.join(__dirname, 'index.html'), - protocol: 'file:', - slashes: true - })); + var drag = require('./drag-drop-main'); + drag.init(win); // Open the DevTools. win.webContents.openDevTools(); + win.webContents.on('will-navigate', function(e) { + // Prevent drag-and-drop from navigating the Electron window, which can happen + // before our drag-and-drop handlers have been initialized. + e.preventDefault(); + }); + // Emitted when the window is closed. win.on('close', function (e) { if (process.platform !== 'darwin') { @@ -50,6 +52,13 @@ function createWindow () { win.hide(); } }); + + // and load the index.html of the app. + win.loadURL(url.format({ + pathname: path.join(__dirname, 'index.html'), + protocol: 'file:', + slashes: true + })); } app.setName('ElectronDemo');