unified js for dtext previews

app/assets/javascripts/comments.js

@@ -2,9 +2,7 @@
   Danbooru.Comment = {};
   
   Danbooru.Comment.initialize_all = function() {
-    $("div.dtext-preview").hide();
     this.initialize_response_link();
-    this.initialize_preview_button();
     this.initialize_reply_links();
   }
   
@@ -42,21 +40,6 @@
     $("div.new-comment form").hide();
   }
   
-  Danbooru.Comment.initialize_preview_button = function() {
-    $("div.new-comment input[type=submit][value=Preview]").click(function(e) {
-      e.preventDefault();
-      $.ajax("/dtext_preview", {
-        type: "post",
-        data: {
-          body: $(e.target).closest("form").find("textarea").val()
-        },
-        success: function(data) {
-          $(e.target).closest("div.new-comment").find("div.comment-preview").show().html(data);
-        }
-      });
-    });
-  }
-  
   Danbooru.Comment.highlight_threshold_comments = function(post_id) {
     var threshold = parseInt(Danbooru.meta("user-comment-threshold"));
     var articles = $("article.comment[data-post-id=" + post_id + "]");

app/assets/javascripts/dmails.js

@@ -2,25 +2,6 @@
   Danbooru.Dmail = {};
   
   Danbooru.Dmail.initialize_all = function() {
-    $("#c-dmails #preview").hide();
-    
-    this.initialize_preview_link();
-  }
-  
-  Danbooru.Dmail.initialize_preview_link = function() {
-    $("#c-dmails #preview-button").click(function(e) {
-      $.ajax({
-        type: "post",
-        url: "/dtext_preview",
-        data: {
-          body: $("#dmail_body").val()
-        },
-        success: function(data) {
-          $("#preview").html(data).show();
-        }
-      });
-      e.preventDefault();
-    });
   }
 })();
 

app/assets/javascripts/dtext.js

@@ -0,0 +1,48 @@
+(function() {
+  Danbooru.Dtext = {};
+  
+  Danbooru.Dtext.initialize_links = function() {
+    $(".simple_form .dtext-preview").hide();
+
+    $(".simple_form input[value=Preview]").click(Danbooru.Dtext.click_button);
+  }
+  
+  Danbooru.Dtext.call_preview = function(e, $button, $input, $preview) {
+    $.ajax({
+      type: "post",
+      url: "/dtext_preview",
+      data: {
+        body: $input.val()
+      },
+      success: function(data) {
+        $button.val("Edit");
+        $input.hide();
+        $preview.html(data).show();
+      }
+    });
+  }
+  
+  Danbooru.Dtext.call_edit = function(e, $button, $input, $preview) {
+    $button.val("Preview");
+    $preview.hide();
+    $input.show();
+  }
+  
+  Danbooru.Dtext.click_button = function(e) {
+    var $button = $(e.target);
+    var $input = $("#" + $button.data("input-id"));
+    var $preview = $("#" + $button.data("preview-id"));
+    
+    if ($button.val().match(/preview/i)) {
+      Danbooru.Dtext.call_preview(e, $button, $input, $preview);
+    } else {
+      Danbooru.Dtext.call_edit(e, $button, $input, $preview);
+    }
+
+    e.preventDefault();
+  }
+})();
+
+$(document).ready(function() {
+  Danbooru.Dtext.initialize_links();
+});

app/assets/javascripts/forum_posts.js

@@ -2,9 +2,6 @@
   Danbooru.ForumPost = {};
   
   Danbooru.ForumPost.initialize_all = function() {
-    $("#c-forum-topics #preview").hide();
-    
-    this.initialize_preview_link();
     this.initialize_last_forum_read_at();
   }
   
@@ -19,30 +16,6 @@
       }
     });
   }
-  
-  Danbooru.ForumPost.initialize_preview_link = function() {
-    $("#c-forum-topics #preview a[name=toggle-preview]").click(function(e) {
-      $("#preview").toggle();
-      $("#dtext-help").toggle();
-      e.preventDefault();
-    });
-    
-    $("#c-forum-topics input[value=Preview]").click(function(e) {
-      e.preventDefault();
-      $.ajax({
-        type: "post",
-        url: "/dtext_preview",
-        data: {
-          body: $("#forum_post_body").val()
-        },
-        success: function(data) {
-          $("#dtext-help").hide();
-          $("#preview").show();
-          $("#preview .content").html(data);
-        }
-      });
-    });
-  }
 })();
 
 $(document).ready(function() {

app/assets/javascripts/wiki_pages.js

@@ -1,37 +1 @@
-(function() {
-  Danbooru.WikiPage = {};
  
-  Danbooru.WikiPage.initialize_all = function() {
-    $("#c-wiki-pages #preview").hide();
-    
-    this.initialize_preview_link();
-  }
-  
-  Danbooru.WikiPage.initialize_preview_link = function() {
-    $("#c-wiki-pages #preview a[name=toggle-preview]").click(function(e) {
-      $("#preview").toggle();
-      $("#dtext-help").toggle();
-      e.preventDefault();
-    });
-    
-    $("#c-wiki-pages input[value=Preview]").click(function(e) {
-      e.preventDefault();
-      $.ajax({
-        type: "post",
-        url: "/dtext_preview",
-        data: {
-          body: $("#wiki_page_body").val()
-        },
-        success: function(data) {
-          $("#dtext-help").hide();
-          $("#preview").show();
-          $("#preview .content").html(data);
-        }
-      });
-    });
-  }
-})();
-
-$(document).ready(function() {
-  Danbooru.WikiPage.initialize_all();
-});

app/assets/stylesheets/common/dtext.css.scss

@@ -31,17 +31,10 @@ div.prose {
   }
 }
 
-div.dtext {
+div.dtext-preview {
   width: 30em;
   
   ul {
     margin-left: 1em;
   }
 }
-
-div.dtext-preview {
-  border: 2px dashed #AAA;
-  padding: 1em;
-  margin: 1em 0;
-  width: 30em;
-}

app/assets/stylesheets/common/inline.css.scss

@@ -19,3 +19,6 @@ span.count {
   color: #CCC;
   margin-left: 0.5em;
 }
+
+span.edit-options {
+}

app/assets/stylesheets/common/main_layout.css.scss

@@ -5,10 +5,12 @@ div#search {
 }
 
 div#page {
+  overflow: hidden;
+  width: 85em;
   margin: 0 30px;
   
   aside#sidebar {
-    width: 20%;
+    width: 15em;
     float: left;
     
     h1 {
@@ -29,9 +31,9 @@ div#page {
   }
 
   section#content {
-    width: 75%;
+    width: 65em;
     float: left;
-    margin-left: 2em;
+    padding-left: 2em;
     overflow: visible;
   }
 }

app/assets/stylesheets/specific/forum.css.scss

@@ -35,23 +35,6 @@ div#c-forum-topics {
     font-weight: bold;
   }
 
-  div#form-content {
-    float: left;
-    width: 450px;
-    padding-right: 1em;
-  }
-  
-  div#form-aside {
-    float: left;
-    width: 400px;
-    
-    div#preview > p {
-      margin-top: 0.5em;
-      padding-top: 0.5em;
-      border-top: 1px solid #AAA;
-    }
-  }
-  
   a.last-page {
     color: #666;
   }

app/assets/stylesheets/specific/wiki_pages.css.scss

@@ -6,20 +6,5 @@ div#c-wiki-pages {
   div#form-content {
     float: left;
     width: 30em;
-    padding-right: 1em;
-  }
-  
-  div#form-aside {
-    float: left;
-    width: 20em;
-    
-    div#preview > p {
-      margin-top: 0.5em;
-      padding-top: 0.5em;
-      border-top: 1px solid #AAA;
-    }
-  }
-  
-  div#preview {
   }
 }

app/controllers/dtext_previews_controller.rb

@@ -1,5 +1,5 @@
 class DtextPreviewsController < ApplicationController
   def create
-    render :inline => "<h1 class=\"preview-header\">Preview</h1><%= format_text(params[:body]) %>"
+    render :inline => "<%= format_text(params[:body]) %>"
   end
 end

app/views/artists/_form.html.erb

@@ -5,6 +5,8 @@
   <%= f.input :url_string, :label => "URLs", :as => :text, :input_html => {:size => "50x5"} %>
   <%= f.input :is_active %>
   <%= f.input :is_banned %>
-  <%= f.input :notes, :as => :text %>
+  
-  <%= f.button :submit %>
+  <%= render "dtext/form", :name => "Notes", :input_id => "artist_notes", :input_name => "artist[notes]", :value => @artist.notes, :preview_id => "dtext-preview" %>
+  <%= f.button :submit, "Submit" %>
+  <%= f.button :submit, "Preview", "data-input-id" => "artist_notes", "data-preview-id" => "dtext-preview" %>
 <% end %>

app/views/bans/index.html.erb

@@ -2,7 +2,7 @@
   <div class="index">
     <h1>Bans</h1>
     
-    <table>
+    <table class="striped">
       <thead>
         <tr>
           <th>User</th>

app/views/comments/edit.html.erb

@@ -3,8 +3,9 @@
     <h1>Edit Comment</h1>    
     
     <%= simple_form_for(@comment) do |f| %>
-      <%= f.input :body %>
+      <%= render "dtext/form", :name => "Body", :input_id => "comment_body", :input_name => "comment[body]", :value => @comment.body, :preview_id => "dtext-preview" %>
-      <%= f.button :submit %>
+      <%= f.button :submit, "Submit" %>
+      <%= f.button :submit, "Preview", "data-input-id" => "comment_body", "data-preview-id" => "dtext-preview" %>
     <% end %>
   </div>
 </div>

app/views/comments/partials/new/_form.html.erb

@@ -1,11 +1,9 @@
 <div class="comment-preview dtext dtext-preview">
 </div>
 
-<%= form_tag(comments_path) do %>
+<%= form_tag(comments_path, :class => "simple_form") do %>
   <%= hidden_field "comment", "post_id", :value => post.id %>
-  <%= text_area "comment", "body", :size => "60x7" %>
+  <%= render "dtext/form", :name => "Response", :input_id => "comment_response_for_#{post.id}", :input_name => "comment[body]", :value => "", :preview_id => "dtext-preview-for-#{post.id}" %>
-  <br>
   <%= submit_tag "Post" %>
-  <%= submit_tag "Preview" %>
+  <%= submit_tag "Preview", "data-input-id" => "comment_response_for_#{post.id}", "data-preview-id" => "dtext-preview-for-#{post.id}" %>
-  <%= link_to "Formatting", wiki_pages_path(:title => "help:dtext") %>
 <% end %>  

app/views/dmails/_form.html.erb

@@ -1,10 +1,9 @@
-<div id="preview">
-</div>
-
 <%= simple_form_for(dmail) do |f| %>
   <%= f.input :to_name, :label => "To" %>
   <%= f.input :title %>
-  <%= f.input :body, :input_html => {:size => "50x25"} %>
+
+  <%= render "dtext/form", :name => "Body", :input_id => "dmail_body", :input_name => "dmail[body]", :value => dmail.body, :preview_id => "dtext-preview" %>
+
   <%= f.button :submit, "Send" %>
-  <%= submit_tag "Preview", :id => "preview-button"  %>
+  <%= f.button :submit, "Preview", "data-input-id" => "dmail_body", "data-preview-id" => "dtext-preview" %>
 <% end %>

app/views/dtext/_form.html.erb

@@ -0,0 +1,16 @@
+<!-- 
+- name
+- input_id
+- input_name
+- preview_id
+- value
+ -->
+<div class="input text optional">
+  <label class="text optional" for="<%= input_id %>"><%= name %></label>
+
+  <div class="dtext-previewable">  
+    <textarea id="<%= input_id %>" class="text optional" rows="20" name="<%= input_name %>" cols="30"><%= value %></textarea>
+    <div id="<%= preview_id %>" class="dtext-preview"></div>
+  </div>
+   <span class="hint">All text is formatted using <%= link_to "DText", wiki_pages_path(:title => "help:dtext") %></span>
+</div>

app/views/dtext/_help.html.erb

@@ -22,7 +22,8 @@ Or alias a URL: [url=http://www.google.com]Google[/url]
 
 A [[wiki link]] (underscores are not needed).
 
-A {{post link}}. Alternatively, post #1234 (also works with forum posts, comments and pools).
+A {{post link}}. Alternatively, post #1234.
+Also works with forum posts, comments and pools.
 
 <%= link_to "Read more", wiki_pages_path(:title => "help:dtext") %>.
   </pre>  

app/views/forum_topics/_form.html.erb

@@ -8,7 +8,8 @@
       <% unless @forum_topic.new_record? %>
         <%= hidden_field_tag "forum_topic[original_post_attributes][topic_id]", @forum_topic.id %>
       <% end %>
-      <%= pf.input :body, :input_html => {:id => "forum_post_body"} %>
+      
+      <%= render "dtext/form", :name => "Body", :input_id => "forum_post_body", :input_name => "forum_topic[original_post_attributes][body]", :value => @forum_topic.original_post.body, :preview_id => "dtext-preview" %>
     <% end %>
   
     <% if CurrentUser.is_moderator? %>
@@ -17,18 +18,6 @@
     <% end %>
   
     <%= f.button :submit, "Submit" %>
-    <%= f.button :submit, "Preview" %>
+    <%= f.button :submit, "Preview", "data-input-id" => "forum_post_body", "data-preview-id" => "dtext-preview" %>
   <% end %>
 </div>
-
-<div id="form-aside">
-  <div id="preview">
-    <div class="content dtext">
-      
-    </div>
-    <p><a href="#" name="toggle-preview">Hide</a></p>
-  </div>
-  <div id="dtext-help">
-    <%= render "dtext/help" %>
-  </div>
-</div>

app/views/wiki_pages/_form.html.erb

@@ -3,25 +3,15 @@
 
   <%= simple_form_for(@wiki_page) do |f| %>
     <%= f.input :title %>
-    <%= f.input :body %>
+    
+    <%= render "dtext/form", :name => "Body", :input_id => "wiki_page_body", :input_name => "wiki_page[body]", :value => @wiki_page.body, :preview_id => "dtext-preview" %>
 
     <% if CurrentUser.is_janitor? %>
       <%= f.input :is_locked %>
     <% end %>
 
     <%= f.button :submit, "Submit" %>
-    <%= f.button :submit, "Preview" %>
+    <%= f.button :submit, "Preview", "data-input-id" => "wiki_page_body", "data-preview-id" => "dtext-preview" %>
   <% end %>
 </div>
 
-<div id="form-aside">
-  <div id="preview">
-    <div class="content dtext">
-      
-    </div>
-    <p><a href="#" name="toggle-preview">Hide</a></p>
-  </div>
-  <div id="dtext-help">
-    <%= render "dtext/help" %>
-  </div>
-</div>

app/views/wiki_pages/edit.html.erb

@@ -3,7 +3,7 @@
     <%= render "sidebar" %>
     
     <section id="content">
-      <h1>Edit Wiki Page: <%= @wiki_page.title %></h1>
+      <h1>Edit Wiki Page</h1>
       <%= render "form" %>
     </section>
   </div>