fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-05-08 19:42:15 +09:00
Code Issues Projects Releases Packages Wiki Activity

#1579 업로드 폼 UI 및 파일선택 방법 개선

Browse source
This commit is contained in:
bnu 2015-07-03 18:01:19 +09:00
parent c8fafa77d7
commit 8a412532d4
5 changed files with 144 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

51
common/js/plugins/jquery.fileupload/css/style.css
View file

@ -7,25 +7,28 @@
.xefu-container { .xefu-container {
margin: 10px 0; margin: 10px 0;
border: 1px solid #B6B6B6; border: 1px solid #d7d8d8;
border-radius: 3px;
} }
/* dropzone */ /* dropzone */
.xefu-dropzone { .xefu-dropzone {
border: 1px solid #EEE; padding: 12px;
text-align: center; border: 1px solid #fafafa;
background-color: #EBEBEB; background-color: #f7f7f7;
border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
.xefu-dropzone.in { .in .xefu-dropzone {
background-color: #E9F3EF; background-color: #E9F3EF;
} }
.xefu-dropzone.hover { .hover .xefu-dropzone {
border: 1px dotted #9ad18f; border: 1px dotted #9ad18f;
border-radius: 5px; border-radius: 5px;
} }
.xefu-dropzone.fade { .fade .xefu-dropzone {
-webkit-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out;
@ -141,13 +144,9 @@
height: 24px !important; height: 24px !important;
overflow: visible; overflow: visible;
border: 1px solid #bbbbbb; border: 1px solid #bbbbbb;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
border-radius: 2px; border-radius: 2px;
text-decoration: none !important; text-decoration: none !important;
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: top; vertical-align: top;
line-height: 24px !important; line-height: 24px !important;
font-family: inherit; font-family: inherit;
@ -199,3 +198,33 @@ button.xefu-btn {
cursor: pointer; cursor: pointer;
background: none; background: none;
} }
p.xefu-dropzone-message {
display: inline-block;
margin: 0;
margin-left: 5px;
line-height: 24px;
vertical-align: middle;
}
.xefu-dropzone:hover p.xefu-dropzone-message,
.in .xefu-dropzone p.xefu-dropzone-message,
.hover .xefu-dropzone p.xefu-dropzone-message,
.fade .xefu-dropzone p.xefu-dropzone-message {
display: none;
}
.upload_info {
display: none;
margin: 0;
margin-left: 5px;
line-height: 24px;
vertical-align: middle;
}
.xefu-dropzone:hover .upload_info,
.in .xefu-dropzone .upload_info,
.hover .xefu-dropzone .upload_info,
.fade .xefu-dropzone .upload_info {
display: inline-block;
margin: 0;
margin-left: 5px;
}

177
common/js/plugins/jquery.fileupload/js/main.js
View file

@ -41,32 +41,41 @@
]; ];
var XeUploader = xe.createApp('XeUploader', { var XeUploader = xe.createApp('XeUploader', {
files: {},
selected_files: {},
settings: {}, settings: {},
last_selected_file: null,
editor_sequence: null,
init : function() { init : function() {
}, },
deactivate: function() { deactivate: function() {
console.log(this);
}, },
createInstance: function(containerEl, opt) { createInstance: function(containerEl, opt) {
var self = this; var self = this;
var $container = this.$container = containerEl; var $container = containerEl;
var data = $container.data(); var data = $container.data();
this.editor_sequence = data.editorSequence;
$.extend(data, {
files: {},
selected_files: {},
settings: {},
last_selected_file: null,
});
var settings = { var settings = {
url: request_uri.setQuery('module', 'file').setQuery('act', 'procFileUpload'), url: request_uri
formData: {"editor_sequence": data.editorSequence, "upload_target_srl" : data.uploadTargetSrl, "mid" : window.current_mid}, .setQuery('module', 'file')
.setQuery('act', 'procFileUpload')
.setQuery('mid', window.current_mid),
formData: {
"editor_sequence": data.editorSequence,
"upload_target_srl" : data.uploadTargetSrl,
"mid" : window.current_mid,
"act": 'procFileUpload'
},
dropZone: $container, dropZone: $container,
add: function(e, data) { add: function(e, d) {
var dfd = jQuery.Deferred(); var dfd = jQuery.Deferred();
$.each(data.files, function(index, file) { $.each(d.files, function(index, file) {
if(self.settings.maxFileSize <= file.size) { if(data.settings.maxFileSize <= file.size) {
dfd.reject(); dfd.reject();
alert(window.xe.msg_exceeds_limit_size); alert(window.xe.msg_exceeds_limit_size);
return false; return false;
@ -75,7 +84,7 @@
}); });
dfd.done(function(){ dfd.done(function(){
data.submit(); d.submit();
}); });
}, },
done: function(e, res) { done: function(e, res) {
@ -93,77 +102,87 @@
} }
}, },
stop: function() { stop: function() {
self.loadFilelist(); self.loadFilelist($container);
}, },
start: function() { start: function() {
self.settings.progressbarGraph.width(0); data.settings.progressbarGraph.width(0);
self.settings.progressStatus.show(); data.settings.progressStatus.show();
self.settings.progressbar.show(); data.settings.progressbar.show();
}, },
progressall: function (e, data) { progressall: function (e, d) {
var progress = parseInt(data.loaded / data.total * 100, 10); var progress = parseInt(d.loaded / d.total * 100, 10);
self.settings.progressbarGraph.width(progress+'%'); data.settings.progressbarGraph.width(progress+'%');
self.settings.progressPercent.text(progress+'%'); data.settings.progressPercent.text(progress+'%');
if(progress >= 100) { if(progress >= 100) {
self.settings.progressbar.delay(3000).slideUp(); data.settings.progressbar.delay(3000).slideUp();
self.settings.progressStatus.delay(3000).slideUp(); data.settings.progressStatus.delay(3000).slideUp();
} }
} }
}; };
this.settings = $.extend({} , default_settings, settings, opt || {});
data.settings = $.extend({} , default_settings, settings, opt || {});
$container.data(data);
$.each(_elements, function(idx, val) { $.each(_elements, function(idx, val) {
if(typeof self.settings[val] === 'string') self.settings[val] = $container.find(self.settings[val]); if(typeof data.settings[val] === 'string') data.settings[val] = $container.find(data.settings[val]);
}); });
var INS = $container.fileupload(this.settings) var INS = $container.fileupload(data.settings)
.prop('disabled', !$.support.fileInput) .prop('disabled', !$.support.fileInput)
.parent() .parent()
.addClass($.support.fileInput ? undefined : 'disabled'); .addClass($.support.fileInput ? undefined : 'disabled');
$container.data('xefu-instance', this); $container.data('xefu-instance', this);
// 파일 목록 불러오기 // 파일 목록 불러오기
this.loadFilelist(); this.loadFilelist($container);
// 본문 삽입 // 본문 삽입
this.settings.actSelectedInsertContent.on('click', function() { data.settings.actSelectedInsertContent.on('click', function() {
self.insertToContent(); self.insertToContent($container);
}); });
// 파일 삭제 // 파일 삭제
this.settings.actSelectedDeleteFile.on('click', function() { data.settings.actSelectedDeleteFile.on('click', function() {
self.deleteFile(); self.deleteFile($container);
}); });
// finderSelect // finderSelect
var fileselect = this.settings.fileList.finderSelect({children:"li"}); var fileselect = data.settings.fileList.finderSelect({children:"li", enableDesktopCtrlDefault:true});
this.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); }); console.log(data.settings.fileList);
data.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); });
fileselect.finderSelect('addHook','highlight:after', function(el) { fileselect.finderSelect('addHook','highlight:after', function(el) {
el.find('input').prop('checked', true); el.find('input').prop('checked', true);
var selected = self.settings.fileList.find('input:checked'); var selected = data.settings.fileList.find('input:checked');
self.selected_files = selected; data.selected_files = selected;
}); });
fileselect.finderSelect('addHook','unHighlight:after', function(el) { fileselect.finderSelect('addHook','unHighlight:after', function(el) {
el.find('input').prop('checked', false); el.find('input').prop('checked', false);
var selected = self.settings.fileList.find('input:checked'); var selected = data.settings.fileList.find('input:checked');
self.selected_files = selected; data.selected_files = selected;
}); });
fileselect.on("click", ":checkbox", function(e){ fileselect.on("click", ":checkbox", function(e){
e.preventDefault(); e.preventDefault();
}); });
$(document).bind('dragover', function (e) { $(document).bind('dragover', function (e) {
var timeout = window.dropZoneTimeout, var timeout = window.dropZoneTimeout,
dropZone = self.settings.dropZone; dropZone = data.settings.dropZone;
if (!timeout) { if (!timeout) {
dropZone.addClass('in'); dropZone.addClass('in');
} else { } else {
clearTimeout(timeout); clearTimeout(timeout);
} }
var found = false, var found = false,
node = e.target; node = e.target;
do { do {
if (node === dropZone[0]) { if (node === dropZone[0]) {
found = true; found = true;
@ -171,16 +190,20 @@
} }
node = node.parentNode; node = node.parentNode;
} while (node != null); } while (node != null);
if (found) { if (found) {
dropZone.addClass('hover'); dropZone.addClass('hover');
} else { } else {
dropZone.removeClass('hover'); dropZone.removeClass('hover');
} }
window.dropZoneTimeout = setTimeout(function () { window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null; window.dropZoneTimeout = null;
dropZone.removeClass('in hover'); dropZone.removeClass('in hover');
}, 100); }, 100);
}); });
$container.data(data);
}, },
done: function() { done: function() {
// this.loadFilelist(); // this.loadFilelist();
@ -192,13 +215,14 @@
unselectImageFiles: function() {}, unselectImageFiles: function() {},
unselectNonImageFiles: function() {}, unselectNonImageFiles: function() {},
insertToContent: function() { insertToContent: function($container) {
var self = this; var self = this;
var temp_code = ''; var temp_code = '';
var data = $container.data();
$.each(this.selected_files, function(idx, file) { $.each(data.selected_files, function(idx, file) {
var file_srl = $(file).data().fileSrl; var file_srl = $(file).data().fileSrl;
var fileinfo = self.files[file_srl]; var fileinfo = data.files[file_srl];
if(!fileinfo) return; if(!fileinfo) return;
@ -211,18 +235,19 @@
}); });
_getCkeInstance(this.editor_sequence).insertHtml(temp_code, "unfiltered_html"); _getCkeInstance(data.editorSequence).insertHtml(temp_code, "unfiltered_html");
}, },
/** /**
* 지정된 하나의 파일 또는 다중 선택된 파일 삭제 * 지정된 하나의 파일 또는 다중 선택된 파일 삭제
*/ */
deleteFile: function(file_srl) { deleteFile: function($container, file_srl) {
var self = this; var self = this;
var file_srls = []; var file_srls = [];
var data = $container.data();
if(!file_srl) if(!file_srl)
{ {
$.each(self.selected_files, function(idx, file) { $.each(data.selected_files, function(idx, file) {
if(!file) return; if(!file) return;
var file_srl = $(file).data().fileSrl; var file_srl = $(file).data().fileSrl;
@ -237,38 +262,38 @@
file_srls = file_srls.join(','); file_srls = file_srls.join(',');
exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': this.editor_sequence}, function() { exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': data.editorSequence}, function() {
file_srls = file_srls.split(','); file_srls = file_srls.split(',');
$.each(file_srls, function(idx, srl){ $.each(file_srls, function(idx, srl){
self.settings.fileList.find('ul').find('li[data-file-srl=' + srl + ']').remove(); data.settings.fileList.find('ul').find('li[data-file-srl=' + srl + ']').remove();
}); });
self.loadFilelist(); self.loadFilelist($container);
}); });
}, },
/** /**
* 파일 목록 갱신 * 파일 목록 갱신
*/ */
loadFilelist: function() { loadFilelist: function($container) {
var self = this; var self = this;
var data = this.$container.data(); var data = $container.data();
var obj = {}; var obj = {};
obj.mid = window.current_mid; obj.mid = window.current_mid;
obj.editor_sequence = self.$container.data('editor-sequence'); obj.editor_sequence = data.editorSequence;
$.exec_json('file.getFileList', obj, function(res){ $.exec_json('file.getFileList', obj, function(res){
data.uploadTargetSrl = res.upload_target_srl; data.uploadTargetSrl = res.upload_target_srl;
editorRelKeys[self.$container.data('editor-sequence')].primary.value = res.upload_target_srl; editorRelKeys[data.editorSequence].primary.value = res.upload_target_srl;
data.uploadTargetSrl = res.uploadTargetSrl; data.uploadTargetSrl = res.uploadTargetSrl;
// @TODO 정리 // @TODO 정리
$('.allowed_filetypes').text(res.allowed_filetypes); $container.find('.allowed_filetypes').text(res.allowed_filetypes);
$('.allowed_filesize').text(res.allowed_filesize); $container.find('.allowed_filesize').text(res.allowed_filesize);
$('.allowed_attach_size').text(res.allowed_attach_size); $container.find('.allowed_attach_size').text(res.allowed_attach_size);
$('.attached_size').text(res.attached_size); $container.find('.attached_size').text(res.attached_size);
$('.file_count').text(res.files.length); $container.find('.file_count').text(res.files.length);
var tmpl_fileitem = self.settings.tmplXeUploaderFileitem; var tmpl_fileitem = data.settings.tmplXeUploaderFileitem;
var tmpl_fileitem_image = self.settings.tmplXeUploaderFileitemImage; var tmpl_fileitem_image = data.settings.tmplXeUploaderFileitemImage;
var template_fileimte = Handlebars.compile(tmpl_fileitem); var template_fileimte = Handlebars.compile(tmpl_fileitem);
var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image); var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image);
var result_image = []; var result_image = [];
@ -276,16 +301,17 @@
// 첨부된 파일이 없으면 감춤 // 첨부된 파일이 없으면 감춤
if(!res.files.length) { if(!res.files.length) {
self.settings.fileList.hide(); data.settings.fileList.hide();
self.settings.controll.hide(); data.settings.controll.hide();
return; return;
} }
// 이미지와 그외 파일 분리 // 이미지와 그외 파일 분리
$.each(res.files, function (index, file) { $.each(res.files, function (index, file) {
if(self.files[file.file_srl]) return; if(data.files[file.file_srl]) return;
self.files[file.file_srl] = file; data.files[file.file_srl] = file;
$container.data(data);
if(/\.(jpe?g|png|gif)$/i.test(file.source_filename)) { if(/\.(jpe?g|png|gif)$/i.test(file.source_filename)) {
result_image.push(template_fileimte_image(file)); result_image.push(template_fileimte_image(file));
@ -297,12 +323,12 @@
}); });
// 파일 목록 // 파일 목록
self.settings.filelistImages.append(result_image.join('')); data.settings.filelistImages.append(result_image.join(''));
self.settings.filelist.append(result.join('')); data.settings.filelist.append(result.join(''));
// 컨트롤, 리스트 표시 // 컨트롤, 리스트 표시
self.settings.controll.show() data.settings.controll.show()
self.settings.fileList.show(); data.settings.fileList.show();
}); });
} }
}); });
@ -319,16 +345,7 @@
return u; return u;
}; };
xe.unregisterApp(); xe.unregisterApp();
// Shortcut function in XE
// xe.createXeUploader = function(browseButton, opts) {
// var u = new XeUploader(browseButton, opts);
// if(u) xe.registerApp(u);
// return u;
// };
})(jQuery); })(jQuery);

6
modules/editor/skins/ckeditor/css/default.css
View file

@ -1,6 +0,0 @@
.cke_button__xe_component_label {
display: inline !important;
}
.cke_button__xe_component_icon {
display: none !important;
}

2
modules/editor/skins/ckeditor/editor.html
View file

@ -9,7 +9,7 @@
{@ $css_content = null } {@ $css_content = null }
<!--@if($content_font || $content_font_size)--> <!--@if($content_font || $content_font_size)-->
{@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); } <!--@if($content_style === 'ckeditor_light')-->{@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); }<!--@endif-->
{@ $css_content .= ' .xe_content.editable { '} {@ $css_content .= ' .xe_content.editable { '}
<block cond="$content_font"> <block cond="$content_font">

14
modules/editor/skins/ckeditor/file_upload.html
View file

@ -5,16 +5,14 @@
<div cond="$allow_fileupload" id="xefu-container-{$editor_sequence}" class="xefu-container xe-clearfix" data-editor-sequence="{$editor_sequence}"> <div cond="$allow_fileupload" id="xefu-container-{$editor_sequence}" class="xefu-container xe-clearfix" data-editor-sequence="{$editor_sequence}">
<!--// dropzone --> <!--// dropzone -->
<div class="xefu-dropzone"> <div class="xefu-dropzone">
<span class="xefu-btn fileinput-button xefu-act-selectfile">
<span><i class="xi-icon xi-file-add"></i> {$lang->edit->upload_file}</span>
<input id="xe-fileupload" type="file" class="fileupload-processing " value="{$lang->edit->upload_file}" name="Filedata" data-auto-upload="true" data-editor-sequence="{$editor_sequence}" multiple />
</span>
<p class="xefu-dropzone-message">{$lang->ckeditor_about_file_drop_area}</p> <p class="xefu-dropzone-message">{$lang->ckeditor_about_file_drop_area}</p>
<div> <p class="upload_info">{$lang->allowed_filesize} : <span class="allowed_filesize">0MB</span> <span>({$lang->allowed_filetypes} : <span class="allowed_filetypes">*.*</span>)</span></p>
<span class="xefu-btn fileinput-button xefu-act-selectfile">
<span>{$lang->edit->upload_file}</span>
<input id="xe-fileupload" type="file" class="fileupload-processing " value="{$lang->edit->upload_file}" name="Filedata" data-auto-upload="true" data-editor-sequence="{$editor_sequence}" multiple />
</span>
</div>
<p>{$lang->allowed_filesize} : <span class="allowed_filesize">0MB</span> <span>({$lang->allowed_filetypes} : <span class="allowed_filetypes">*.*</span>)</span></p>
<p class="xefu-progress-status" style="display: none;">{$lang->ckeditor_file_uploading} (<span class="xefu-progress-percent">0%</span>)</p> <p class="xefu-progress-status" style="display: none;">{$lang->ckeditor_file_uploading} (<span class="xefu-progress-percent">0%</span>)</p>
<div class="xefu-progressbar" style="display: none;"><div></div></div> <div class="xefu-progressbar" style="display: none;"><div></div></div>