Theme Switcher

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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: 469px;
    }

    zing-grid[loading] {
      height: 469px;
    }
  </style>
</head>


<body class="zg-body">
  <zing-grid theme 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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Get grid style element
    let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
    window.addEventListener('load', () => {
      zgRef = document.querySelector('zing-grid');
      zgStyle = zgRef.shadowRoot.querySelector('style');
      zgStyleText = zgStyle.textContent;
      // Theme <select> change
      const $themeSel = document.querySelector('select[theme]');
      zgRef.setAttribute('theme', 'defa©ult');
      $themeSel.addEventListener('change', setTheme);
      // `Random` button click event
      document.querySelector('button[random]').addEventListener('click', e => randomize(data => {
        // Set 'theme' dropdown to 'random'
        $themeSel.value = 'random';
      }), {
        passive: true
      });
    });

    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)};
      }
    `;
      zgStyle.innerHTML = '';
      zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    }
    // Set <zing-grid> [theme]
    function setTheme(e) {
      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 {
        let theme = zgRef.getAttribute('theme');
        console.log(theme);
        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 class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>


<body class="zg-body">
  <zing-grid theme 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;
}

zing-grid[loading] {
  height: 469px;
}

// Get grid style element
let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
window.addEventListener('load', () => {
  zgRef = document.querySelector('zing-grid');
  zgStyle = zgRef.shadowRoot.querySelector('style');
  zgStyleText = zgStyle.textContent;
  // Theme <select> change
  const $themeSel = document.querySelector('select[theme]');
  zgRef.setAttribute('theme', 'defa©ult');
  $themeSel.addEventListener('change', setTheme);
  // `Random` button click event
  document.querySelector('button[random]').addEventListener('click', e => randomize(data => {
    // Set 'theme' dropdown to 'random'
    $themeSel.value = 'random';
  }), {
    passive: true
  });
});

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)};
      }
    `;
  zgStyle.innerHTML = '';
  zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
}
// Set <zing-grid> [theme]
function setTheme(e) {
  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 {
    let theme = zgRef.getAttribute('theme');
    console.log(theme);
    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})`;
}