Zing Around The Globe

<!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();
    });
});