fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-07 18:51:41 +09:00
Code Issues Projects Releases Packages Wiki Activity

fileupload UI 개선

Browse source 
- oldIE에 최적화 되어 있지 않음
This commit is contained in:
bnu 2015-03-16 18:19:46 +09:00
parent 6585678f56
commit 42551223c0
6 changed files with 376 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}

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

@ -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);

3
modules/board/m.skins/default/write_form.html
View file

@ -39,6 +39,9 @@
<li>
<label for="nText">{$lang->content}</label>
<textarea name="content" rows="8" cols="42" id="nText"></textarea>
<div class="write_editor">
{$oDocument->getEditor()}
</div>
</li>
<!--@if(!$is_logged)-->
<li>

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

@ -24,36 +24,9 @@
<div id="ckeditor_instance_{$editor_sequence}" data-editor-sequence="{$editor_sequence}" data-editor-primary-key-name="{$editor_primary_key_name}" data-editor-content-key-name="{$editor_content_key_name}" style="min-height:{$editor_height}px;"></div>
<!--%load_js_plugin("jquery.fileupload")-->
<div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-container clearfix" data-editor-sequence="{$editor_sequence}">
<div class="xe-uploader-preview">
<img />
</div>
<div style="display:inline-block; vertical-align:top;">
<div class="xe-uploader-filelist" style="">
<select id="uploaded_file_list_{$editor_sequence}" multiple="multiple" class="" style="width: 300px;">
</select>
</div>
<div style="display:inline-block;vertical-align:top;">
<!-- PROGRESS -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- END:PROGRESS -->
<div class="xe-fileupload-controll">
<span class="btn fileinput-button">
<span>{$lang->edit->upload_file}</span>
<input id="xe-fileupload" type="file" class="fileupload-processing" name="Filedata" data-auto-upload="true" data-editor-sequence="{$editor_sequence}" multiple />
</span>
<button type="button" class="btn xe-act-delete-selected">{$lang->edit->delete_selected}</button>
<button type="button" class="btn xe-act-link-selected">{$lang->edit->link_file}</button>
</div>
<div class="file_attach_info" style="display:inline-block;" id="uploader_status_{$editor_sequence}">{$upload_status}</div>
</div>
</div>
</div>
<block cond="$allow_fileupload">
<include target="file_upload.html" />
</block>
<script>
(function($){
@ -95,17 +68,6 @@
content_field: jQuery('[name={$editor_content_key_name}]')
});
});
// uploader
<!--@if($allow_fileupload)-->
$(function () {/**/
var setting = {
maxFileSize: {$file_config->allowed_filesize},
limitMultiFileUploadSize: {$file_config->allowed_filesize}
};
var uploader = $('#xe-uploader-container-{$editor_sequence}').xeUploader(setting);
});
<!--@endif-->
})(jQuery);
</script>

71
modules/editor/skins/ckeditor/file_upload.html Normal file
View file

@ -0,0 +1,71 @@
<!--%load_js_plugin("jquery.fileupload")-->
<!--%load_js_plugin("jquery.finderSelect")-->
<!--%load_js_plugin("handlebars")-->
<div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-container clearfix" data-editor-sequence="{$editor_sequence}">
<!--// dropzone -->
<div class="xe-uploader-dropzone">
<p class="xe-uploader-dropzone-message">여기에 파일을 끌어 놓거나 파일 첨부를 클릭하세요</p>
<div>
<span class="btn fileinput-button xe-uploader-action-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>파일 크기 제한 : <span class="allowed_filesize">0MB</span> <span>(허용 확장자 : <span class="allowed_filetypes">*.*</span>)</span></p>
<p class="xe-uploader-progress-message" style="display: none;">파일 업로드 중... (<span class="xe-uploader-progressall">0%</span>)</p>
<div class="xe-uploader-progressbar" style="display: none;"><div style="width: 23%;"></div></div>
</div>
<!--// END:dropzone -->
<div class="xe-uploader-controll-container clearfix">
<div style="float: left;">
<span class="file_count">0</span>개 첨부 됨 (<span class="attached_size">0Byte</span> / <span class="allowed_attach_size">0MB</span>)
</div>
<div style="float: right">
<input type="button" class="btn xe-uploader-act-link-selected" style=" vertical-align: middle; vertical-align: middle;" value="본문삽입">
<!-- <span style="padding: 0 7px; color: #999; vertical-align: middle;">|</span> -->
<!-- <input type="button" class="btn xe-uploader-act-selectall" style=" vertical-align: middle; vertical-align: middle;" value="전체선택" /> -->
<!-- <input type="button" class="btn xe-uploader-act-unselect" style=" vertical-align: middle; vertical-align: middle;" value="선택해제" /> -->
<!-- <input type="button" class="btn xe-uploader-act-toggleselect" style=" vertical-align: middle; vertical-align: middle;" value="선택반적" /> -->
<!-- <span style="padding: 0 7px; color: #999; vertical-align: middle;">|</span> -->
<input type="button" class="btn xe-uploader-act-delete-selected" style=" vertical-align: middle; vertical-align: middle;" value="선택삭제">
<!-- <button>이미지 선택</button> -->
<!-- <button>삽입되지 않은 이미지 선택</button> -->
</div>
</div>
<div class="xe-uploader-filelist-container">
<div class="xe-uploader-filelist-images">
<ul>
</ul>
</div>
<div class="xe-uploader-filelist-files">
<ul>
</ul>
</div>
</div>
</div>
<script>
jQuery(function($){
// uploader
<!--@if($allow_fileupload)-->
var setting = {
maxFileSize: {$file_config->allowed_filesize},
limitMultiFileUploadSize: {$file_config->allowed_filesize}
};
var uploader = $('#xe-uploader-container-{$editor_sequence}').xeUploader(setting);
// console.log(uploader);
<!--@endif-->
});
</script>

2
modules/editor/tpl/js/editor.app.js
View file

@ -16,7 +16,7 @@
{ name: 'styles' },
{ name: 'colors' },
{ name: 'xecomponent' },
{ name: 'others' },
{ name: 'others' }
],
allowedContent: true,
removePlugins: 'stylescombo,language,bidi,flash,pagebreak',