%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/businessmultisite/wp-content/themes/stripes_weekly/src/js/utils/
Upload File :
Create Path :
Current File : /var/www/businessmultisite/wp-content/themes/stripes_weekly/src/js/utils/bootstrapGrid.js

(function() {
    const gridContainer = document.createElement('div');
    const storage = localStorage.getItem('grid-layout');
    const out = `
    
    <div id="grid-layout"${storage ? ' style="display: '+storage+'"' : ''}>
        <div class="container">
            <div class="row">
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
                <div class="col-1"><div></div></div>
            </div>
        </div>
    </div>
    <button id="grid-layout--toggle" type="button">Grid</button>
    <style>
    #grid-layout--toggle {
        position: fixed;
        bottom: 0;
        right: 0; }
      
      #grid-layout {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
        #grid-layout .container {
          height: 100vh; }
          #grid-layout .container .col-1 {
            background: rgba(255, 0, 0, 0.2); }
            #grid-layout .container .col-1 > div {
              background: rgba(0, 255, 0, 0.2);
              height: 100vh; }
      
    </style>`;
    gridContainer.innerHTML = out;
    document.addEventListener("DOMContentLoaded", function(event) { 
        document.querySelector('footer').after(gridContainer);      
        document.querySelector('#grid-layout--toggle').addEventListener('click', e => {
            const grid = document.querySelector('#grid-layout');
            if(!grid.style.display || grid.style.display == 'block') {
                grid.style.display = 'none';
            } else {
                grid.style.display = 'block';
            }
            
            localStorage.setItem('grid-layout', grid.style.display);
        });
    });
    
      
    
})();

Zerion Mini Shell 1.0