Prevent multiple tray icons in Node Webkit? - node.js

Is there a way to check if a tray icon already exists for given app in Node Webkit (on OSX)?
My problem looks like this:
Code used to create tray icon:
// Create a tray icon
if (os_platform === 'darwin'){ //better icon for windows, correct size for mac
var tray = new gui.Tray({ title: '', icon: 'icon-mac.png', tooltip: 'R' });
}
else {
var tray = new gui.Tray({ title: '', icon: 'icon-win.png', tooltip: 'R' });
}

This does the trick.
window.onbeforeunload = function(){
tray.remove();
};

I have just fixed this by using this:
win.on('restore', function() {
console.log('removing tray.');
tray.remove();
});
After analyzing the behavior I noticed that you can unminimize the app by clicking it on the taskbar. This listens for that as well.

Related

Electron - Change Menu Bar in Different Windows

In my electron app, a user can open different windows.
I have the menu initialized when the main window is created like so:
const menuContents = Menu.buildFromTemplate(menuTemplate(mainWindow))
Menu.setApplicationMenu(menuContents)
However, when a user clicks a link and opens a new window, this same menu bar still appears in that window. I would like to change it and/or completely remove it.
How would I do that?
It's possible:
Example for Menus
In Renderer or Main Proccess make two functions with menu templates like this:
main menu
function createMenu(){
var menu = Menu.buildFromTemplate([
{
//your menu items
}
])
Menu.setApplicationMenu(menu);
}
second menu
function createMenuwin(){
var menu = Menu.buildFromTemplate([
{
//your other window menu items
}
])
Menu.setApplicationMenu(menu);
}
when you call the second window : Example open an image
function openIMG(path){
win = new BrowserWindow({
width: 800,
height: 550,
frame: true,
vibrancy: 'medium-light',
});
win.loadFile(path);
createMenuwin();
win.on('close', () =>{
createMenu();
})
}
when the second window is open create an app menu with
createmenuwin()
when the second window is closed call the event:
win.on('close', () =>{})
inside the close event of the second window, call:
createMenu();

Show cytoscape qtip on right click

I am trying to show a qtip when the user right-clicks on a node using the following code:
cy.on("cxttap", "node", function (evt) {
evt.cyTarget.qtip({
content: {
text: "test"
}
});
});
When I right-click a node no tooltip is shown, but as soon as I left-click on the same node then the tooltip shows.
I have made sure that cytoscape-qtip is working and I have not added any event handlers for the click or tap events.
qTip handles events itself, so you have to specify something like cxttap for the show event. If you want to write your own listeners, like you have above, then your call to qtip will need a call to the qtip API to manually show.
Set show property for right click
cy.elements().qtip({
content: '<p> [SUM Outgoing call :42, THUVAPPARA</p><button id="add-to-report" class="btn btn-success">Add to report</button><br><button class="btn btn-danger">Remove</button>',
show: { event: 'cxttap' },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});

YUI scrollView arrows not working after page scroll

I made use of YUI scrollview to make a menu construction with touch, flick and arrows. However, for some reason the arrows have a bug.
When the page is loaded the first time it works fine, however, as soon as the user scrolls the page with its mouse of with swipe (on tablet or phone) the arrows do not work any more. When I swipe the content, the arrows magically come to live and work again.
This is the script I use for scrollView:
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
You can find a demo here:
http://www.circlesoftware.nl/demo/test.html
To reproduce:
- load the page
- press the right button (do not do anything else)
- scroll down with your mouse
- arrows are broken now
To fix:
- just grap the content of the slider, swipe it
- try the left or right button and they work again
Does anyone have ANY idea what might be the problem here?
Problem came from the library itself it seems, was using 3.7.3, upgrade it to 3.9.1 and seems to be solved now:
http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js

Sencha Touch: how to implement a left menu with layout right

I'm new using Sencha Touch 2, and I've started developing a Tablet App. I'm using Sencha Architect for design and write the code, and my app has a card layout with "left-side" and "right-side". On the left I have a main menu with some buttons. This menu is all time on the left. On the right side, I want to change the views depending what menubutton was clicked and where the user want to go (It will have more than 3 levels navigation after every button click).
My problem now is "How to change the views?". Until now, I had a Navigation.View on the right, and I has using this.getPanelFrame().push(view); method. I have problems with toolbars when a load something into navegation.view, and I know how to create views and push, but after thant I dont know how to load this views again.
I Link too an image where you can the structure of my components. My main doubt is: do I have to use a navigation.view as a "frame" to load inside other views? How to change an load others? Any alternatives?
Thanks a million"
CONTROLLER
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
panelFrame: '#PanelFrame'
},
control: {
"button#btnclientes": {
tap: 'onBtnclientesTap'
},
"#btnpedidos": {
tap: 'onBtnpedidosTap'
}
}
},
onBtnclientesTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesListView");
this.getPanelFrame().push(view);
},
onBtnpedidosTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesNewView");
this.getPanelFrame().push(view);
}
});
why dont you create a container in the right side.
and then in the items: call each view with the xtype
{
xtype: 'container',
items: [
{
xtype: 'view1',
id: 'Cview1',
hidden:true,
},
{
xtype: 'view2',
id: 'Cview2',
hidden:true,
},
{
xtype: 'view3',
id: 'Cview3',
height:'auto',
hidden:true,
}]
and then in the handler of the button you just hide the other views and show your selected view like:
{
xtype: 'button',
handler:function(){
Ext.getCmp('Cview1').hide();
Ext.getCmp('Cview2').hide();
Ext.getCmp('Cview3').show();
}
}

where is my window title dude?

everyone, my question is very simple:
I'm using Android emulator.
I try to create a simple empty window with title (so simple))
But..... Why doesn't this code works properly:
Ti.UI.setBackgroundColor('#1E563F');
var win1 = Ti.UI.createWindow({
title: 'HOY',
exitOnClose: true
});
win1.open();
I see on my emulator empty window with title === 'name of my project' but != 'HOY', why is that?
And if i add string
navBarHidden: true
I have empty, BLACK window... WTF... I expected at least window with color == #1E563F...
You need to create window as:
var win1 = Ti.UI.createWindow({
title: 'HOY',
exitOnClose: true,
navBarHidden: false,
backgroundColor: '#1E563F'
});

Resources