80 lines
2.5 KiB
HTML
80 lines
2.5 KiB
HTML
{% macro magic_link(url, text, unique_id='magic_link') %} {# Example Macro #}
|
|
<a
|
|
href="{{ url }}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
id="{{ unique_id }}"
|
|
>
|
|
{{ text }}
|
|
</a>
|
|
<script>
|
|
(function () {
|
|
const a = document.getElementById("{{ unique_id }}");
|
|
a.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
window.open(
|
|
this.href,
|
|
this.target,
|
|
Array.from(this.relList).join(", ")
|
|
);
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{% endmacro %} {% macro qrcode_queue(queue_items, qr_limit = 100) %} {% if
|
|
queue_items %}
|
|
<ol class="queue-grid">
|
|
{% for item in queue_items %}
|
|
<li>
|
|
<a href="{{ item }}" target="_blank" rel="noreferrer noopener">
|
|
{{ item }}
|
|
</a>
|
|
<div class="qrcode"></div>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const observer = new IntersectionObserver(
|
|
(entries, obs) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const li = entry.target;
|
|
const el = li.querySelector(".qrcode");
|
|
|
|
// Avoid regenerating if already done
|
|
if (!el || el.childElementCount > 0) {
|
|
obs.unobserve(li);
|
|
return;
|
|
}
|
|
|
|
const link = li.querySelector("a");
|
|
const url = link ? link.textContent.trim() : "";
|
|
|
|
if (url) {
|
|
try {
|
|
new QRCode(el, {
|
|
text: url,
|
|
correctLevel: QRCode.CorrectLevel.L,
|
|
width: 256,
|
|
height: 256,
|
|
});
|
|
} catch (e) {
|
|
console.error("QR Gen failed", e);
|
|
}
|
|
}
|
|
obs.unobserve(li);
|
|
}
|
|
});
|
|
},
|
|
{ rootMargin: "200px" }
|
|
);
|
|
|
|
document.querySelectorAll(".queue-grid li").forEach((el) => observer.observe(el));
|
|
});
|
|
</script>
|
|
{% endif %} {% endmacro %}
|