Dealing with Javascript events applicable only for certain content - javascript

I'm having trouble understanding conceptually what I should do while trying to make my first large Javascript web application.
Depending on which tab a user has selected, I show different content inside a container. The content is more than just text and uses different Javascript functions and events. I am using the Yahoo! UI Library's "TabView" implementation, but the way that this issue should be handled would probably apply to other Tab approaches.
What I was thinking of doing was basically the following:
Create separate modules for each tab (e.g. MYAPP.modules.tabCalendar and MYAPP.modules.tabJournal). When the user clicks on a different tab (or navigates with browser buttons to a previous tab state), I could call MYAPP.modules[oldModule].disable() and MYAPP.modules[newModules].enable(). These functions would subscribe or unsubscribe their custom events (for example, a general click handler attached to the container).
An alternate approach to dealing with events might be to have a single global click handler. If the click is inside the container, then determine which tab is currently selected and send the click event to MYAPP.modules[currentTab].onClick().
Or, the global click handler could fire a Custom Event to which the modules have subscribed since page load, and each module's onClick events will run and determine whether or not they should do anything.
There seem to be a lot of options, but I've been having trouble finding resources that talk about the best ways to do things like this. Am I on the right path? How should I handle this?

Use the events already built into TabView to queue your JS to do things.
http://developer.yahoo.com/yui/tabview/#handlingevents
For tab changes you'll be told the previous/next tabs selected and such which should be more than enough for your JS to figure out what it should do. If you want to write a translation layer that'll look at the events and do something based on it that's fine but it's not strictly necessary.

I'm a bit fuzzy on the problem.
Yes, you should modularize your code.
Have each module setup event handlers on the elements in their respective container.
That's it. YUI TabView handles the tab switching so you don't need to enable/disable anything.

Related

Electron app that is screen overlay catching and passing user actions

so I want to create cross-platform app that will be invisible overlay over whole screen. When user interacts with whatever is under, I want to catch the event (mouse location, mouse click etc) so I can have info of what user attempted and where, and then "pass" the event through. Also, I might wanna display something in overlay as result of the event.
Coming from .NET, I understand how I would hook into mouse events. I also understand that it is possible to simulate user clicks with Mouse class in .NET Core. However I was wondering if this is possible with electron, as I was checking it for cross-platform solution.
I checked some topics (like this click-through discussion) that mostly deal with passing events through overlay, but I am not sure those do this catching-then-passing. So is there something like that and is it actually possible with only electron/nodeJS? Or would I have to use additional libs, and would they be different for Win/Linux/Mac?
I checked at:
Overlay Electron and
electron-overlay-window
but both seem complicated with attaching to game and following the window respectively. I was hoping it is possible and simple somehow.
IMHO, it's is possible, but will require a ton of OS-specific code and possibly some native modules.
I suggest to start with https://www.electronjs.org/docs/api/browser-window#wingetnativewindowhandle and https://www.electronjs.org/docs/api/browser-window#winsetignoremouseeventsignore-options

Automatically check access by keyboard

We are trying to automatically check our web-application for accessibility. We are therefore looking for ways to automatically check if a certain DOM-Element having an onclick event or beeing an interactive element by definition (like a link, button, checkbox or similar) is accessible by keyboard (e.g. by pressing the TAB key multiple times).
Is there a good standard JS solution (or library) for this? If not, any hints on how this could be achieved in JS?
To simplify things, the solution would also work for us, if the elements that need to be accessible by keyboard must be known (e.g. by a list of CSS selectors).

How to intercept button click, run analytics code, and then continue with click function

I have been asked to build code where I can intercept the click of a button, stop the function that fires on the click, run an analytics script, then fire the original click function. I can do this with JS/jQuery on a standard button when using onClick, but this button is built in Angular and using an ng-click instead, so I am a little out of my element.
The button I am trying to intercept is this:
<input id="btn-hero-form-try" class="btn btn-solid" data-ng-disabled="trialForm.buttonDisabled" data-ng-click="trialForm.submitTrialForm('personal')" type="submit" value="Download Free Trial">
A few things make this more difficult: I have no access to the HTML code on the CMS, so I can't add any additional parameters that way, and have been asked not to inject any via script from the page.
I have been playing with the ng-click-interceptor, but have not gotten it to work yet.
Any help, or pointing in the right direction would be greatly appreciated.
You are free to upgrade common directive ngClick - just create your own!
In common words - they share same event but called separately.
It will not affect default, it will be called later so you need to mess with priority, and you will be needed to append it to existing application.
If you are aware of changing existing code - then you need jQuery, selector like [ngClick] to find any clickable item and run asynchronous .on(click) events depending on target content or value of ngClick attribute.
I don't think to sync analytics with callbacks of actual clicks is good idea, due to possible side effects on any step.

Beatport new interface

Beatports new interface has solved a major problem I was looking for the solution too.
Namely, it keeps a "player" interface at the moment and you can browser to different parts of the site (also changing the url) without reloading or interrupting the player.
I cannot for the life of me understand how they have done this, can any of you guys figure it out?!
Many thanks for any replies I get
Looks like they are just using AJAX to load new content but have taken care to make it work and look pretty seamless. You can get better insight into what events are attached to what elements via the Visual Events bookmarklet. Once you find the code that triggers the event, you can run the obfuscated javascript through JSBeautifier to examine it more closely.
Specifically, it looks like they're adding click handlers to all anchor tags, passing off the event if it was triggered with a middle click or modified with a keyboard key, otherwise passing it to a dynamic loader which handles state and other specific conditions like multiple clicks. The seamlessness of it comes from the way they deal with URLs making every page bookmarkable and the browser history so the back and forward buttons work as you would expect on a "normal" site.

best practices for designing a page with lots of events

So I have a grid on a page that displays tablular data, with a checkbox by each row.
So in this situation, when a checkbox is clicked, allot of things will react on the page potentially.
Also, if a button is clicked, again allot of things will potentially react on the page.
So say if someone checks a checkbox, the row should be highlighted, there is a toolbar that will show/hide buttons, etc.
If someone were to click on the toolbar directly, again things similar to when the checkbox was clicked will react.
So what I want to do is this, whenever a checkbox is clicked, or whenever a toolbar button is clicked, I want to 'announce' to anyone who is listening that this event occurred.
I can then, based on the source of the event, react in a similar or different manner.
how to best go about designing things like this?
I think you want to look into using the Observer Pattern. Basically, interested parties subscribe or listen for an event on a publisher, and when the event occurs, the source notifies all the listeners of it.
two things come to mind:
1. event delegation (you don't want to bind to each input on the grid)
look at this link to a great way of doing this while also maintaining a clean code:
by ben nadel
2. using custom events, or even better - use this pub/sub plugin
i have a large grid like this in my app that evolved over time, and manually binding to each input + responding in different ways caused the code to be a "bit" ugly,
It's great that you now where you are going and prepare up front
You could try YUI Custom Events. This allow you to fire off your own "event" which listeners can hear.
I like how it works with jquery, since you can bind an event to many
elements at once.
$("input[type=checkbox]").click(function(e){
alert(e.currentTarget.id);
});
This code would make all checkboxes alert their name. Of course, by using css classes,
you could bind a subset of all checkboxes to create an action.
$("input[type=checkbox].cssClass").click(function(e){
someOtherFunction(e.currentTarget);
});

Categories