fileupload UI 개선

- oldIE에 최적화 되어 있지 않음

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

@@ -1,70 +1,132 @@
 @charset "UTF-8";
-/*
+.xe-uploader-action-selectfile {
- * jQuery File Upload Plugin CSS Example 8.8.2
+	overflow: hidden !important;
- * 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 {
 	display: inline-block;
-	width: 80px;
-	height: 80px;
-	overflow: hidden;
-	border: 1px solid #DDD;
-	text-align: center;
 	vertical-align: middle;
 }
-
+.xe-uploader-container {
-.xe-uploader-preview img {
+	margin: 10px 0;
-	position: relative;
+	border: 1px solid #B6B6B6;
-	top: 50%;
-	transform: translateY(-50%);
-	max-width: 80px;
-	max-height: 80px;
 }
+/* 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 {
+.xe-uploader-filelist-container {
-	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 {
 	display: none;
-	margin-bottom: 5px;
+	padding: 0 10px 10px;
-	border-bottom: 1px solid #66B663;
-	background-color: #FFF;
 }
-#progress .progress-bar {
+
-	width: 0;
+/* images */
-	background-color: #66B663;
+.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;
 }

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

@@ -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() {
+		selectAllFiles: function() {},
-			var temp_code = '';
+		selectImageFiles: function() {},
+		selectNonImageFiles: function() {},
+		unselectAllFiles: function() {},
+		unselectImageFiles: function() {},
+		unselectNonImageFiles: function() {},
 
-			for(var i = 0, len = this.selected_files.length; i < len; i++) {
+		insertToContent: function() {
-				var fileinfo = $(this.selected_files[i]).data('fileinfo');
+			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++) {
+			if(!file_srl)
-				var fileinfo = $(this.selected_files[i]).data('fileinfo');
+			{
+				$.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)) {
+				$('.allowed_filetypes').text(res.allowed_filetypes);
-				$('.xe-uploader-preview img').attr('src', window.request_uri + fileinfo.download_url).show();
+				$('.allowed_filesize').text(res.allowed_filesize);
-			} else {
+				$('.allowed_attach_size').text(res.allowed_attach_size);
-				$('.xe-uploader-preview img').hide();
+				$('.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);
+
+
+

modules/board/m.skins/default/write_form.html

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

modules/editor/skins/ckeditor/editor.html

@@ -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")-->
+<block cond="$allow_fileupload">
-<div cond="$allow_fileupload" id="xe-uploader-container-{$editor_sequence}" class="xe-uploader-container clearfix" data-editor-sequence="{$editor_sequence}">
+	<include target="file_upload.html" />
-	<div class="xe-uploader-preview">
+</block>
-		<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>
 
 <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>
 

modules/editor/skins/ckeditor/file_upload.html

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

modules/editor/tpl/js/editor.app.js

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