coolaj86/electron-demo.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added drag-and-drop handling

Browse Source
This commit is contained in:
tigerbot 2017-04-21 13:24:57 -06:00
parent 56c09d69a7
commit 40813b1bb6
4 changed files with 121 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
drag-drop-main.js Normal file
View File

@ -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;

43
drag-drop-render.js Normal file
View File

@ -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');

13
index.html
View File

@ -4,11 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<h1>Hello World!</h1> <script>require('./notifications')</script>
We are using node <script>document.write(process.versions.node)</script>, <script>require('./drag-drop-render')</script>
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>require('./notifications.js')</script> <div>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</div>
</body> </body>
</html> </html>

21
index.js
View File

@ -25,16 +25,18 @@ function createWindow () {
var menu = require('./menu'); var menu = require('./menu');
menu.init(win); menu.init(win);
// and load the index.html of the app. var drag = require('./drag-drop-main');
win.loadURL(url.format({ drag.init(win);
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools. // Open the DevTools.
win.webContents.openDevTools(); 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. // Emitted when the window is closed.
win.on('close', function (e) { win.on('close', function (e) {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
@ -50,6 +52,13 @@ function createWindow () {
win.hide(); 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'); app.setName('ElectronDemo');