Skip to content

R
rendezvous
Commit d2705349 by tady
Options

form view split

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