Skip to content

R
rendezvous
Commit 0892400f by tady
Options

upload style

parent 419360c6
Showing with 52 additions and 18 deletions
app/assets/javascripts/modules/mod-fileuploader.js.coffee
...@@ -2,31 +2,52 @@ $.extend ...@@ -2,31 +2,52 @@ $.extend
mod_fileuploader: (options) -> mod_fileuploader: (options) ->
settings = settings =
$input: null, $input: null,
$textarea: null $textarea: null,
$progressWrapper: null,
$progressBar: null
settings = $.extend settings, options settings = $.extend settings, options
# Used for replacing text
uploadingIndex = 0
settings.$input.fileupload settings.$input.fileupload
dataType: 'json' dataType: 'json'
add: (e, data) ->
settings.$progressWrapper.show()
settings.$textarea.val(settings.$textarea.val() + "\n[Uploading... #" + uploadingIndex + "]\n")
data.formData = { uploading_index: uploadingIndex }
data.submit()
uploadingIndex += 1
done: (e, data) -> done: (e, data) ->
settings.$progressWrapper.hide()
$.each data.result.files, (index, file) -> $.each data.result.files, (index, file) ->
# TODO: カーソル位置に挿入 # TODO: カーソル位置に挿入
console.log file textarea_value = settings.$textarea.val()
if file.type is 'image' if file.type is 'image'
# image ![file-name](file-url) # ![file-name](file-url)
settings.$textarea.val(settings.$textarea.val() + "\n![" + file.name + "](" + file.image + ")\n") replacing_text = "![" + file.name + "](" + file.image + ")"
new_textarea_value = textarea_value.replace('[Uploading... #' + data.result.uploading_index + ']', replacing_text)
settings.$textarea.val(new_textarea_value)
else if file.type is 'slide' else if file.type is 'slide'
# slide !slide!(file-url)
# [![alt text](image link)](web link) # [![alt text](image link)](web link)
settings.$textarea.val(settings.$textarea.val() + "\n[![" + file.name + "](" + file.image + ")](" + file.url + ")\n") replacing_text = "[![" + file.name + "](" + file.image + ")](" + file.url + ")"
new_textarea_value = textarea_value.replace('[Uploading... #' + data.result.uploading_index + ']', replacing_text)
settings.$textarea.val(new_textarea_value)
settings.$textarea.trigger("change") settings.$textarea.trigger("change")
# $('<p/>').text(file.name).appendTo('#files') # TODO # $('<p/>').text(file.name).appendTo('#files') # TODO
# progressall: (e, data) -> progressall: (e, data) ->
# progress = parseInt(data.loaded / data.total * 100, 10) progress = parseInt(data.loaded / data.total * 100, 10)
# $('.progress-bar').css settings.$progressBar
# width: progress + '%' .css(width: progress + '%')
.text(progress + '%')
settings.$input.prop('disabled', !$.support.fileInput) settings.$input.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled'); .parent().addClass($.support.fileInput ? undefined : 'disabled');
...@@ -34,15 +55,12 @@ $.extend ...@@ -34,15 +55,12 @@ $.extend
$('<p id="mod-fileuploader-notify"/>').text('ここにドロップしてください').appendTo('body') $('<p id="mod-fileuploader-notify"/>').text('ここにドロップしてください').appendTo('body')
$(window).bind 'dragover', (e) -> $(window).bind 'dragover', (e) ->
console.log('dragover')
$('#mod-fileuploader-notify').show() $('#mod-fileuploader-notify').show()
# $(window).bind 'dragleave', (e) -> # $(window).bind 'dragleave', (e) ->
# console.log('dragleave') # console.log('dragleave')
# $('#mod-fileuploader-notify').hide() # $('#mod-fileuploader-notify').hide()
$(window).bind 'dragend', (e) -> $(window).bind 'dragend', (e) ->
console.log('dragend')
$('#mod-fileuploader-notify').hide() $('#mod-fileuploader-notify').hide()
$(window).bind 'drop', (e) -> $(window).bind 'drop', (e) ->
console.log('drop')
$('#mod-fileuploader-notify').hide() $('#mod-fileuploader-notify').hide()
app/controllers/apis_controller.rb
...@@ -34,7 +34,7 @@ class ApisController < ApplicationController ...@@ -34,7 +34,7 @@ class ApisController < ApplicationController
s3_files << { type: 'image', name: file.original_filename, image: res.public_url.to_s } s3_files << { type: 'image', name: file.original_filename, image: res.public_url.to_s }
when /\.pdf\Z/ when /\.pdf\Z/
cover_image_name = "#{Digest::MD5.file(file.path).to_s}-cover.png" cover_image_name = "#{Digest::MD5.file(file.path).to_s}-cover.png"
pdf = Magick::ImageList.new(file.path) pdf = Magick::ImageList.new(file.path + '[0]')
cover_tmp = Rails.root.join('tmp', cover_image_name) cover_tmp = Rails.root.join('tmp', cover_image_name)
pdf[0].write(cover_tmp) pdf[0].write(cover_tmp)
cover_res = s3_uploader.upload!(file: cover_tmp, name: cover_image_name) cover_res = s3_uploader.upload!(file: cover_tmp, name: cover_image_name)
...@@ -43,7 +43,7 @@ class ApisController < ApplicationController ...@@ -43,7 +43,7 @@ class ApisController < ApplicationController
end end
end end
render json: { status: 'OK', files: s3_files } render json: { status: 'OK', files: s3_files, uploading_index: params[:uploading_index] }
end end
def user_mention def user_mention
......
app/views/posts/_form.html.slim
...@@ -33,6 +33,13 @@ ...@@ -33,6 +33,13 @@
br/ br/
.row .row
#progress-wrapper.alert.alert-warning.fade.in style="display:none;"
| 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%
.row
.col-xs-6 .col-xs-6
.panel.panel-default .panel.panel-default
.panel-heading .panel-heading
...@@ -53,8 +60,9 @@ ...@@ -53,8 +60,9 @@
i.fa.fa-list-ul i.fa.fa-list-ul
button.btn.btn-default.mod-mdEditor-btn-strikethrough type="button" title="打ち消し線" button.btn.btn-default.mod-mdEditor-btn-strikethrough type="button" title="打ち消し線"
i.fa.fa-strikethrough i.fa.fa-strikethrough
/ button.btn.btn-default.mod-mdEditor-btn-link type="button" .btn-group.btn-group-xs
/ i.fa.fa-link button#uploadButton.btn.btn-default type="button" title="Upload"
| Upload
.panel-body.panel-body-nopadding .panel-body.panel-body-nopadding
= f.text_area :body, class: 'mod-mdEditor-textarea' = f.text_area :body, class: 'mod-mdEditor-textarea'
...@@ -73,10 +81,18 @@ input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style ...@@ -73,10 +81,18 @@ input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style
$.mod_fileuploader({ $.mod_fileuploader({
$input: $('#fileupload'), $input: $('#fileupload'),
$textarea: $('.mod-mdEditor-textarea') $textarea: $('.mod-mdEditor-textarea'),
$progressWrapper: $('#progress-wrapper'),
$progressBar: $('#progress .progress-bar')
});
// Display upload dialog.
$('#uploadButton').on('click', function(){
$('input#fileupload').trigger('click');
}); });
// 下書き保存 // 下書き保存
// TODO
$('.btn-save-draft').on('click', function(e){ $('.btn-save-draft').on('click', function(e){
e.preventDefault(); e.preventDefault();
var val = $('.mod-mdEditor-body').val(); var val = $('.mod-mdEditor-body').val();
......
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