This commit is contained in:
bnu 2015-03-16 21:11:45 +09:00
parent edeaeddf65
commit a47d0ffe27
3 changed files with 88 additions and 91 deletions

View file

@ -1,29 +1,31 @@
@charset "UTF-8"; @charset "UTF-8";
.xe-uploader-action-selectfile { .xefu-act-selectfile {
overflow: hidden !important; overflow: hidden !important;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.xe-uploader-container {
.xefu-container {
margin: 10px 0; margin: 10px 0;
border: 1px solid #B6B6B6; border: 1px solid #B6B6B6;
} }
/* dropzone */ /* dropzone */
.xe-uploader-container .xe-uploader-dropzone { .xefu-dropzone {
border: 1px solid #EEE; border: 1px solid #EEE;
text-align: center; text-align: center;
background-color: #EBEBEB; background-color: #EBEBEB;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
.xe-uploader-container .xe-uploader-dropzone.in { .xefu-dropzone.in {
background-color: #E9F3EF; background-color: #E9F3EF;
} }
.xe-uploader-container .xe-uploader-dropzone.hover { .xefu-dropzone.hover {
border: 1px dotted #9ad18f; border: 1px dotted #9ad18f;
border-radius: 5px; border-radius: 5px;
} }
.xe-uploader-container .xe-uploader-dropzone.fade { .xefu-dropzone.fade {
-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;
@ -31,19 +33,19 @@
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
opacity: 1; opacity: 1;
} }
.xe-uploader-container .xe-uploader-dropzone p { .xefu-dropzone p {
margin: 12px 0; margin: 12px 0;
} }
/* END:dropzone */ /* END:dropzone */
.xe-uploader-filelist-container { .xefu-list {
display: none; display: none;
padding: 0 10px; padding: 0 10px;
} }
/* images */ /* filelist:images */
.xe-uploader-filelist-container .xe-uploader-filelist-images { .xefu-list-images {
max-height: 160px; max-height: 160px;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -51,13 +53,13 @@
padding: 5px 0; padding: 5px 0;
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-images ul, .xefu-list-images ul,
.xe-uploader-filelist-container .xe-uploader-filelist-images li { .xefu-list-images li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-images li { .xefu-list-images li {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 3px; margin: 3px;
@ -65,68 +67,64 @@
height: 60px; height: 60px;
border: 3px solid #DDD; border: 3px solid #DDD;
} }
.xefu-list-images input,
.xe-uploader-filelist-container .xe-uploader-filelist-images li img { .xefu-list-images button {
width: 100%;
height: 100%;
}
.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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-images button { .xefu-list-images .xefu-file-name,
left: auto; .xefu-list-images .xefu-file-size {
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; display: none;
} }
.xefu-list-images li img {
width: 100%;
height: 100%;
}
.selected {
border-color: #6CBD7E !important;
}
/* END:images */ /* END:images */
/* files */ /* files */
.xe-uploader-filelist-container .xe-uploader-filelist-files { .xefu-list .xefu-list-files {
margin: 5px 0; margin: 5px 0;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-files ul, .xefu-list-files ul,
.xe-uploader-filelist-container .xe-uploader-filelist-files li { .xefu-list-files li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-files li { .xefu-list-files li {
padding: 3px 0; padding: 3px 0;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-files li.selected { .xefu-list-files li.selected {
background-color: #E9F3EF; background-color: #E9F3EF;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-files .xe-uploader-fileitem-info { .xefu-list-files .xefu-file-info {
float: right; float: right;
} }
.xe-uploader-filelist-container .xe-uploader-filelist-files .xe-uploader-fileitem-info span { .xefu-list-files .xefu-file-info span {
padding: 0 5px; padding: 0 5px;
} }
/* END:files */ /* END:files */
.xe-uploader-controll-container { .xefu-controll {
display: none; display: none;
padding: 10px; padding: 10px;
} }
.xe-uploader-progressbar { .xefu-progressbar {
border-bottom: 1px solid #6AB97D; border-bottom: 1px solid #6AB97D;
} }
.xe-uploader-progressbar div { .xefu-progressbar div {
height: 3px; height: 3px;
background-color: #6AB97D; background-color: #6AB97D;
} }
@ -135,7 +133,7 @@
.xe-uploader-btn { .xefu-btn {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
margin: 0; margin: 0;
@ -169,21 +167,21 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false); filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
} }
input.xe-uploader-btn, input.xefu-btn,
button.xe-uploader-btn { button.xefu-btn {
height: 26px !important; height: 26px !important;
} }
.xe-uploader-btn:hover, .xefu-btn:hover,
.xe-uploader-btn:active, .xefu-btn:active,
.xe-uploader-btn[disabled] { .xefu-btn[disabled] {
color: #333; color: #333;
background-color: #e6e6e6; background-color: #e6e6e6;
*background-color: #d9d9d9; *background-color: #d9d9d9;
} }
.xe-uploader-btn>a, .xefu-btn>a,
.xe-uploader-btn>button, .xefu-btn>button,
.xe-uploader-btn>input, .xefu-btn>input,
.xe-uploader-btn>span { .xefu-btn>span {
display: inline-block; display: inline-block;
*zoom: 1; *zoom: 1;
margin: 0 -12px !important; margin: 0 -12px !important;

View file

@ -6,32 +6,31 @@
dataType: 'json', dataType: 'json',
replaceFileInput: false, replaceFileInput: false,
dropZone: '.xe-uploader-dropzone', dropZone: '.xefu-dropzone',
fileListContaner: '.xe-uploader-filelist-container', fileList: '.xefu-list',
controllContainer: '.xe-uploader-controll-container', controll: '.xefu-controll',
fileItem: 'li', filelist: '.xefu-list-files ul',
filelist: '.xe-uploader-filelist-files ul', filelistImages: '.xefu-list-images ul',
filelistImages: '.xe-uploader-filelist-images ul',
progressbar: '.xe-uploader-progressbar', progressbar: '.xefu-progressbar',
progressbarGraph: '.xe-uploader-progressbar div', progressbarGraph: '.xefu-progressbar div',
progressStatus: '.xe-uploader-progress-status', progressStatus: '.xefu-progress-status',
progressPercent: '.xe-uploader-progress-percent', progressPercent: '.xefu-progress-percent',
actSelectedInsertContent : '.xe-uploader-act-link-selected', actSelectedInsertContent : '.xefu-act-link-selected',
actSelectedDeleteFile : '.xe-uploader-act-delete-selected', actSelectedDeleteFile : '.xefu-act-delete-selected',
actDeleteFile : '.xe-uploader-act-delete', actDeleteFile : '.xefu-act-delete',
tmplXeUploaderFileitem : '<li class="xe-uploader-fileitem xe-uploader-fileitem-file xe-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>', tmplXeUploaderFileitem : '<li class="xefu-file xe-clearfix" data-file-srl="{{file_srl}}"><span class="xefu-file-name">{{source_filename}}</span><span class="xefu-file-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>' tmplXeUploaderFileitemImage: '<li class="xefu-file xefu-file-image" data-file-srl="{{file_srl}}"><strong class="xefu-file-name">{{source_filename}}</strong><span class="xefu-file-info"><span class="xefu-file-size">{{disp_file_size}}</span><span><img src="{{download_url}}" alt=""></span><span><input type="checkbox" data-file-srl="{{file_srl}}"></span></span></li>'
}; };
var _elements = [ var _elements = [
'fileListContaner', 'fileList',
'actSelectedInsertContent', 'actSelectedInsertContent',
'actSelectedDeleteFile', 'actSelectedDeleteFile',
'actDeleteFile', 'actDeleteFile',
'controllContainer', 'controll',
'dropZone', 'dropZone',
'filelist', 'filelist',
'filelistImages', 'filelistImages',
@ -111,7 +110,7 @@
.parent() .parent()
.addClass($.support.fileInput ? undefined : 'disabled'); .addClass($.support.fileInput ? undefined : 'disabled');
$container.data('xe-uploader-instance', this); $container.data('xefu-instance', this);
// 파일 목록 불러오기 // 파일 목록 불러오기
this.loadFilelist(); this.loadFilelist();
@ -127,16 +126,16 @@
}); });
// finderSelect // finderSelect
var fileselect = this.settings.fileListContaner.finderSelect({children:"li"}); var fileselect = this.settings.fileList.finderSelect({children:"li"});
this.settings.fileListContaner.on("mousedown", 'img', function(e){ e.preventDefault(); }); this.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.fileListContaner.find('input:checked'); var selected = self.settings.fileList.find('input:checked');
self.selected_files = selected; self.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.fileListContaner.find('input:checked'); var selected = self.settings.fileList.find('input:checked');
self.selected_files = selected; self.selected_files = selected;
}); });
fileselect.on("click", ":checkbox", function(e){ fileselect.on("click", ":checkbox", function(e){
@ -228,7 +227,7 @@
exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': this.editor_sequence}, function() { exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': this.editor_sequence}, 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.fileListContaner.find('ul').find('li[data-file-srl=' + srl + ']').remove(); self.settings.fileList.find('ul').find('li[data-file-srl=' + srl + ']').remove();
}); });
self.loadFilelist(); self.loadFilelist();
}); });
@ -261,8 +260,8 @@
// 첨부된 파일이 없으면 감춤 // 첨부된 파일이 없으면 감춤
if(!res.files.length) { if(!res.files.length) {
self.settings.fileListContaner.hide(); self.settings.fileList.hide();
self.settings.controllContainer.hide(); self.settings.controll.hide();
return; return;
} }
@ -286,8 +285,8 @@
self.settings.filelist.append(result.join('')); self.settings.filelist.append(result.join(''));
// 컨트롤, 리스트 표시 // 컨트롤, 리스트 표시
self.settings.controllContainer.show() self.settings.controll.show()
self.settings.fileListContaner.show(); self.settings.fileList.show();
}); });
} }
}); });

View file

@ -2,13 +2,13 @@
<!--%load_js_plugin("jquery.finderSelect")--> <!--%load_js_plugin("jquery.finderSelect")-->
<!--%load_js_plugin("handlebars")--> <!--%load_js_plugin("handlebars")-->
<div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-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="xe-uploader-dropzone"> <div class="xefu-dropzone">
<p class="xe-uploader-dropzone-message">여기에 파일을 끌어 놓거나 파일 첨부를 클릭하세요</p> <p class="xefu-dropzone-message">여기에 파일을 끌어 놓거나 파일 첨부를 클릭하세요</p>
<div> <div>
<span class="xe-uploader-btn fileinput-button xe-uploader-action-selectfile"> <span class="xefu-btn fileinput-button xefu-act-selectfile">
<span>{$lang->edit->upload_file}</span> <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 /> <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> </span>
@ -16,29 +16,29 @@
<p>파일 크기 제한 : <span class="allowed_filesize">0MB</span> <span>(허용 확장자 : <span class="allowed_filetypes">*.*</span>)</span></p> <p>파일 크기 제한 : <span class="allowed_filesize">0MB</span> <span>(허용 확장자 : <span class="allowed_filetypes">*.*</span>)</span></p>
<p class="xe-uploader-progress-status" style="display: none;">파일 업로드 중... (<span class="xe-uploader-progress-percent">0%</span>)</p> <p class="xefu-progress-status" style="display: none;">파일 업로드 중... (<span class="xefu-progress-percent">0%</span>)</p>
<div class="xe-uploader-progressbar" style="display: none;"><div style="width: 23%;"></div></div> <div class="xefu-progressbar" style="display: none;"><div></div></div>
</div> </div>
<!--// END:dropzone --> <!--// END:dropzone -->
<div class="xe-uploader-controll-container xe-clearfix"> <div class="xefu-controll xe-clearfix">
<div style="float: left;"> <div style="float: left;">
<span class="file_count">0</span>개 첨부 됨 (<span class="attached_size">0Byte</span> / <span class="allowed_attach_size">0MB</span>) <span class="file_count">0</span>개 첨부 됨 (<span class="attached_size"></span> / <span class="allowed_attach_size"></span>)
</div> </div>
<div style="float: right"> <div style="float: right">
<input type="button" class="xe-uploader-btn xe-uploader-act-link-selected" style=" vertical-align: middle; vertical-align: middle;" value="본문삽입"> <input type="button" class="xefu-btn xefu-act-link-selected" style=" vertical-align: middle; vertical-align: middle;" value="본문삽입">
<input type="button" class="xe-uploader-btn xe-uploader-act-delete-selected" style=" vertical-align: middle; vertical-align: middle;" value="선택삭제"> <input type="button" class="xefu-btn xefu-act-delete-selected" style=" vertical-align: middle; vertical-align: middle;" value="선택삭제">
</div> </div>
</div> </div>
<div class="xe-uploader-filelist-container"> <div class="xefu-list">
<div class="xe-uploader-filelist-images"> <div class="xefu-list-images">
<ul> <ul>
</ul> </ul>
</div> </div>
<div class="xe-uploader-filelist-files"> <div class="xefu-list-files">
<ul> <ul>
</ul> </ul>
</div> </div>
@ -54,7 +54,7 @@
maxFileSize: {$file_config->allowed_filesize}, maxFileSize: {$file_config->allowed_filesize},
limitMultiFileUploadSize: {$file_config->allowed_filesize} limitMultiFileUploadSize: {$file_config->allowed_filesize}
}; };
var uploader = $('#xe-uploader-container-{$editor_sequence}').xeUploader(setting); var uploader = $('#xefu-container-{$editor_sequence}').xeUploader(setting);
// console.log(uploader); // console.log(uploader);
<!--@endif--> <!--@endif-->
}); });