[Tricky but Resolved] '.userViews' click events

[chef 3745]

I'd like to ask about this function in the tabbedPage.js

function initEvents(view, instance) {

        // Catch events on the view headers
        var userViewNames = view.querySelector('.userViewNames');
        userViewNames.addEventListener('click', function (e) {

            var elem = parentWithClass(e.target, 'btnUserViewHeader');

            if (elem) {
                scrollHelper.toCenter(userViewNames, elem, true);
                instance.setFocusDelay(view, elem);
            }
        });

        userViewNames.addEventListener('focus', function (e) {

            var elem = parentWithClass(e.target, 'btnUserViewHeader');

            if (elem) {
                scrollHelper.toCenter(userViewNames, elem, true);
                instance.setFocusDelay(view, elem);
            }
        }, true);
}

Here we're talking about focusing on the userViews at the top of the theater page, but it's also talking about click events.

 

I find this strange because clicking on the userViews doesn't do anything (except it looks like centers the scroll window).

 

 

 I want to attach functions to those click events

 

Mainly, opening "All Movies"/"All Series" libraries depending on the button.

 

Here is my actual question then,

 

I'd like to use code this (which opens the movie.html):

 
var apiClient = connectionManager.currentApiClient();
Emby.Page.show(pluginManager.mapRoute(skinInfo.id, 'movies/movies.html?serverId=' + apiClient.serverId() + '&tab=0&parentId=' + parentId));

and bind it to the userViews at the top of the page.

 

 

What does (e) return in the click event in the tabbedPage code?

userViewNames.addEventListener('click', function (e) {

Can I use (e) to figure out what userView was selected?

 

Sorry for the long winded question.

 

Ben

 

 

Edited August 13, 2017 by chef

[Luke 37046]

e is the event object:

 

https://developer.mozilla.org/en-US/docs/Web/API/Event

[chef 3745]

So I could use something like:

 

e.id

 

To get the id of the button pressed on the page?

[chef 3745]

I figured this out, and here is how you do it!

 var userViewNames = view.querySelector('.userViewNames');
        userViewNames.addEventListener('click', function (e) {

            var elem = parentWithClass(e.target, 'btnUserViewHeader');
            //alert(elem.querySelector('*[data-id=\'' + itemId + '\']');
            var apiClient = connectionManager.currentApiClient();
            
               // That took a while to figure out! 
               // Data-Type holds a library type, but it doesn't match the viewNames
               // So use a switch to figure which one it is just ike in home.js
               
               var type = elem.getAttribute('data-type');
                var viewName = '';

                switch (type) {
                    case 'tvshows':
                        viewName = 'tv';
                        break;
                    case 'movies':
                        viewName = 'movies';
                        break;
                    case 'channels':
                        viewName = 'channels';
                        break;
                    case 'music':
                        viewName = 'music';
                        break;
                    case 'playlists':
                        viewName = 'playlists';
                        break;
                    case 'boxsets':
                        viewName = 'collections';
                        break;
                    case 'livetv':
                        viewName = 'livetv';
                        break;
                    default:
                        viewName = 'generic';
                        break;
                }       
                // ignore generic because it doesn't link to anything (plugins)                    
               if(view != 'generic'){              
            Emby.Page.show(pluginManager.mapRoute(skinInfo.id, viewName + '/' + viewName + '.html?serverId=' + apiClient.serverId() + '&tab=0&parentId=' + elem.getAttribute('data-id')));
               }

Someone is going to want to know this stuff eventually, and this thread will be gold for them.

 

For instance, the 'data-type' of the buttons don't match the userViews, so you have to use a 'switch' to sort it out.

 

That code originally happens in  home.js, and now we know why!

Edited August 13, 2017 by chef