Blur background when dialog appears

[chef 3745]

 

 

Add this code to the index.html between script tags.

  var observer = new MutationObserver(function(mutations) {
                    try {
                        var backgroundContainer = document.querySelector('.dialogBackdropOpened');
                        var drawer = document.querySelector('.mainDrawer');
                        var mainAnimatedPages = document.querySelector('.mainAnimatedPages');
                        var skinHeader = document.querySelector('.skinHeader');
                        if (document.querySelector('.dialogBackdropOpened')) {
                            backgroundContainer.style.opacity = 0;
                            drawer.style.filter = "blur(8px)";
                            mainAnimatedPages.style.filter = "blur(8px)"
                            skinHeader.style.filter = "blur(8px)"
                            return;
                        } else {

                            drawer.style.filter = "blur(0)";
                            mainAnimatedPages.style.filter = "blur(0)"
                            skinHeader.style.filter = "blur(0)"
                            return;
                        }

                    } catch (err) {}
                });
                observer.observe(document, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeOldValue: true
                });

[rechigo 293]

Thank you for this. If it isn't too much effort, could you also show a guide on how to do the smooth scrolling/loading that you have as well?

Edited December 30, 2019 by Deathly

[riothamus 51]

This looks really nice!  So this _has_ to be added to the index.html file, as opposed to 'Custom CSS'?  I ask as I figure this modification would be lost on an upgrade.

[chef 3745]

This looks really nice! So this _has_ to be added to the index.html file, as opposed to 'Custom CSS'? I ask as I figure this modification would be lost on an upgrade.

Thanks @@riothamus

Yes, keep a back up. Currently there isn't a away to load js for the entire server and keep it during updates.

 

The css wouldn't know when a dialog was present on the screen, we have to use mutation observer for that.

 

I keep a back up of my script tags, then when the server updated, I just copy paste the script tags back into the index.

Edited December 31, 2019 by chef

[chef 3745]

[rechigo 293]

Sorry I wasn't very specific, I was talking about the script that fades/pops in the cards as they are scrolled into the viewport. If you could post a snippet to that I'd appreciate it.

 

I'd like to make some of my own modifications but I honestly don't have the time nor enough knowledge of vanilla frontend JS to make it happen

[chef 3745]

Sorry I wasn't very specific, I was talking about the script that fades/pops in the cards as they are scrolled into the viewport. If you could post a snippet to that I'd appreciate it.

 

I'd like to make some of my own modifications but I honestly don't have the time nor enough knowledge of vanilla frontend JS to make it happen

 

Gottcha,

 

We'll use the custom CSS as well as some javascript trickery

 

isDashboardPage (Only apply styles etc if the element is in a dashboard Page or not):

               function isDashboardPage(elem) {
                    
                    if (!Element.prototype.matches) {
                        Element.prototype.matches =
                            Element.prototype.matchesSelector ||
                            Element.prototype.mozMatchesSelector ||
                            Element.prototype.msMatchesSelector ||
                            Element.prototype.oMatchesSelector ||
                            Element.prototype.webkitMatchesSelector ||
                            function(s) {
                                var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                                    i = matches.length;
                                while (--i >= 0 && matches.item(i) !== this) {}
                                return i > -1;
                            };
                    }

                    // Get the closest matching element - if the elements parent is one of these, then it is a dashboard page - do what you will.
                    for (; elem && elem !== document; elem = elem.parentNode) {
                        if (elem.matches("#dashboardPage") ||
                            elem.matches('#dashboardGeneralPage') ||
                            elem.matches('#userProfilesPage') ||
                            elem.matches('.metadataConfigurationPage') ||
                            elem.matches('#liveTvStatusPage') ||
                            elem.matches('#pluginsPage') ||
                            elem.matches('.type-interior') ||
                            elem.matches('#dashboardHostingPage')) return true; //There are more pages than this, but its a start.
                    }
                    return false;
                }; //Note:Yes we are traversing the DOM backwards all the way to the top... so load times are affected... minimally.

​

 

Fade movie/TV posters in once they are within the viewport:

 

Movie Poster Card Intersection Observer:

               const options = {
                    root: null,
                    threshold: 0,
                    rootMargin: "-150px 0px -150px 0px" //We should render card data when they are minus 150 pxs  into the view-port
                }          

                const cardScalableObserver = new IntersectionObserver((entries, cardScalableObserver) => {
                    entries.forEach(entry => {

                        if (!entry.isIntersecting) {
                            
                            return;

                        } else {

                            if (entry.target.parentElement.classList.contains('focuscontainer-down')) {

                                console.time('addAppearY');
                                requestAnimationFrame(() => {
                                    entry.target.classList.add('appearY');
                                });
                                console.timeEnd('addAppearY');

                            } else {

                                console.time('addAppearX');
                                requestAnimationFrame(() => {
                                    entry.target.classList.add('appearX');
                                });
                                console.timeEnd('addAppearX');
                            }
                            
                            //Ignore elements after they have appeared on screen
                            cardScalableObserver.unobserve(entry.target);
                            return;
                        }

                    })
                }, options);

Now that we have the intersection observer set up, we'll select the elements to observer:

(Note: you need the mutation.js installed... do you have this file?)

                var x = window.matchMedia("(min-width: 700px)") //Only do this on large screens because doing this on mobile/tablets is not a good idea
                if (x.matches) {

                    ready('.cardScalable', function(element) { //'ready' is our mutation observer from 'mutation.js - do you have this file??
                        
                         if (isDashboardPage(element)) { //Don't apply animations if we're working in the dashboard that's annoying
                            return;
                        }
                        
                        if (element.parentElement.parentElement.parentElement.classList.contains('focuscontainer-down')) { //There is no finesse here: parent -> parent -> parent - could be better code.
                            element.parentElement.parentElement.classList.add('fade-inY');
                            element.parentElement.parentElement.style.willChange = "opacity"
                        } else {
                            element.parentElement.parentElement.classList.add('fade-inX');
                            element.parentElement.parentElement.style.willChange = "opacity"
                        }

                        cardScalableObserver.observe(element.parentElement.parentElement);

                        element.style.transition = 'ease';
                    })

                }

Now, over to Custom CSS:

 

Create styles "fade-inX", "fade-inY",  "appearX" and "appearY".

 

 

We apply the class "fade-inX" and "fade-inY" to all movie/tv cards in the DOM, because they are going to "fade-in" 

 

Then the intersection observer adds the  'appearX' and 'appearY' classes when they scroll into view.

 

This needs to be copied into Custom CSS (Dashboard > Settings):

.fade-inX {
    opacity: 0;
    transition: opacity 950ms ease !important;
    -ms-transition: opacity 950ms ease !important;
}

.fade-inY {
    opacity: 0;
    transition: opacity 950ms ease !important;
    -ms-transition: opacity 950ms ease !important;
}

.fade-inX.appearX {
    opacity: 1 !important;
}

.fade-inY.appearY {
    opacity: 1 !important;
}

let me know how you get along with everything.

Edited December 31, 2019 by chef

[rechigo 293]

Works great, thanks!