wiki-card.user.js

// ==UserScript==
// @name        Wiki page card on uploads page
// @namespace   Violentmonkey Scripts
// @match       https://*.donmai.us/uploads/*
// @exclude     https://*.donmai.us/uploads/
// @grant       none
// @version     1.1
// @author      -
// @description 14/03/2023 21:41:21
// ==/UserScript==

Alpine.store("wikiTags", { loading: false });

Danbooru.WikiPage = {
  async update_wiki_page(event) {
    if (event.button === 0 && !event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey) {
      event.preventDefault();
      await Danbooru.WikiPage.set_wiki_page(Danbooru.RelatedTag.current_tag().trim());
    }
  },

  update_current_tag() {
    let current_tag = Danbooru.RelatedTag.current_tag().trim();

    if (current_tag) {
      Alpine.store("wikiTags").currentTag = current_tag;
    }
  },

  async set_wiki_page(tag) {
    Alpine.store("wikiTags").currentTag = tag;
    Alpine.store("wikiTags").loading = true;
    let ret = await $.get(`/wiki_pages/${tag}.json`)
        .then((e) => $.post("/dtext_preview", { body: e.body }))
        .then((dtext) => $("#wiki-page-body").html(dtext))
        .catch((e) => $("#wiki-page-body").html("No wiki page!"));
    Alpine.store("wikiTags").loading = false;

    return ret;
  },

  async navigate(ev) {
    ev.preventDefault();
    return await Danbooru.WikiPage.set_wiki_page(ev.target.attributes.href.value.replace("/wiki_pages/", ""));
  },
};

$(`
<div class="card p-2 current-tag-wiki" x-data="{collapsed:true}" x-show="$store.wikiTags.currentTag !== undefined">
  <div class="wiki-page-header flex justify-between cursor-pointer select-none" x-on:click="collapsed = !collapsed; !collapsed && Danbooru.WikiPage.update_wiki_page($event)">
    <h6 class="inline-flex gap-1 items-center ">
      <svg class="icon svg-icon spinner-icon animate-spin text-muted align-middle invisible" viewBox="0 0 512 512" x-bind:class="{ invisible: !$store.wikiTags.loading }">
        <use fill="currentColor" href="/packs/static/images/icons-00aefbd7f752f10ede25.svg#spinner"></use>
      </svg>

      Wiki:
      <a class="wiki-page-current-tag"
         x-on:click.stop="Danbooru.WikiPage.update_wiki_page($event)"
         x-text="decodeURIComponent($store.wikiTags.currentTag.replace('_', ' '))"
         x-bind:href="'/posts?tags=' + encodeURIComponent($store.wikiTags.currentTag)">
      </a>
    </h6>

    <span>
      <a href="javascript:void(0)" class="inline-block align-top w-4" x-show="collapsed">
        <svg class="icon svg-icon chevron-down-icon rotate-180" viewBox="0 0 448 512">
          <use fill="currentColor" href="/packs/static/images/icons-00aefbd7f752f10ede25.svg#chevron-down"></use>
        </svg>
      </a>
      <a href="javascript:void(0)" class="inline-block align-top w-4" x-show="!collapsed" style="display: none;">
        <svg class="icon svg-icon chevron-down-icon" viewBox="0 0 448 512">
          <use fill="currentColor" href="/packs/static/images/icons-00aefbd7f752f10ede25.svg#chevron-down"></use>
        </svg>
      </a>
    </span>
  </div>

  <div class="mt-1">
    <div id="wiki-page-body" class="button-group-tab-panel mt-1 ml-4 thin-scrollbar scrollbar-stable" x-data="{ active: 0 }" x-show="!collapsed" style="display: none;">
    </div>
  </div>
</div>

`).insertAfter("div.card:nth-child(1)");

$(() => {
  $("#post_tag_string").on("input.danbooru.relatedTags", Danbooru.WikiPage.update_current_tag);
  $("#post_tag_string").on("click.danbooru.relatedTags", Danbooru.WikiPage.update_current_tag);
  $(document).on("click.danbooru.relatedTags", "#wiki-page-body a.dtext-wiki-link", Danbooru.WikiPage.navigate);
  Danbooru.WikiPage.update_current_tag();
});