#1086 코드 정리

common/js/plugins/jquery.fileupload/css/style.css

@@ -39,7 +39,7 @@
 
 .xe-uploader-filelist-container {
 	display: none;
-	padding: 0 10px 10px;
+	padding: 0 10px;
 }
 
 /* images */
@@ -51,12 +51,6 @@
 	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;
@@ -109,7 +103,7 @@
 	padding: 0;
 }
 .xe-uploader-filelist-container .xe-uploader-filelist-files li {
-
+	padding: 3px 0;
 }
 .xe-uploader-filelist-container .xe-uploader-filelist-files li.selected {
 	background-color: #E9F3EF;
@@ -136,3 +130,74 @@
 	height: 3px;
 	background-color: #6AB97D;
 }
+
+
+
+
+
+.xe-uploader-btn {
+	display: inline-block;
+	*display: inline;
+	margin: 0;
+	padding: 0 12px !important;
+	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;
+	font-size: 12px;
+	color: #333333;
+	*zoom: 1;
+	cursor: pointer;
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	background-color: #f5f5f5;
+	*background-color: #e6e6e6;
+	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+	background-image: -webkit-gradient(top, #ffffff, #e6e6e6);
+	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+	background-image: linear-gradient(top, #ffffff, #e6e6e6);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+	filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
+}
+input.xe-uploader-btn,
+button.xe-uploader-btn {
+	height: 26px !important;
+}
+.xe-uploader-btn:hover,
+.xe-uploader-btn:active,
+.xe-uploader-btn[disabled] {
+	color: #333;
+	background-color: #e6e6e6;
+	*background-color: #d9d9d9;
+}
+.xe-uploader-btn>a,
+.xe-uploader-btn>button,
+.xe-uploader-btn>input,
+.xe-uploader-btn>span {
+	display: inline-block;
+	*zoom: 1;
+	margin: 0 -12px !important;
+	padding: 0 12px !important;
+	overflow: visible;
+	width: auto;
+	height: 24px;
+	border: 0;
+	vertical-align: top;
+	text-decoration: none !important;
+	line-height: 24px;
+	font-family: inherit;
+	font-size: 12px;
+	color: #333;
+	cursor: pointer;
+	background: none;
+}

common/js/plugins/jquery.fileupload/js/main.js

@@ -6,17 +6,41 @@
 		dataType: 'json',
 		replaceFileInput: false,
 
-		fileListContaner: $('.xe-uploader-filelist-container'),
+		dropZone: '.xe-uploader-dropzone',
+		fileListContaner: '.xe-uploader-filelist-container',
+		controllContainer: '.xe-uploader-controll-container',
 		fileItem: 'li',
+		filelist: '.xe-uploader-filelist-files ul',
+		filelistImages: '.xe-uploader-filelist-images ul',
 
-		actSelectedInsertContent : $('.xe-uploader-act-link-selected'),
+		progressbar: '.xe-uploader-progressbar',
-		actSelectedDeleteFile : $('.xe-uploader-act-delete-selected'),
+		progressbarGraph: '.xe-uploader-progressbar div',
-		actDeleteFile : $('.xe-uploader-act-delete'),
+		progressStatus: '.xe-uploader-progress-status',
+		progressPercent: '.xe-uploader-progress-percent',
 
-		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>',
+		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 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>',
 		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 _elements = [
+		'fileListContaner',
+		'actSelectedInsertContent',
+		'actSelectedDeleteFile',
+		'actDeleteFile',
+		'controllContainer',
+		'dropZone',
+		'filelist',
+		'filelistImages',
+		'progressbar',
+		'progressbarGraph',
+		'progressPercent',
+		'progressStatus',
+	];
+
 	var XeUploader = xe.createApp('XeUploader', {
 		files: {},
 		selected_files: {},
@@ -24,7 +48,6 @@
 		last_selected_file: null,
 		editor_sequence: null,
 		init : function() {
-			this.file_list_container = $('.xe-uploader-filelist select');
 		},
 		createInstance: function(containerEl, opt) {
 			var self = this;
@@ -61,35 +84,34 @@
 				change: function(e, data) {
 				},
 				always: function() {
-					// console.info('@always');
-					// console.log(arguments);
 				},
 				start: function() {
-					// console.info('@start');
+					self.settings.progressbarGraph.width(0);
-					// console.log(arguments);
+					self.settings.progressStatus.show();
-					$('.xe-uploader-progressbar div').width(0);
+					self.settings.progressbar.show();
-					$('.xe-uploader-progress-message').show();
-					$('.xe-uploader-progressbar').show();
 				},
 				progressall: function (e, data) {
 					var progress = parseInt(data.loaded / data.total * 100, 10);
-					$('.xe-uploader-progressbar div').width(progress+'%');
+					self.settings.progressbarGraph.width(progress+'%');
-					$('.xe-uploader-progressall').text(progress+'%');
+					self.settings.progressPercent.text(progress+'%');
 
 					if(progress >= 100) {
-						$('.xe-uploader-progressbar, .xe-uploader-progress-message').delay(3000).slideUp();
+						self.settings.progressbar.delay(3000).slideUp();
+						self.settings.progressStatus.delay(3000).slideUp();
 					}
 				}
 			};
 			this.settings = $.extend({} , default_settings, settings, opt || {});
 
+			$.each(_elements, function(idx, val) {
+				if(typeof self.settings[val] === 'string') self.settings[val] = $container.find(self.settings[val]);
+			});
+
 			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);
 
 			// 파일 목록 불러오기
@@ -119,16 +141,13 @@
 				self.selected_files = selected;
 			});
 			fileselect.on("click", ":checkbox", function(e){
-	            e.preventDefault();
+				e.preventDefault();
-	        });
+			});
-
-
 
 			$(document).bind('dragover', function (e) {
-				var dropZone = $('.xe-uploader-container .xe-uploader-dropzone'),
+				var timeout = window.dropZoneTimeout;
-				timeout = window.dropZoneTimeout;
 				if (!timeout) {
-					dropZone.addClass('in');
+					self.settings.dropZone.addClass('in');
 				} else {
 					clearTimeout(timeout);
 				}
@@ -142,13 +161,13 @@
 					node = node.parentNode;
 				} while (node != null);
 				if (found) {
-					dropZone.addClass('hover');
+					self.settings.dropZone.addClass('hover');
 				} else {
-					dropZone.removeClass('hover');
+					self.settings.dropZone.removeClass('hover');
 				}
 				window.dropZoneTimeout = setTimeout(function () {
 					window.dropZoneTimeout = null;
-					dropZone.removeClass('in hover');
+					self.settings.dropZone.removeClass('in hover');
 				}, 100);
 			});
 		},
@@ -184,6 +203,9 @@
 
 			_getCkeInstance(this.editor_sequence).insertHtml(temp_code, "unfiltered_html");
 		},
+		/**
+		 * 지정된 하나의 파일 또는 다중 선택된 파일 삭제
+		 */
 		deleteFile: function(file_srl) {
 			var self = this;
 			var file_srls = [];
@@ -194,9 +216,8 @@
 					if(!file) return;
 
 					var file_srl = $(file).data().fileSrl;
-					var fileinfo = self.files[file_srl];
 
-					file_srls.push(fileinfo.file_srl);
+					file_srls.push(file_srl);
 				});
 			}
 			else
@@ -209,11 +230,14 @@
 			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.settings.fileListContaner.find('ul').find('li[data-file-srl=' + srl + ']').remove();
 				});
 				self.loadFilelist();
 			});
 		},
+		/**
+		 * 파일 목록 갱신
+		 */
 		loadFilelist: function() {
 			var self = this;
 			var data = this.$container.data();
@@ -221,11 +245,9 @@
 			$.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;
-
 				data.uploadTargetSrl = res.uploadTargetSrl;
-				$('.xe-uploader-filelist select').empty();
-				$('.file_attach_info').html(res.upload_status);
 
+				// @TODO 정리
 				$('.allowed_filetypes').text(res.allowed_filetypes);
 				$('.allowed_filesize').text(res.allowed_filesize);
 				$('.allowed_attach_size').text(res.allowed_attach_size);
@@ -239,12 +261,14 @@
 				var result_image = [];
 				var result = [];
 
+				// 첨부된 파일이 없으면 감춤
 				if(!res.files.length) {
-					$('.xe-uploader-controll-container, .xe-uploader-filelist-container').hide();
+					self.settings.fileListContaner.hide();
+					self.settings.controllContainer.hide();
 					return;
 				}
 
-
+				// 이미지와 그외 파일 분리
 				$.each(res.files, function (index, file) {
 					if(self.files[file.file_srl]) return;
 
@@ -259,10 +283,12 @@
 					}
 				});
 
-				$('.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(''));
+				self.settings.filelistImages.append(result_image.join(''));
+				self.settings.filelist.append(result.join(''));
 
-				$('.xe-uploader-controll-container').show()
+				// 컨트롤, 리스트 표시
+				self.settings.controllContainer.show()
 				self.settings.fileListContaner.show();
 			});
 		}

modules/editor/skins/ckeditor/file_upload.html

@@ -2,7 +2,7 @@
 <!--%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}">
+<div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-container xe-clearfix" data-editor-sequence="{$editor_sequence}">
 	<!--// dropzone -->
 	<div class="xe-uploader-dropzone">
 		<p class="xe-uploader-dropzone-message">여기에 파일을 끌어 놓거나 파일 첨부를 클릭하세요</p>
@@ -16,26 +16,19 @@
 
 		<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>
+		<p class="xe-uploader-progress-status" style="display: none;">파일 업로드 중... (<span class="xe-uploader-progress-percent">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 class="xe-uploader-controll-container xe-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>
 
@@ -54,8 +47,6 @@
 
 </div>
 
-
-
 <script>
 	jQuery(function($){
 		// uploader