achieve focus effect

This is a function that a friend asked me before: he thinks that sometimes his attention will be diverted when he is looking at the web page, and he hopes that there can be a mask to help him concentrate.

Backhand I used box-shadow to write the function.

 (function(){
    let lastEl = null;
    let styleEl = null;
    document.body.addEventListener('mouseover', (e)=>{
        e.stopPropagation();
        if(!styleEl){
            styleEl = document.createElement('style');
            document.body.appendChild(styleEl);
            styleEl.innerHTML = `
                .lilnong-focus{
                    box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
                    z-index: 99999;
                    position: relative;
                }
            `
        }
        const el = e.target;
        lastEl?.classList?.remove('lilnong-focus');
        lastEl = el;
        el.classList.add('lilnong-focus');
    })
})()

A bug due to the inability of z-index to exceed non-static levels

Found some nether effects in my tests

So we're going to make a small change. Directly give the parent ZIndex all promotions.

 (function(){
        let lastEl = null;
        let styleEl = null;
        let ZIndex = 1;
        document.body.addEventListener('mouseover', (e)=>{
            e.stopPropagation();
            if(!styleEl){
                styleEl = document.createElement('style');
                document.body.appendChild(styleEl);
                styleEl.innerHTML = `
                    .lilnong-focus{
                        box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
                        z-index: 99999;
                        position: relative;
                    }
                `
            }
            const el = e.target;
            lastEl?.classList?.remove('lilnong-focus');
            lastEl = el;
            el.classList.add('lilnong-focus');
            
            let parent = el;
            ZIndex++;
            while(parent){
                console.log(parent?.style)
                if(parent.style) parent.style.zIndex = 10000 +  ZIndex;
                parent = parent.parentNode;
            }
        })
    })()

The style cannot go beyond the box because of overflow

Well, let's restore the overflow again.

 (function(){
        let lastEl = null;
        let styleEl = null;
        let ZIndex = 1;
        document.body.addEventListener('mouseover', (e)=>{
            e.stopPropagation();
            if(!styleEl){
                styleEl = document.createElement('style');
                document.body.appendChild(styleEl);
                styleEl.innerHTML = `
                    .lilnong-focus{
                        box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
                        z-index: 99999;
                        position: relative;
                    }
                    .lilnong
                `
            }
            const el = e.target;
            lastEl?.classList?.remove('lilnong-focus');
            lastEl = el;
            el.classList.add('lilnong-focus');
            
            let parent = el;
            ZIndex++;
            while(parent){
                // console.log(parent?.style)
                if(parent.style){
                    // parent.style.zIndex = 10000 +  ZIndex;
                    // overflow: visible !important;
                    // parent.style.overflow = 'visible !important'
                    parent.setAttribute('style', `${parent.getAttribute('style')};z-index: ${10000 +  ZIndex};overflow: visible !important;`)
                }
                parent = parent.parentNode;
            }
        })
    })()

Best implementation?

After our general operation, finally the function can be realized.

But is this kind of functionality really what we want? We just want to implement the focus function and don't want the page layout to be broken .

So what should we do? As can be seen from the above example, box-shadow is the best implementation. It can give us a viewport and cover all the content outside the viewport, so we only need to control the size of the viewport.

This way we can also do some special styling to the viewport.

Of course, you will say that if there is a layer of things on it, the element will not be selected. Here we can use pointer-events: none; to prevent the element from receiving events. (This is commonly used in the display of avatar pendants. Generally speaking, clicking the avatar will pop up the data card. We can block the receiving event for the pendant.)

 (function(){
        let maskEl = document.querySelector('.lilnong-mask') || document.createElement('div');
        maskEl.className="lilnong-mask"
        document.body.appendChild(maskEl);
    
        let styleEl = document.createElement('style');
        document.body.appendChild(styleEl);
    
        styleEl.innerHTML = `
            .lilnong-mask{
                box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
                z-index: 99999;
                position: fixed;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                pointer-events: none;
            }
        `
    
        document.body.addEventListener('mousemove', (e)=>{
            e.stopPropagation();
            const el = e.target;
            const {x,y,width,height,top,left} = el.getBoundingClientRect();
            maskEl.style.left = left + 'px'
            maskEl.style.top = top + 'px'
            maskEl.style.width = width + 'px'
            maskEl.style.height = height + 'px'
            
            
        })
    })()

We can even modify the style of the focused viewport

 (function(){
        let maskEl = document.querySelector('.lilnong-mask') || document.createElement('div');
        maskEl.className="lilnong-mask"
        document.body.appendChild(maskEl);
    
        let styleEl = document.createElement('style');
        document.body.appendChild(styleEl);
    
        styleEl.innerHTML = `
            .lilnong-mask{
                box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
                z-index: 99999;
                position: fixed;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                pointer-events: none;

                padding: 10px;
                box-sizing: content-box;
                transform: translate(-10px,-10px);
                border-radius: 10px
            }
            .lilnong-mask:before{
                content: '';
                position: absolute;
                top: -6px;right: -6px;bottom: -6px;left: -6px;
                border: 1px dashed #eee;
                border-radius: 10px
            }
        `
    
        document.body.addEventListener('mousemove', (e)=>{
            e.stopPropagation();
            const el = e.target;
            const {x,y,width,height,top,left} = el.getBoundingClientRect();
            maskEl.style.left = left + 'px'
            maskEl.style.top = top + 'px'
            maskEl.style.width = width + 'px'
            maskEl.style.height = height + 'px'
            
            
        })
    })()

Because it is the change of left, top, width and height, we can also transition: .2s all; make the animation have a transition effect