Skip to content

R
rendezvous
Commit d2705349 by tady
Options

form view split

parent 2772578a
Showing with 65 additions and 40 deletions
Gemfile.lock
......@@ -199,7 +199,7 @@ GEM
htmlentities (4.3.2)
http-cookie (1.0.2)
domain_name (~> 0.5)
httparty (0.13.2)
httparty (0.13.3)
json (~> 1.8)
multi_xml (>= 0.5.2)
i18n (0.6.11)
......
app/assets/javascripts/modules/mod-form-resizes.js.coffee
# Desc
# フォームサイズの調整を自動で行う
# フォームサイズ,スクロール位置の調整を自動で行う
# Usage:
#
# Example:
......@@ -14,13 +14,32 @@ $.extend
settings = $.extend settings, options
$window = $(window)
editor_height = 0
settings.$preview.css('overflow-y', 'scroll')
adjust = ->
# Set editor & preview height
adjustHeight = ->
h = $window.height()
settings.$editor.css('height', h - settings.height_offset)
settings.$preview.css('height', h - settings.height_offset)
editor_height = h - settings.height_offset
settings.$editor.css('height', editor_height)
settings.$preview.css('height', editor_height)
adjust()
adjustHeight()
$window.on 'resize', ->
adjust()
adjustHeight()
# Set preview scrollTop by editor scrollTop
adjustPreviewScroll = ->
settings.$preview.prop('scrollHeight')
editor_scrollTop = settings.$editor.scrollTop()
preview_scrollHeight = settings.$preview.prop('scrollHeight')
editor_scrollHeight = settings.$editor.prop('scrollHeight')
preview_scrollTop = (preview_scrollHeight - editor_height) / (editor_scrollHeight - editor_height) * editor_scrollTop
settings.$preview.scrollTop(preview_scrollTop)
console.log([editor_scrollTop, preview_scrollHeight, editor_height, editor_scrollHeight, preview_scrollTop])
settings.$editor.on 'scroll', _.throttle(adjustPreviewScroll, 1000 / 30)
app/assets/javascripts/modules/mod-md-editor.js.coffee
......@@ -29,7 +29,7 @@ $.fn.extend
$textarea = $root.find('.mod-mdEditor-textarea')
# textareのサイズ調整
$textarea.autosize();
# $textarea.autosize();
# textareaのtabキー制御,indent維持
$textarea.on 'keydown', (e) ->
......@@ -87,7 +87,7 @@ $.fn.extend
# TODO
prettyPrint()
$textarea.on('keyup mouseup change', generatePreview)
$textarea.on('keyup mouseup change', _.debounce(generatePreview, 200))
generatePreview()
......
app/views/posts/_form.html.slim
......@@ -30,11 +30,9 @@
p.actions
= f.date_select :specified_date
br/
table
tr
td
td.editor-panel
.panel.panel-default
.panel-heading
.btn-toolbar role="toolbar"
......@@ -57,32 +55,50 @@
.btn-group.btn-group-xs
button#uploadButton.btn.btn-default type="button" title="Upload"
| Upload
.panel-body.panel-body-nopadding
= f.text_area :body, class: 'mod-mdEditor-textarea editor-box', placehoder: 'type your text....'
td
.panel.preview-wrapper
.panel-heading
span Preview - 入力した内容がここに表示されます
.panel-body.preview-box
.box-text
.text-box.body.viewer.github.mod-mdEditor-preview
.row
#progress-wrapper.alert.alert-warning.fade.in style="display:none;"
.btn-group.btn-group-xs.pull-right.mode-editor
button#uploadButton.btn.btn-default type="button"
i.fa.fa-angle-right
.btn-group.btn-group-xs.pull-right.mode-split style="display:none"
button#uploadButton.btn.btn-default type="button"
i.fa.fa-angle-left
.panel-body.panel-body-nopadding style="position:relative"
= f.text_area :body, class: 'mod-mdEditor-textarea mod-form-resizer-editor', placehoder: 'type your text....'
#progress-wrapper style="display:none;position:absolute;bottom:0;z-index:1000;width:100%"
.alert.alert-warning.fade.in style="margin-bottom:0"
span.progress-title
| Uploading files...
#progress style="height:20px;"
.progress-bar.progress-bar-success.progress-bar-striped.active role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"
| 0%
td.preview-panel
.panel.preview-wrapper
.panel-heading
span Preview
.panel-body.text-box.body.viewer.github.mod-mdEditor-preview.mod-form-resizer-preview
input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style="display:none" type="file" /
- content_for :footer_js do
javascript:
// Bounce confirm.
$.setConfirmUnload();
// Mode change
$('.mode-editor button').on('click', function(){
$('.mode-editor').hide();
$('.mode-split').show();
$('.editor-panel').css('width', '100%'); $('.editor-panel').show(); $('.preview-panel').hide();
})
$('.mode-split button').on('click', function(){
$('.mode-split').hide();
$('.mode-editor').show();
$('.editor-panel').css('width', '50%'); $('.preview-panel').css('width', '50%'); $('.editor-panel').show(); $('.preview-panel').show();
})
$('#post-form').mod_mdEditor({end_point: '/apis/markdown_preview'});
$.mod_fileuploader({
......@@ -94,8 +110,8 @@ input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style
// フォームサイズ調整
$.mod_form_resizer({
$editor: $('.editor-box'),
$preview: $('.preview-box'),
$editor: $('.mod-form-resizer-editor'),
$preview: $('.mod-form-resizer-preview'),
height_offset: 250
})
......
spec/models/markdown_renderer_spec.rb
......@@ -25,18 +25,8 @@ EOS
!slide!(http://test.com/slide-2.pdf)
EOS
expect(renderer.render.to_s.gsub(/^ +/, '')).to eq(<<EOS)
<p>
<div class="embed-responsive embed-responsive-4by3">
<iframe style="text-align:center;" src="/ViewerJS/#http://test.com/slide-1.pdf"
width="400" height="300" allowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
<br>
<div class="embed-responsive embed-responsive-4by3">
<iframe style="text-align:center;" src="/ViewerJS/#http://test.com/slide-2.pdf"
width="400" height="300" allowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</p>
<p>!slide!(<a href="http://test.com/slide-1.pdf">http://test.com/slide-1.pdf</a>)<br>
!slide!(<a href="http://test.com/slide-2.pdf">http://test.com/slide-2.pdf</a>)</p>
EOS
end
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