• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Theme Switcher</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            body {
                background: #e2e2e2;
            }
    
            /* RANDOM
    ----------------------------------------------------- */
            .caption-row {
                display: flex;
                align-items: center;
            }
    
            .caption-row [random] {
                margin-left: auto;
            }
    
            .caption-row [theme] {
                margin-left: 15px;
            }
    
            @keyframes bodyGradient {
                0% {
                    background-position: 52% 0;
                }
    
                50% {
                    background-position: 49% 100%;
                }
    
                100% {
                    background-position: 52% 0;
                }
            }
    
            /* RANDOM BUTTON */
            @keyframes RANDOM {
                0% {
                    color: red;
                }
    
                16.667% {
                    color: orange;
                }
    
                33.334% {
                    color: yellow;
                }
    
                50% {
                    color: green;
                }
    
                66.667% {
                    color: blue;
                }
    
                83.334% {
                    color: purple;
                }
            }
    
            [random] {
                background: #fff;
                border: 1px solid #e6e6e6;
                border-radius: 4px;
                cursor: pointer;
                height: 50px;
                font-size: 1rem;
                outline: none;
            }
    
            [random]>* {
                padding: 0 1px;
            }
    
            .r {
                color: red;
                animation: RANDOM 5s infinite linear;
            }
    
            .a {
                color: orange;
                animation: RANDOM 4s .6s infinite linear;
            }
    
            .n {
                color: yellow;
                animation: RANDOM 5s .3s infinite linear;
            }
    
            .d {
                color: green;
                animation: RANDOM 3s .8s infinite linear;
            }
    
            .o {
                color: blue;
                animation: RANDOM 6s .6s infinite linear;
            }
    
            .m {
                color: purple;
                animation: RANDOM 5s 1.5s infinite linear;
            }
    
            zing-grid[loading] {
                height: 468px;
            }
        </style>
    </head>
    
    <body>
    
        <zing-grid id="randomGrid" sort filter pager page-size="5" src="https://jsdocs-9d00d.firebaseio.com/browsers">
            <zg-caption>
                <div class="caption-row">
                    <span>Theme Switcher</span>
                    <select theme>
                        <option value="default">Default</option>
                        <option value="dark">Dark</option>
                        <option value="android">Android</option>
                        <option value="ios">iOS</option>
                        <option value="random">Random</option>
                    </select>
                    <button random>
                        <span class="r">R</span>
                        <span class="a">A</span>
                        <span class="n">N</span>
                        <span class="d">D</span>
                        <span class="o">O</span>
                        <span class="m">M</span>
                    </button>
                </div>
            </zg-caption>
        </zing-grid>
    
        <script>
            // Get grid style element
            let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
            setTimeout(() => {
                zgRef = document.querySelector('zing-grid');
                zgStyle = zgRef.shadowRoot.querySelector('style');
                zgStyleText = zgStyle.textContent;
    
                // Theme <select> change
                const $themeSel = document.querySelector('select[theme]');
                $themeSel.addEventListener('change', setTheme, {
                    passive: true
                });
    
                // `Random` button click event
                document.querySelector('[random]').addEventListener('click', e => randomize(data => {
                    // Set 'theme' dropdown to 'random'
                    $themeSel.value = 'random';
                }), {
                    passive: true
                });
            }, 0);
    
            // Randomize grid colors
            function randomize(cb) {
                // Set theme to 'random' to accept `newStyle` styles
                randomGrid.setAttribute('theme', themeRandom);
    
                // Set styles
                const newStyle = `
        :host([theme="${themeRandom}"]) {
          /* BACKGROUND */
          --theme-background-color: ${randRGBa(.2)};
    
          /* BORDER */
          --theme-border-color: ${randRGBa(.7)};
    
          /* COLOR */
          --theme-color-primary: ${randRGBa(1)};
          --theme-color-secondary: var(--theme-color-primary);
    
          /* FONT */
          --theme-color: ${randRGBa(1)};
          --theme-color_alt: ${randRGBa(1)};
          --theme-font-family: 'Roboto', verdana, sans-serif;
          --theme-font-size: ${rand(.7, 1.2)}rem;
          --theme-font-style: normal;
          --theme-font-weight: normal;
          --theme-line-height: 1rem;
    
          /* --------------------------------------- */
    
          /* ZG-CAPTION
          ------------------------------------------ */
          --zg-caption-background: ${randRGBa(1)};
    
          /* ZG-HEAD-CELL
          ------------------------------------------ */
          --zg-head-cell-background: ${randRGBa(.2)};
          --zg-head-cell-parent-background: ${randRGBa(.2)};
    
          /* ZG-INPUT
          ------------------------------------------ */
    			--zg-input-background: ${randRGBa(.2)};
    
          /* ZG-PAGER
          ------------------------------------------ */
          --zg-pager-background: ${randRGBa(1)};
    
          /* ZG-ROW
          ------------------------------------------ */
          --zg-row-body-background_even: ${randRGBa(.2)};
          --zg-row-body-background_odd: ${randRGBa(.2)};
    
          /* ZG-SELECT
          ------------------------------------------ */
    			--zg-select-text-background: ${randRGBa(.2)};
        }
      `;
    
                // Set <body> background
                const $body = document.querySelector('body');
                $body.style.animation = `bodyGradient 10s ease infinite`;
                $body.style.background = `linear-gradient(-45deg, ${randRGBa(.2)}, ${randRGBa(.6)}) 0% 0% / 200% 200%`;
    
                // Apply new styles to the grid
                zgStyle.innerHTML = '';
                zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    
                if (cb) cb();
            }
    
            // Set <zing-grid> [theme]
            function setTheme(e, manualType) {
                const $EL = e.nodeName ? e : e.srcElement;
                const VALUE = $EL.value;
                if (!VALUE) return;
                // If 'random' theme
                if (VALUE === 'random') randomize();
                // Otherwise, set internal theme
                else zgRef.setAttribute('theme', VALUE);
            }
    
            // Random fn
            function rand(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
    
            // Set random rgba value
            function randRGBa(opacity) {
                return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
            }
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Theme Switcher</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    	</head>
    	<body>
        
        <zing-grid
          id="randomGrid"
          sort
          filter
          pager
          page-size="5"
          src="https://jsdocs-9d00d.firebaseio.com/browsers"
        >
          <zg-caption>
            <div class="caption-row">
              <span>Theme Switcher</span>
              <select theme>
                <option	value="default">Default</option>
                <option	value="dark">Dark</option>
                <option	value="android">Android</option>
                <option	value="ios">iOS</option>
                <option	value="random">Random</option>
              </select>
              <button random>
                <span class="r">R</span>
                <span class="a">A</span>
                <span class="n">N</span>
                <span class="d">D</span>
                <span class="o">O</span>
                <span class="m">M</span>
              </button>
            </div>
          </zg-caption>
        </zing-grid>
        
      </body>
    </html>
    body { background: #e2e2e2; }
    
    /* RANDOM
    ----------------------------------------------------- */
    .caption-row { display:flex; align-items:center; }
    .caption-row [random] { margin-left:auto; }
    .caption-row [theme] { margin-left: 15px; }
    
    @keyframes bodyGradient {
      0% { background-position: 52% 0; }
      50% { background-position: 49% 100%; }
      100% { background-position: 52% 0; }
    }
    
    /* RANDOM BUTTON */
    @keyframes RANDOM {
      0% { color: red; }
      16.667% { color: orange; }
      33.334% { color: yellow; }
      50% { color: green; }
      66.667% { color: blue; }
      83.334% { color: purple; }
    }
    [random] {
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      height: 50px;
      font-size: 1rem;
      outline: none;
    }
    [random] > * { padding: 0 1px; }
    .r { color: red; animation: RANDOM 5s infinite linear; }
    .a { color: orange; animation: RANDOM 4s .6s infinite linear; }
    .n { color: yellow; animation: RANDOM 5s .3s infinite linear; }
    .d { color: green; animation: RANDOM 3s .8s infinite linear; }
    .o { color: blue; animation: RANDOM 6s .6s infinite linear; }
    .m { color: purple; animation: RANDOM 5s 1.5s infinite linear; }
    // Get grid style element
    let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
    setTimeout(() => {
      zgRef = document.querySelector('zing-grid');
      zgStyle = zgRef.shadowRoot.querySelector('style');
      zgStyleText = zgStyle.textContent;
    
      // Theme <select> change
      const $themeSel = document.querySelector('select[theme]');
      $themeSel.addEventListener('change', setTheme, {passive:true});
    	
      // `Random` button click event
    	document.querySelector('[random]').addEventListener('click', e => randomize(data => {
      	// Set 'theme' dropdown to 'random'
    	  $themeSel.value = 'random';
      }), { passive:true });
    }, 0);
    
    // Randomize grid colors
    function randomize(cb) {
      // Set theme to 'random' to accept `newStyle` styles
      randomGrid.setAttribute('theme', themeRandom);
      
      // Set styles
      const newStyle = `
        :host([theme="${themeRandom}"]) {
          /* BACKGROUND */
          --theme-background-color: ${randRGBa(.2)};
    
          /* BORDER */
          --theme-border-color: ${randRGBa(.7)};
    
          /* COLOR */
          --theme-color-primary: ${randRGBa(1)};
          --theme-color-secondary: var(--theme-color-primary);
    
          /* FONT */
          --theme-color: ${randRGBa(1)};
          --theme-color_alt: ${randRGBa(1)};
          --theme-font-family: 'Roboto', verdana, sans-serif;
          --theme-font-size: ${rand(.7, 1.2)}rem;
          --theme-font-style: normal;
          --theme-font-weight: normal;
          --theme-line-height: 1rem;
    
          /* --------------------------------------- */
    
          /* ZG-CAPTION
          ------------------------------------------ */
          --zg-caption-background: ${randRGBa(1)};
    
          /* ZG-HEAD-CELL
          ------------------------------------------ */
          --zg-head-cell-background: ${randRGBa(.2)};
          --zg-head-cell-parent-background: ${randRGBa(.2)};
    
          /* ZG-INPUT
          ------------------------------------------ */
    			--zg-input-background: ${randRGBa(.2)};
    
          /* ZG-PAGER
          ------------------------------------------ */
          --zg-pager-background: ${randRGBa(1)};
    
          /* ZG-ROW
          ------------------------------------------ */
          --zg-row-body-background_even: ${randRGBa(.2)};
          --zg-row-body-background_odd: ${randRGBa(.2)};
    
          /* ZG-SELECT
          ------------------------------------------ */
    			--zg-select-text-background: ${randRGBa(.2)};
        }
      `;
    
      // Set <body> background
      const $body = document.querySelector('body');
      $body.style.animation = `bodyGradient 10s ease infinite`;
      $body.style.background = `linear-gradient(-45deg, ${randRGBa(.2)}, ${randRGBa(.6)}) 0% 0% / 200% 200%`;
    
      // Apply new styles to the grid
      zgStyle.innerHTML = '';
      zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    
      if (cb) cb();
    }
    
    // Set <zing-grid> [theme]
    function setTheme(e, manualType) {
      const $EL = e.nodeName ? e : e.srcElement;
      const VALUE = $EL.value;
      if (!VALUE) return;
      // If 'random' theme
      if (VALUE === 'random') randomize();
      // Otherwise, set internal theme
      else zgRef.setAttribute('theme', VALUE);
    }
    
    // Random fn
    function rand(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    // Set random rgba value
    function randRGBa(opacity) {
      return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
    }