- <!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>
- // 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})`;
- }