@nightingale-elements/nightingale-saver NPM

<nightingale-saver>

The nightingale-saver component is used to download the ProtVista svg as images. By default, it renders a download button. It can be modified to include different content although the first child element provided should be a button.

The component to be saved is bound to protvista-saver though the element-id attribute.

The background color is none by default. It can be set through the background-color attribute. The name and format of the file to be downloaded are passed as file-name and file-format respectively.

There are two methods available : preSave() and postSave(). These functions allows any manipulations to DOM before and after painting on the canvas.

Demo

Usage

Basic

<nightingale-saver element-id="track" id="#saver"> </nightingale-saver>

Passing different content to render other than the default

<nightingale-saver
  element-id="just-tracks"
  file-name="tracks"
  file-format="jpeg"
  background-color="#ddddee"
>
  <button>Download Just Tracks</button>
</nightingale-saver>

Using preSave() and postSave()

document.querySelector("#saver").preSave = () => {
  const base = document.querySelector("#track");
  const title = document.createElement("h2");
  title.setAttribute("id", "tmp_title_element");
  title.innerHTML = "ProtVista Snapshot";
  base.insertBefore(title, base.firstChild);
};
//removes the title from the DOM
document.querySelector("#saver").postSave = () => {
  document
    .querySelector("#track")
    .removeChild(document.getElementById("tmp_title_element"));
};