• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    8. <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
    9. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    10. <style>
    11. #mobile-grid-demo {
    12. --zg-row-card-flex-basis: 50%;
    13. overflow: hidden;
    14. }
    15.  
    16. #mobile-grid-demo zg-source {
    17. opacity: 0;
    18. }
    19.  
    20. #mobile-grid-demo zg-source[role] {
    21. opacity: 1;
    22. }
    23.  
    24. #mobile-grid-demo [layout="card"] zg-row {
    25. background: #fbfbfb;
    26. }
    27.  
    28. #mobile-grid-demo [layout="card"] zg-cell {
    29. max-width: 50%;
    30. }
    31.  
    32. #mobile-grid-demo [layout="card"] zg-cell:before {
    33. justify-content: center;
    34. text-align: center;
    35. }
    36.  
    37. /* All cards & row GDP_5yr */
    38. #mobile-grid-demo [layout="card"] zg-cell [data-field-index],
    39. #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
    40. display: flex;
    41. align-items: center;
    42. justify-content: center;
    43. text-align: center;
    44. line-height: 1.4;
    45. background: #fff;
    46. box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    47. }
    48.  
    49. /* GDP Only */
    50. #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
    51. margin: 0 auto;
    52. padding: 10px;
    53. max-width: 90px;
    54. }
    55.  
    56. /* All Mobile */
    57. #mobile-grid-demo [layout="card"] zg-cell [data-field-index] {
    58. margin: 8px 0;
    59. padding: 10px 0;
    60. max-width: 100%;
    61. width: 100%;
    62. min-height: 51px;
    63. }
    64.  
    65. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell {
    66. padding: 0 13px;
    67. }
    68.  
    69. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index] {
    70. margin-right: 0;
    71. margin-left: 0;
    72. font-size: .9rem;
    73. }
    74.  
    75. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index="flag"] {
    76. font-size: 2rem;
    77. }
    78.  
    79. #mobile-grid-demo .flag [data-field-index] {
    80. min-height: 42px;
    81. visibility: hidden;
    82. justify-content: center;
    83. font-size: 2rem;
    84. }
    85.  
    86. #mobile-grid-demo .flag [data-field-index].loaded {
    87. visibility: visible;
    88. }
    89.  
    90. #mobile-grid-demo zg-column .sparklines {
    91. opacity: 0;
    92. }
    93.  
    94. #mobile-grid-demo zg-source small {
    95. margin-right: 3px;
    96. font-size: 90%;
    97. opacity: .7;
    98. }
    99.  
    100. @media screen and (min-width:768px) {
    101. #mobile-grid-demo {
    102. --zing-grid-border: 0;
    103. }
    104. }
    105.  
    106. zing-grid[loading] {
    107. height: 404px;
    108. }
    109. </style>
    110. </head>
    111.  
    112. <body>
    113. <zing-grid id="mobile-grid-demo" caption="Zing Around The Globe" data='
    114. [
    115. {
    116. "country": "United States",
    117. "flag": ":flag-us:",
    118. "gdp_5yr": [16691.52,17427.61,18120.71,18624.48,19390.6],
    119. "gdp": 19390.6,
    120. "tld": ".us"
    121. },
    122. {
    123. "country": "Romania",
    124. "flag": ":flag-ro:",
    125. "gdp_5yr": [191.55,199,49,177.91,187.81,211.8],
    126. "gdp": 211.8,
    127. "tld": ".ro"
    128. },
    129. {
    130. "country": "New Zealand",
    131. "flag": ":flag-nz:",
    132. "gdp_5yr": [190.79,200.96,177.62,189.29,205.85],
    133. "gdp": 205.85,
    134. "tld": ".nz"
    135. },
    136. {
    137. "country": "United Kingdom",
    138. "flag": ":flag-gb:",
    139. "gdp_5yr": [2739.82,3022.83,2885.57,2650.85,2622.43],
    140. "gdp": 2622.43,
    141. "tld": ".uk"
    142. },
    143. {
    144. "country": "India",
    145. "flag": ":flag-in:",
    146. "gdp_5yr": [1856.72,2039.1,2102.4,2274.2,2597.49],
    147. "gdp": 2597.49,
    148. "tld": ".in"
    149. },
    150. {
    151. "country": "Mexico",
    152. "flag": ":flag-mx:",
    153. "gdp_5yr": [1274.44,1314.39,1169.62,1076.91,1149.92],
    154. "gdp": 1149.92,
    155. "tld": ".mx"
    156. }
    157. ]
    158. ' layout loading editor context-menu pager page-size="4" page-size-options="4,6,8">
    159. <zg-colgroup>
    160. <zg-column index="country"></zg-column>
    161. <zg-column index="gdp_5yr" header="5yr GDP ($ Bil.)" cell-class="gdp5" renderer="renderGDP" align="center" title="This country's five-year Gross Domestic Product (nominal) sparkline">
    162. <span class="sparklines">[[index.gdp_5yr]]</span>
    163. </zg-column>
    164. <zg-column index="flag" cell-class="flag" renderer="renderFlag" align="center"></zg-column>
    165. <zg-column index="gdp" header="2017 GDP ($ Bil.)" cell-class="gdp" type="currency" type-currency="usd" align="right" title="This country's 2017 Gross Domestic Product (nominal)"></zg-column>
    166. <zg-column index="tld" align="center" title="This country's Top-Level Domain"></zg-column>
    167. </zg-colgroup>
    168. <zg-source><small>Source:</small> Wikipedia, World Bank</zg-source>
    169. </zing-grid>
    170. <script>
    171. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    172. const zgMobileDemo = {
    173. grid: document.getElementById('mobile-grid-demo'),
    174. emojis: null,
    175. loadedAttr: 'loaded',
    176. renderFlag(shortcode, cellDom, $cell) {
    177. const {
    178. emojis,
    179. loadedAttr
    180. } = zgMobileDemo;
    181. let returnText = shortcode;
    182. if (emojis && emojis.length) {
    183. for (let emoji in emojis) {
    184. if (shortcode === emojis[emoji].shortname) {
    185. returnText = emojis[emoji].emoji;
    186. $cell.dom().children[0].classList.add(loadedAttr);
    187. break;
    188. }
    189. }
    190. }
    191. return returnText;
    192. },
    193. renderGDP(values, cellDom, $cell) {
    194. const {
    195. loadedAttr
    196. } = zgMobileDemo;
    197. const sparklineContainer = $cell.dom().querySelector('.sparklines');
    198. $(sparklineContainer).sparkline('html', {
    199. type: 'line',
    200. fillColor: 'transparent',
    201. width: 60,
    202. height: 50,
    203. });
    204. $cell.dom().children[0].classList.add(loadedAttr);
    205. },
    206. };
    207.  
    208. // window:load event for Javascript to run after HTML
    209. // because this Javascript is injected into the document head
    210. window.addEventListener('load', (e) => {
    211. // Javascript code to execute after DOM content
    212. // Register renderers
    213. ZingGrid.registerMethod(zgMobileDemo.renderGDP, 'renderGDP');
    214. ZingGrid.registerMethod(zgMobileDemo.renderFlag, 'renderFlag');
    215.  
    216.  
    217. fetch('https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json')
    218. .then(r => r.json())
    219. .then(r => {
    220. zgMobileDemo.emojis = r.emojis;
    221. if (zgMobileDemo.grid) zgMobileDemo.grid.refresh();
    222. });
    223. });
    224. </script>
    225. </body>
    226.  
    227. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    8. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
    9. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13. <zing-grid id="mobile-grid-demo" caption="Zing Around The Globe" data='
    14. [
    15. {
    16. "country": "United States",
    17. "flag": ":flag-us:",
    18. "gdp_5yr": [16691.52,17427.61,18120.71,18624.48,19390.6],
    19. "gdp": 19390.6,
    20. "tld": ".us"
    21. },
    22. {
    23. "country": "Romania",
    24. "flag": ":flag-ro:",
    25. "gdp_5yr": [191.55,199,49,177.91,187.81,211.8],
    26. "gdp": 211.8,
    27. "tld": ".ro"
    28. },
    29. {
    30. "country": "New Zealand",
    31. "flag": ":flag-nz:",
    32. "gdp_5yr": [190.79,200.96,177.62,189.29,205.85],
    33. "gdp": 205.85,
    34. "tld": ".nz"
    35. },
    36. {
    37. "country": "United Kingdom",
    38. "flag": ":flag-gb:",
    39. "gdp_5yr": [2739.82,3022.83,2885.57,2650.85,2622.43],
    40. "gdp": 2622.43,
    41. "tld": ".uk"
    42. },
    43. {
    44. "country": "India",
    45. "flag": ":flag-in:",
    46. "gdp_5yr": [1856.72,2039.1,2102.4,2274.2,2597.49],
    47. "gdp": 2597.49,
    48. "tld": ".in"
    49. },
    50. {
    51. "country": "Mexico",
    52. "flag": ":flag-mx:",
    53. "gdp_5yr": [1274.44,1314.39,1169.62,1076.91,1149.92],
    54. "gdp": 1149.92,
    55. "tld": ".mx"
    56. }
    57. ]
    58. ' layout loading editor context-menu pager page-size="4" page-size-options="4,6,8">
    59. <zg-colgroup>
    60. <zg-column index="country"></zg-column>
    61. <zg-column index="gdp_5yr" header="5yr GDP ($ Bil.)" cell-class="gdp5" renderer="renderGDP" align="center" title="This country's five-year Gross Domestic Product (nominal) sparkline">
    62. <span class="sparklines">[[index.gdp_5yr]]</span>
    63. </zg-column>
    64. <zg-column index="flag" cell-class="flag" renderer="renderFlag" align="center"></zg-column>
    65. <zg-column index="gdp" header="2017 GDP ($ Bil.)" cell-class="gdp" type="currency" type-currency="usd" align="right" title="This country's 2017 Gross Domestic Product (nominal)"></zg-column>
    66. <zg-column index="tld" align="center" title="This country's Top-Level Domain"></zg-column>
    67. </zg-colgroup>
    68. <zg-source><small>Source:</small> Wikipedia, World Bank</zg-source>
    69. </zing-grid>
    70. </body>
    71.  
    72. </html>
    1. #mobile-grid-demo {
    2. --zg-row-card-flex-basis: 50%;
    3. overflow: hidden;
    4. }
    5.  
    6. #mobile-grid-demo zg-source {
    7. opacity: 0;
    8. }
    9.  
    10. #mobile-grid-demo zg-source[role] {
    11. opacity: 1;
    12. }
    13.  
    14. #mobile-grid-demo [layout="card"] zg-row {
    15. background: #fbfbfb;
    16. }
    17.  
    18. #mobile-grid-demo [layout="card"] zg-cell {
    19. max-width: 50%;
    20. }
    21.  
    22. #mobile-grid-demo [layout="card"] zg-cell:before {
    23. justify-content: center;
    24. text-align: center;
    25. }
    26.  
    27. /* All cards & row GDP_5yr */
    28. #mobile-grid-demo [layout="card"] zg-cell [data-field-index],
    29. #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
    30. display: flex;
    31. align-items: center;
    32. justify-content: center;
    33. text-align: center;
    34. line-height: 1.4;
    35. background: #fff;
    36. box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    37. }
    38.  
    39. /* GDP Only */
    40. #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
    41. margin: 0 auto;
    42. padding: 10px;
    43. max-width: 90px;
    44. }
    45.  
    46. /* All Mobile */
    47. #mobile-grid-demo [layout="card"] zg-cell [data-field-index] {
    48. margin: 8px 0;
    49. padding: 10px 0;
    50. max-width: 100%;
    51. width: 100%;
    52. min-height: 51px;
    53. }
    54.  
    55. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell {
    56. padding: 0 13px;
    57. }
    58.  
    59. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index] {
    60. margin-right: 0;
    61. margin-left: 0;
    62. font-size: .9rem;
    63. }
    64.  
    65. #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index="flag"] {
    66. font-size: 2rem;
    67. }
    68.  
    69. #mobile-grid-demo .flag [data-field-index] {
    70. min-height: 42px;
    71. visibility: hidden;
    72. justify-content: center;
    73. font-size: 2rem;
    74. }
    75.  
    76. #mobile-grid-demo .flag [data-field-index].loaded {
    77. visibility: visible;
    78. }
    79.  
    80. #mobile-grid-demo zg-column .sparklines {
    81. opacity: 0;
    82. }
    83.  
    84. #mobile-grid-demo zg-source small {
    85. margin-right: 3px;
    86. font-size: 90%;
    87. opacity: .7;
    88. }
    89.  
    90. @media screen and (min-width:768px) {
    91. #mobile-grid-demo {
    92. --zing-grid-border: 0;
    93. }
    94. }
    1. const zgMobileDemo = {
    2. grid: document.getElementById('mobile-grid-demo'),
    3. emojis: null,
    4. loadedAttr: 'loaded',
    5. renderFlag(shortcode, cellDom, $cell) {
    6. const {
    7. emojis,
    8. loadedAttr
    9. } = zgMobileDemo;
    10. let returnText = shortcode;
    11. if (emojis && emojis.length) {
    12. for (let emoji in emojis) {
    13. if (shortcode === emojis[emoji].shortname) {
    14. returnText = emojis[emoji].emoji;
    15. $cell.dom().children[0].classList.add(loadedAttr);
    16. break;
    17. }
    18. }
    19. }
    20. return returnText;
    21. },
    22. renderGDP(values, cellDom, $cell) {
    23. const {
    24. loadedAttr
    25. } = zgMobileDemo;
    26. const sparklineContainer = $cell.dom().querySelector('.sparklines');
    27. $(sparklineContainer).sparkline('html', {
    28. type: 'line',
    29. fillColor: 'transparent',
    30. width: 60,
    31. height: 50,
    32. });
    33. $cell.dom().children[0].classList.add(loadedAttr);
    34. },
    35. };
    36.  
    37. // window:load event for Javascript to run after HTML
    38. // because this Javascript is injected into the document head
    39. window.addEventListener('load', (e) => {
    40. // Javascript code to execute after DOM content
    41. // Register renderers
    42. ZingGrid.registerMethod(zgMobileDemo.renderGDP, 'renderGDP');
    43. ZingGrid.registerMethod(zgMobileDemo.renderFlag, 'renderFlag');
    44.  
    45.  
    46. fetch('https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json')
    47. .then(r => r.json())
    48. .then(r => {
    49. zgMobileDemo.emojis = r.emojis;
    50. if (zgMobileDemo.grid) zgMobileDemo.grid.refresh();
    51. });
    52. });