Start scripting mastodon block

#190
#184

shared/blocks.py

@@ -730,7 +730,9 @@ class ChartRedmineIssueDataset(blocks.StructBlock):
         required=False,
     )
 
-    def _get_issues_url(self, value, project_id: typing.Union[None, str, list[str]] = None):
+    def _get_issues_url(
+        self, value, project_id: typing.Union[None, str, list[str]] = None
+    ):
         url = "https://redmine.pirati.cz/issues.json"
         params = [
             ("sort", "created_on"),
@@ -1042,6 +1044,21 @@ class ChartBlock(blocks.StructBlock):
 Zobrazí se tolik definovaných sloupců, kolik existuje skupin."""
 
 
+class MastodonFeedBlock:
+    url = blocks.URLBlock(
+        required=True,
+        label="URL pro mastodon feed",
+        default="https://mastodon.pirati.cz",
+    )
+    userId = blocks.IntegerBlock(required=False, label="ID uživatele mastodonu")
+    userName = blocks.CharBlock(required=False, label="Uživatelské jméno pro mastodon")
+
+    class Meta:
+        label = "Mastodon feed"
+        icon = "link"
+        template = "shared/blocks/mastodon_feed_block.html"
+
+
 DEFAULT_CONTENT_BLOCKS = [
     (
         "text",

shared/static/shared/js/mastodon_helper.js

+window.resources ||= {};
+
+/**
+ * @param {string} url
+ * @returns {Promise<string>}
+ */
+const fetchResource = async (url) => {
+    return await (await window.fetch(url)).text();
+};
+
+/**
+ * @param {string} url
+ */
+const loadResource = async (url) => {
+    if (window.resources[url]) {
+        return window.resources[url];
+    }
+    window.resources[url] = fetchResource(url);
+    return await window.resources[url];
+};
+
+/**
+ * @param {HTMLElement} parent
+ * @param {string} content
+ */
+const applyScript = async (parent, content) => {
+    const base64 = btoa(content);
+    if (!document.querySelector(`script[data-content='${base64}']`)) {
+        const scriptTag = document.createElement("script");
+        scriptTag.setAttribute("type", "text/javascript");
+        scriptTag.dataset.content = base64;
+        scriptTag.innerHTML = script;
+        parent.appendChild(scriptTag);
+    }
+}
+
+loadResource("https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/raw/91677cc3a76b300428ed478f4cd4e546e34f827b/src/mastodon-timeline.min.js");
+loadResource("https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/raw/91677cc3a76b300428ed478f4cd4e546e34f827b/src/mastodon-timeline.min.css");
+
+/**
+ * @param {HTMLElement} feedElement
+ */
+const createMastodonScript = async (feedElement) => {
+    if (!feedElement.dataset.init) {
+
+
+        feedElement.dataset.init = "true";
+    }
+};
+
+[...document.querySelectorAll("[data-mastodon]")].forEach(createMastodonScript);

shared/templates/shared/blocks/mastodon_feed_block.html

+<script type="text/javascript" src="{% static "shared/js/mastodon_helper.js" %}" data-mastodon="true" data-feed="{{ self.url }}" data-user-id="{{ self.userId }}" data-user-name="{{ self.userName }}"></script>
+<div class="mt-timeline">
+    <div id="mt-body" class="mt-body" role="feed">
+        <div class="loading-spinner"></div>
+    </div>
+</div>