WPEasy Tabs (Template)

Standard Tabs

There are no limits in this world. The more we do this – the more it will do good things to our heart. In this world, everything can be happy. We want to use a lot pressure while using no pressure at all. Without washing the brush, I’m gonna go right into some Van Dyke Brown, some Burnt Umber, and a little bit of Sap Green.

This painting comes right out of your heart. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. If we’re gonna walk though the woods, we need a little path.

This present moment is perfect simply due to the fact you’re experiencing it. Very easy to work these to death. You have freedom here. The only guide is your heart. If you do too much it’s going to lose its effectiveness. And just raise cain. A tree cannot be straight if it has a crooked trunk.

Maybe, just to play a little, we’ll put a little tree here. Look at them little rascals. Little trees and bushes grow however makes them happy. You have to make those little noises or it won’t work.

If you’ve been in Alaska less than a year you’re a Cheechako. That’s the way I look when I get home late; black and blue. Every single thing in the world has its own personality – and it is up to you to make friends with the little rascals. The little tiny Tim easels will let you down.

And that’s when it becomes fun – you don’t have to spend your time thinking about what’s happening – you just let it happen. Everyone is going to see things differently – and that’s the way it should be. You can do anything here. So don’t worry about it.

Nothing wrong with washing your brush. I’m a water fanatic. I love water. Maybe we got a few little happy bushes here, just covered with snow. Now we’ll take the almighty fan brush. Let’s get wild today. Now then, let’s play.

You don’t have to be crazy to do this but it does help. Let’s get crazy. How do you make a round circle with a square knife? That’s your challenge for the day. No pressure. Just relax and watch it happen.

Just pretend you are a whisper floating across a mountain. You’ve got to learn to fight the temptation to resist these things. Just let them happen. Fluff it up a little and hypnotize it. In your world you have total and absolute power. You can’t have light without dark. You can’t know happiness unless you’ve known sorrow. So often we avoid running water, and running water is a lot of fun.

Maybe he has a little friend that lives right over here. Only think about one thing at a time. Don’t get greedy. It’s cold, but it’s beautiful. You need to have a very firm paint to do this. Clouds are free. They just float around the sky all day and have fun.

You can create beautiful things – but you have to see them in your mind first. We’ll do another happy little painting. Let’s make some happy little clouds in our world. Just take out whatever you don’t want. It’ll change your entire perspective. A fan brush can be your best friend.

It’s so important to do something every day that will make you happy. We start with a vision in our heart, and we put it on canvas. Play with the angles. I’ll go over the colors one more time that we use: Titanium white, Thalo green, Prussian blue, Van Dyke brown, Alizarin crimson, Sap green, Cad yellow, and Permanent red. Paint anything you want on the canvas. Create your own world.

You can get away with a lot. Nice little fluffy clouds laying around in the sky being lazy. Every highlight needs it’s own personal shadow. Nice little clouds playing around in the sky. Just go back and put one little more happy tree in there. You don’t have to spend all your time thinking about what you’re doing, you just let it happen.

Let’s make a happy little mountain now. There is no right or wrong – as long as it makes you happy and doesn’t hurt anyone. There are no mistakes. You can fix anything that happens. Every time you practice, you learn more. Let’s have a happy little tree in here. There isn’t a rule. You just practice and find out which way works best for you.

This is an example of what you can do with just a few things, a little imagination and a happy dream in your heart. If it’s not what you want – stop and change it. Don’t just keep going and expect it will get better. Nice little fluffy clouds laying around in the sky being lazy. I’m sort of a softy, I couldn’t shoot Bambi except with a camera. Maybe he has a little friend that lives right over here. Working it up and down, back and forth.

All you have to learn here is how to have fun. You could sit here for weeks with your one hair brush trying to do that – or you could do it with one stroke with an almighty brush. Everyone is going to see things differently – and that’s the way it should be.

Work on one thing at a time. Don’t get carried away – we have plenty of time. Zip. That easy. It’s a good way of getting rid of all your anxieties and hostilities. Decide where your cloud lives. Maybe he lives right in here. There we go. I like to beat the brush.

Learn when to stop. This is your world, whatever makes you happy you can put in it. Go crazy. Let’s build some happy little clouds up here. Nature is so fantastic, enjoy it. Let it make you happy. That’s a son of a gun of a cloud.

Just let your mind wander and enjoy. This should make you happy. Have fun with it. You can do anything here – the only pre-requisite is that it makes you happy. Let’s make some happy little clouds in our world.

Just make a decision and let it go. It’s a super day, so why not make a beautiful sky? You don’t want to kill all your dark areas they are very important. We’ll throw some old gray clouds in here just sneaking around and having fun. Just use the old one inch brush. Everybody needs a friend.

Anything you want to do you can do here. You can do anything here. So don’t worry about it. It’s amazing what you can do with a little love in your heart. All those little son of a guns. You have to make those little noises or it won’t work.

Vertical Tabs, with .wpeasy-tabs--vertical

Standard Tabs width, with .wpeasy-tabs--full-width-tabs

<script defer>


/*
NOTES:
1. Use "defer" instead of waiting for DOMContentLoaded. Thsi is so it renders proerly in the Bricks Editor
*/

;(()=>{
    const tabBlockClass = '.wpeasy-tabs';
    const mainHeadingSelector = tabBlockClass + '__main-heading';
    const tablistSelector = tabBlockClass + '__tablist';
    const tabSelector = tabBlockClass + '__tab';
    const tabPanelSelector = tabBlockClass + '__tabpanel';

    const allTabBlocks = document.querySelectorAll(tabBlockClass);
    const allMainHeadings = document.querySelectorAll(mainHeadingSelector);
    const allTabs = document.querySelectorAll(tabSelector);
    const allPanels = document.querySelectorAll(tabPanelSelector);

    const generateRandomString = (length) => {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        let result = '';

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            result += characters.charAt(randomIndex);
        }
        return result;
    }

    const setCurrentTab = tabElement => {
        tabElement.click();
        clearAriaSelected();
        
        tabElement.focus();        
        tabElement.setAttribute('aria-selected', true);
        tabElement.setAttribute('tabindex', 0);
    }

    const clearAriaSelected = () => {
        const currentTab = document.activeElement;
        Array.from(currentTab.parentElement.children).forEach(el=>{ 
            el.setAttribute('aria-selected', false); 
            el.setAttribute('tabindex', -1);
        })
    }

    const moveRight = () => {
        const currentTab = document.activeElement;
        if(currentTab.nextElementSibling){
            setCurrentTab(currentTab.nextElementSibling);
        }else{
            setCurrentTab(currentTab.parentElement.firstChild);
        }
    }

    const moveLeft = () => {
        const currentTab = document.activeElement;
        if(currentTab.previousElementSibling){
            setCurrentTab(currentTab.previousElementSibling);
        }else{
            setCurrentTab(currentTab.parentElement.lastChild);
        }
    }

    const moveHome = () => {
        const currentTab = document.activeElement;
        setCurrentTab(currentTab.parentElement.firstChild);     
    }

    const moveEnd = () => {
        const currentTab = document.activeElement;
        setCurrentTab(currentTab.parentElement.lastChild);     
    }

    /* Add random ID to elements if they are not set */

    allMainHeadings.forEach(el => {
        if (!el.id) {
            el.id = 'wpe-' + generateRandomString(5);
        }
    });
    
    allTabs.forEach(el => {
        if (!el.id) {
            el.id = 'wpe-' + generateRandomString(5);
        }
    });

    allPanels.forEach(el => {
        if (!el.id) {
            el.id = 'wpe-' + generateRandomString(5);
        }
    });

    const initA11Y = ()=>{
        allTabBlocks.forEach( block => {
            const mainHeader = block.querySelector(mainHeadingSelector);
            const tablist = block.querySelector(tablistSelector);

            tablist.setAttribute('aria-labelledby', mainHeader.id);
            tablist.setAttribute('aria-role', 'tablist');
            
            const myTabs = block.querySelectorAll(tabSelector);
            const myTabPanels = block.querySelectorAll(tabPanelSelector);
     
            myTabs.forEach( (tab, index)=>{
                tab.setAttribute('aria-role', 'tab');
                tab.setAttribute('aria-controls', myTabPanels[index].id);
                if(index === 0){
                    tab.setAttribute('aria-selected', true);
                    tab.setAttribute('tabindex', 0);
                }else{
                    tab.setAttribute('aria-selected', false);
                    tab.setAttribute('tabindex', -1);
                }


                tab.addEventListener('click', element => {
                    setCurrentTab(element.currentTarget );
                })

                tab.addEventListener('keydown', event => {
                    const {key} = event;

                    /* Allow for normal Tab behaviour only*/
                    if(key !== 'Tab'){
                        event.preventDefault();
                    }                   
                    
                    switch(key){
                        case 'ArrowRight':
                            moveRight();
                            break;

                        case 'ArrowLeft':
                            moveLeft();
                            break;

                        case 'Home':
                            moveHome();
                            break;

                        case 'End':
                            moveEnd();
                            break;
                        
                        default:
                            return;
                    };
            
                })
            })            

            myTabPanels.forEach( (panel, index)=>{              
                panel.setAttribute('tabindex', 0);
                panel.setAttribute('aria-labelledby', myTabs[index].id)
            })
        });
    }

    initA11Y(); 
})();

</script>