mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 10:41:40 +09:00
#1579 업로드 폼 UI 및 파일선택 방법 개선
This commit is contained in:
bnu
parent
c8fafa77d7
commit
8a412532d4
5 changed files with 144 additions and 106 deletions
|
|
@ -7,25 +7,28 @@
|
|||
|
||||
.xefu-container {
|
||||
margin: 10px 0;
|
||||
border: 1px solid #B6B6B6;
|
||||
border: 1px solid #d7d8d8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* dropzone */
|
||||
.xefu-dropzone {
|
||||
border: 1px solid #EEE;
|
||||
text-align: center;
|
||||
background-color: #EBEBEB;
|
||||
padding: 12px;
|
||||
border: 1px solid #fafafa;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
.xefu-dropzone.in {
|
||||
.in .xefu-dropzone {
|
||||
background-color: #E9F3EF;
|
||||
}
|
||||
.xefu-dropzone.hover {
|
||||
.hover .xefu-dropzone {
|
||||
border: 1px dotted #9ad18f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.xefu-dropzone.fade {
|
||||
.fade .xefu-dropzone {
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
|
|
@ -141,13 +144,9 @@
|
|||
height: 24px !important;
|
||||
overflow: visible;
|
||||
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;
|
||||
text-decoration: none !important;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
vertical-align: top;
|
||||
line-height: 24px !important;
|
||||
font-family: inherit;
|
||||
|
|
@ -199,3 +198,33 @@ button.xefu-btn {
|
|||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,32 +41,41 @@
|
|||
];
|
||||
|
||||
var XeUploader = xe.createApp('XeUploader', {
|
||||
files: {},
|
||||
selected_files: {},
|
||||
settings: {},
|
||||
last_selected_file: null,
|
||||
editor_sequence: null,
|
||||
init : function() {
|
||||
},
|
||||
deactivate: function() {
|
||||
console.log(this);
|
||||
},
|
||||
createInstance: function(containerEl, opt) {
|
||||
var self = this;
|
||||
var $container = this.$container = containerEl;
|
||||
var $container = containerEl;
|
||||
var data = $container.data();
|
||||
this.editor_sequence = data.editorSequence;
|
||||
|
||||
$.extend(data, {
|
||||
files: {},
|
||||
selected_files: {},
|
||||
settings: {},
|
||||
last_selected_file: null,
|
||||
});
|
||||
|
||||
|
||||
var settings = {
|
||||
url: request_uri.setQuery('module', 'file').setQuery('act', 'procFileUpload'),
|
||||
formData: {"editor_sequence": data.editorSequence, "upload_target_srl" : data.uploadTargetSrl, "mid" : window.current_mid},
|
||||
|
||||
url: request_uri
|
||||
.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,
|
||||
add: function(e, data) {
|
||||
add: function(e, d) {
|
||||
var dfd = jQuery.Deferred();
|
||||
|
||||
$.each(data.files, function(index, file) {
|
||||
if(self.settings.maxFileSize <= file.size) {
|
||||
$.each(d.files, function(index, file) {
|
||||
if(data.settings.maxFileSize <= file.size) {
|
||||
dfd.reject();
|
||||
alert(window.xe.msg_exceeds_limit_size);
|
||||
return false;
|
||||
|
|
@ -75,7 +84,7 @@
|
|||
});
|
||||
|
||||
dfd.done(function(){
|
||||
data.submit();
|
||||
d.submit();
|
||||
});
|
||||
},
|
||||
done: function(e, res) {
|
||||
|
|
@ -93,77 +102,87 @@
|
|||
}
|
||||
},
|
||||
stop: function() {
|
||||
self.loadFilelist();
|
||||
self.loadFilelist($container);
|
||||
},
|
||||
start: function() {
|
||||
self.settings.progressbarGraph.width(0);
|
||||
self.settings.progressStatus.show();
|
||||
self.settings.progressbar.show();
|
||||
data.settings.progressbarGraph.width(0);
|
||||
data.settings.progressStatus.show();
|
||||
data.settings.progressbar.show();
|
||||
},
|
||||
progressall: function (e, data) {
|
||||
var progress = parseInt(data.loaded / data.total * 100, 10);
|
||||
self.settings.progressbarGraph.width(progress+'%');
|
||||
self.settings.progressPercent.text(progress+'%');
|
||||
progressall: function (e, d) {
|
||||
var progress = parseInt(d.loaded / d.total * 100, 10);
|
||||
data.settings.progressbarGraph.width(progress+'%');
|
||||
data.settings.progressPercent.text(progress+'%');
|
||||
|
||||
if(progress >= 100) {
|
||||
self.settings.progressbar.delay(3000).slideUp();
|
||||
self.settings.progressStatus.delay(3000).slideUp();
|
||||
data.settings.progressbar.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) {
|
||||
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)
|
||||
.prop('disabled', !$.support.fileInput)
|
||||
.parent()
|
||||
.addClass($.support.fileInput ? undefined : 'disabled');
|
||||
var INS = $container.fileupload(data.settings)
|
||||
.prop('disabled', !$.support.fileInput)
|
||||
.parent()
|
||||
.addClass($.support.fileInput ? undefined : 'disabled');
|
||||
|
||||
$container.data('xefu-instance', this);
|
||||
|
||||
// 파일 목록 불러오기
|
||||
this.loadFilelist();
|
||||
this.loadFilelist($container);
|
||||
|
||||
// 본문 삽입
|
||||
this.settings.actSelectedInsertContent.on('click', function() {
|
||||
self.insertToContent();
|
||||
data.settings.actSelectedInsertContent.on('click', function() {
|
||||
self.insertToContent($container);
|
||||
});
|
||||
|
||||
// 파일 삭제
|
||||
this.settings.actSelectedDeleteFile.on('click', function() {
|
||||
self.deleteFile();
|
||||
data.settings.actSelectedDeleteFile.on('click', function() {
|
||||
self.deleteFile($container);
|
||||
});
|
||||
|
||||
// finderSelect
|
||||
var fileselect = this.settings.fileList.finderSelect({children:"li"});
|
||||
this.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); });
|
||||
var fileselect = data.settings.fileList.finderSelect({children:"li", enableDesktopCtrlDefault:true});
|
||||
console.log(data.settings.fileList);
|
||||
data.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); });
|
||||
|
||||
fileselect.finderSelect('addHook','highlight:after', function(el) {
|
||||
el.find('input').prop('checked', true);
|
||||
var selected = self.settings.fileList.find('input:checked');
|
||||
self.selected_files = selected;
|
||||
var selected = data.settings.fileList.find('input:checked');
|
||||
data.selected_files = selected;
|
||||
});
|
||||
|
||||
fileselect.finderSelect('addHook','unHighlight:after', function(el) {
|
||||
el.find('input').prop('checked', false);
|
||||
var selected = self.settings.fileList.find('input:checked');
|
||||
self.selected_files = selected;
|
||||
var selected = data.settings.fileList.find('input:checked');
|
||||
data.selected_files = selected;
|
||||
});
|
||||
|
||||
fileselect.on("click", ":checkbox", function(e){
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
$(document).bind('dragover', function (e) {
|
||||
var timeout = window.dropZoneTimeout,
|
||||
dropZone = self.settings.dropZone;
|
||||
dropZone = data.settings.dropZone;
|
||||
|
||||
if (!timeout) {
|
||||
dropZone.addClass('in');
|
||||
} else {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
var found = false,
|
||||
node = e.target;
|
||||
|
||||
do {
|
||||
if (node === dropZone[0]) {
|
||||
found = true;
|
||||
|
|
@ -171,16 +190,20 @@
|
|||
}
|
||||
node = node.parentNode;
|
||||
} while (node != null);
|
||||
|
||||
if (found) {
|
||||
dropZone.addClass('hover');
|
||||
} else {
|
||||
dropZone.removeClass('hover');
|
||||
}
|
||||
|
||||
window.dropZoneTimeout = setTimeout(function () {
|
||||
window.dropZoneTimeout = null;
|
||||
dropZone.removeClass('in hover');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$container.data(data);
|
||||
},
|
||||
done: function() {
|
||||
// this.loadFilelist();
|
||||
|
|
@ -192,13 +215,14 @@
|
|||
unselectImageFiles: function() {},
|
||||
unselectNonImageFiles: function() {},
|
||||
|
||||
insertToContent: function() {
|
||||
insertToContent: function($container) {
|
||||
var self = this;
|
||||
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 fileinfo = self.files[file_srl];
|
||||
var fileinfo = data.files[file_srl];
|
||||
|
||||
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 file_srls = [];
|
||||
var data = $container.data();
|
||||
|
||||
if(!file_srl)
|
||||
{
|
||||
$.each(self.selected_files, function(idx, file) {
|
||||
$.each(data.selected_files, function(idx, file) {
|
||||
if(!file) return;
|
||||
|
||||
var file_srl = $(file).data().fileSrl;
|
||||
|
|
@ -237,38 +262,38 @@
|
|||
|
||||
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(',');
|
||||
$.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 data = this.$container.data();
|
||||
var data = $container.data();
|
||||
var obj = {};
|
||||
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){
|
||||
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;
|
||||
|
||||
// @TODO 정리
|
||||
$('.allowed_filetypes').text(res.allowed_filetypes);
|
||||
$('.allowed_filesize').text(res.allowed_filesize);
|
||||
$('.allowed_attach_size').text(res.allowed_attach_size);
|
||||
$('.attached_size').text(res.attached_size);
|
||||
$('.file_count').text(res.files.length);
|
||||
$container.find('.allowed_filetypes').text(res.allowed_filetypes);
|
||||
$container.find('.allowed_filesize').text(res.allowed_filesize);
|
||||
$container.find('.allowed_attach_size').text(res.allowed_attach_size);
|
||||
$container.find('.attached_size').text(res.attached_size);
|
||||
$container.find('.file_count').text(res.files.length);
|
||||
|
||||
var tmpl_fileitem = self.settings.tmplXeUploaderFileitem;
|
||||
var tmpl_fileitem_image = self.settings.tmplXeUploaderFileitemImage;
|
||||
var tmpl_fileitem = data.settings.tmplXeUploaderFileitem;
|
||||
var tmpl_fileitem_image = data.settings.tmplXeUploaderFileitemImage;
|
||||
var template_fileimte = Handlebars.compile(tmpl_fileitem);
|
||||
var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image);
|
||||
var result_image = [];
|
||||
|
|
@ -276,16 +301,17 @@
|
|||
|
||||
// 첨부된 파일이 없으면 감춤
|
||||
if(!res.files.length) {
|
||||
self.settings.fileList.hide();
|
||||
self.settings.controll.hide();
|
||||
data.settings.fileList.hide();
|
||||
data.settings.controll.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
// 이미지와 그외 파일 분리
|
||||
$.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)) {
|
||||
result_image.push(template_fileimte_image(file));
|
||||
|
|
@ -297,12 +323,12 @@
|
|||
});
|
||||
|
||||
// 파일 목록
|
||||
self.settings.filelistImages.append(result_image.join(''));
|
||||
self.settings.filelist.append(result.join(''));
|
||||
data.settings.filelistImages.append(result_image.join(''));
|
||||
data.settings.filelist.append(result.join(''));
|
||||
|
||||
// 컨트롤, 리스트 표시
|
||||
self.settings.controll.show()
|
||||
self.settings.fileList.show();
|
||||
data.settings.controll.show()
|
||||
data.settings.fileList.show();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -319,16 +345,7 @@
|
|||
return u;
|
||||
};
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
.cke_button__xe_component_label {
|
||||
display: inline !important;
|
||||
}
|
||||
.cke_button__xe_component_icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
{@ $css_content = null }
|
||||
<!--@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 { '}
|
||||
<block cond="$content_font">
|
||||
|
|
|
|||
|
|
@ -5,16 +5,14 @@
|
|||
<div cond="$allow_fileupload" id="xefu-container-{$editor_sequence}" class="xefu-container xe-clearfix" data-editor-sequence="{$editor_sequence}">
|
||||
<!--// 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>
|
||||
|
||||
<div>
|
||||
<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="upload_info">{$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>
|
||||
<div class="xefu-progressbar" style="display: none;"><div></div></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue