- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingGrid Demo</title>
- <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
- <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
- <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
- <style>
- #mobile-grid-demo {
- --zg-row-card-flex-basis: 50%;
- overflow: hidden;
- }
-
- #mobile-grid-demo zg-source {
- opacity: 0;
- }
-
- #mobile-grid-demo zg-source[role] {
- opacity: 1;
- }
-
- #mobile-grid-demo [layout="card"] zg-row {
- background: #fbfbfb;
- }
-
- #mobile-grid-demo [layout="card"] zg-cell {
- max-width: 50%;
- }
-
- #mobile-grid-demo [layout="card"] zg-cell:before {
- justify-content: center;
- text-align: center;
- }
-
- /* All cards & row GDP_5yr */
- #mobile-grid-demo [layout="card"] zg-cell [data-field-index],
- #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- line-height: 1.4;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
- }
-
- /* GDP Only */
- #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
- margin: 0 auto;
- padding: 10px;
- max-width: 90px;
- }
-
- /* All Mobile */
- #mobile-grid-demo [layout="card"] zg-cell [data-field-index] {
- margin: 8px 0;
- padding: 10px 0;
- max-width: 100%;
- width: 100%;
- min-height: 51px;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell {
- padding: 0 13px;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index] {
- margin-right: 0;
- margin-left: 0;
- font-size: .9rem;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index="flag"] {
- font-size: 2rem;
- }
-
- #mobile-grid-demo .flag [data-field-index] {
- min-height: 42px;
- visibility: hidden;
- justify-content: center;
- font-size: 2rem;
- }
-
- #mobile-grid-demo .flag [data-field-index].loaded {
- visibility: visible;
- }
-
- #mobile-grid-demo zg-column .sparklines {
- opacity: 0;
- }
-
- #mobile-grid-demo zg-source small {
- margin-right: 3px;
- font-size: 90%;
- opacity: .7;
- }
-
- @media screen and (min-width:768px) {
- #mobile-grid-demo {
- --zing-grid-border: 0;
- }
- }
-
- zing-grid[loading] {
- height: 404px;
- }
- </style>
- </head>
-
- <body>
- <zing-grid id="mobile-grid-demo" caption="Zing Around The Globe" data='
- [
- {
- "country": "United States",
- "flag": ":flag-us:",
- "gdp_5yr": [16691.52,17427.61,18120.71,18624.48,19390.6],
- "gdp": 19390.6,
- "tld": ".us"
- },
- {
- "country": "Romania",
- "flag": ":flag-ro:",
- "gdp_5yr": [191.55,199,49,177.91,187.81,211.8],
- "gdp": 211.8,
- "tld": ".ro"
- },
- {
- "country": "New Zealand",
- "flag": ":flag-nz:",
- "gdp_5yr": [190.79,200.96,177.62,189.29,205.85],
- "gdp": 205.85,
- "tld": ".nz"
- },
- {
- "country": "United Kingdom",
- "flag": ":flag-gb:",
- "gdp_5yr": [2739.82,3022.83,2885.57,2650.85,2622.43],
- "gdp": 2622.43,
- "tld": ".uk"
- },
- {
- "country": "India",
- "flag": ":flag-in:",
- "gdp_5yr": [1856.72,2039.1,2102.4,2274.2,2597.49],
- "gdp": 2597.49,
- "tld": ".in"
- },
- {
- "country": "Mexico",
- "flag": ":flag-mx:",
- "gdp_5yr": [1274.44,1314.39,1169.62,1076.91,1149.92],
- "gdp": 1149.92,
- "tld": ".mx"
- }
- ]
- ' layout loading editor context-menu pager page-size="4" page-size-options="4,6,8">
- <zg-colgroup>
- <zg-column index="country"></zg-column>
- <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">
- <span class="sparklines">[[index.gdp_5yr]]</span>
- </zg-column>
- <zg-column index="flag" cell-class="flag" renderer="renderFlag" align="center"></zg-column>
- <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>
- <zg-column index="tld" align="center" title="This country's Top-Level Domain"></zg-column>
- </zg-colgroup>
- <zg-source><small>Source:</small> Wikipedia, World Bank</zg-source>
- </zing-grid>
- <script>
- ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
- const zgMobileDemo = {
- grid: document.getElementById('mobile-grid-demo'),
- emojis: null,
- loadedAttr: 'loaded',
- renderFlag(shortcode, cellDom, $cell) {
- const {
- emojis,
- loadedAttr
- } = zgMobileDemo;
- let returnText = shortcode;
- if (emojis && emojis.length) {
- for (let emoji in emojis) {
- if (shortcode === emojis[emoji].shortname) {
- returnText = emojis[emoji].emoji;
- $cell.dom().children[0].classList.add(loadedAttr);
- break;
- }
- }
- }
- return returnText;
- },
- renderGDP(values, cellDom, $cell) {
- const {
- loadedAttr
- } = zgMobileDemo;
- const sparklineContainer = $cell.dom().querySelector('.sparklines');
- $(sparklineContainer).sparkline('html', {
- type: 'line',
- fillColor: 'transparent',
- width: 60,
- height: 50,
- });
- $cell.dom().children[0].classList.add(loadedAttr);
- },
- };
-
- // window:load event for Javascript to run after HTML
- // because this Javascript is injected into the document head
- window.addEventListener('load', (e) => {
- // Javascript code to execute after DOM content
- // Register renderers
- ZingGrid.registerMethod(zgMobileDemo.renderGDP, 'renderGDP');
- ZingGrid.registerMethod(zgMobileDemo.renderFlag, 'renderFlag');
-
-
- fetch('https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json')
- .then(r => r.json())
- .then(r => {
- zgMobileDemo.emojis = r.emojis;
- if (zgMobileDemo.grid) zgMobileDemo.grid.refresh();
- });
- });
- </script>
- </body>
-
- </html>
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingGrid Demo</title>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
- <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
- </head>
-
- <body>
- <zing-grid id="mobile-grid-demo" caption="Zing Around The Globe" data='
- [
- {
- "country": "United States",
- "flag": ":flag-us:",
- "gdp_5yr": [16691.52,17427.61,18120.71,18624.48,19390.6],
- "gdp": 19390.6,
- "tld": ".us"
- },
- {
- "country": "Romania",
- "flag": ":flag-ro:",
- "gdp_5yr": [191.55,199,49,177.91,187.81,211.8],
- "gdp": 211.8,
- "tld": ".ro"
- },
- {
- "country": "New Zealand",
- "flag": ":flag-nz:",
- "gdp_5yr": [190.79,200.96,177.62,189.29,205.85],
- "gdp": 205.85,
- "tld": ".nz"
- },
- {
- "country": "United Kingdom",
- "flag": ":flag-gb:",
- "gdp_5yr": [2739.82,3022.83,2885.57,2650.85,2622.43],
- "gdp": 2622.43,
- "tld": ".uk"
- },
- {
- "country": "India",
- "flag": ":flag-in:",
- "gdp_5yr": [1856.72,2039.1,2102.4,2274.2,2597.49],
- "gdp": 2597.49,
- "tld": ".in"
- },
- {
- "country": "Mexico",
- "flag": ":flag-mx:",
- "gdp_5yr": [1274.44,1314.39,1169.62,1076.91,1149.92],
- "gdp": 1149.92,
- "tld": ".mx"
- }
- ]
- ' layout loading editor context-menu pager page-size="4" page-size-options="4,6,8">
- <zg-colgroup>
- <zg-column index="country"></zg-column>
- <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">
- <span class="sparklines">[[index.gdp_5yr]]</span>
- </zg-column>
- <zg-column index="flag" cell-class="flag" renderer="renderFlag" align="center"></zg-column>
- <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>
- <zg-column index="tld" align="center" title="This country's Top-Level Domain"></zg-column>
- </zg-colgroup>
- <zg-source><small>Source:</small> Wikipedia, World Bank</zg-source>
- </zing-grid>
- </body>
-
- </html>
- #mobile-grid-demo {
- --zg-row-card-flex-basis: 50%;
- overflow: hidden;
- }
-
- #mobile-grid-demo zg-source {
- opacity: 0;
- }
-
- #mobile-grid-demo zg-source[role] {
- opacity: 1;
- }
-
- #mobile-grid-demo [layout="card"] zg-row {
- background: #fbfbfb;
- }
-
- #mobile-grid-demo [layout="card"] zg-cell {
- max-width: 50%;
- }
-
- #mobile-grid-demo [layout="card"] zg-cell:before {
- justify-content: center;
- text-align: center;
- }
-
- /* All cards & row GDP_5yr */
- #mobile-grid-demo [layout="card"] zg-cell [data-field-index],
- #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- line-height: 1.4;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
- }
-
- /* GDP Only */
- #mobile-grid-demo zg-cell [data-field-index="gdp_5yr"] {
- margin: 0 auto;
- padding: 10px;
- max-width: 90px;
- }
-
- /* All Mobile */
- #mobile-grid-demo [layout="card"] zg-cell [data-field-index] {
- margin: 8px 0;
- padding: 10px 0;
- max-width: 100%;
- width: 100%;
- min-height: 51px;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell {
- padding: 0 13px;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index] {
- margin-right: 0;
- margin-left: 0;
- font-size: .9rem;
- }
-
- #mobile-grid-demo[viewport="mobile"][layout="card"] zg-cell [data-field-index="flag"] {
- font-size: 2rem;
- }
-
- #mobile-grid-demo .flag [data-field-index] {
- min-height: 42px;
- visibility: hidden;
- justify-content: center;
- font-size: 2rem;
- }
-
- #mobile-grid-demo .flag [data-field-index].loaded {
- visibility: visible;
- }
-
- #mobile-grid-demo zg-column .sparklines {
- opacity: 0;
- }
-
- #mobile-grid-demo zg-source small {
- margin-right: 3px;
- font-size: 90%;
- opacity: .7;
- }
-
- @media screen and (min-width:768px) {
- #mobile-grid-demo {
- --zing-grid-border: 0;
- }
- }
- const zgMobileDemo = {
- grid: document.getElementById('mobile-grid-demo'),
- emojis: null,
- loadedAttr: 'loaded',
- renderFlag(shortcode, cellDom, $cell) {
- const {
- emojis,
- loadedAttr
- } = zgMobileDemo;
- let returnText = shortcode;
- if (emojis && emojis.length) {
- for (let emoji in emojis) {
- if (shortcode === emojis[emoji].shortname) {
- returnText = emojis[emoji].emoji;
- $cell.dom().children[0].classList.add(loadedAttr);
- break;
- }
- }
- }
- return returnText;
- },
- renderGDP(values, cellDom, $cell) {
- const {
- loadedAttr
- } = zgMobileDemo;
- const sparklineContainer = $cell.dom().querySelector('.sparklines');
- $(sparklineContainer).sparkline('html', {
- type: 'line',
- fillColor: 'transparent',
- width: 60,
- height: 50,
- });
- $cell.dom().children[0].classList.add(loadedAttr);
- },
- };
-
- // window:load event for Javascript to run after HTML
- // because this Javascript is injected into the document head
- window.addEventListener('load', (e) => {
- // Javascript code to execute after DOM content
- // Register renderers
- ZingGrid.registerMethod(zgMobileDemo.renderGDP, 'renderGDP');
- ZingGrid.registerMethod(zgMobileDemo.renderFlag, 'renderFlag');
-
-
- fetch('https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json')
- .then(r => r.json())
- .then(r => {
- zgMobileDemo.emojis = r.emojis;
- if (zgMobileDemo.grid) zgMobileDemo.grid.refresh();
- });
- });