• 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://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. <style>
    9. .accordion-flex-layout {
    10. --zg-cell-vertical-align: top;
    11. }
    12.  
    13. /* target accordion for mobile and display as column*/
    14. zing-grid[viewport="mobile"] .accordion-container {
    15. flex-direction: column;
    16. flex-grow: 1;
    17. }
    18.  
    19. /* Main accordion styling */
    20. .accordion input {
    21. display: none;
    22. }
    23.  
    24. .accordion label {
    25. position: relative;
    26. display: block;
    27. background: #eee;
    28. border-radius: .25em;
    29. cursor: pointer;
    30. margin-bottom: .125em;
    31. padding: .75rem 1em;
    32. top: 15px;
    33. z-index: 20;
    34. }
    35.  
    36. .accordion label:hover {
    37. background: #ccc;
    38. }
    39.  
    40. .accordion input:checked+label {
    41. background: #ccc;
    42. border-bottom-right-radius: 0;
    43. border-bottom-left-radius: 0;
    44. color: white;
    45. margin-bottom: 0;
    46. }
    47.  
    48. .accordion label::after {
    49. content: '+';
    50. position: absolute;
    51. right: 5px;
    52. }
    53.  
    54. .accordion input:checked+label::after {
    55. content: '-';
    56. position: absolute;
    57. right: 5px;
    58. }
    59.  
    60. .accordion article {
    61. background: #f7f7f7;
    62. /*
    63. * max-height allows height transition in CSS
    64. * use height: 0px; otherwise
    65. */
    66. max-height: 0px;
    67. overflow: hidden;
    68. z-index: 10;
    69. opacity: 0;
    70. /* allow closing transition */
    71. -webkit-transition: all 0.7s ease;
    72. -moz-transition: all 0.7s ease;
    73. -o-transition: all 0.7s ease;
    74. transition: all 0.7s ease;
    75. }
    76.  
    77. .accordion article {
    78. padding: 1em;
    79. cursor: default;
    80. }
    81.  
    82. .accordion input:checked article {}
    83.  
    84. .accordion input:checked~article {
    85. border-bottom-left-radius: .25em;
    86. border-bottom-right-radius: .25em;
    87. /*
    88. * max-height allows height transition in CSS
    89. * use height: auto; otherwise
    90. */
    91. max-height: 500px;
    92. margin-bottom: .125em;
    93. opacity: 1;
    94. /* allow opening transition */
    95. -webkit-transition: all 1s ease;
    96. /* Safari */
    97. -moz-transition: all 1s ease;
    98. -o-transition: all 1s ease;
    99. transition: all 1s ease;
    100. }
    101.  
    102. zing-grid[loading] {
    103. height: 503px;
    104. }
    105. </style>
    106. </head>
    107.  
    108. <body>
    109.  
    110. <zing-grid caption="2016 FA Cup Teams" pager page-size="5" search sort>
    111. <zg-source>
    112. <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
    113. </p>
    114. </zg-source>
    115. <zg-data>
    116. <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
    117. <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    118. </zg-data>
    119. <zg-colgroup>
    120. <zg-column index="Team" header="Team Name"></zg-column>
    121. <zg-column index="Group" header="Group"></zg-column>
    122. <zg-column index="FIFA ranking" header="FIFA Ranking" width="fitcontent"></zg-column>
    123. <zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="Coach, Bio" header="Coach Info" width=250>
    124. <template>
    125. <section class="accordion">
    126. <input type="checkbox" id="changeme">
    127. <label for="changeme">[[index.Coach]]</label>
    128. <article>
    129. <p class="coachBio">[[index.Bio]]</p>
    130. </article>
    131. </section>
    132. </template>
    133. </zg-column>
    134.  
    135. <zg-column cell-class="accordion-flex-layout" index="strengths,weaknesses" header="Team Strengths/Weaknesses" renderer="_bindAccordion">
    136. <template>
    137. <style>
    138. h3 {
    139. padding-bottom: 0;
    140. margin-bottom: 0;
    141. }
    142.  
    143. h3+p {
    144. margin-top: 3px;
    145. margin-left: 8px;
    146. }
    147. </style>
    148. <section class="accordion">
    149. <input type="checkbox" id="changeme" />
    150. <label for="changeme">Expand Me</label>
    151. <article>
    152. <h3>Strengths</h3>
    153. <p class="strengths">[[index.strengths]]</p>
    154. <h3>Weaknesses</h3>
    155. <p class="weakness">[[index.weaknesses]]</p>
    156. </article>
    157. </section>
    158. </template>
    159. </zg-column>
    160. <zg-column index="Team" header="Roster" width="350"></zg-column>
    161. </zg-colgroup>
    162. </zing-grid>
    163.  
    164. <script>
    165. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global event handler for expanding dropdowns
    166. const expandHandler = function() {
    167. this.classList.toggle('active');
    168. this.nextElementSibling.classList.toggle('show');
    169. };
    170. // generate randomId for dropdownsreturn Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    171. const randomId = () => {
    172. return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    173. };
    174. // custom render function for coach info accordion
    175. // custom render function for coach info accordion
    176. function _bindAccordion(name, bio, cellRef, $cell) {
    177. // grab template contents
    178. const $input = cellRef.querySelector('input');
    179. const $label = cellRef.querySelector('label');
    180. // assign template attributes and custom id's
    181. // so the label for will trigger the dropdown
    182. const dropdownID = randomId();
    183. $input.setAttribute('id', `accordion_${dropdownID}`);
    184. $label.setAttribute('for', `accordion_${dropdownID}`);
    185. };
    186. </script>
    187. </body>
    188.  
    189. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12. <zing-grid caption="2016 FA Cup Teams" pager page-size="5" search sort>
    13. <zg-source>
    14. <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
    15. </p>
    16. </zg-source>
    17. <zg-data>
    18. <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
    19. <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    20. </zg-data>
    21. <zg-colgroup>
    22. <zg-column index="Team" header="Team Name"></zg-column>
    23. <zg-column index="Group" header="Group"></zg-column>
    24. <zg-column index="FIFA ranking" header="FIFA Ranking" width="fitcontent"></zg-column>
    25. <zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="Coach, Bio" header="Coach Info" width=250>
    26. <template>
    27. <section class="accordion">
    28. <input type="checkbox" id="changeme">
    29. <label for="changeme">[[index.Coach]]</label>
    30. <article>
    31. <p class="coachBio">[[index.Bio]]</p>
    32. </article>
    33. </section>
    34. </template>
    35. </zg-column>
    36.  
    37. <zg-column cell-class="accordion-flex-layout" index="strengths,weaknesses" header="Team Strengths/Weaknesses" renderer="_bindAccordion">
    38. <template>
    39. <style>
    40. h3 {
    41. padding-bottom: 0;
    42. margin-bottom: 0;
    43. }
    44.  
    45. h3+p {
    46. margin-top: 3px;
    47. margin-left: 8px;
    48. }
    49. </style>
    50. <section class="accordion">
    51. <input type="checkbox" id="changeme" />
    52. <label for="changeme">Expand Me</label>
    53. <article>
    54. <h3>Strengths</h3>
    55. <p class="strengths">[[index.strengths]]</p>
    56. <h3>Weaknesses</h3>
    57. <p class="weakness">[[index.weaknesses]]</p>
    58. </article>
    59. </section>
    60. </template>
    61. </zg-column>
    62. <zg-column index="Team" header="Roster" width="350"></zg-column>
    63. </zg-colgroup>
    64. </zing-grid>
    65.  
    66. </body>
    67.  
    68. </html>
    1. .accordion-flex-layout {
    2. --zg-cell-vertical-align: top;
    3. }
    4.  
    5. /* target accordion for mobile and display as column*/
    6. zing-grid[viewport="mobile"] .accordion-container {
    7. flex-direction: column;
    8. flex-grow: 1;
    9. }
    10.  
    11. /* Main accordion styling */
    12. .accordion input {
    13. display: none;
    14. }
    15.  
    16. .accordion label {
    17. position: relative;
    18. display: block;
    19. background: #eee;
    20. border-radius: .25em;
    21. cursor: pointer;
    22. margin-bottom: .125em;
    23. padding: .75rem 1em;
    24. top: 15px;
    25. z-index: 20;
    26. }
    27.  
    28. .accordion label:hover {
    29. background: #ccc;
    30. }
    31.  
    32. .accordion input:checked+label {
    33. background: #ccc;
    34. border-bottom-right-radius: 0;
    35. border-bottom-left-radius: 0;
    36. color: white;
    37. margin-bottom: 0;
    38. }
    39.  
    40. .accordion label::after {
    41. content: '+';
    42. position: absolute;
    43. right: 5px;
    44. }
    45.  
    46. .accordion input:checked+label::after {
    47. content: '-';
    48. position: absolute;
    49. right: 5px;
    50. }
    51.  
    52. .accordion article {
    53. background: #f7f7f7;
    54. /*
    55. * max-height allows height transition in CSS
    56. * use height: 0px; otherwise
    57. */
    58. max-height: 0px;
    59. overflow: hidden;
    60. z-index: 10;
    61. opacity: 0;
    62. /* allow closing transition */
    63. -webkit-transition: all 0.7s ease;
    64. -moz-transition: all 0.7s ease;
    65. -o-transition: all 0.7s ease;
    66. transition: all 0.7s ease;
    67. }
    68.  
    69. .accordion article {
    70. padding: 1em;
    71. cursor: default;
    72. }
    73.  
    74. .accordion input:checked article {}
    75.  
    76. .accordion input:checked~article {
    77. border-bottom-left-radius: .25em;
    78. border-bottom-right-radius: .25em;
    79. /*
    80. * max-height allows height transition in CSS
    81. * use height: auto; otherwise
    82. */
    83. max-height: 500px;
    84. margin-bottom: .125em;
    85. opacity: 1;
    86. /* allow opening transition */
    87. -webkit-transition: all 1s ease;
    88. /* Safari */
    89. -moz-transition: all 1s ease;
    90. -o-transition: all 1s ease;
    91. transition: all 1s ease;
    92. }
    1. // global event handler for expanding dropdowns
    2. const expandHandler = function() {
    3. this.classList.toggle('active');
    4. this.nextElementSibling.classList.toggle('show');
    5. };
    6. // generate randomId for dropdownsreturn Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    7. const randomId = () => {
    8. return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    9. };
    10. // custom render function for coach info accordion
    11. // custom render function for coach info accordion
    12. function _bindAccordion(name, bio, cellRef, $cell) {
    13. // grab template contents
    14. const $input = cellRef.querySelector('input');
    15. const $label = cellRef.querySelector('label');
    16. // assign template attributes and custom id's
    17. // so the label for will trigger the dropdown
    18. const dropdownID = randomId();
    19. $input.setAttribute('id', `accordion_${dropdownID}`);
    20. $label.setAttribute('for', `accordion_${dropdownID}`);
    21. };