Add markdown preview; fix bug with deleted editor
This commit is contained in:
@@ -40,6 +40,7 @@ $(function(){
|
||||
$(this).parent().attr("lang", "(language unknown)");
|
||||
}
|
||||
});
|
||||
|
||||
updateTimestamps();
|
||||
setInterval(updateTimestamps, 1000*10);
|
||||
});
|
||||
|
||||
@@ -12,5 +12,6 @@
|
||||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require app
|
||||
//= require editor
|
||||
//= require ago
|
||||
//= require highlight
|
||||
//= require highlight
|
||||
55
app/assets/javascripts/editor.js
Normal file
55
app/assets/javascripts/editor.js
Normal file
@@ -0,0 +1,55 @@
|
||||
$(function() {
|
||||
|
||||
$('.md_editor .field_container .preview-button').click(function() {
|
||||
if ($(this).data('preview') == 'true') {
|
||||
edit($(this));
|
||||
} else {
|
||||
preview($(this));
|
||||
}
|
||||
});
|
||||
|
||||
function edit(target) {
|
||||
target.data('preview', 'false');
|
||||
target.text('Preview');
|
||||
target.parent().find('.preview').hide();
|
||||
target.parent().find('.editor_field').show();
|
||||
}
|
||||
|
||||
function preview(target) {
|
||||
target.data('preview', 'true');
|
||||
target.text('Edit');
|
||||
var prev = target.parent().find('.preview');
|
||||
var editor = target.parent().find('.editor_field')
|
||||
prev.html("<i>(Loading ...)</i>");
|
||||
prev.show();
|
||||
editor.hide()
|
||||
if (target.parent().parent().hasClass('mini')) {
|
||||
var url = '/tools/render_mini_markdown';
|
||||
} else {
|
||||
var url = '/tools/render_markdown';
|
||||
}
|
||||
$.ajax(url, {
|
||||
type: 'post',
|
||||
data: {text: editor.val()},
|
||||
dataType: 'html',
|
||||
headers: {
|
||||
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(data) {
|
||||
prev.html(data);
|
||||
prev.find('pre code').each(function(i, e) {
|
||||
if ($(this).attr("class")) {
|
||||
$(this).parent().attr("lang", $(this).attr("class").replace("hljs", "").trim());
|
||||
} else {
|
||||
$(this).parent().attr("lang", "(language unknown)");
|
||||
}
|
||||
hljs.highlightBlock(e);
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, err) {
|
||||
prev.html('<i>(Error: ' + status + ')</i><br>' + err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -216,7 +216,7 @@ span.no-about {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post, .thread, .thread-reply {
|
||||
.post, .thread, .thread-reply, .preview {
|
||||
margin-bottom: 50px;
|
||||
|
||||
.post-content, .thread-content {
|
||||
@@ -224,11 +224,8 @@ span.no-about {
|
||||
clear: both;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.post-title, .thread-title {
|
||||
margin-bottom: 10px;
|
||||
word-wrap: break-word;
|
||||
@@ -297,7 +294,9 @@ pre {
|
||||
|
||||
// code blocks
|
||||
code {
|
||||
padding: 0;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
color: #C5C8C6; //hljs
|
||||
box-shadow: 0 0 16px #222 inset;
|
||||
background: #3f3f3f !important;
|
||||
border: none;
|
||||
@@ -388,6 +387,28 @@ blockquote p {
|
||||
}
|
||||
}
|
||||
|
||||
.md_editor {
|
||||
.field_container {
|
||||
position: relative;
|
||||
|
||||
.preview-button {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
z-index: 10;
|
||||
}
|
||||
.editor_field {
|
||||
padding-top: 4em;
|
||||
min-height: 5em;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: none;
|
||||
padding: 4em 1em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#comments {
|
||||
margin: 50px 0 0 40px;
|
||||
}
|
||||
@@ -457,10 +478,6 @@ textarea {
|
||||
padding: 1em;
|
||||
min-height: 3.5em;
|
||||
resize: vertical;
|
||||
|
||||
&.comment {
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
tr.spacer {
|
||||
|
||||
19
app/controllers/tools_controller.rb
Normal file
19
app/controllers/tools_controller.rb
Normal file
@@ -0,0 +1,19 @@
|
||||
class ToolsController < ApplicationController
|
||||
|
||||
def render_markdown
|
||||
if current_user
|
||||
render text: render_md(params[:text])
|
||||
else
|
||||
render text: "Error: You are not logged in!"
|
||||
end
|
||||
end
|
||||
|
||||
def render_mini_markdown
|
||||
if current_user
|
||||
render text: render_mini_md(params[:text])
|
||||
else
|
||||
render text: "Error: You are not logged in!"
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
@@ -15,16 +15,11 @@ class Forumthread < ActiveRecord::Base
|
||||
end
|
||||
|
||||
def author
|
||||
@author ||= if self.user_author.present?
|
||||
user_author
|
||||
else
|
||||
User.first
|
||||
end
|
||||
@author ||= (user_author || User.first)
|
||||
end
|
||||
|
||||
def editor
|
||||
# can be nil
|
||||
@editor ||= user_editor
|
||||
@editor ||= (self.user_editor || User.first)
|
||||
end
|
||||
|
||||
def edited?
|
||||
|
||||
11
app/views/application/_md_editor.html.erb
Normal file
11
app/views/application/_md_editor.html.erb
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="md_editor <%= "mini" if mini %>">
|
||||
<%= render partial: 'mdhelp' %>
|
||||
<div class="field_container">
|
||||
<div class="preview-button btn dark">Preview</div>
|
||||
<% options = (defined?(options) && options || {}) %>
|
||||
<% options[:class] = "#{options[:class]} editor_field" %>
|
||||
<% options[:placeholder] ||= "Text" %>
|
||||
<%= text_area_tag name, content, options %>
|
||||
<div class="preview"><i>(Loading...)</i></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +1,7 @@
|
||||
<h1>Edit post</h1>
|
||||
<%= form_for @post do |f|%>
|
||||
<%= f.text_field :title %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content%>
|
||||
<%= render partial: "md_editor", locals: {name: "blogpost[content]", content: @post.content, mini: false} %>
|
||||
<p><%= f.submit "Update Post", class: "btn blue left" %></p>
|
||||
<% end %>
|
||||
<p><%= button_to "Delete post", @post, method: "delete", data: {confirm: "Delete post & comments forever?"}, class: "btn red right" %></p>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<h1>New Post</h1>
|
||||
<%= form_for @post do |f|%>
|
||||
<%= f.text_field :title, placeholder: "Title" %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "blogpost[content]", content: @post.content, mini: false} %>
|
||||
<p><%= f.submit "Create Post", class: "btn blue left" %></p>
|
||||
<div class="clear"></div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<% if current_user %>
|
||||
<h3>New comment</h3>
|
||||
<%= form_for [@post, @comment] do |f| %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Comment", class: "comment" %>
|
||||
<%= render partial: "md_editor", locals: {name: "comment[content]", content: @comment.content, mini: true} %>
|
||||
<p><%= f.submit class: "btn blue" %></p>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -1,8 +1,7 @@
|
||||
<h1>Edit comment</h1>
|
||||
|
||||
<%= form_for [@comment.blogpost, @comment] do |f| %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Comment" %>
|
||||
<%= render partial: "md_editor", locals: {name: "comment[content]", content: @comment.content, mini: true} %>
|
||||
<p><%= f.submit "Update Comment", class: "btn blue left" %></p>
|
||||
<% end %>
|
||||
<p><%= button_to "Delete comment", [@comment.blogpost, @comment] , method: "delete", data: {confirm: "Delete comment forever?"}, class: "btn red right" %></p>
|
||||
|
||||
@@ -24,8 +24,7 @@
|
||||
<% end %>
|
||||
</table>
|
||||
<%= f.text_field :title, placeholder: "Title" %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "forumthread[content]", content: @thread.content, mini: false} %>
|
||||
<p><%= f.submit "Update thread", class: "btn blue left" %></p>
|
||||
<% end %>
|
||||
<%= button_to "Delete thread", @thread, :method => "delete", data: {confirm: "Delete thread & comments forever?"}, class: "btn red right" %>
|
||||
|
||||
@@ -14,8 +14,7 @@
|
||||
<% end %>
|
||||
</table>
|
||||
<%= f.text_field :title, placeholder: "Title" %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "forumthread[content]", content: @thread.content, mini: false} %>
|
||||
<%= f.hidden_field :forum_id %>
|
||||
<p><%= f.submit "Create thread", class: "btn blue left" %></p>
|
||||
<div class="clear"></div>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<h1>Edit Info</h1>
|
||||
<%= form_for @info do |f|%>
|
||||
<%= f.text_field :title%>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content %>
|
||||
<%= render partial: "md_editor", locals: {name: "info[content]", content: @info.content, mini: false} %>
|
||||
<p><%= f.submit "Update Info", class: "btn blue left" %></p>
|
||||
<% end %>
|
||||
<p><%= button_to "Delete Info", @info, method: "delete", data: {confirm: "Delete Info forever?"}, class: "btn red right" %></p>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<h1>New Info</h1>
|
||||
<%= form_for @info, url: info_index_path do |f|%>
|
||||
<%= f.text_field :title, placeholder: "Title" %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "info[content]", content: @info.content, mini: false} %>
|
||||
<p><%= f.submit "Create Info", class: "btn blue left" %></p>
|
||||
<div class="clear"></div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<%= form_for [reply.thread, reply] do |f| %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "threadreply[content]", content: reply.content, mini: false} %>
|
||||
<p><%= f.submit "Reply", class: "btn blue" %></p>
|
||||
<% end %>
|
||||
@@ -1,8 +1,7 @@
|
||||
<%= link_to @reply.thread.forum.group, forumgroup_path(@reply.thread.forum.group) %> → <%= link_to @reply.thread.forum, @reply.thread.forum %> → <%= link_to @reply.thread %> → Edit reply
|
||||
<h1>Edit reply</h1>
|
||||
<%= form_for [@reply.thread, @reply] do |f| %>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :content, placeholder: "Text" %>
|
||||
<%= render partial: "md_editor", locals: {name: "threadreply[content]", content: @reply.content, mini: false} %>
|
||||
<p><%= f.submit "Reply", class: "btn blue left" %></p>
|
||||
<% end %>
|
||||
<p><%= button_to "Delete reply", [@reply.thread, @reply], method: "delete", data: {confirm: "Delete reply forever?"}, class: "btn red right" %></p>
|
||||
|
||||
@@ -59,8 +59,7 @@
|
||||
<tr>
|
||||
<td>About you</td>
|
||||
<td>
|
||||
<%= render partial: "mdhelp" %>
|
||||
<%= f.text_area :about, placeholder: "Tell us something about you...", disabled: !can_edit? %>
|
||||
<%= render partial: "md_editor", locals: {name: "user[about]", content: @user.about, mini: true, options: {disabled: !can_edit?, placeholder: "Tell us something about you ..."}} %>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -27,6 +27,13 @@ Redstoner::Application.routes.draw do
|
||||
resources :threadreplies, path: 'replies'
|
||||
end
|
||||
|
||||
resources :tools do
|
||||
collection do
|
||||
post 'render_markdown'
|
||||
post 'render_mini_markdown'
|
||||
end
|
||||
end
|
||||
|
||||
# get '/status' => 'status#show'
|
||||
|
||||
get 'login' => 'sessions#new'
|
||||
|
||||
Reference in New Issue
Block a user