We Keep Coding

How can I check if app is being minimized from minimize icon or by clicking taskbar app icon?

I have added functionality where the app hides in the background on window.minimize. But I want to hide it only when the minimize button is clicked and minimize when clicked from the taskbar.
win.on("minimize", function(event, args) {
event.preventDefault();
win.hide();
console.log("hide min");
win.resizable = true;
win.resizable = false;
});

minimize seems to fire in both cases, and there doesn't appear to be a standard way of catching one, but not the other.
However, when you click on the taskbar icon, the blur event fires slightly before the minimize event, but if you click on the minimize button, the minimize event fires first.
This isn't the most robust solution, because of the timeout guess I had to make, but it seems to work fine:
mainWindow.on("minimize", () => {
console.log(`minimized via ${blur ? "taskbar" : "titlebar"}`);
});
let blur = false;
mainWindow.on("blur", () => {
blur = true;
setTimeout(() => {
blur = false;
}, 100);
})
However, what behavior do you want went hitting the hotkey Windows+DownArrow? Currently, it will count that as the titlebar case and will hide the window.
If you care about that case, you might have to hook into before-input-event and detect those key presses.
There's potentially another solution to hook into Windows messages, but that's uglier and only works on Windows.

Why do blur event not working?

This are the code that I currently have:
var interval;
function printPageState() {
console.log("active");
}
window.onfocus = function() {
console.log("focus");
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
window.onblur = function() {
console.log("blur");
clearInterval(interval);
};
window.onscroll = function() {
console.log("scroll");
if (!document.hasFocus())
document.getElementById("some-id").focus();
clearInterval(interval);
interval = setInterval(printPageState, 2000);
};
I'm attempting to create a user attention checker/page-pinging like functionality. the checker currently has an event handler for blur, focus, and scroll event.
And I'm having the problem that was stated above when the following stuff are met.
Your browser had some viewable part on the browser view port which make it possible to scroll even if the page was not in focus.
The page was out of focus and or blur event was already fired.
I want to stop the interval but the blur event was not firing anymore as the browser isn't focus so I tried to force the focus state on one of the element but no locky it wasn't working.
Do the following issue to replicate the issue:
Open the page in minimized browser > then focus out the page.
Scroll on the visible browser view port but do not click (which won't make focus state true).

Cordova iOS: Click on custom auto suggest not recognized cause keyboard closes

in my Cordova App I have a problem on iOS devices and I have no idea how to solve.
I have a custom auto-suggest which shows up below an input field while typing. All is contained in a dialog box with "position: fixed;".
Autocomplete is an unordered list. Click on < li > Element should place the selected text into the input.
The problem is, when user clicks on the li, the input loses focus, the keyboard disappears and the whole fixed dialog box "jumps" down and the click event is not recognized.
It is recognized when the keyboard already IS closed.
I tried several workarounds, like giving focus back to input field immediately after blur. But it does not help. Keyboard closes and opens instead of just keeping opened.
Any Ideas how to solve?
Here is a video showing the behaviour. It is recorded on the iOS Simulator but same behaviour on real iPhone 6s.

I have found a solution now. As I said the click event is not triggered when the keyboard hides, but a touchstart event is triggered.
So I did a workaround, looking for touchstart event followed by a blur event. If the touchstart-target does not receive a click event within a given time, I will trigger one. This works on my test iPhone 6s.
Here is the code:
var iosTapTarget=null;
if (device.platform === 'iOS') {
js.eventListener(document.body).add('iosTap', 'touchstart', function (e) {
iosTapTarget = e.target;
js.eventListener(iosTapTarget).add('iosTapClick', 'click', function(e) {
// when the target receives a click, do not trigger another click
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
});
// after short time unset the target
window.setTimeout(function () {
if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
iosTapTarget = null;
}, 600)
});
// on each input fields listen for blur event and trigger click event on element received touchstart before
var blurableElements = document.querySelectorAll('input[type=text],input[type=email],input[type=password],textarea');
for (var j = 0; j < blurableElements.length; ++j) {
js.eventListener(blurableElements[j]).remove('iosBlur', 'blur');
js.eventListener(blurableElements[j]).add('iosBlur', 'blur', function () {
window.setTimeout(function() {
if (iosTapTarget) {
js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
js.triggerEvent(iosTapTarget, 'click');
}
}, 50);
});
}
}
PS: Event handling comes from my own JS "framework" js.js available here: https://github.com/JanST123/js.js
But you can use vanilla JS event handling or jQuery event handling too, of course.

Javascript scrolling without clicking [duplicate]

I have long vertical list of links that user can scroll through, and I need to prevent triggering a click event (touch) on this links if user scrolls.
In current scenario, when user start scrolling by tapping over the link, it also triggers a click on link. Which is obviously bad. So, is there any way to prevent such a behavior?

Working fiddle
We could use a flag in this case to prevent click event just during the scroll and enable it after the scroll stop.
To listen on scroll stop you could use jQuery’s data method that gives us the ability to associate arbitrary data with DOM nodes and using setTimeout() function that will check every 250ms if the user still trigger the scroll, and if not it will change the flag :
var disable_click_flag = false;
$(window).scroll(function() {
disable_click_flag = true;
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
disable_click_flag = false;
}, 250));
});
$("body").on("click", "a", function(e) {
if( disable_click_flag ){
e.preventDefault();
}
});
Hope this helps.

Cannot hide the windows with 2nd click

I click on the button in red rectangle to show the windows. Now, if want want to close the windows, i just click on other part of the grey bar. What I want to do is to modify the code to click the button in red rectangle 2nd time to close the windows, but it does not work.
I have put the html and related files here.
The main html is chat.html, where the main javascript lies in
assets\plugins\emojiarea\jquery.emojiarea.js
Following is portion of the code:
EmojiMenu.prototype.hide = function(callback) {
if (this.emojiarea) {
this.emojiarea.menu = null;
this.emojiarea.$button.removeClass('on');
this.emojiarea = null;
}
this.visible = false;
this.$menu.hide();
};
EmojiMenu.prototype.show = function(emojiarea) {
if (this.emojiarea && this.emojiarea === emojiarea) return;
this.emojiarea = emojiarea;
this.emojiarea.menu = this;
this.reposition();
this.$menu.show();
this.visible = true;
};
I try to use this.visible to detect the whether the windows has been opened, if yes, then close it, but it does not work out. Is there a possibility to make the windows closed when I click the button in red rectangle 2nd time?

So I went through the plugin. This piece of code:
$body.on('mouseup', function() {
self.hide();
});
is why you couldn't use this.visible to check if it was already open or not,because every time you click on the button too this mouseup is triggered effectively hiding and then showing the popup.
Right after this:$button.on('click', function(e) {
EmojiMenu.show(self);
e.stopPropagation();
});Add this:$button.on('mouseup', function(e) {
e.stopPropagation();
});This will prevent the bubbling of the mouseup event from the button itself.Now you can use "this.visible to detect the whether the windows has been opened, if yes, then close it."