The $blob
function dynamically generates and processes a Blob object from data specified in an HTML element's attributes. It then creates a downloadable link for the generated Blob. This function is versatile, handling JSON and plain text data, and optionally applies a URL to the element or triggers a download.
function $blob(target, scoop = {})
target
: The HTML element that triggers the Blob generation.scoop
(optional): An object containing dynamic values for placeholder replacement in the data.
blob-t
: Selector for an element containing data to be converted to a Blob. Defaults to thetarget
element if not provided.blob-typ
: MIME type of the Blob. Defaults to"text/plain"
.blob-data
: Data to be converted to a Blob. This can contain placeholders starting with$
.blob-name
: Filename for the downloaded Blob.blob-url-t
: Determines how the URL is applied. If set to"apply"
, the function sets thehref
anddownload
attributes of the element to create a link. If set to"url"
, it only sets thehref
attribute. Otherwise, it triggers a download directly.blob-swap
: Attribute containing the name of the property (textContent
,innerHTML
, etc.) from which to extract data ifblob-data
is not provided.
The blob-if
attribute specifies the event that triggers the Blob creation and download. Below are the available options:
void
: The Blob is created and processed immediately when the script runs.
** OR MORE eVENTS Exmaple ,click....***
<button class="button"
blob-typ="text/plain"
blob-data="Exmaple a text file"
blob-name="simpal.text"
blob-if="void">
Download Text
</button>
HTML:
<script>
var dynamic = "hello";
var id = 2;
</script>
<button class="button"
blob-typ="application/json"
blob-data='{
"example": [1, 2, 3],
"example2": "2",
"example3": "$dynamic",
"id": "$id"
}'
blob-name="hello.json"
blob-if="click">
Download hello.json
</button>
HTML:
<div id="content"
blob-typ="text/plain"
blob-swap="innerHTML"
blob-name="content.txt"
>
<p>This is some text content.</p>
</div>
<button class="button"
blob-t="#content"
blob-if="click">
Download Text
</button>
HTML:
<script>
var dynamic = "hello";
var id = 2;
</script>
<a id="downloadLink"
blob-typ="application/json"
blob-data='{
"example": [1, 2, 3],
"example2": "2",
"example3": "$dynamic",
"id": "$id"
}'
blob-name="hello.json"
blob-url-t="apply">
Prepare JSON Download
</a>
<button id="prepareButton">Prepare Download</button>
- Data Extraction:
- Retrieves the data from
blob-data
orblob-swap
attributes.
- Retrieves the data from
- Placeholder Replacement:
- Replaces placeholders (e.g.,
$dynamic
) in the data with corresponding values fromscoop
or the current scope.
- Replaces placeholders (e.g.,
- Content Type Handling:
- If
blob-typ
is"application/json"
, ensures the data is valid JSON and pretty-prints it.
- If
- Blob Creation and URL Handling:
- Creates a Blob from the data.
- Depending on the value of
blob-url-t
, either applies the URL to the element or triggers a download.