Add on the fly preview

lib/lokka/app/admin.rb

@@ -49,6 +49,13 @@ class App
     put('/admin/pages/:id')      {|id| put_admin_entry(Page, id) }
     delete('/admin/pages/:id')   {|id| delete_admin_entry(Page, id) }
 
+    post '/admin/previews' do
+      result = handle_entry_preview(params)
+      content_type :json
+      status result[:status]
+      result.to_json
+    end
+
     # attachments
     post '/admin/attachments' do
       result = handle_file_upload(params)

lib/lokka/helpers/helpers.rb

@@ -422,5 +422,22 @@ def handle_file_upload(params)
         status: 500
       }
     end
+
+    def handle_entry_preview(params)
+      markup   = params[:markup]   || @site.default_markup
+      raw_body = params[:raw_body] || ''
+      body     = Markup.use_engine(markup, raw_body)
+      {
+        message: 'Preview successfull',
+        body: body,
+        markup: markup,
+        status: 201
+      }
+    rescue StandardError => e
+      {
+        message: e.message,
+        status: 500
+      }
+    end
   end
 end

public/admin/css/style.css

@@ -10,7 +10,6 @@
 * html .clearfix             { zoom: 1; } /* IE6 */
 *:first-child+html .clearfix { zoom: 1; } /* IE7 */
 
-
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
     background:none repeat scroll 0 0;
     border:0 none;
@@ -65,8 +64,6 @@ input[type="submit"],
     white-space: nowrap;
 }
 
-
-
 .button:link, .button:visited {
     color:#444 !important;
     text-decoration:none;
@@ -143,6 +140,59 @@ input[type="password"] {
     width:550px;
 }
 
+ul.preview-edit {
+    margin-left: 0 !important;
+    margin-top: .5em !important;
+    margin-bottom: 0 !important;
+    list-style: none;
+    display: block;
+    overflow: hidden;
+    height: 100%;
+}
+
+ul.preview-edit li {
+    padding: .75em;
+    float: left;
+    line-height: 20px;
+}
+
+ul.preview-edit li.selected {
+    border-radius: 6px;
+    background: #eee;
+}
+
+ul.preview-edit li > input[type='radio'] {
+    outline: none;
+    background: none;
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+}
+
+#preview {
+    display: none;
+    background: #eee;
+    padding: 8px .5em;
+    margin: -3px 0 0;
+    border-radius: 6px;
+    min-height: 445px;
+    width: 85%;
+    min-width: 550px;
+    max-width: 1000px;
+}
+
+#preview h1, h2, h3, h4, h5, h6 {
+    margin: 0.25em 0 .75em;
+    padding: unset;
+    background: unset;
+    text-shadow: unset;
+}
+
+#preview img {
+    max-width: 100%;
+    height: auto;
+}
+
 textarea {
     display: block;
     position: relative;
@@ -893,6 +943,13 @@ textarea#category_description
         min-width: 100%;
     }
 
+    #preview {
+        margin: auto 0;
+        width: 100%;
+        min-width: 100%;
+        padding: 0;
+    }
+
     textarea, select,
     input[type="text"],
     input[type="password"],

public/admin/entries/form.haml

@@ -17,8 +17,16 @@
     = f.select :markup, options: Markup.engine_list.map {|e| [e[1], e[0]] }
   .field
     = f.label :body, caption: t("#{@name}.body")
+    %ul.preview-edit
+      %li.selected
+        = label_tag :edit, for: 'preview-edit', caption: 'Edit'
+        = radio_button_tag :ipreview, value: 'edit', checked: true, id: 'preview-edit'
+      %li
+        = label_tag :preview, for: 'preview-preview', caption: 'Preview'
+        = radio_button_tag :ipreview, value: 'preview', id: 'preview-preview'
     #editor
       %textarea.editor{ id: "#{@name}_body", name: "#{@name}[body]", rows: 10, cols: 50 }= @entry.raw_body
+    #preview
   .field
     = f.label :slug, caption: t("#{@name}.slug")
     %br

public/admin/js/src/FormObserver.js

@@ -7,6 +7,7 @@ class FormObserver {
     this.selected = document.querySelector('select[id$=_markup] option:checked').value;
     this.setupEditor();
     this.observeSubmit();
+    this.observePreview();
   }
 
   setupEditor() {
@@ -27,6 +28,8 @@ class FormObserver {
 
   setupQuill() {
     const content = document.querySelector('#editor textarea').value;
+    const previewTab = document.querySelector('ul.preview-edit');
+    previewTab.style.display = 'none';
     this.quill = new Quill('#editor', {
       modules: {
         toolbar:[
@@ -46,9 +49,10 @@ class FormObserver {
 
   setupTextarea() {
     const textarea = this.textarea;
+    const previewTab = document.querySelector('ul.preview-edit');
+    previewTab.style.display = 'block';
     this.quill = Quill.find(document.querySelector('#editor'));
     if (this.quill) {
-      const label = document.querySelector('label[for$="_body"]');
       const qlToolbar = document.querySelector('.ql-toolbar');
       const qlContainer = document.querySelector('.ql-container');
       const content = this.quill.root.innerHTML;
@@ -58,7 +62,7 @@ class FormObserver {
       const editor = document.createElement('div');
       editor.setAttribute('id', 'editor');
       editor.appendChild(textarea);
-      label.parentNode.insertBefore(editor, label.nextSibling);
+      previewTab.parentNode.insertBefore(editor, previewTab.nextSibling);
     }
   }
 
@@ -91,6 +95,73 @@ class FormObserver {
       this.setupTextarea();
     }
   }
+
+  observePreview() {
+    let editor;
+    const preview = document.querySelector('#preview');
+    const markupSelect = document.querySelector('#post_markup, #page_markup');
+    const previewRadio = document.querySelector('input[type="radio"][name="ipreview"][value="preview"]');
+    const editRadio = document.querySelector('input[type="radio"][name="ipreview"][value="edit"]');
+    markupSelect.addEventListener('change', (e) => {
+      const selected = e.target.value;
+      e.target.querySelectorAll('option').forEach((option) => {
+        if (option.value == selected) {
+          option.setAttribute('selected', 'selected');
+        } else {
+          option.removeAttribute('selected');
+        }
+      })
+    });
+    editRadio.addEventListener('change', (e) => {
+      editor = document.querySelector('#editor');
+      e.srcElement.parentElement.classList.add('selected');
+      previewRadio.parentElement.classList.remove('selected');
+      preview.style.display = 'none';
+      editor.style.display = 'block';
+      preview.innerHTML = '';
+    });
+    previewRadio.addEventListener('change', async (e) => {
+      editor = document.querySelector('#editor');
+      e.srcElement.parentElement.classList.add('selected');
+      editRadio.parentElement.classList.remove('selected');
+      const textarea = document.querySelector('#editor textarea');
+      const raw_body = textarea.value;
+      const markup = document.querySelector('#post_markup option:checked, #page_markup option:checked').value || 'redcarpet';
+      const ajaxData = new FormData();
+      ajaxData.append('raw_body', raw_body);
+      ajaxData.append('markup', markup);
+      const request = await fetch('/admin/previews', {
+        method: 'POST',
+        body: ajaxData
+      });
+      const response = await request.json();
+      const iframe = document.createElement('iframe');
+      preview.appendChild(iframe);
+      const doc = iframe.contentWindow.document;
+      const style = `<style>
+img { max-width: 100%; }
+img { height: auto; }
+html, body {
+  font-size: 16px;
+  font-family: "Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,"ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,Osaka,sans-serif;
+  word-wrap: break-word;
+}
+</style>`;
+      const result = new Promise(resolve => resolve(iframe));
+      const renderIframe = () => {
+        doc.open();
+        doc.write(style + response.body);
+        doc.close();
+      }
+      const resizeIframe = () => {
+        iframe.style.width = '100%';
+        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
+      }
+      result.then(renderIframe).then(resizeIframe).catch(setTimeout(resizeIframe, 300));
+      editor.style.display = 'none';
+      preview.style.display = 'block';
+    });
+  }
 }
 
 export default FormObserver