Cannot drag file onto Electron app dock icon - macos

I want to try to build out a simple Electron based macOS app that let's a user drag a file to the app's dock icon and then does something with that file.
However I cannot find a way to drag a file to the dock icon and detect that event. I notice that when I hover over the dock icon with the file it doesn't look like I can drag it there (the icon doesn't go darker as it does with with Safari or Notes).
I followed the official Quick Start guide to create a minimal electron app for starter.
I found little guidance on what a would like to do but came up with the following code that is able to open the window, load my blank index.html but doesn't achieve anything drag related.
main.js
const { app, BrowserWindow } = require("electron");
/* Create and open the App */
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: "hidden",
});
//win.loadURL("https://electronjs.org");
win.loadFile("index.html");
win.show();
process.argv.forEach(handleFile);
console.log("window opened");
console.log(process.argv);
};
/* Drag file unto App icon */
app.on("open-file", handleFile);
app.on("open-url", handleFile);
// You can get the dragged file's path like this
if (process.argv.length >= 2) {
const filePath = process.argv[1];
handleFile(filePath);
}
// If you only allow a single instance of your application to be running
// you should use the 'second-instance' event to handle the case if your app is already running
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
} else {
app.on("second-instance", (event, argv, workingDirectory) => {
// Someone tried to run a second instance
// Handle argv here
if (argv.length >= 2) {
const filePath = argv[1];
handleFile(filePath);
}
});
}
function handleFile(filePath) {
// handle the file as you want
console.log("handleFile", filePath);
}
Thanks for any guidance in a good direction!
Aaron

Related

How to keep newly opened macOS window in front & prevent being hidden with SwiftUI?

I am using SwiftUI to create a macOS app and need to create a new window that opens with an image inside of it, which I am successfully accomplishing currently.
However, if I click back on the main app window, the newly opened window goes to the background and is hidden (normal behavior), however, I want the newly opened window to always be on top of the main app window AFTER if I click back on the main application window.
The reason is that the new window (WindowGroup) opened contains an image with the information I need to enter in the main app so if it goes behind the main app window, I can't see the image anymore.
Is there a WindowGroup modifier I can implement so that after the WindowGroup("imageView") window opens, it is always on top & how can I integrate into my existing code?
Thank you!
#main
struct customApp: App {
#StateObject var session = SessionStore()
var body: some Scene {
WindowGroup("mainView") {
ContentView().environmentObject(session)
}.handlesExternalEvents(matching: ["mainView"])
WindowGroup("imageView") {
ImageView(url: SessionStore.imageUrl)
}.handlesExternalEvents(matching: ["imageView"])
}
}
View that opens new window
struct ImageViews: View {
#Environment(\.openURL) var openURL
var body: some View {
HStack {
WebImage(string: idUrl)
.onTapGesture {
guard let url = URL(string: "app://imageView") else { return }
openURL(url)
}
}
}
}
Set the window.level to always on top .floating. You can access it via NSApplication.shared.windows.
Button("Window level") {
for window in NSApplication.shared.windows {
window.level = .floating
}
}

How can i display System Tray or App Icon with electron

Iam trying to add a App Icon to my Electron.Net Application but the Icon isn't Displayed in the Taskbar / System Tray,
What i did:
in electron.manifest.json i have
"linux": {
"icon": "../../../wwwroot/build/icons/256x256.png",
"category": "Office"
},
in the Startup.cs
var window = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions{
Width = 1280,
Height = 756,
Fullscreenable= false,
HasShadow= true,
AutoHideMenuBar=true,
Maximizable= false,
Icon = "../../../wwwroot/build/icons/32x32.png"
});
First i checked if the filepath is right and yes its right, i tryed different folders, different filenames but nothing worked.
I hope you guys can help me.
To create a tray icon, add this code on your app startup (Startup.cs in your case, Program.cs for NET6) before app.Run();:
var TrayMenu = new MenuItem[]
{
new MenuItem{
Label = "Show window",
Click = () => { Electron.WindowManager.BrowserWindows.First().Show(); }
},
new MenuItem{
Label = "Hide",
Click = () => { Electron.WindowManager.BrowserWindows.First().Hide(); }
},
new MenuItem{
Label = "Quit",
Click = () => { Electron.App.Exit(0); }
}
};
Electron.Tray.Show("/your/logo/here.png", TrayMenu);
And as to it not showing in taskbar you probably disabled it somewhere in your code, provide more info.
Perhaps it has something to do with your disabled fullscreen/resize thing in Startup.cs?

Handle Squirrel's event on an Electron app

These days I'm toyng around with Electron to build a small native app for Windows and I'm using Grunt Electron Installer to create an installer for my application.
The installer is created successfully but I don't know how ho handle Squirrel's events inside my app, as stated in the docs I've added this to the entry point of my app:
var handleStartupEvent = function() {
if (process.platform !== 'win32') {
return false;
}
var squirrelCommand = process.argv[1];
switch (squirrelCommand) {
case '--squirrel-install':
case '--squirrel-updated':
// Optionally do things such as:
//
// - Install desktop and start menu shortcuts
// - Add your .exe to the PATH
// - Write to the registry for things like file associations and
// explorer context menus
// Always quit when done
app.quit();
return true;
case '--squirrel-uninstall':
// Undo anything you did in the --squirrel-install and
// --squirrel-updated handlers
// Always quit when done
app.quit();
return true;
case '--squirrel-obsolete':
// This is called on the outgoing version of your app before
// we update to the new version - it's the opposite of
// --squirrel-updated
app.quit();
return true;
}
};
if (handleStartupEvent()) {
return;
}
But I don't know what to do inside this switch statement to, for example, create shortcuts for my application. Actually I don't even know if this switch works at all because when I install (or uninstall) my application it get launched and never quits.
Any help is appreciated!
You could handle each Squirrel event and create shortcuts:
case '--squirrel-install':
target = path.basename(process.execPath);
updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
var createShortcut = updateDotExe + ' --createShortcut=' + target + ' --shortcut-locations=Desktop,StartMenu' ;
console.log (createShortcut);
exec(createShortcut);
// Always quit when done
app.quit();
return true;
case '--squirrel-uninstall':
// Undo anything you did in the --squirrel-install and
// --squirrel-updated handlers
target = path.basename(process.execPath);
updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
var createShortcut = updateDotExe + ' --removeShortcut=' + target ;
console.log (createShortcut);
exec(createShortcut);
// Always quit when done
app.quit();
return true;

Have embedded images open with FancyBox, not in new window

This section of code in my /js/global.js file activate each image to open in a new window when clicked. Is it possible to alter this code to have each open in a FancyBox instead? I have downloaded a FancyBox plugin for a Vanilla forum I am running, and it currently only targets images embedded in posts After You Click On The Post Itself. On the main page, clicking on an image opens a new window.
// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
var props = ['Width', 'Height'], prop;
while (prop = props.pop()) {
(function (natural, prop) {
jQuery.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
}
jQuery('div.Message img').each(function(i,img) {
var img = jQuery(img);
var container = img.closest('div.Message');
if (img.naturalWidth() > container.width() && container.width() > 0) {
img.wrap('');
}
});
// Let the world know we're done here
jQuery(window).trigger('ImagesResized');
});
Add an specific class to your wrapped images, modifying this line
img.wrap('');
... into this :
img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');
Then bind fancybox to that selector (".fancybox") in a custom script like :
$(".fancybox").fancybox();
This assumes that you have properly loaded the fancybox js and css files.

Firefox extension, opening a local file in a new foreground tab from menu

I am learning how to program Firefox extensions. I have created a new menu and when the menu item is clicked, I want a new tab to be opened, in the foreground, containing a local file contained within the contents directory.
For example:
MENU -> Item1
When Item1 is selected, I want a new tab to open in the foreground containing what is located in /myextension/content/content.html.
Where can I find out how to do this?
For clarity, I can get the local file to open in a new tab, I just do not know how to get to open in a new focused tab.
I use the following function to open a tab, make sure it hasn't already been opened and switch focus to it:
function OpenAndReuseOneTabPerURL(url)
{
var wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
var browserEnumerator = wm.getEnumerator("navigator:browser");
// Check each browser instance for our URL
var found = false;
while (!found && browserEnumerator.hasMoreElements())
{
var browserWin = browserEnumerator.getNext();
var tabbrowser = browserWin.gBrowser;
// Check each tab of this browser instance
var numTabs = tabbrowser.browsers.length;
for (var index = 0; index < numTabs; index++)
{
var currentBrowser = tabbrowser.getBrowserAtIndex(index);
if (url == currentBrowser.currentURI.spec)
{
// The URL is already opened. Select this tab.
tabbrowser.selectedTab = tabbrowser.tabContainer.childNodes[index];
// Focus *this* browser-window
browserWin.focus();
found = true;
break;
}
}
}
// Our URL isn't open. Open it now.
if (!found)
{
var recentWindow = wm.getMostRecentWindow("navigator:browser");
if (recentWindow) {
// Use an existing browser window
recentWindow.delayedOpenTab(url, null, null, null, null);
} else {
// No browser windows are open, so open a new one.
window.open(url);
}
}
}
Use it like:
OpenAndReuseOneTabPerURL("http://yoururl.com");

Resources