src/templates/wiki/edit.html

   1 {% extends "base.html" %}
   2
   3 {% block title %}{% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}{% end block %}
   4
   5 {% block sidebar %}
   6         {% set help = backend.wiki.get_page("/wiki/edit") %}
   7
   8         {% if help %}
   9                 {% raw help.html %}
  10         {% end %}
  11 {% end block %}
  12
  13 {% block main %}
  14         <div class="card mb-4">
  15                 <div class="card-body">
  16                         <h4 class="card-title">
  17                                 {% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}
  18                         </h4>
  19
  20                         <form action="" method="POST">
  21                                 {% raw xsrf_form_html() %}
  22
  23                                 <div class="form-group editor">
  24                                         <div class="btn-toolbar mb-3" role="toolbar">
  25                                                 <div class="btn-group btn-group-sm mr-2" role="group">
  26                                                         <button type="button" class="btn btn-secondary"
  27                                                                         id="bold" title="{{ _("Bold") }} [{{ _("Ctrl") }}-B]">
  28                                                                 <i class="fas fa-bold"></i>
  29                                                         </button>
  30                                                         <button type="button" class="btn btn-secondary"
  31                                                                         id="italic" title="{{ _("Italic") }} [{{ _("Ctrl") }}-I]">
  32                                                                 <i class="fas fa-italic"></i>
  33                                                         </button>
  34                                                         <button type="button" class="btn btn-secondary"
  35                                                                         id="code" title="{{ _("Code") }} [{{ _("Ctrl") }}-C]">
  36                                                                 <i class="fas fa-code"></i>
  37                                                         </button>
  38                                                 </div>
  39
  40                                                 <div class="btn-group btn-group-sm mr-2" role="group">
  41                                                         <button type="button" class="btn btn-secondary"
  42                                                                         id="headline-up" title="{{ _("Headline one level up") }}">
  43                                                                 <i class="fas fa-chevron-left"></i>
  44                                                         </button>
  45                                                         <button type="button" class="btn btn-secondary"
  46                                                                         id="headline" title="{{ _("Headline") }} [{{ _("Ctrl") }}-H]">
  47                                                                 <i class="fas fa-heading"></i>
  48                                                         </button>
  49                                                         <button type="button" class="btn btn-secondary"
  50                                                                         id="headline-down" title="{{ _("Headline one level down") }}">
  51                                                                 <i class="fas fa-chevron-right"></i>
  52                                                         </button>
  53                                                 </div>
  54
  55                                                 <button type="button" class="btn btn-sm btn-secondary mr-2"
  56                                                                 id="link" title="{{ _("Link") }} [{{ _("Ctrl") }}-L]">
  57                                                         <i class="fas fa-link"></i>
  58                                                 </button>
  59
  60                                                 <a class="btn btn-sm btn-secondary" href="{{ path }}/_files"
  61                                                                 target="_blank" title="{{ _("Files") }}">
  62                                                         <i class="fas fa-images"></i>
  63                                                 </a>
  64                                         </div>
  65
  66                                         <textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
  67                                                 >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
  68                                 </div>
  69
  70                                 <div class="form-group row">
  71                                         <label class="col-sm-4 col-form-label">{{ _("What has changed?") }}</label>
  72                                         <div class="col-sm-8">
  73                                                 <input type="text" class="form-control" name="changes" required>
  74                                         </div>
  75                                 </div>
  76
  77                                 {% if page and not page.is_watched_by(current_user) %}
  78                                         <div class="form-group form-check">
  79                                                 <div class="custom-control custom-checkbox">
  80                                                         <input type="checkbox" class="custom-control-input" name="watch" id="watch" checked>
  81                                                         <label class="custom-control-label" for="watch">{{ _("Watch this page") }}</label>
  82                                                 </div>
  83
  84                                                 <small class="form-text text-muted">
  85                                                         {{ _("Get notified when this page is changed") }}
  86                                                 </small>
  87                                         </div>
  88                                 {% end %}
  89
  90                                 <button type="submit" class="btn btn-primary btn-block">
  91                                         {% if page %}{{ _("Save Page") }}{% else %}{{ _("Create Page") }}{% end %}
  92                                 </button>
  93                         </form>
  94                 </div>
  95         </div>
  96
  97         <div id="preview" class="fade show">
  98                 <div class="d-flex align-items-center mb-4">
  99                         <h4 class="mb-0">{{ _("Preview") }}</h4>
 100                         <div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
 101                 </div>
 102
 103                 <div class="card">
 104                         <div class="card-body mb-0">
 105                                 <div id="preview-content" class="wiki-content mb-0">
 106                                         {{ _("Loading...") }}
 107                                 </div>
 108                         </div>
 109                 </div>
 110         </div>
 111 {% end block %}
 112
 113 {% block javascript %}
 114         {% import os.path %}
 115
 116         <script src="{{ static_url("js/editor.js") }}"></script>
 117         <script type="text/javascript">
 118                 var update = null;
 119
 120                 $(document).ready(function() {
 121                         var preview = $("#preview");
 122                         preview.hide();
 123
 124                         $("#content").on("keyup", function(e) {
 125                                 if (update)
 126                                         clearTimeout(update);
 127
 128                                 var content = $(this).val();
 129
 130                                 // If the field is all empty, we will hide it
 131                                 if (content)
 132                                         preview.show();
 133                                 else
 134                                         preview.hide();
 135
 136                                 // Go into update mode
 137                                 preview.addClass("updating");
 138
 139                                 update = setTimeout(function() {
 140                                         var c = $("#preview-content");
 141
 142                                         $.post("{{ os.path.join(path, "_render") }}", { content : content },
 143                                                 function(data) {
 144                                                         c.html(data);
 145
 146                                                         // Update finished
 147                                                         preview.removeClass("updating");
 148                                                 }
 149                                         );
 150                                 }, 750);
 151                         });
 152                 });
 153         </script>
 154 {% end block %}