JSFiddle - React, Tailwind, and code Playground

by amanboss9

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/naviboard.min.js"></script>
<div id="buttonPos">
        <button id="destroy" class="btn">Destroy</button>
        <button id="update2" class="btn">Update Table 1</button>
        <button id="update1" class="btn">Update Table 2</button>
        <button id="pause" class="btn">pause Navigation</button>
        <button id="resume" class="btn">resume Navigation</button>
        <button id="refresh" class="btn">refresh Navigation</button>
        <button id="shorten" class="btn">shorten table 1</button>
    </div>
    <div class="wrapper" id='mainCtrl'>
        <span> Table 1</span>
        <div class="box a navigable" tabindex="0">A</div>
        <div class="box b navigable" tabindex="0">B</div>
        <div class="box c navigable" tabindex="0">C</div>
        <div class="box d navigable" tabindex="0">D</div>
        <div class="box e navigable" tabindex="0">E</div>
        <div id="hide">
            <div class="box f navigable" tabindex="0">F</div>
            <div class="box g navigable" tabindex="0">G</div>
            <div class="box h navigable" tabindex="0">H</div>
            <div class="box i navigable" tabindex="0">I</div>
        </div>
    </div>
    <!-- 3rd Case -->
    <div class="wrapper1" id="secondCtrl">
        <span> Table 2</span>
        <div class="box1 header navigable" tabindex="0">Header</div>
        <div class="box1 sidebar navigable" tabindex="0">Sidebar</div>
        <div class="box1 content navigable" tabindex="0">Content
            <br /> More content than we had before so this column is now quite tall.</div>
        <div class="box1 footer navigable" tabindex="0">Footer</div>
    </div>

CSS

body {
        margin: 40px;
    }

    #buttonPos {
        padding-left: 39px;
        position: relative;
    }

    .box:focus {
        text-decoration: none;
        border: 5px solid red !important;
    }

    .wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px;
        grid-template-rows: [row] auto [row] auto [row];
        background-color: #fff;
        color: #444;
    }

    .wrapper span {
        font-size: 30px;
        position: absolute;
        left: 85px;
        margin-bottom: 10px;
        padding-top: 10px;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }

    .a {
        grid-column: col / span 2;
        grid-row: row;
    }

    .b {
        grid-column: col 3 / span 2;
        grid-row: row;
    }

    .c {
        grid-column: col;
        grid-row: row 2;
    }

    .d {
        grid-column: col 2 / span 3;
        grid-row: row 2;
    }

    .e {
        grid-column: col / span 4;
        grid-row: row 3;
    }
    /* Red */

    #mainCtrl {
        padding: 50px;
    }

    #buttonPos p {
        color: black;
        font-size: 24px;
        display: block;
    }

    .btn {
        border: 2px solid black;
        background-color: white;
        color: black;
        padding: 14px 28px;
        font-size: 16px;
        cursor: pointer;
    }

    #destroy {
        border-color: #f44336;
        color: red ;
        border-radius:5px;
    }
    /* Green */

    #update1 {
        border-color: #4CAF50;
        color: green;
    }

    #update2 {
        border-color: blue;
        color: green;
    }

    #pause {
        border-color: violet;
        color: blue;
    }

    #pause {
        border-color: black;
        color: pink;
    }

    #refresh {
        border-color: darkviolet;
        color: darkgrey;
    }

    #extend {
       ...

JavaScript

naviBoard.setNavigation('mainCtrl');
    document.getElementById('destroy').addEventListener('click', function(ev) {
        var component = naviBoard.getNavigationComponent();
        console.log("destroyCurrentNavigationView---->", component);

        naviBoard.destroyNavigation(component);
    })

    document.getElementById('update1').addEventListener('click', function(ev) {
        // console.log("setCurrentNavigationView");
        naviBoard.setNavigation('secondCtrl');
    })
    document.getElementById('update2').addEventListener('click', function(ev) {
        // console.log("setCurrentNavigationView");
        naviBoard.setNavigation('mainCtrl');
    })
    document.getElementById('pause').addEventListener('click', function(ev) {
        // console.log("setCurrentNavigationView");
        naviBoard.pauseNavigation();
    })
    document.getElementById('resume').addEventListener('click', function(ev) {
        // console.log("setCurrentNavigationView");
        naviBoard.resumeNavigation();
    })

    document.getElementById('shorten').addEventListener('click', function(ev) {
        var parent = document.getElementById("mainCtrl");
        var x = document.getElementById("hide");
        parent.removeChild(x);
        document.getElementById("shorten").style.display = 'none';
        var para = document.createElement("p");
        var node = document.createTextNode("You will see that still we are refering to the elements which are now removed from DOM.Now press refresh Navigation button to adjust the navigation only on current navigable elements in table 1");
        para.appendChild(node);
        document.getElementById("buttonPos").appendChild(para);
    })

    document.getElementById('refresh').addEventListener('click', function(ev) {
        
        naviBoard.refreshNavigation('mainCtrl', "destroy");
    })