Develop Reference

Need a method to capture javascript events in WinForm webbrowser control

I have a WinForms app that uses a .NET webbrowser control. What I need to do, is wire up an event on the WinForms side to fire when a value is set (via javascript) in the loaded HTML page. I had success doing this with an onclick event of a button, but I can't seem to get it to work with a custom event. I don't know if this is a limitation in what the browser control can attach to event wise.
So essentially, I need that when a JS function is called in the HTML page and sets a value of a hidden input element (or it could be a regular input that I style to be hidden), I need to know that in WinForms. If it helps, I am using browser flags in this application to emulate IE11 instead of the default IE9 engine. The HTML page loaded is also mine so I can modify it any way needed to make this work properly. I would just use the onclick events of the buttons, but this is a gmaps integration where there can be upwards of 2000 buttons generated (one per marker placed) so it seems like a huge waste of resources to wire up 2000 onclick events when any of those button clicks only modify 4 input fields with the data I care about.
This project happens to be in VB.NET, but C# solutions would be fine as well. They can be transcoded or if the solution uses C# specific features, we can move this to a separate DLL and reference it.

After spending a lot of time on this today, I found a solution. It isn't a direct solution to the problem I posted, but it got me to where I needed to be. I am still interested in an answer to the original problem if anyone has one, but for now, what I found I could do was to create a class in .NET that I could assign to the ScriptingObject of the browser control and then call window.external.myFunctionName, where myFunctionName is a function within the .NET class. This works great for my specific problem, but would not work if I didn't also control the HTML page I was consuming with the browser. That is why I am still interested in alternate solutions if anyone has one. Thanks.

Angular issue with Drag and Drop

I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2

After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.

For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz

Send keys from an electron application?

The only thing I can find related to this is sendInputEvent.
There's a couple problems with it.
It seems that it can only be called from the main window thread. I need this to happen when someone clicks a button in the application.
It doesn't even seem to work at all even from the main window thread. Example, this doesn't seem to do anything:
code:
setTimeout(function() {
win.webContents.sendInputEvent({keyCode: 'Tab', type: 'keyDown', modifiers: ['alt']});
}, 3000);
I want to send some key strokes after the alt-tab as well, and the API says that the function only works if the window is focused.
It looks like RobotJS might work for this, but it seems a bit heavy-handed for something that is one line in other languages (e.g. SendKeys.Send). Also it looks like it requires building it manually. All in all I'm trying to keep my absolute dependency count to a minimum if possible.
Any ideas?

I agree RobotJS is a beast for that task and instead I would go for node-key-sender
I would also not send the ALT-TAB keystroke and instead would use window.hide() or window.minimize. You can read more here: Electron API docs for minimize() and hide()
It has all the features you need and would work even after you unfocus from your electron window. The only caveat is that it uses Java Runtime behind the scenes

prevent default browser action but allow library code in meteor

I converted my brewery's website to use meteor. In the conversion process I have run into a bug in the integration of some library code. The original site uses lightbox2 http://lokeshdhakar.com/projects/lightbox2/ to pop up a modal of a graphic we designed.
In the meteor version the modal looks like its about to load but then instead just navigates directly to the image asset the modal is supposed to display. Click 'View the Brew Diagram' at http://twbrewing.meteor.com/beers to see the problem in action.
To me it looks like the library code is working but for some reason does not prevent the default browser action. I tried using a preventDefault() on the click event for that, but then nothing happens at all. Ideas?

Wrap the HTML in {{#constant}}...{{/constant}} and run any lightbox code in a template render function, e.g.
Template.pictures.rendered = function() {
lightBoxInit();
}
I don't actually know what the lightbox function is called... it's either something that they will tell you in the docs to run on pageload, or that is wrapped in a $(document).ready() call in the source. Even better is if there's an API call to run on the elements directly (something like $('img').lightbox() or $('img').each(function(el) { lightbox(el) }).
Sorry I'm not so familiar with lightbox but this is the strategy you need and what you need to look for :)
Note that the rendered function is called on rerendering too. This is fine for most libraries but if you notice any strange behaviour you'll need to add some logic to ensure that the relevant links are not processed twice (either by using a .data boolean or by destroying and recreating the wrapper).

How do I find mysteriously bound Javascript events

I've got a pretty big complicated HTML5 app I'm working on (backbone, marionette, jQuery, underscore, handlebars, bootstrap, etc) and deep within the app is a modal popup with a form in it.
When the modal pops open, the first time you click on any form field the form field de-selects itself. After that first click you can use the form as normal. When the app is ultimately loaded into an iFrame in production (don't ask) the first time you click on any form field or hover over any button, the whole page scrolls down until the top of the div element the form is within inside of the modal is at the top of the page, but after it does this once, it doesn't do it again (confused yet? Yeah, it's complex and layered).
I'm at a loss for how to even begin debugging this problem (thousands of lines of code, two handfuls of libraries).
I tried these:
console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ', $._data($('body')[0], 'events'));
But that yielded nothing.
Since this is library upon library upon framework upon framework I'm not even sure where to begin trying to find the thing that has obviously bound itself to these fields, or even if it is the fields that are being bound to or something else entirely...
So, any suggestions on good strategies for how to debug a mysteriously bound Javascript event (with multiple JS libraries and frameworks, which can't be just commented out until the problem resolves because they are relied upon to even get the HTML to appear on the page in the first place)?
And, unfortunately I can't do a jsfiddle or something because, as I said, this is deep deep within the app and I'd basically have to re-create the app inside of JSFiddle (impossible) to link to an example (and, it's not in an external facing site, so, I can't just link to it live in production).
I'm stumped.

Here's how I do it with Chrome.
Ctrl-Shift-J to open Javascript console.
Click the little magnifying glass in bottom left, it lets you select an element with your mouse.
Click an element on your page (it will highlight as you go to it.) It will highlight in the DOM at the bottom and show a bunch of properties on the bottom right.
At the bottom right go all the way past the CSS attributes and stuff down to event listeners:
Pick the event listener you're interested in. It will show you the bound function as well as the exact line of code in what script would be executed. That should tell you what library is doing your crazy stuff.
I find the Chrome debugger to be much more powerful and fast (doesn't lag) compared to FireBug and the IE developer tools. It's highly recommended :)