• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. <style>
    9. body {
    10. background: #e2e2e2;
    11. }
    12.  
    13. /* RANDOM
    14. ----------------------------------------------------- */
    15. .caption-row {
    16. display: flex;
    17. align-items: center;
    18. }
    19.  
    20. .caption-row [random] {
    21. margin-left: auto;
    22. }
    23.  
    24. .caption-row [theme] {
    25. margin-left: 15px;
    26. }
    27.  
    28. @keyframes bodyGradient {
    29. 0% {
    30. background-position: 52% 0;
    31. }
    32.  
    33. 50% {
    34. background-position: 49% 100%;
    35. }
    36.  
    37. 100% {
    38. background-position: 52% 0;
    39. }
    40. }
    41.  
    42. /* RANDOM BUTTON */
    43. @keyframes RANDOM {
    44. 0% {
    45. color: red;
    46. }
    47.  
    48. 16.667% {
    49. color: orange;
    50. }
    51.  
    52. 33.334% {
    53. color: yellow;
    54. }
    55.  
    56. 50% {
    57. color: green;
    58. }
    59.  
    60. 66.667% {
    61. color: blue;
    62. }
    63.  
    64. 83.334% {
    65. color: purple;
    66. }
    67. }
    68.  
    69. [random] {
    70. background: #fff;
    71. border: 1px solid #e6e6e6;
    72. border-radius: 4px;
    73. cursor: pointer;
    74. height: 50px;
    75. font-size: 1rem;
    76. outline: none;
    77. }
    78.  
    79. [random]>* {
    80. padding: 0 1px;
    81. }
    82.  
    83. .r {
    84. color: red;
    85. animation: RANDOM 5s infinite linear;
    86. }
    87.  
    88. .a {
    89. color: orange;
    90. animation: RANDOM 4s .6s infinite linear;
    91. }
    92.  
    93. .n {
    94. color: yellow;
    95. animation: RANDOM 5s .3s infinite linear;
    96. }
    97.  
    98. .d {
    99. color: green;
    100. animation: RANDOM 3s .8s infinite linear;
    101. }
    102.  
    103. .o {
    104. color: blue;
    105. animation: RANDOM 6s .6s infinite linear;
    106. }
    107.  
    108. .m {
    109. color: purple;
    110. animation: RANDOM 5s 1.5s infinite linear;
    111. }
    112.  
    113. zing-grid[loading] {
    114. height: 469px;
    115. }
    116.  
    117. zing-grid[loading] {
    118. height: 469px;
    119. }
    120. </style>
    121. </head>
    122.  
    123. <body class="zg-body">
    124. <zing-grid theme id="randomGrid" sort filter pager page-size="5" src="https://jsdocs-9d00d.firebaseio.com/browsers">
    125. <zg-caption>
    126. <div class="caption-row">
    127. <span>Theme Switcher</span>
    128. <select theme>
    129. <option value="default">Default</option>
    130. <option value="dark">Dark</option>
    131. <option value="android">Android</option>
    132. <option value="ios">iOS</option>
    133. <option value="random">Random</option>
    134. </select>
    135. <button random>
    136. <span class="r">R</span>
    137. <span class="a">A</span>
    138. <span class="n">N</span>
    139. <span class="d">D</span>
    140. <span class="o">O</span>
    141. <span class="m">M</span>
    142. </button>
    143. </div>
    144. </zg-caption>
    145. </zing-grid>
    146. <script>
    147. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Get grid style element
    148. let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
    149. window.addEventListener('load', () => {
    150. zgRef = document.querySelector('zing-grid');
    151. zgStyle = zgRef.shadowRoot.querySelector('style');
    152. zgStyleText = zgStyle.textContent;
    153. // Theme <select> change
    154. const $themeSel = document.querySelector('select[theme]');
    155. zgRef.setAttribute('theme', 'defa©ult');
    156. $themeSel.addEventListener('change', setTheme);
    157. // `Random` button click event
    158. document.querySelector('button[random]').addEventListener('click', e => randomize(data => {
    159. // Set 'theme' dropdown to 'random'
    160. $themeSel.value = 'random';
    161. }), {
    162. passive: true
    163. });
    164. });
    165.  
    166. function randomize(cb) {
    167. // Set theme to 'random' to accept `newStyle` styles
    168. randomGrid.setAttribute('theme', themeRandom);
    169. // Set styles
    170. const newStyle = `
    171. :host([theme="${themeRandom}"]) {
    172. /* BACKGROUND */
    173. --theme-background-color: ${randRGBa(.2)};
    174. /* BORDER */
    175. --theme-border-color: ${randRGBa(.7)};
    176. /* COLOR */
    177. --theme-color-primary: ${randRGBa(1)};
    178. --theme-color-secondary: var(--theme-color-primary);
    179. /* FONT */
    180. --theme-color: ${randRGBa(1)};
    181. --theme-color_alt: ${randRGBa(1)};
    182. --theme-font-family: 'Roboto', verdana, sans-serif;
    183. --theme-font-size: ${rand(.7, 1.2)}rem;
    184. --theme-font-style: normal;
    185. --theme-font-weight: normal;
    186. --theme-line-height: 1rem;
    187. /* --------------------------------------- */
    188. /* ZG-CAPTION
    189. ------------------------------------------ */
    190. --zg-caption-background: ${randRGBa(1)};
    191. /* ZG-HEAD-CELL
    192. ------------------------------------------ */
    193. --zg-head-cell-background: ${randRGBa(.2)};
    194. --zg-head-cell-parent-background: ${randRGBa(.2)};
    195. /* ZG-INPUT
    196. ------------------------------------------ */
    197. --zg-input-background: ${randRGBa(.2)};
    198. /* ZG-PAGER
    199. ------------------------------------------ */
    200. --zg-pager-background: ${randRGBa(1)};
    201. /* ZG-ROW
    202. ------------------------------------------ */
    203. --zg-row-body-background_even: ${randRGBa(.2)};
    204. --zg-row-body-background_odd: ${randRGBa(.2)};
    205. /* ZG-SELECT
    206. ------------------------------------------ */
    207. --zg-select-text-background: ${randRGBa(.2)};
    208. }
    209. `;
    210. zgStyle.innerHTML = '';
    211. zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    212. }
    213. // Set <zing-grid> [theme]
    214. function setTheme(e) {
    215. const $EL = e.nodeName ? e : e.srcElement;
    216. const VALUE = $EL.value;
    217. if (!VALUE)
    218. return;
    219. // If 'random' theme
    220. if (VALUE === 'random')
    221. randomize();
    222. // Otherwise, set internal theme
    223. else {
    224. let theme = zgRef.getAttribute('theme');
    225. console.log(theme);
    226. zgRef.setAttribute('theme', VALUE);
    227. }
    228. }
    229. // Random fn
    230. function rand(min, max) {
    231. min = Math.ceil(min);
    232. max = Math.floor(max);
    233. return Math.floor(Math.random() * (max - min + 1)) + min;
    234. }
    235. // Set random rgba value
    236. function randRGBa(opacity) {
    237. return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
    238. }
    239. </script>
    240. </body>
    241.  
    242. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11. <zing-grid theme id="randomGrid" sort filter pager page-size="5" src="https://jsdocs-9d00d.firebaseio.com/browsers">
    12. <zg-caption>
    13. <div class="caption-row">
    14. <span>Theme Switcher</span>
    15. <select theme>
    16. <option value="default">Default</option>
    17. <option value="dark">Dark</option>
    18. <option value="android">Android</option>
    19. <option value="ios">iOS</option>
    20. <option value="random">Random</option>
    21. </select>
    22. <button random>
    23. <span class="r">R</span>
    24. <span class="a">A</span>
    25. <span class="n">N</span>
    26. <span class="d">D</span>
    27. <span class="o">O</span>
    28. <span class="m">M</span>
    29. </button>
    30. </div>
    31. </zg-caption>
    32. </zing-grid>
    33. </body>
    34.  
    35. </html>
    1. body {
    2. background: #e2e2e2;
    3. }
    4.  
    5. /* RANDOM
    6. ----------------------------------------------------- */
    7. .caption-row {
    8. display: flex;
    9. align-items: center;
    10. }
    11.  
    12. .caption-row [random] {
    13. margin-left: auto;
    14. }
    15.  
    16. .caption-row [theme] {
    17. margin-left: 15px;
    18. }
    19.  
    20. @keyframes bodyGradient {
    21. 0% {
    22. background-position: 52% 0;
    23. }
    24.  
    25. 50% {
    26. background-position: 49% 100%;
    27. }
    28.  
    29. 100% {
    30. background-position: 52% 0;
    31. }
    32. }
    33.  
    34. /* RANDOM BUTTON */
    35. @keyframes RANDOM {
    36. 0% {
    37. color: red;
    38. }
    39.  
    40. 16.667% {
    41. color: orange;
    42. }
    43.  
    44. 33.334% {
    45. color: yellow;
    46. }
    47.  
    48. 50% {
    49. color: green;
    50. }
    51.  
    52. 66.667% {
    53. color: blue;
    54. }
    55.  
    56. 83.334% {
    57. color: purple;
    58. }
    59. }
    60.  
    61. [random] {
    62. background: #fff;
    63. border: 1px solid #e6e6e6;
    64. border-radius: 4px;
    65. cursor: pointer;
    66. height: 50px;
    67. font-size: 1rem;
    68. outline: none;
    69. }
    70.  
    71. [random]>* {
    72. padding: 0 1px;
    73. }
    74.  
    75. .r {
    76. color: red;
    77. animation: RANDOM 5s infinite linear;
    78. }
    79.  
    80. .a {
    81. color: orange;
    82. animation: RANDOM 4s .6s infinite linear;
    83. }
    84.  
    85. .n {
    86. color: yellow;
    87. animation: RANDOM 5s .3s infinite linear;
    88. }
    89.  
    90. .d {
    91. color: green;
    92. animation: RANDOM 3s .8s infinite linear;
    93. }
    94.  
    95. .o {
    96. color: blue;
    97. animation: RANDOM 6s .6s infinite linear;
    98. }
    99.  
    100. .m {
    101. color: purple;
    102. animation: RANDOM 5s 1.5s infinite linear;
    103. }
    104.  
    105. zing-grid[loading] {
    106. height: 469px;
    107. }
    1. // Get grid style element
    2. let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
    3. window.addEventListener('load', () => {
    4. zgRef = document.querySelector('zing-grid');
    5. zgStyle = zgRef.shadowRoot.querySelector('style');
    6. zgStyleText = zgStyle.textContent;
    7. // Theme <select> change
    8. const $themeSel = document.querySelector('select[theme]');
    9. zgRef.setAttribute('theme', 'defa©ult');
    10. $themeSel.addEventListener('change', setTheme);
    11. // `Random` button click event
    12. document.querySelector('button[random]').addEventListener('click', e => randomize(data => {
    13. // Set 'theme' dropdown to 'random'
    14. $themeSel.value = 'random';
    15. }), {
    16. passive: true
    17. });
    18. });
    19.  
    20. function randomize(cb) {
    21. // Set theme to 'random' to accept `newStyle` styles
    22. randomGrid.setAttribute('theme', themeRandom);
    23. // Set styles
    24. const newStyle = `
    25. :host([theme="${themeRandom}"]) {
    26. /* BACKGROUND */
    27. --theme-background-color: ${randRGBa(.2)};
    28. /* BORDER */
    29. --theme-border-color: ${randRGBa(.7)};
    30. /* COLOR */
    31. --theme-color-primary: ${randRGBa(1)};
    32. --theme-color-secondary: var(--theme-color-primary);
    33. /* FONT */
    34. --theme-color: ${randRGBa(1)};
    35. --theme-color_alt: ${randRGBa(1)};
    36. --theme-font-family: 'Roboto', verdana, sans-serif;
    37. --theme-font-size: ${rand(.7, 1.2)}rem;
    38. --theme-font-style: normal;
    39. --theme-font-weight: normal;
    40. --theme-line-height: 1rem;
    41. /* --------------------------------------- */
    42. /* ZG-CAPTION
    43. ------------------------------------------ */
    44. --zg-caption-background: ${randRGBa(1)};
    45. /* ZG-HEAD-CELL
    46. ------------------------------------------ */
    47. --zg-head-cell-background: ${randRGBa(.2)};
    48. --zg-head-cell-parent-background: ${randRGBa(.2)};
    49. /* ZG-INPUT
    50. ------------------------------------------ */
    51. --zg-input-background: ${randRGBa(.2)};
    52. /* ZG-PAGER
    53. ------------------------------------------ */
    54. --zg-pager-background: ${randRGBa(1)};
    55. /* ZG-ROW
    56. ------------------------------------------ */
    57. --zg-row-body-background_even: ${randRGBa(.2)};
    58. --zg-row-body-background_odd: ${randRGBa(.2)};
    59. /* ZG-SELECT
    60. ------------------------------------------ */
    61. --zg-select-text-background: ${randRGBa(.2)};
    62. }
    63. `;
    64. zgStyle.innerHTML = '';
    65. zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    66. }
    67. // Set <zing-grid> [theme]
    68. function setTheme(e) {
    69. const $EL = e.nodeName ? e : e.srcElement;
    70. const VALUE = $EL.value;
    71. if (!VALUE)
    72. return;
    73. // If 'random' theme
    74. if (VALUE === 'random')
    75. randomize();
    76. // Otherwise, set internal theme
    77. else {
    78. let theme = zgRef.getAttribute('theme');
    79. console.log(theme);
    80. zgRef.setAttribute('theme', VALUE);
    81. }
    82. }
    83. // Random fn
    84. function rand(min, max) {
    85. min = Math.ceil(min);
    86. max = Math.floor(max);
    87. return Math.floor(Math.random() * (max - min + 1)) + min;
    88. }
    89. // Set random rgba value
    90. function randRGBa(opacity) {
    91. return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
    92. }