made post preview toggleable

misago/markup/editor.py

@@ -5,7 +5,7 @@ class Editor(object):
     def __init__(self, field, body_template='misago/editor/body.html',
                  js_template='misago/editor/js.html', allow_mentions=True,
                  allow_links=True, allow_images=True, allow_blocks=True,
-                 uploads_url=None):
+                 has_preview=False, uploads_url=None):
         self.field = field
         self.auto_id = 'misago-editor-%s' % field.auto_id
 
@@ -18,3 +18,5 @@ class Editor(object):
         self.allow_links = allow_links
         self.allow_images = allow_images
         self.allow_blocks = allow_blocks
+
+        self.has_preview = has_preview

misago/static/misago/js/misago-posting.js

@@ -6,6 +6,7 @@ $(function() {
     this.$form = options.form;
     this.$area = options.$area;
     this.$frame = this.$area.find('.frame');
+    this.is_visible = true;
 
     this.$markup = this.$area.find('.misago-markup');
     this.$message = this.$area.find('.empty-message');
@@ -161,12 +162,61 @@ $(function() {
       }
       this.$textarea.height(editor_height);
 
+      // preview
+
+      this.$editor_col = this.$container.find('.col-editor');
+      this.editor_preview_on_class = 'col-md-6 col-editor';
+      this.editor_preview_off_class = 'col-md-12 col-editor';
+
+      this.$preview_col = this.$container.find('.col-preview');
       this.$preview = new MisagoPreview(this, {$area: this.$form.find('.editor-preview'), form: this.$form, api_url: options.api_url});
       this.$preview.update();
 
+      this.$preview_btn = this.$form.find('.btn-preview');
+      this.preview_on_icon = "fa fa-file-text-o fa-fw";
+      this.preview_off_icon = "fa fa-file-o fa-fw";
+
+      this.$preview.is_visible = Misago.Storage.get('posting_preview', "true") == "true";
+
+      this.hide_preview = function() {
+        this.$preview.stop();
+        this.$preview_col.hide();
+        this.$preview_btn.find('.fa').attr('class', this.preview_off_icon);
+        this.$editor_col.attr('class', this.editor_preview_off_class);
+      }
+
+      this.show_preview = function() {
+        this.$preview.update();
+        this.$preview_col.show();
+        this.$preview_btn.find('.fa').attr('class', this.preview_on_icon);
+        this.$editor_col.attr('class', this.editor_preview_on_class);
+      }
+
+      if (!this.$preview.is_visible) {
+        this.hide_preview();
+      }
+
+      this.$preview_btn.click(function() {
+
+        if (_this.$preview.is_visible) {
+          _this.$preview.is_visible = false;
+          _this.hide_preview();
+          Misago.Storage.set('posting_preview', "false");
+        } else {
+          _this.$preview.is_visible = true;
+          _this.show_preview();
+          Misago.Storage.set('posting_preview', "true");
+        }
+
+      });
+
+      // spacer
+
       this.$spacer.height(this.$container.outerHeight() - ($(document).height() - this.$spacer.offset().top));
       this.$container.addClass('fixed');
 
+      // resize
+
       this.$container.find('.resize-handle').mousedown(function(e) {
 
         _this.is_resized = {start_height: _this.$textarea.height(), start_pageY: e.pageY};
@@ -200,6 +250,8 @@ $(function() {
 
       });
 
+      // submit
+
       this.$container.find('button[name="submit"]').click(function() {
         if (!_this.submitted && !_this.posted) {
           _this.submitted = true; // lock submit process until after response
@@ -251,6 +303,8 @@ $(function() {
 
     }
 
+    // public api
+
     this.load = function(options) {
 
       if (this.$form !== null) {

misago/templates/misago/editor/body.html

@@ -55,6 +55,13 @@
         </button>
       </li>
       {% endif %}
+      {% if editor.has_preview %}
+      <li class="pull-right">
+        <button type="button" class="btn btn-default tooltip-top btn-insert-hr btn-preview" title="{% trans "Toggle preview" %}">
+          <span class="fa fa-file-text-o fa-fw"></span>
+        </button>
+      </li>
+      {% endif %}
     </ul>
   </div>
 

misago/templates/misago/posting/replyform.html

@@ -20,12 +20,12 @@
 {% endif %}
 
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-md-6 col-editor">
 
     {% editor_body form.post_editor %}
 
   </div>
-  <div class="col-md-6">
+  <div class="col-md-6 col-preview">
 
     <div class="editor-preview">
       <div class="frame scrollable">

misago/threads/posting/reply.py

@@ -32,7 +32,7 @@ class ReplyFormMiddleware(PostingMiddleware):
             else:
                 form = FormType(self.post, initial=initial_data)
 
-        form.post_editor = Editor(form['post'])
+        form.post_editor = Editor(form['post'], has_preview=True)
         return form
 
     def pre_save(self, form):