summaryrefslogtreecommitdiff
path: root/src/main/resources/templates/benki/wiki/wikiPage.html
blob: a98b14761d213bd4a21b7ec0e07eadf66b0105c2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
{@eu.mulk.mulkcms2.benki.wiki.WikiPageRevision page}

{#include base.html}

{#title}{page.title} — Benki Wiki{/title}
{#siteSection}Wiki{/siteSection}
{#wikiClass}this-page{/wikiClass}

{#nav}{#navbar siteSection="Wiki" /}{/nav}

{#head}
<link rel="stylesheet" type="text/css" href="/web_modules/ContentTools/build/content-tools.min.css" />
<script type="module" src="/web_modules/elix/define/ExpandablePanel.js" defer></script>

<style type="text/css">
  #warning-panel {
    background-color: lightcoral;
    font-style: italic;
  }
</style>

<script type="module" defer>
  import ContentTools from "/web_modules/ContentTools.js";

  window.addEventListener('DOMContentLoaded', function() {
    let editor = ContentTools.EditorApp.get();
    editor.init('*[data-editable]', 'data-name');

    editor.addEventListener('saved', async function (ev) {
      document.getElementById("warning-panel").close();

      let regions = ev.detail().regions;
      if (Object.getOwnPropertyNames(regions).length === 0) {
        // Nothing changed.
        return;
      }

      this.busy(true);

      let requestParams = new URLSearchParams();
      for (let name of Object.getOwnPropertyNames(regions)) {
        requestParams.append(name, regions[name]);
      }

      let response = await fetch("/wiki/{page.title}", {
        method: 'POST',
        body: requestParams
      });

      if (!response.ok) {
        document.getElementById("warning-panel").open();
        document.getElementById("warning-text").innerText = "Failed to save page: " + response.statusText;
        this.busy(false);
        return;
      }

      let status = await response.json();
      if (status.status !== "ok") {
        document.getElementById("warning-panel").open();
        document.getElementById("warning-text").innerText = "Failed to save page: " + JSON.stringify(status);
        this.busy(false);
        return;
      }

      if (status.hasOwnProperty("content")) {
        document.getElementById("wiki-content").innerHTML = status.content;
      }

      this.busy(false);
    });
  });
</script>
{/head}

{#body}
<article id="wiki-page">
  <header>
    <div data-editable data-name="wiki-title">
      <h1>{page.title}</h1>
    </div>

    <elix-expandable-panel id="warning-panel" role="alert"><div id="warning-text"></div></elix-expandable-panel>
  </header>

  <section id="wiki-page-content">
    <div data-editable data-name="wiki-content" id="wiki-content">
      {#with page}{enrichedContent.raw}{/}
    </div>
  </section>

  <hr>

  <footer>
    <a href="/wiki/{page.title}/revisions">Page revisions</a>
  </footer>
</article>
{/body}

{/include}