• 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.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     h4 {
    18.       color: #fff;
    19.       font-weight: 500;
    20.       font-size: 1.15rem;
    21.       margin: 0.75rem 0;
    22.       text-align: center;
    23.     }
    24.  
    25.     zing-grid {
    26.       border: 1px #e3e3e3 solid;
    27.       margin: 0 0 2rem;
    28.     }
    29.  
    30.     button {
    31.       background-color: #1EA3ED;
    32.       border: none;
    33.       border-radius: 8px;
    34.       color: #fff;
    35.       cursor: pointer;
    36.       font-size: 0.85rem;
    37.       font-weight: bold;
    38.       height: 2.5rem;
    39.       line-height: 1rem;
    40.       padding: 0.5rem 0.75rem;
    41.       text-transform: uppercase;
    42.     }
    43.  
    44.     button:hover {
    45.       background-color: #00c6ff;
    46.     }
    47.  
    48.     .container--controls {
    49.       background: #fff;
    50.       border: 1px solid #ededed;
    51.       border-radius: 5px;
    52.     }
    53.  
    54.     .container--controls>div {
    55.       margin: 0 1rem 1rem 1rem;
    56.     }
    57.  
    58.     .container--controls h3 {
    59.       border-bottom: 0.00624rem #e3e3e3 solid;
    60.       padding-bottom: 1rem;
    61.       text-align: center;
    62.     }
    63.  
    64.     .container--flex {
    65.       display: flex;
    66.       flex-direction: column;
    67.     }
    68.  
    69.     .container--shadow {
    70.       box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
    71.     }
    72.  
    73.     .container--size {
    74.       height: 100%;
    75.       width: 10rem;
    76.     }
    77.  
    78.     .container--log,
    79.     #eventlog {
    80.       flex-basis: 100%;
    81.     }
    82.  
    83.     .control__item {
    84.       display: flex;
    85.       flex-direction: column;
    86.       margin: 0 0 1rem;
    87.       font-size: 1rem;
    88.       font-weight: bold;
    89.     }
    90.  
    91.  
    92.     .control__item:last-child {
    93.       border-top: 0.00624rem #e3e3e3 solid;
    94.       margin-top: auto;
    95.       padding-top: 1rem;
    96.     }
    97.  
    98.     .demo-container {
    99.       box-sizing: border-box;
    100.       display: grid;
    101.       grid-template-columns: 0fr 4fr;
    102.       grid-gap: 2rem;
    103.       padding: 2.5rem 3.5rem;
    104.     }
    105.  
    106.     .eventlog {
    107.       background-color: #232c2f;
    108.       border: 1px solid #ededed;
    109.       border-radius: 6px;
    110.       min-height: 175px;
    111.       height: 100%;
    112.       overflow: hidden;
    113.     }
    114.  
    115.     .eventlog__bar {
    116.       background-color: #e6e6e6;
    117.       border-top-right-radius: 5px;
    118.       border-top-left-radius: 5px;
    119.       color: #3c4244;
    120.       font-size: 0.85rem;
    121.       font-weight: bold;
    122.       height: 1.5rem;
    123.       line-height: 1.5rem;
    124.       padding: 0.25rem 0.5rem;
    125.       text-align: center;
    126.       vertical-align: middle;
    127.     }
    128.  
    129.     .eventlog__log {
    130.       color: #1FFE00;
    131.       font-size: 1.15rem;
    132.       height: 100%;
    133.       padding: 1rem;
    134.       white-space: pre-wrap;
    135.       word-wrap: break-word;
    136.     }
    137.  
    138.     .eventlog__minimize {
    139.       border-radius: 1rem;
    140.       cursor: pointer;
    141.       float: left;
    142.       fill: #00394B;
    143.       font-size: 0.5rem;
    144.       height: 1.2rem;
    145.       line-height: 1.2rem;
    146.       margin-top: 0.2rem;
    147.       width: 1.2rem;
    148.     }
    149.  
    150.     .eventlog__minimize:hover {
    151.       fill: #778C91;
    152.     }
    153.  
    154.     .eventlog__title {
    155.       padding-right: 1.7rem;
    156.     }
    157.  
    158.     .control__item input[type="text"] {
    159.       border: 2px solid rgb(226, 226, 226);
    160.       border-radius: 5px;
    161.       box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    162.       color: rgb(0, 55, 73);
    163.       height: 2.25rem;
    164.       font-size: 0.85rem;
    165.       font-weight: 600;
    166.       padding: 0 0.75rem;
    167.     }
    168.  
    169.     #reset-grid {
    170.       background-color: #DA205B;
    171.     }
    172.  
    173.     #reset-grid:hover {
    174.       background-color: #E980A4;
    175.     }
    176.  
    177.     @media screen and (max-width:1080px) {
    178.       #eventlog {
    179.         height: 170px;
    180.       }
    181.  
    182.       .container--controls {
    183.         grid-column: 1 / span 4;
    184.         grid-row: 1;
    185.         min-width: 100%;
    186.       }
    187.  
    188.       .container--size {
    189.         width: inherit;
    190.       }
    191.  
    192.       .container {
    193.         display: grid;
    194.         grid-column: 1 / span 4;
    195.       }
    196.  
    197.       input {
    198.         max-width: 100%;
    199.       }
    200.     }
    201.  
    202.     zing-grid[loading] {
    203.       height: 360px;
    204.     }
    205.   </style>
    206. </head>
    207.  
    208. <body>
    209.  
    210.   <div class="demo-container">
    211.  
    212.     <div class="container container--controls container--shadow">
    213.       <!-- caption controls -->
    214.       <div class="container--size container--flex">
    215.         <h3>Caption API&nbsp;Methods</h3>
    216.         <div class="control__item">
    217.           <button id="get-caption">Get Caption</button>
    218.         </div>
    219.         <div class="control__item">
    220.           <label for="set-caption">Set Caption</label>
    221.           <input type="text" name="set-caption" id="set-caption">
    222.         </div>
    223.  
    224.         <div class="control__item">
    225.           <button id="reset-grid">Reset Grid/Log</button>
    226.         </div>
    227.       </div>
    228.     </div>
    229.  
    230.  
    231.     <div class="container container--flex">
    232.       <h4>Live demo</h4>
    233.       <!-- grid container -->
    234.       <div class="container container--demo">
    235.         <zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
    236.               {
    237.                 "firstName": "John",
    238.                 "lastName": "Doe",
    239.                 "age": 45
    240.               },
    241.               {
    242.                 "firstName": "Jane",
    243.                 "lastName": "Doe",
    244.                 "age": 44
    245.               },
    246.               {
    247.                 "firstName": "John Jr.",
    248.                 "lastName": "Doe",
    249.                 "age": 15
    250.               },
    251.               {
    252.                 "firstName": "Jane Jr.",
    253.                 "lastName": "Doe",
    254.                 "age": 13
    255.               }
    256.             ]'></zing-grid>
    257.       </div>
    258.  
    259.       <!-- log container -->
    260.       <div class="container container--log container--flex">
    261.         <div class="eventlog container--shadow">
    262.           <div class="eventlog__bar">
    263.             <svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    264.               <defs></defs>
    265.               <g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
    266.                 <g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
    267.                   <g id="Group-3" transform="translate(2383.000000, 1404.000000)">
    268.                     <circle id="Oval" cx="27" cy="27" r="27"></circle>
    269.                     <g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
    270.                       <path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
    271.                     </g>
    272.                   </g>
    273.                 </g>
    274.               </g>
    275.             </svg>
    276.             <span class="eventlog__title">Console</span>
    277.           </div>
    278.           <pre class="eventlog__log"></pre>
    279.         </div>
    280.       </div>
    281.     </div>
    282.  
    283.   </div> <!-- end demo container -->
    284.  
    285.   <script>
    286.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // GLOBAL REFERENCES
    287.     const zingGridRef = document.querySelector('#myGrid');
    288.     const eventLogRef = document.querySelector('.eventlog__log');
    289.     const resetGridRef = document.querySelector('#reset-grid');
    290.  
    291.     // caption section
    292.     const getCaptionRef = document.querySelector('#get-caption');
    293.     const setCaptionRef = document.querySelector('#set-caption');
    294.  
    295.     /*
    296.      * @descrption clear current event log header and text
    297.      */
    298.     const _clearEventLog = () => {
    299.       if (eventLogRef) eventLogRef.innerHTML = '';
    300.     }
    301.  
    302.     /**
    303.      * @description used as replace param in JSON.stringify
    304.      */
    305.     function censor(key, value) {
    306.       if (typeof(value) == "object") {
    307.         return undefined;
    308.       }
    309.       return value;
    310.     }
    311.  
    312.     /*
    313.      * @description format data to be displayed in the event box
    314.      * @param {*} logData - data to log on the screen
    315.      * @param {String} [header] - text to define what is being shown
    316.      */
    317.     const _logCustomEvent = (logData, code) => {
    318.       if (eventLogRef) {
    319.         _clearEventLog();
    320.         if (code) {
    321.           eventLogRef.innerHTML += `${code}`;
    322.         }
    323.         if (logData) {
    324.           var stringify = JSON.stringify(logData, censor, 2);
    325.           if (stringify) {
    326.             eventLogRef.innerHTML += stringify;
    327.           } else {
    328.             eventLogRef.innerHTML += '{{' + logData + '}}';
    329.           }
    330.         }
    331.       }
    332.     }
    333.  
    334.     /*
    335.      * @description resets grid to default and clears log
    336.      */
    337.     const _resetGrid = () => {
    338.       var inputs = document.querySelectorAll('.control__item input[type="text"]');
    339.       for (var i = 0; i < inputs.length; i++) {
    340.         inputs[i].value = '';
    341.       }
    342.  
    343.       if (zingGridRef) {
    344.         zingGridRef.setCaption('Meet The Doe Family');
    345.         _clearEventLog();
    346.       }
    347.     }
    348.  
    349.     /*
    350.      * @description get the current pageSize
    351.      */
    352.     const _getCaption = () => {
    353.       if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
    354.     }
    355.  
    356.     /*
    357.      * @description set the grid caption value
    358.      * @params {Event} e - native browser 'change' event
    359.      */
    360.     const _setCaption = (e) => {
    361.       const mCaptionValue = e.target.value;
    362.       if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
    363.       _logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
    364.     }
    365.  
    366.     // assign event listeners for inputs
    367.     // -----------------------------------
    368.     if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
    369.  
    370.     // caption events
    371.     if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
    372.     if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
    373.  
    374.     _clearEventLog();
    375.  
    376.     // minimize event for console
    377.     const _minimizeLog = () => {
    378.       var consoleLog = document.querySelector('.eventlog');
    379.       var consoleStyle = window.getComputedStyle(consoleLog, null);
    380.       if (consoleStyle['minHeight'] === '0px') {
    381.         consoleLog.style.height = '100%';
    382.         consoleLog.style.minHeight = '175px';
    383.       } else {
    384.         consoleLog.style.height = '2rem';
    385.         consoleLog.style.minHeight = '0px';
    386.       }
    387.     }
    388.     const consoleMinimize = document.querySelector('.eventlog__minimize');
    389.     if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);
    390.   </script>
    391. </body>
    392.  
    393. </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.   <div class="demo-container">
    13.  
    14.     <div class="container container--controls container--shadow">
    15.       <!-- caption controls -->
    16.       <div class="container--size container--flex">
    17.         <h3>Caption API&nbsp;Methods</h3>
    18.         <div class="control__item">
    19.           <button id="get-caption">Get Caption</button>
    20.         </div>
    21.         <div class="control__item">
    22.           <label for="set-caption">Set Caption</label>
    23.           <input type="text" name="set-caption" id="set-caption">
    24.         </div>
    25.  
    26.         <div class="control__item">
    27.           <button id="reset-grid">Reset Grid/Log</button>
    28.         </div>
    29.       </div>
    30.     </div>
    31.  
    32.  
    33.     <div class="container container--flex">
    34.       <h4>Live demo</h4>
    35.       <!-- grid container -->
    36.       <div class="container container--demo">
    37.         <zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
    38.               {
    39.                 "firstName": "John",
    40.                 "lastName": "Doe",
    41.                 "age": 45
    42.               },
    43.               {
    44.                 "firstName": "Jane",
    45.                 "lastName": "Doe",
    46.                 "age": 44
    47.               },
    48.               {
    49.                 "firstName": "John Jr.",
    50.                 "lastName": "Doe",
    51.                 "age": 15
    52.               },
    53.               {
    54.                 "firstName": "Jane Jr.",
    55.                 "lastName": "Doe",
    56.                 "age": 13
    57.               }
    58.             ]'></zing-grid>
    59.       </div>
    60.  
    61.       <!-- log container -->
    62.       <div class="container container--log container--flex">
    63.         <div class="eventlog container--shadow">
    64.           <div class="eventlog__bar">
    65.             <svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    66.               <defs></defs>
    67.               <g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
    68.                 <g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
    69.                   <g id="Group-3" transform="translate(2383.000000, 1404.000000)">
    70.                     <circle id="Oval" cx="27" cy="27" r="27"></circle>
    71.                     <g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
    72.                       <path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
    73.                     </g>
    74.                   </g>
    75.                 </g>
    76.               </g>
    77.             </svg>
    78.             <span class="eventlog__title">Console</span>
    79.           </div>
    80.           <pre class="eventlog__log"></pre>
    81.         </div>
    82.       </div>
    83.     </div>
    84.  
    85.   </div> <!-- end demo container -->
    86.  
    87. </body>
    88.  
    89. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. h4 {
    10.   color: #fff;
    11.   font-weight: 500;
    12.   font-size: 1.15rem;
    13.   margin: 0.75rem 0;
    14.   text-align: center;
    15. }
    16.  
    17. zing-grid {
    18.   border: 1px #e3e3e3 solid;
    19.   margin: 0 0 2rem;
    20. }
    21.  
    22. button {
    23.   background-color: #1EA3ED;
    24.   border: none;
    25.   border-radius: 8px;
    26.   color: #fff;
    27.   cursor: pointer;
    28.   font-size: 0.85rem;
    29.   font-weight: bold;
    30.   height: 2.5rem;
    31.   line-height: 1rem;
    32.   padding: 0.5rem 0.75rem;
    33.   text-transform: uppercase;
    34. }
    35.  
    36. button:hover {
    37.   background-color: #00c6ff;
    38. }
    39.  
    40. .container--controls {
    41.   background: #fff;
    42.   border: 1px solid #ededed;
    43.   border-radius: 5px;
    44. }
    45.  
    46. .container--controls>div {
    47.   margin: 0 1rem 1rem 1rem;
    48. }
    49.  
    50. .container--controls h3 {
    51.   border-bottom: 0.00624rem #e3e3e3 solid;
    52.   padding-bottom: 1rem;
    53.   text-align: center;
    54. }
    55.  
    56. .container--flex {
    57.   display: flex;
    58.   flex-direction: column;
    59. }
    60.  
    61. .container--shadow {
    62.   box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
    63. }
    64.  
    65. .container--size {
    66.   height: 100%;
    67.   width: 10rem;
    68. }
    69.  
    70. .container--log,
    71. #eventlog {
    72.   flex-basis: 100%;
    73. }
    74.  
    75. .control__item {
    76.   display: flex;
    77.   flex-direction: column;
    78.   margin: 0 0 1rem;
    79.   font-size: 1rem;
    80.   font-weight: bold;
    81. }
    82.  
    83.  
    84. .control__item:last-child {
    85.   border-top: 0.00624rem #e3e3e3 solid;
    86.   margin-top: auto;
    87.   padding-top: 1rem;
    88. }
    89.  
    90. .demo-container {
    91.   box-sizing: border-box;
    92.   display: grid;
    93.   grid-template-columns: 0fr 4fr;
    94.   grid-gap: 2rem;
    95.   padding: 2.5rem 3.5rem;
    96. }
    97.  
    98. .eventlog {
    99.   background-color: #232c2f;
    100.   border: 1px solid #ededed;
    101.   border-radius: 6px;
    102.   min-height: 175px;
    103.   height: 100%;
    104.   overflow: hidden;
    105. }
    106.  
    107. .eventlog__bar {
    108.   background-color: #e6e6e6;
    109.   border-top-right-radius: 5px;
    110.   border-top-left-radius: 5px;
    111.   color: #3c4244;
    112.   font-size: 0.85rem;
    113.   font-weight: bold;
    114.   height: 1.5rem;
    115.   line-height: 1.5rem;
    116.   padding: 0.25rem 0.5rem;
    117.   text-align: center;
    118.   vertical-align: middle;
    119. }
    120.  
    121. .eventlog__log {
    122.   color: #1FFE00;
    123.   font-size: 1.15rem;
    124.   height: 100%;
    125.   padding: 1rem;
    126.   white-space: pre-wrap;
    127.   word-wrap: break-word;
    128. }
    129.  
    130. .eventlog__minimize {
    131.   border-radius: 1rem;
    132.   cursor: pointer;
    133.   float: left;
    134.   fill: #00394B;
    135.   font-size: 0.5rem;
    136.   height: 1.2rem;
    137.   line-height: 1.2rem;
    138.   margin-top: 0.2rem;
    139.   width: 1.2rem;
    140. }
    141.  
    142. .eventlog__minimize:hover {
    143.   fill: #778C91;
    144. }
    145.  
    146. .eventlog__title {
    147.   padding-right: 1.7rem;
    148. }
    149.  
    150. .control__item input[type="text"] {
    151.   border: 2px solid rgb(226, 226, 226);
    152.   border-radius: 5px;
    153.   box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    154.   color: rgb(0, 55, 73);
    155.   height: 2.25rem;
    156.   font-size: 0.85rem;
    157.   font-weight: 600;
    158.   padding: 0 0.75rem;
    159. }
    160.  
    161. #reset-grid {
    162.   background-color: #DA205B;
    163. }
    164.  
    165. #reset-grid:hover {
    166.   background-color: #E980A4;
    167. }
    168.  
    169. @media screen and (max-width:1080px) {
    170.   #eventlog {
    171.     height: 170px;
    172.   }
    173.  
    174.   .container--controls {
    175.     grid-column: 1 / span 4;
    176.     grid-row: 1;
    177.     min-width: 100%;
    178.   }
    179.  
    180.   .container--size {
    181.     width: inherit;
    182.   }
    183.  
    184.   .container {
    185.     display: grid;
    186.     grid-column: 1 / span 4;
    187.   }
    188.  
    189.   input {
    190.     max-width: 100%;
    191.   }
    192. }
    1. // GLOBAL REFERENCES
    2. const zingGridRef = document.querySelector('#myGrid');
    3. const eventLogRef = document.querySelector('.eventlog__log');
    4. const resetGridRef = document.querySelector('#reset-grid');
    5.  
    6. // caption section
    7. const getCaptionRef = document.querySelector('#get-caption');
    8. const setCaptionRef = document.querySelector('#set-caption');
    9.  
    10. /*
    11.  * @descrption clear current event log header and text
    12.  */
    13. const _clearEventLog = () => {
    14.   if (eventLogRef) eventLogRef.innerHTML = '';
    15. }
    16.  
    17. /**
    18.  * @description used as replace param in JSON.stringify
    19.  */
    20. function censor(key, value) {
    21.   if (typeof(value) == "object") {
    22.     return undefined;
    23.   }
    24.   return value;
    25. }
    26.  
    27. /*
    28.  * @description format data to be displayed in the event box
    29.  * @param {*} logData - data to log on the screen
    30.  * @param {String} [header] - text to define what is being shown
    31.  */
    32. const _logCustomEvent = (logData, code) => {
    33.   if (eventLogRef) {
    34.     _clearEventLog();
    35.     if (code) {
    36.       eventLogRef.innerHTML += `${code}`;
    37.     }
    38.     if (logData) {
    39.       var stringify = JSON.stringify(logData, censor, 2);
    40.       if (stringify) {
    41.         eventLogRef.innerHTML += stringify;
    42.       } else {
    43.         eventLogRef.innerHTML += '{{' + logData + '}}';
    44.       }
    45.     }
    46.   }
    47. }
    48.  
    49. /*
    50.  * @description resets grid to default and clears log
    51.  */
    52. const _resetGrid = () => {
    53.   var inputs = document.querySelectorAll('.control__item input[type="text"]');
    54.   for (var i = 0; i < inputs.length; i++) {
    55.     inputs[i].value = '';
    56.   }
    57.  
    58.   if (zingGridRef) {
    59.     zingGridRef.setCaption('Meet The Doe Family');
    60.     _clearEventLog();
    61.   }
    62. }
    63.  
    64. /*
    65.  * @description get the current pageSize
    66.  */
    67. const _getCaption = () => {
    68.   if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
    69. }
    70.  
    71. /*
    72.  * @description set the grid caption value
    73.  * @params {Event} e - native browser 'change' event
    74.  */
    75. const _setCaption = (e) => {
    76.   const mCaptionValue = e.target.value;
    77.   if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
    78.   _logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
    79. }
    80.  
    81. // assign event listeners for inputs
    82. // -----------------------------------
    83. if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
    84.  
    85. // caption events
    86. if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
    87. if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
    88.  
    89. _clearEventLog();
    90.  
    91. // minimize event for console
    92. const _minimizeLog = () => {
    93.   var consoleLog = document.querySelector('.eventlog');
    94.   var consoleStyle = window.getComputedStyle(consoleLog, null);
    95.   if (consoleStyle['minHeight'] === '0px') {
    96.     consoleLog.style.height = '100%';
    97.     consoleLog.style.minHeight = '175px';
    98.   } else {
    99.     consoleLog.style.height = '2rem';
    100.     consoleLog.style.minHeight = '0px';
    101.   }
    102. }
    103. const consoleMinimize = document.querySelector('.eventlog__minimize');
    104. if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);