Refactor diary entry forms to use a custom form builder

app/assets/stylesheets/common.scss

@@ -1281,8 +1281,6 @@ tr.turn:hover {
 
 .diary_entries {
   #map {
-    position: relative;
-    width: 90%;
     height: 400px;
     border: 1px solid $grey;
     display: none;

app/views/diary_entries/_form.html.erb

@@ -1,35 +1,19 @@
-<div class="diary_entry standard-form">
-  <fieldset>
-    <div class='standard-form-row'>
-      <label class="standard-label"><%= t ".subject" -%></label>
-      <%= f.text_field :title, :class => "richtext_title" %>
-    </div>
-    <div class='standard-form-row'>
-      <label class="standard-label"><%= t ".body" -%></label>
-      <%= richtext_area :diary_entry, :body, :cols => 80, :rows => 20, :format => @diary_entry.body_format %>
-    </div>
-    <div class='standard-form-row'>
-      <label class="standard-label"><%= t ".language" -%></label>
-      <%= f.collection_select :language_code, Language.order(:english_name), :code, :name %>
-  </div>
-  </fieldset>
-  <fieldset class='location'>
-    <label class="standard-label"><%= t ".location" -%></label>
-    <%= tag.div "", :id => "map", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
-    <div class='standard-form-row clearfix'>
-      <div class='form-column'>
-        <label class="secondary standard-label"><%= t ".latitude" -%></label>
-        <%= f.text_field :latitude, :size => 20, :id => "latitude" %>
-      </div>
-      <div class='form-column'>
-        <label class="secondary standard-label"><%= t ".longitude" -%></label>
-        <%= f.text_field :longitude, :size => 20, :id => "longitude" %>
-      </div>
-      <div class='form-column'>
-        <a href="#" id="usemap"><%= t ".use_map_link" -%></a>
-      </div>
-    </div>
-  </fieldset>
+<%= f.text_field :title %>
+<%= f.richtext_field :body, :cols => 80, :rows => 20, :format => @diary_entry.body_format %>
+<%= f.collection_select :language_code, Language.order(:english_name), :code, :name %>
 
-  <%= f.submit %>
-</div>
+<fieldset>
+  <legend><%= t ".location" -%></legend>
+
+  <%= tag.div "", :id => "map", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
+
+  <div class="form-row">
+    <%= f.text_field :latitude, :wrapper_class => "col-sm-4", :id => "latitude" %>
+    <%= f.text_field :longitude, :wrapper_class => "col-sm-4", :id => "longitude" %>
+    <div class="col-sm-4">
+      <label><a href="#" id="usemap"><%= t ".use_map_link" -%></a></label>
+    </div>
+  </div>
+</fieldset>
+
+<%= f.primary %>

app/views/diary_entries/edit.html.erb

@@ -6,8 +6,6 @@
   <h1><%= @title %></h1>
 <% end %>
 
-<%= error_messages_for "diary_entry" %>
-
-<%= form_for @diary_entry, :url => diary_entry_path(current_user, @diary_entry), :html => { :method => :put } do |f| %>
+<%= form_for @diary_entry, :builder => RichtextFormBuilder, :url => diary_entry_path(current_user, @diary_entry), :html => { :method => :put } do |f| %>
   <%= render :partial => "form", :locals => { :f => f } %>
 <% end %>

app/views/diary_entries/new.html.erb

@@ -6,8 +6,6 @@
   <h1><%= @title %></h1>
 <% end %>
 
-<%= error_messages_for "diary_entry" %>
-
-<%= form_for @diary_entry do |f| %>
+<%= form_for @diary_entry, :builder => RichtextFormBuilder do |f| %>
   <%= render :partial => "form", :locals => { :f => f } %>
 <% end %>

app/views/shared/_markdown_help.html.erb

@@ -0,0 +1,19 @@
+<h5><%= t ".title_html" %></h5>
+<dl>
+  <dt><%= t ".headings" %></dt>
+  <dd># <%= t ".heading" %><br>
+      ## <%= t ".subheading" %></dd>
+  <dt><%= t ".unordered" %></dt>
+  <dd>* <%= t ".first" %><br>
+     * <%= t ".second" %></dd>
+
+  <dt><%= t ".ordered" %></dt>
+  <dd>1. <%= t ".first" %><br>
+     2. <%= t ".second" %></dd>
+
+  <dt><%= t ".link" %></dt>
+  <dd>[<%= t ".text" %>](<%= t ".url" %>)</dd>
+
+  <dt><%= t ".image" %></dt>
+  <dd>![<%= t ".alt" %>](<%= t ".url" %>)</dd>
+</dl>

app/views/shared/_richtext_field.html.erb

@@ -0,0 +1,18 @@
+<div class="form-group">
+  <label><%= object.class.human_attribute_name(attribute) %></label>
+  <div id="<%= id %>_container" class="form-row richtext_container">
+    <div id="<%= id %>_content" class="col-sm-8 mb-3 richtext_content">
+      <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
+      <div id="<%= id %>_preview" class="richtext_preview richtext"></div>
+    </div>
+    <div id="<%= id %>_help" class="col-sm-4 richtext_help">
+      <div class="card bg-light">
+        <div class="card-body">
+          <%= render :partial => "shared/#{type}_help" %>
+          <%= submit_tag t(".edit"), :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>
+          <%= submit_tag t(".preview"), :id => "#{id}_dopreview", :class => "richtext_dopreview btn btn-primary" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -399,13 +399,8 @@ en:
     new:
       title: New Diary Entry
     form:
-      subject: "Subject:"
-      body: "Body:"
-      language: "Language:"
-      location: "Location:"
-      latitude: "Latitude:"
-      longitude: "Longitude:"
-      use_map_link: "use map"
+      location: Location
+      use_map_link: Use Map
     index:
       title: "Users' diaries"
       title_friends: "Friends' diaries"
@@ -1578,6 +1573,24 @@ en:
       as_unread: "Message marked as unread"
     destroy:
       destroyed: "Message deleted"
+  shared:
+    markdown_help:
+      title_html: Parsed with <a href="https://kramdown.gettalong.org/quickref.html">kramdown</a>
+      headings: Headings
+      heading: Heading
+      subheading: Subheading
+      unordered: Unordered list
+      ordered: Ordered list
+      first: First item
+      second: Second item
+      link: Link
+      text: Text
+      image: Image
+      alt: Alt text
+      url: URL
+    richtext_field:
+      edit: Edit
+      preview: Preview
   site:
     about:
       next: Next

lib/richtext_form_builder.rb

@@ -0,0 +1,15 @@
+class RichtextFormBuilder < BootstrapForm::FormBuilder
+  def richtext_field(attribute, options = {})
+    id = "#{@object_name}_#{attribute}"
+    type = options.delete(:format) || "markdown"
+
+    @template.render(:partial => "shared/richtext_field",
+                     :locals => { :object => @object,
+                                  :attribute => attribute,
+                                  :object_name => @object_name,
+                                  :id => id,
+                                  :type => type,
+                                  :options => options,
+                                  :builder => self })
+  end
+end