Still working on the form styling! But need to test the interactions before optimizing too much.
Example of single plant download form
<script type="module" src="https://api.globalenergymonitor.org/static/gem-download-form.bundle.js"></script>
<gem-download-form title="Download the coal plant tracker" subtitle="You will get an XLS file" slugs="coal-plant-tracker"></gem-download-form>
Example of single plant download form with options for additional supplements (or other files)
<script type="module" src="https://api.globalenergymonitor.org/static/gem-download-form.bundle.js"></script>
<gem-download-form title="Download the coal mine tracker and maybe some supplements" slugs="coal-mine-tracker">
<label>I want the coal mine supplement <input name="slug" type="checkbox" value="coal-mine-supplement"></label>
<label>I want historical production data <input name="slug" type="checkbox" value="coal-mine-historical-production"></label>
</gem-download-form>
</div>
Download multiple files (without separate checkboxes for user to select from)
used here for tracker with it's supplements. Could be used for multiple trackers
<script type="module" src="https://api.globalenergymonitor.org/static/gem-download-form.bundle.js"></script>
<gem-download-form title="Download the coal mine tracker and supplements" slugs="coal-mine-tracker,coal-mine-supplement,coal-mine-historical-production,coal-mine-boundaries-methane">
</gem-download-form>
This is a form without a download
<script type="module" src="https://api.globalenergymonitor.org/static/gem-download-form.bundle.js"></script>
<gem-download-form title="Tell us what else you want to be able to do" subtitle="" submit-label="Get in touch"></gem-download-form>
These are versions that open the form in a modal -- currently used for downloading slices of data from API, not whole trackers.
But we can use modal button option with any of the above.
<button id="btn-csv">Coal plants in India with Blackrock ownership: download CSV</button>
<button id="btn-xlsx">Or download XLSX</button>
<script>
function launchDownload(format) {
// Build the params string that will travel end-to-end (POST → JWT → gate)
const params = new URLSearchParams({
tracker: 'coal_plants',
country: 'India',
owner_entity_id: 'E100001000348',
format,
}).toString();
const form = document.createElement('gem-download-form');
form.setAttribute('modal', '');
form.setAttribute('title', `Download coal plants (${format.toUpperCase()})`);
form.setAttribute('download-endpoint', 'https://api.globalenergymonitor.org/download');
form.setAttribute('download-params', params);
// Remove from DOM when the user closes the modal or the download completes
form.addEventListener('gem-close', () => form.remove());
form.addEventListener('gem-download-complete', () => {
// close after a short beat so the user sees the success state
setTimeout(() => form.close(), 800);
});
document.body.appendChild(form);
form.open();
}
document.getElementById('btn-csv').addEventListener('click', () => launchDownload('csv'));
document.getElementById('btn-xlsx').addEventListener('click', () => launchDownload('xlsx'));
</script>
