mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-27 15:19:57 +09:00
fileupload UI 개선
- oldIE에 최적화 되어 있지 않음
This commit is contained in:
bnu
parent
6585678f56
commit
42551223c0
6 changed files with 376 additions and 165 deletions
|
|
@ -1,70 +1,132 @@
|
|||
@charset "UTF-8";
|
||||
/*
|
||||
* jQuery File Upload Plugin CSS Example 8.8.2
|
||||
* https://github.com/blueimp/jQuery-File-Upload
|
||||
*
|
||||
* Copyright 2013, Sebastian Tschan
|
||||
* https://blueimp.net
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
.xe-uploader-container {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.xe-uploader-preview {
|
||||
.xe-uploader-action-selectfile {
|
||||
overflow: hidden !important;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #DDD;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.xe-uploader-preview img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
.xe-uploader-container {
|
||||
margin: 10px 0;
|
||||
border: 1px solid #B6B6B6;
|
||||
}
|
||||
/* dropzone */
|
||||
.xe-uploader-container .xe-uploader-dropzone {
|
||||
border: 1px solid #EEE;
|
||||
text-align: center;
|
||||
background-color: #EBEBEB;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
.xe-uploader-container .xe-uploader-dropzone.in {
|
||||
background-color: #E9F3EF;
|
||||
}
|
||||
.xe-uploader-container .xe-uploader-dropzone.hover {
|
||||
border: 1px dotted #9ad18f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.xe-uploader-container .xe-uploader-dropzone.fade {
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
/* END:dropzone */
|
||||
|
||||
|
||||
.xe-uploader-filelist {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
.xe-uploader-filelist select {
|
||||
height: 80px;
|
||||
}
|
||||
.file_attach_info {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.fileupload-processing {
|
||||
}
|
||||
.fileinput-button {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
#progress,
|
||||
#progress .progress-bar {
|
||||
height: 3px;
|
||||
}
|
||||
#progress {
|
||||
.xe-uploader-filelist-container {
|
||||
display: none;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid #66B663;
|
||||
background-color: #FFF;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
#progress .progress-bar {
|
||||
width: 0;
|
||||
background-color: #66B663;
|
||||
|
||||
/* images */
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images {
|
||||
max-height: 160px;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0 -5px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images input {
|
||||
display: none;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images:hover input {
|
||||
display: block;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images ul,
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #DDD;
|
||||
}
|
||||
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images li img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
}
|
||||
.selected {
|
||||
border-color: #6CBD7E !important;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images input,
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images button {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images .xe-uploader-fileitem-filename,
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-images .xe-uploader-fileitem-info-filesize {
|
||||
display: none;
|
||||
}
|
||||
/* END:images */
|
||||
|
||||
/* files */
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files ul,
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files li {
|
||||
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files li.selected {
|
||||
background-color: #E9F3EF;
|
||||
}
|
||||
.xe-uploader-filelist-container .xe-uploader-filelist-files .xe-uploader-fileitem-info {
|
||||
float: right;
|
||||
}
|
||||
/* END:files */
|
||||
|
||||
|
||||
.xe-uploader-controll-container {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.xe-uploader-progressbar {
|
||||
border-bottom: 1px solid #6AB97D;
|
||||
}
|
||||
|
||||
.xe-uploader-progressbar div {
|
||||
height: 3px;
|
||||
background-color: #6AB97D;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,26 @@
|
|||
(function($){
|
||||
"use strict";
|
||||
|
||||
var default_settings = {
|
||||
autoUpload: true,
|
||||
dataType: 'json',
|
||||
replaceFileInput: false,
|
||||
|
||||
fileListContaner: $('.xe-uploader-filelist-container'),
|
||||
fileItem: 'li',
|
||||
|
||||
actSelectedInsertContent : $('.xe-uploader-act-link-selected'),
|
||||
actSelectedDeleteFile : $('.xe-uploader-act-delete-selected'),
|
||||
actDeleteFile : $('.xe-uploader-act-delete'),
|
||||
|
||||
tmplXeUploaderFileitem : '<li class="xe-uploader-fileitem xe-uploader-fileitem-file clearfix" data-file-srl="{{file_srl}}"><span class="xe-uploader-fileitem-filename">{{source_filename}}</span><span class="xe-uploader-fileitem-info"><span>{{disp_file_size}}</span><span><input type="checkbox" data-file-srl="{{file_srl}}"> 선택</span></span></li>',
|
||||
tmplXeUploaderFileitemImage: '<li class="xe-uploader-fileitem xe-uploader-fileitem-image" data-file-srl="{{file_srl}}"><strong class="xe-uploader-fileitem-filename">{{source_filename}}</strong><span class="xe-uploader-fileitem-info"><span class="xe-uploader-fileitem-info-filesize">{{disp_file_size}}</span><span><img src="{{download_url}}" alt=""></span><span><input type="checkbox" data-file-srl="{{file_srl}}"></span></span></li>'
|
||||
};
|
||||
|
||||
var XeUploader = xe.createApp('XeUploader', {
|
||||
files: {},
|
||||
selected_files: [],
|
||||
selected_files: {},
|
||||
settings: {},
|
||||
last_selected_file: null,
|
||||
editor_sequence: null,
|
||||
init : function() {
|
||||
|
|
@ -17,17 +34,21 @@
|
|||
|
||||
var settings = {
|
||||
url: request_uri.setQuery('module', 'file').setQuery('act', 'procFileUpload'),
|
||||
autoUpload: true,
|
||||
formData: {"editor_sequence": data.editorSequence, "upload_target_srl" : data.uploadTargetSrl},
|
||||
dataType: 'json',
|
||||
|
||||
dropZone: $container,
|
||||
done: function(e, res) {
|
||||
var result = res.result;
|
||||
var result = res.response().result;
|
||||
|
||||
if(!result) return;
|
||||
|
||||
console.log(result);
|
||||
if(!jQuery.isPlainObject(result)) result = jQuery.parseJSON(result);
|
||||
|
||||
if(!result) return;
|
||||
|
||||
if(result.error == 0) {
|
||||
self.done.call(self, arguments);
|
||||
// self.done.call(self, arguments);
|
||||
} else {
|
||||
alert(result.message);
|
||||
}
|
||||
|
|
@ -35,90 +56,161 @@
|
|||
stop: function() {
|
||||
self.loadFilelist();
|
||||
},
|
||||
drop: function(e, data) {
|
||||
},
|
||||
change: function(e, data) {
|
||||
},
|
||||
always: function() {
|
||||
// console.info('@always');
|
||||
// console.log(arguments);
|
||||
},
|
||||
start: function() {
|
||||
$('#progress').find('.progress-bar').width(0).addBack().show();
|
||||
// console.info('@start');
|
||||
// console.log(arguments);
|
||||
$('.xe-uploader-progressbar div').width(0);
|
||||
$('.xe-uploader-progress-message').show();
|
||||
$('.xe-uploader-progressbar').show();
|
||||
},
|
||||
progressall: function (e, data) {
|
||||
var progress = parseInt(data.loaded / data.total * 100, 10);
|
||||
$('.progress-bar').width(progress+'%');
|
||||
$('.xe-uploader-progressbar div').width(progress+'%');
|
||||
$('.xe-uploader-progressall').text(progress+'%');
|
||||
|
||||
if(progress >= 100) {
|
||||
$('#progress').delay(5000).slideUp();
|
||||
$('.xe-uploader-progressbar, .xe-uploader-progress-message').delay(3000).slideUp();
|
||||
}
|
||||
}
|
||||
};
|
||||
$.extend(settings, opt || {});
|
||||
this.settings = $.extend({} , default_settings, settings, opt || {});
|
||||
|
||||
var INS = $container.fileupload(settings)
|
||||
var INS = $container.fileupload(this.settings)
|
||||
.prop('disabled', !$.support.fileInput)
|
||||
.parent()
|
||||
.addClass($.support.fileInput ? undefined : 'disabled');
|
||||
|
||||
console.log('fileupload');
|
||||
console.log(INS);
|
||||
$container.data('xe-uploader-instance', this);
|
||||
|
||||
// 파일 선택
|
||||
$(this.file_list_container).on('change', function(e) {
|
||||
var $el = self.file_list_container.find('option:selected');
|
||||
|
||||
self.selected_files = [];
|
||||
$el.each(function(idx, el) {
|
||||
self.selected_files.push(el);
|
||||
});
|
||||
});
|
||||
|
||||
// 파일 선택
|
||||
$(this.file_list_container).on('click', function(e) {
|
||||
if(e.target.tagName === 'OPTION')
|
||||
{
|
||||
self.last_selected_file = e.target;
|
||||
self.selectFile();
|
||||
}
|
||||
});
|
||||
|
||||
// 파일 목록 불러오기
|
||||
this.loadFilelist();
|
||||
|
||||
// 본문 삽입
|
||||
$('.xe-act-link-selected').on('click', function() {
|
||||
this.settings.actSelectedInsertContent.on('click', function() {
|
||||
self.insertToContent();
|
||||
});
|
||||
|
||||
// 파일 삭제
|
||||
$('.xe-act-delete-selected').on('click', function() {
|
||||
this.settings.actSelectedDeleteFile.on('click', function() {
|
||||
self.deleteFile();
|
||||
});
|
||||
|
||||
// finderSelect
|
||||
var fileselect = this.settings.fileListContaner.finderSelect({children:"li"});
|
||||
this.settings.fileListContaner.on("mousedown", 'img', function(e){ e.preventDefault(); });
|
||||
fileselect.finderSelect('addHook','highlight:after', function(el) {
|
||||
el.find('input').prop('checked', true);
|
||||
var selected = self.settings.fileListContaner.find('input:checked');
|
||||
self.selected_files = selected;
|
||||
});
|
||||
fileselect.finderSelect('addHook','unHighlight:after', function(el) {
|
||||
el.find('input').prop('checked', false);
|
||||
var selected = self.settings.fileListContaner.find('input:checked');
|
||||
self.selected_files = selected;
|
||||
});
|
||||
fileselect.on("click", ":checkbox", function(e){
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(document).bind('dragover', function (e) {
|
||||
var dropZone = $('.xe-uploader-container .xe-uploader-dropzone'),
|
||||
timeout = window.dropZoneTimeout;
|
||||
if (!timeout) {
|
||||
dropZone.addClass('in');
|
||||
} else {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
var found = false,
|
||||
node = e.target;
|
||||
do {
|
||||
if (node === dropZone[0]) {
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
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);
|
||||
});
|
||||
},
|
||||
done: function() {
|
||||
// this.loadFilelist();
|
||||
},
|
||||
insertToContent: function() {
|
||||
var temp_code = '';
|
||||
selectAllFiles: function() {},
|
||||
selectImageFiles: function() {},
|
||||
selectNonImageFiles: function() {},
|
||||
unselectAllFiles: function() {},
|
||||
unselectImageFiles: function() {},
|
||||
unselectNonImageFiles: function() {},
|
||||
|
||||
for(var i = 0, len = this.selected_files.length; i < len; i++) {
|
||||
var fileinfo = $(this.selected_files[i]).data('fileinfo');
|
||||
insertToContent: function() {
|
||||
var self = this;
|
||||
var temp_code = '';
|
||||
// console.log(this.selected_files);
|
||||
|
||||
$.each(this.selected_files, function(idx, file) {
|
||||
var file_srl = $(file).data().fileSrl;
|
||||
var fileinfo = self.files[file_srl];
|
||||
|
||||
if(!fileinfo) return;
|
||||
|
||||
if(/\.(jpe?g|png|gif)$/i.test(fileinfo.download_url)) {
|
||||
temp_code += '<img src="' + window.request_uri + fileinfo.download_url + '" alt="' + fileinfo.source_filename + '" editor_component="image_link" />';
|
||||
temp_code += '<img src="' + window.request_uri + fileinfo.download_url + '" alt="' + fileinfo.source_filename + '" editor_component="image_link" data-file-srl="' + fileinfo.file_srl + '" />';
|
||||
temp_code += "\r\n<p><br></p>\r\n";
|
||||
} else {
|
||||
temp_code += '<a href="' + window.request_uri + fileinfo.download_url + '">' + fileinfo.source_filename + "</a>\n";
|
||||
temp_code += '<a href="' + window.request_uri + fileinfo.download_url + '" data-file-srl="' + fileinfo.file_srl + '">' + fileinfo.source_filename + "</a>\n";
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_getCkeInstance(this.editor_sequence).insertHtml(temp_code, "unfiltered_html");
|
||||
},
|
||||
deleteFile: function() {
|
||||
deleteFile: function(file_srl) {
|
||||
var self = this;
|
||||
var file_srls = [];
|
||||
|
||||
for(var i = 0, len = this.selected_files.length; i < len; i++) {
|
||||
var fileinfo = $(this.selected_files[i]).data('fileinfo');
|
||||
file_srls.push(fileinfo.file_srl);
|
||||
if(!file_srl)
|
||||
{
|
||||
$.each(self.selected_files, function(idx, file) {
|
||||
if(!file) return;
|
||||
|
||||
var file_srl = $(file).data().fileSrl;
|
||||
var fileinfo = self.files[file_srl];
|
||||
|
||||
file_srls.push(fileinfo.file_srl);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
file_srls.push(file_srl);
|
||||
}
|
||||
|
||||
file_srls = file_srls.join(',');
|
||||
|
||||
exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': this.editor_sequence}, function() {
|
||||
file_srls = file_srls.split(',');
|
||||
$.each(file_srls, function(idx, srl){
|
||||
$('.xe-uploader-filelist-container ul').find('li[data-file-srl=' + srl + ']').remove();
|
||||
});
|
||||
self.loadFilelist();
|
||||
});
|
||||
},
|
||||
|
|
@ -129,32 +221,50 @@
|
|||
$.exec_json('file.getFileList', {'editor_sequence': self.$container.data('editor-sequence')}, function(res){
|
||||
data.uploadTargetSrl = res.upload_target_srl;
|
||||
editorRelKeys[self.$container.data('editor-sequence')].primary.value = res.upload_target_srl;
|
||||
self.files = res.files;
|
||||
|
||||
data.uploadTargetSrl = res.uploadTargetSrl;
|
||||
$('.xe-uploader-filelist select').empty();
|
||||
$('.file_attach_info').html(res.upload_status);
|
||||
$.each(res.files, function (index, file) {
|
||||
$('<option title="'+file.source_filename+' ('+file.disp_file_size+')" />')
|
||||
.data('fileinfo', file)
|
||||
.text(file.source_filename+' ('+file.disp_file_size+')')
|
||||
.val(file.file_srl)
|
||||
.appendTo('.xe-uploader-filelist select');
|
||||
});
|
||||
self.displayPreview($('.xe-uploader-filelist select option:last').data('fileinfo'));
|
||||
});
|
||||
},
|
||||
selectFile: function() {
|
||||
this.displayPreview($(this.last_selected_file).data('fileinfo'));
|
||||
},
|
||||
displayPreview: function(fileinfo) {
|
||||
if(!fileinfo) return;
|
||||
|
||||
if(/\.(jpe?g|png|gif)$/i.test(fileinfo.download_url)) {
|
||||
$('.xe-uploader-preview img').attr('src', window.request_uri + fileinfo.download_url).show();
|
||||
} else {
|
||||
$('.xe-uploader-preview img').hide();
|
||||
}
|
||||
$('.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);
|
||||
|
||||
var tmpl_fileitem = self.settings.tmplXeUploaderFileitem;
|
||||
var tmpl_fileitem_image = self.settings.tmplXeUploaderFileitemImage;
|
||||
var template_fileimte = Handlebars.compile(tmpl_fileitem);
|
||||
var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image);
|
||||
var result_image = [];
|
||||
var result = [];
|
||||
|
||||
if(!res.files.length) {
|
||||
$('.xe-uploader-controll-container, .xe-uploader-filelist-container').hide();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$.each(res.files, function (index, file) {
|
||||
if(self.files[file.file_srl]) return;
|
||||
|
||||
self.files[file.file_srl] = file;
|
||||
|
||||
if(/\.(jpe?g|png|gif)$/i.test(file.source_filename)) {
|
||||
result_image.push(template_fileimte_image(file));
|
||||
}
|
||||
else
|
||||
{
|
||||
result.push(template_fileimte(file));
|
||||
}
|
||||
});
|
||||
|
||||
$('.xe-uploader-filelist-container .xe-uploader-filelist-images ul').append(result_image.join(''));
|
||||
$('.xe-uploader-filelist-container .xe-uploader-filelist-files ul').append(result.join(''));
|
||||
|
||||
$('.xe-uploader-controll-container').show()
|
||||
self.settings.fileListContaner.show();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -178,3 +288,6 @@
|
|||
// return u;
|
||||
// };
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue