Commit 45081fe5 by tady

refactor css name

parent ccd51f2d
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
# TODO:
# mod-mdEditorがページ内に複数あった場合の処理
$.fn.extend
mod_mdEditor: (options) ->
settings =
# preview api url
end_point: ''
settings = $.extend settings, options
return @each ()->
$root = $(@)
# Automaticaly change textarea height.
$root.find('.mod-mdEditor-body').autosize();
# disable tab key
$root.find('.mod-mdEditor-body').on 'keydown', (e) ->
$this = $(@)
keyCode = e.keyCode || e.which
# tab key
if keyCode is 9
e.preventDefault()
start = $this.get(0).selectionStart
end = $this.get(0).selectionEnd
# set textarea value to: text before caret + tab + text after caret
$this.val($this.val().substring(0, start) +
'\t' +
$this.val().substring(end))
# put caret at right position again
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + 1
# enter key
else if keyCode is 13
val = $this.val()
start = $this.get(0).selectionStart
bl = val.lastIndexOf("\n", start-1)
line = val.substring(bl, start)
lm = line.match(/^\s+/)
ns = if lm? then lm[0].length - 1 else 0
nv = val.substring(0, start) + "\n"
_(ns).times ->
nv += "\t"
$this.val(nv + val.substring(start))
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + ns + 1
e.preventDefault()
# タグを選択可能に
$root.find('.mod-mdEditor-tags').select2 {
tags: window.RV.AllTags
}
# Previewを生成
generatePreview = ->
$.post(settings.end_point, {
'text': $root.find('.mod-mdEditor-body').val()
'authenticity_token': $("meta[name='csrf-token']").attr('content')
})
.done (data) ->
$root.find('.mod-mdEditor-preview').html(data)
# TODO
prettyPrint()
$('.mod-mdEditor-body').on('keyup mouseup', generatePreview)
generatePreview()
if window.location.pathname.match /edit|new|fork/
$ ->
confirmUnload = ->
return 'このページを離れますか?'
$(window).on('beforeunload', confirmUnload)
$('#save_button').on 'click', ->
$(window).off('beforeunload', confirmUnload)
# Automaticaly change textarea height.
$('textarea.autosize').autosize();
# disable tab key
$('.disable-tab').on 'keydown', (e) ->
$this = $(this)
keyCode = e.keyCode || e.which
# tab key
if keyCode is 9
e.preventDefault()
start = $this.get(0).selectionStart
end = $this.get(0).selectionEnd
# set textarea value to: text before caret + tab + text after caret
$this.val($this.val().substring(0, start) +
'\t' +
$this.val().substring(end))
# put caret at right position again
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + 1
# enter key
else if keyCode is 13
val = $this.val()
start = $this.get(0).selectionStart
bl = val.lastIndexOf("\n", start-1)
line = val.substring(bl, start)
lm = line.match(/^\s+/)
ns = if lm? then lm[0].length - 1 else 0
nv = val.substring(0, start) + "\n"
_(ns).times ->
nv += "\t"
$this.val(nv + val.substring(start))
$this.get(0).selectionStart =
$this.get(0).selectionEnd = start + ns + 1
e.preventDefault()
# new post tags
$('#post_tags').select2 {
tags: window.RV.AllTags
}
# Preview post.
load_preview = ->
text = $('#post_body').val()
csrfToken = $("meta[name='csrf-token']").attr('content')
$.post('/posts/preview.api', {
'text': text
'authenticity_token': csrfToken
})
.done (data) ->
$('#post_preview').html(data)
prettyPrint()
$('#post_body').on('keyup mouseup', load_preview)
load_preview()
// Place all the styles related to the apis controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
......@@ -87,33 +87,4 @@
}
*/
/* posts#new
-------------------------------------------------- */
#post_title {
width: 95%;
height: 40px;
font-weight: bold;
font-size: 25px;
}
.input-group-addon {
label {
margin: 0;
}
}
#post_body {
width: 100%;
min-height: 400px;
font-size: 9pt;
padding: 3px;
tab-size: 2;
}
#post_preview {
min-height: 400px;
}
.editor {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Ricty', monospace;
}
}
/* Style for mod-mdEditor
-------------------------------------------------- */
.mod-mdEditor-title {
width: 95%;
height: 40px;
font-weight: bold;
font-size: 25px;
}
// .input-group-addon {
// label {
// margin: 0;
// }
// }
.mod-mdEditor-body {
width: 100%;
min-height: 400px;
font-size: 9pt;
padding: 3px;
tab-size: 2;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Ricty', monospace;
}
.mod-mdEditor-preview {
min-height: 400px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Ricty', monospace;
}
class ApisController < ApplicationController
# TODO: not to use
include ApplicationHelper
def markdown_preview
# TODO: not to use
render text: h_application_format_markdown(params[:text] || '')
end
end
......@@ -5,8 +5,6 @@ class PostsController < ApplicationController
before_action :require_login
layout 'app'
# TODO: not to use
include ApplicationHelper
include RV::Mailer
# GET /posts
......@@ -19,11 +17,6 @@ class PostsController < ApplicationController
end
end
def preview
# TODO: not to use
render text: h_application_format_markdown(params[:text])
end
# GET /posts/1
# GET /posts/1.json
def show
......
class ApisDecorator < Draper::Decorator
delegate_all
# Define presentation-specific methods here. Helpers are accessed through
# `helpers` (aka `h`). You can override attributes, for example:
#
# def created_at
# helpers.content_tag :span, class: 'time' do
# object.created_at.strftime("%a %m/%d/%y")
# end
# end
end
module ApisHelper
end
<h1>Apis#markdown_preview</h1>
<p>Find me in app/views/apis/markdown_preview.html.erb</p>
<%= form_for(@post) do |f| %>
<div id="post-form">
<%= form_for(@post) do |f| %>
<% if @post.errors.any? %>
<div id="error_explanation">
......@@ -18,14 +19,14 @@
<div class="field">
<div class="input-group">
<span class="input-group-addon"><%= f.label :title %></span>
<%= f.text_field :title, class: 'form-control' %>
<%= f.text_field :title, class: 'form-control mod-mdEditor-title' %>
</div>
</div>
<div class="field">
<div class="input-group">
<span class="input-group-addon"><%= f.label :tags %></span>
<%= hidden_field :post, :tags, id: 'post_tags', style: 'width:300px', value: @post.tags.pluck(:name).join(',') %>
<%= hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.pluck(:name).join(',') %>
</div>
</div>
</div>
......@@ -46,7 +47,7 @@
<div class="field">
<!-- <%= f.label :body %><br> -->
<%= f.text_area :body, class: 'autosize editor disable-tab' %>
<%= f.text_area :body, class: 'mod-mdEditor-body' %>
</div>
</div><!--/span-->
......@@ -54,7 +55,8 @@
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box-text">
<div id="post_preview" class="text-box body viewer github">
<%# TODO: class名の整理 %>
<div class="text-box body viewer github mod-mdEditor-preview">
</div>
</div>
......@@ -62,10 +64,13 @@
</div><!--/row-->
<% end %>
<% end %>
</div>
<% content_for :footer_js do %>
<script type="text/javascript">
$.setConfirmUnload()
$.setConfirmUnload();
$('#post-form').mod_mdEditor({end_point: '/apis/markdown_preview'});
</script>
<% end %>
<%= form_for(@tag) do |f| %>
<div id="tag-form">
<%= form_for(@tag) do |f| %>
<% if @tag.errors.any? %>
<div id="error_explanation">
......@@ -25,7 +27,7 @@
<div class="col-md-2">
<div class="actions">
<%= f.submit class: 'btn btn-primary', id: 'save_button' %>
<%= f.submit class: 'btn btn-primary js-disable-confirm-unload', id: 'save_button' %>
</div>
</div>
......@@ -39,7 +41,7 @@
<div class="field">
<!-- <%= f.label :body %><br> -->
<%= f.text_area :body, class: 'autosize editor disable-tab' %>
<%= f.text_area :body, class: 'mod-mdEditor-body' %>
</div>
</div><!--/span-->
......@@ -47,7 +49,7 @@
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box-text">
<div id="tag_preview" class="text-box body viewer github">
<div id="tag_preview" class="text-box body viewer github mod-mdEditor-preview">
</div>
</div>
......@@ -55,10 +57,14 @@
</div><!--/row-->
<% end %>
<% end %>
</div>
<% content_for :footer_js do %>
<script type="text/javascript">
$.setConfirmUnload()
$('#tag-form').mod_mdEditor({end_point: '/apis/markdown_preview'});
</script>
<% end %>
Rendezvous::Application.routes.draw do
post 'apis/markdown_preview'
root 'home#top', as: 'root'
post 'posts/preview' => 'posts#preview'
get 'posts/:id/fork' => 'posts#fork', as: 'fork_post'
post 'posts/:id/mail' => 'posts#mail', as: 'mail_post'
post 'posts/:id/comment' => 'posts#comment', as: 'comment_post'
......
require 'spec_helper'
describe ApisController do
describe "GET 'markdown_preview'" do
it "returns http success" do
get 'markdown_preview'
response.should be_success
end
end
end
require 'spec_helper'
describe ApisDecorator do
end
require 'spec_helper'
# Specs in this file have access to a helper object that includes
# the ApisHelper. For example:
#
# describe ApisHelper do
# describe "string concat" do
# it "concats two strings with spaces" do
# expect(helper.concat_strings("this","that")).to eq("this that")
# end
# end
# end
describe ApisHelper do
pending "add some examples to (or delete) #{__FILE__}"
end
require 'spec_helper'
describe "apis/markdown_preview.html.erb" do
pending "add some examples to (or delete) #{__FILE__}"
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment