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">
  24                                         <textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
  25                                                 >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
  26                                 </div>
  27
  28                                 <div class="form-group row">
  29                                         <label class="col-sm-4 col-form-label">{{ _("What has changed?") }}</label>
  30                                         <div class="col-sm-8">
  31                                                 <input type="text" class="form-control" name="changes" required>
  32                                         </div>
  33                                 </div>
  34
  35                                 {% if page and not page.is_watched_by(current_user) %}
  36                                         <div class="form-group form-check">
  37                                                 <div class="custom-control custom-checkbox">
  38                                                         <input type="checkbox" class="custom-control-input" name="watch" id="watch" checked>
  39                                                         <label class="custom-control-label" for="watch">{{ _("Watch this page") }}</label>
  40                                                 </div>
  41
  42                                                 <small class="form-text text-muted">
  43                                                         {{ _("Get notified when this page is changed") }}
  44                                                 </small>
  45                                         </div>
  46                                 {% end %}
  47
  48                                 <button type="submit" class="btn btn-primary btn-block">
  49                                         {% if page %}{{ _("Save Page") }}{% else %}{{ _("Create Page") }}{% end %}
  50                                 </button>
  51                         </form>
  52                 </div>
  53         </div>
  54
  55         <div id="preview" class="fade show">
  56                 <div class="d-flex align-items-center mb-4">
  57                         <h4 class="mb-0">{{ _("Preview") }}</h4>
  58                         <div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
  59                 </div>
  60
  61                 <div class="card">
  62                         <div class="card-body mb-0">
  63                                 <div id="preview-content" class="wiki-content mb-0">
  64                                         {{ _("Loading...") }}
  65                                 </div>
  66                         </div>
  67                 </div>
  68         </div>
  69 {% end block %}
  70
  71 {% block javascript %}
  72         <script type="text/javascript">
  73                 var update = null;
  74
  75                 $(document).ready(function() {
  76                         var preview = $("#preview");
  77                         preview.hide();
  78
  79                         $("#content").on("keyup", function(e) {
  80                                 if (update)
  81                                         clearTimeout(update);
  82
  83                                 var content = $(this).val();
  84
  85                                 // If the field is all empty, we will hide it
  86                                 if (content)
  87                                         preview.show();
  88                                 else
  89                                         preview.hide();
  90
  91                                 // Go into update mode
  92                                 preview.addClass("updating");
  93
  94                                 update = setTimeout(function() {
  95                                         var c = $("#preview-content");
  96
  97                                         $.post("{{ page.url }}/_render", { content : content },
  98                                                 function(data) {
  99                                                         c.html(data);
 100
 101                                                         // Update finished
 102                                                         preview.removeClass("updating");
 103                                                 }
 104                                         );
 105                                 }, 750);
 106                         });
 107                 });
 108         </script>
 109 {% end block %}