diff --git a/common/js/plugins/jquery.fileupload/css/style.css b/common/js/plugins/jquery.fileupload/css/style.css index b6d67f52f..a0e00e75c 100755 --- a/common/js/plugins/jquery.fileupload/css/style.css +++ b/common/js/plugins/jquery.fileupload/css/style.css @@ -7,25 +7,28 @@ .xefu-container { margin: 10px 0; - border: 1px solid #B6B6B6; + border: 1px solid #d7d8d8; + border-radius: 3px; } /* dropzone */ .xefu-dropzone { - border: 1px solid #EEE; - text-align: center; - background-color: #EBEBEB; + padding: 12px; + border: 1px solid #fafafa; + background-color: #f7f7f7; + border-radius: 3px; + box-sizing: border-box; -moz-box-sizing: border-box; } -.xefu-dropzone.in { +.in .xefu-dropzone { background-color: #E9F3EF; } -.xefu-dropzone.hover { +.hover .xefu-dropzone { border: 1px dotted #9ad18f; border-radius: 5px; } -.xefu-dropzone.fade { +.fade .xefu-dropzone { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; @@ -141,13 +144,9 @@ 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; @@ -199,3 +198,33 @@ button.xefu-btn { cursor: pointer; background: none; } + +p.xefu-dropzone-message { + display: inline-block; + margin: 0; + margin-left: 5px; + line-height: 24px; + vertical-align: middle; +} +.xefu-dropzone:hover p.xefu-dropzone-message, +.in .xefu-dropzone p.xefu-dropzone-message, +.hover .xefu-dropzone p.xefu-dropzone-message, +.fade .xefu-dropzone p.xefu-dropzone-message { + display: none; +} +.upload_info { + display: none; + margin: 0; + margin-left: 5px; + line-height: 24px; + vertical-align: middle; +} + +.xefu-dropzone:hover .upload_info, +.in .xefu-dropzone .upload_info, +.hover .xefu-dropzone .upload_info, +.fade .xefu-dropzone .upload_info { + display: inline-block; + margin: 0; + margin-left: 5px; +} diff --git a/common/js/plugins/jquery.fileupload/js/main.js b/common/js/plugins/jquery.fileupload/js/main.js index afa7377ab..ff2445351 100644 --- a/common/js/plugins/jquery.fileupload/js/main.js +++ b/common/js/plugins/jquery.fileupload/js/main.js @@ -41,32 +41,41 @@ ]; var XeUploader = xe.createApp('XeUploader', { - files: {}, - selected_files: {}, settings: {}, - last_selected_file: null, - editor_sequence: null, init : function() { }, deactivate: function() { - console.log(this); }, createInstance: function(containerEl, opt) { var self = this; - var $container = this.$container = containerEl; + var $container = containerEl; var data = $container.data(); - this.editor_sequence = data.editorSequence; + + $.extend(data, { + files: {}, + selected_files: {}, + settings: {}, + last_selected_file: null, + }); + var settings = { - url: request_uri.setQuery('module', 'file').setQuery('act', 'procFileUpload'), - formData: {"editor_sequence": data.editorSequence, "upload_target_srl" : data.uploadTargetSrl, "mid" : window.current_mid}, - + url: request_uri + .setQuery('module', 'file') + .setQuery('act', 'procFileUpload') + .setQuery('mid', window.current_mid), + formData: { + "editor_sequence": data.editorSequence, + "upload_target_srl" : data.uploadTargetSrl, + "mid" : window.current_mid, + "act": 'procFileUpload' + }, dropZone: $container, - add: function(e, data) { + add: function(e, d) { var dfd = jQuery.Deferred(); - $.each(data.files, function(index, file) { - if(self.settings.maxFileSize <= file.size) { + $.each(d.files, function(index, file) { + if(data.settings.maxFileSize <= file.size) { dfd.reject(); alert(window.xe.msg_exceeds_limit_size); return false; @@ -75,7 +84,7 @@ }); dfd.done(function(){ - data.submit(); + d.submit(); }); }, done: function(e, res) { @@ -93,77 +102,87 @@ } }, stop: function() { - self.loadFilelist(); + self.loadFilelist($container); }, start: function() { - self.settings.progressbarGraph.width(0); - self.settings.progressStatus.show(); - self.settings.progressbar.show(); + data.settings.progressbarGraph.width(0); + data.settings.progressStatus.show(); + data.settings.progressbar.show(); }, - progressall: function (e, data) { - var progress = parseInt(data.loaded / data.total * 100, 10); - self.settings.progressbarGraph.width(progress+'%'); - self.settings.progressPercent.text(progress+'%'); + progressall: function (e, d) { + var progress = parseInt(d.loaded / d.total * 100, 10); + data.settings.progressbarGraph.width(progress+'%'); + data.settings.progressPercent.text(progress+'%'); if(progress >= 100) { - self.settings.progressbar.delay(3000).slideUp(); - self.settings.progressStatus.delay(3000).slideUp(); + data.settings.progressbar.delay(3000).slideUp(); + data.settings.progressStatus.delay(3000).slideUp(); } } }; - this.settings = $.extend({} , default_settings, settings, opt || {}); + + data.settings = $.extend({} , default_settings, settings, opt || {}); + $container.data(data); $.each(_elements, function(idx, val) { - if(typeof self.settings[val] === 'string') self.settings[val] = $container.find(self.settings[val]); + if(typeof data.settings[val] === 'string') data.settings[val] = $container.find(data.settings[val]); }); - var INS = $container.fileupload(this.settings) - .prop('disabled', !$.support.fileInput) - .parent() - .addClass($.support.fileInput ? undefined : 'disabled'); + var INS = $container.fileupload(data.settings) + .prop('disabled', !$.support.fileInput) + .parent() + .addClass($.support.fileInput ? undefined : 'disabled'); $container.data('xefu-instance', this); // 파일 목록 불러오기 - this.loadFilelist(); + this.loadFilelist($container); // 본문 삽입 - this.settings.actSelectedInsertContent.on('click', function() { - self.insertToContent(); + data.settings.actSelectedInsertContent.on('click', function() { + self.insertToContent($container); }); // 파일 삭제 - this.settings.actSelectedDeleteFile.on('click', function() { - self.deleteFile(); + data.settings.actSelectedDeleteFile.on('click', function() { + self.deleteFile($container); }); // finderSelect - var fileselect = this.settings.fileList.finderSelect({children:"li"}); - this.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); }); + var fileselect = data.settings.fileList.finderSelect({children:"li", enableDesktopCtrlDefault:true}); + console.log(data.settings.fileList); + data.settings.fileList.on("mousedown", 'img', function(e){ e.preventDefault(); }); + fileselect.finderSelect('addHook','highlight:after', function(el) { el.find('input').prop('checked', true); - var selected = self.settings.fileList.find('input:checked'); - self.selected_files = selected; + var selected = data.settings.fileList.find('input:checked'); + data.selected_files = selected; }); + fileselect.finderSelect('addHook','unHighlight:after', function(el) { el.find('input').prop('checked', false); - var selected = self.settings.fileList.find('input:checked'); - self.selected_files = selected; + var selected = data.settings.fileList.find('input:checked'); + data.selected_files = selected; }); + fileselect.on("click", ":checkbox", function(e){ e.preventDefault(); }); + $(document).bind('dragover', function (e) { var timeout = window.dropZoneTimeout, - dropZone = self.settings.dropZone; + dropZone = data.settings.dropZone; + if (!timeout) { dropZone.addClass('in'); } else { clearTimeout(timeout); } + var found = false, node = e.target; + do { if (node === dropZone[0]) { found = true; @@ -171,16 +190,20 @@ } 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); }); + + $container.data(data); }, done: function() { // this.loadFilelist(); @@ -192,13 +215,14 @@ unselectImageFiles: function() {}, unselectNonImageFiles: function() {}, - insertToContent: function() { + insertToContent: function($container) { var self = this; var temp_code = ''; + var data = $container.data(); - $.each(this.selected_files, function(idx, file) { + $.each(data.selected_files, function(idx, file) { var file_srl = $(file).data().fileSrl; - var fileinfo = self.files[file_srl]; + var fileinfo = data.files[file_srl]; if(!fileinfo) return; @@ -211,18 +235,19 @@ }); - _getCkeInstance(this.editor_sequence).insertHtml(temp_code, "unfiltered_html"); + _getCkeInstance(data.editorSequence).insertHtml(temp_code, "unfiltered_html"); }, /** * 지정된 하나의 파일 또는 다중 선택된 파일 삭제 */ - deleteFile: function(file_srl) { + deleteFile: function($container, file_srl) { var self = this; var file_srls = []; + var data = $container.data(); if(!file_srl) { - $.each(self.selected_files, function(idx, file) { + $.each(data.selected_files, function(idx, file) { if(!file) return; var file_srl = $(file).data().fileSrl; @@ -237,38 +262,38 @@ file_srls = file_srls.join(','); - exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': this.editor_sequence}, function() { + exec_json('file.procFileDelete', {'file_srls': file_srls, 'editor_sequence': data.editorSequence}, function() { file_srls = file_srls.split(','); $.each(file_srls, function(idx, srl){ - self.settings.fileList.find('ul').find('li[data-file-srl=' + srl + ']').remove(); + data.settings.fileList.find('ul').find('li[data-file-srl=' + srl + ']').remove(); }); - self.loadFilelist(); + self.loadFilelist($container); }); - }, + }, /** * 파일 목록 갱신 */ - loadFilelist: function() { + loadFilelist: function($container) { var self = this; - var data = this.$container.data(); + var data = $container.data(); var obj = {}; obj.mid = window.current_mid; - obj.editor_sequence = self.$container.data('editor-sequence'); + obj.editor_sequence = data.editorSequence; $.exec_json('file.getFileList', obj, function(res){ data.uploadTargetSrl = res.upload_target_srl; - editorRelKeys[self.$container.data('editor-sequence')].primary.value = res.upload_target_srl; + editorRelKeys[data.editorSequence].primary.value = res.upload_target_srl; data.uploadTargetSrl = res.uploadTargetSrl; // @TODO 정리 - $('.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); + $container.find('.allowed_filetypes').text(res.allowed_filetypes); + $container.find('.allowed_filesize').text(res.allowed_filesize); + $container.find('.allowed_attach_size').text(res.allowed_attach_size); + $container.find('.attached_size').text(res.attached_size); + $container.find('.file_count').text(res.files.length); - var tmpl_fileitem = self.settings.tmplXeUploaderFileitem; - var tmpl_fileitem_image = self.settings.tmplXeUploaderFileitemImage; + var tmpl_fileitem = data.settings.tmplXeUploaderFileitem; + var tmpl_fileitem_image = data.settings.tmplXeUploaderFileitemImage; var template_fileimte = Handlebars.compile(tmpl_fileitem); var template_fileimte_image = Handlebars.compile(tmpl_fileitem_image); var result_image = []; @@ -276,16 +301,17 @@ // 첨부된 파일이 없으면 감춤 if(!res.files.length) { - self.settings.fileList.hide(); - self.settings.controll.hide(); + data.settings.fileList.hide(); + data.settings.controll.hide(); return; } // 이미지와 그외 파일 분리 $.each(res.files, function (index, file) { - if(self.files[file.file_srl]) return; + if(data.files[file.file_srl]) return; - self.files[file.file_srl] = file; + data.files[file.file_srl] = file; + $container.data(data); if(/\.(jpe?g|png|gif)$/i.test(file.source_filename)) { result_image.push(template_fileimte_image(file)); @@ -297,12 +323,12 @@ }); // 파일 목록 - self.settings.filelistImages.append(result_image.join('')); - self.settings.filelist.append(result.join('')); + data.settings.filelistImages.append(result_image.join('')); + data.settings.filelist.append(result.join('')); // 컨트롤, 리스트 표시 - self.settings.controll.show() - self.settings.fileList.show(); + data.settings.controll.show() + data.settings.fileList.show(); }); } }); @@ -319,16 +345,7 @@ return u; }; - xe.unregisterApp(); - - // Shortcut function in XE - // xe.createXeUploader = function(browseButton, opts) { - // var u = new XeUploader(browseButton, opts); - // if(u) xe.registerApp(u); - - // return u; - // }; })(jQuery); diff --git a/modules/editor/skins/ckeditor/css/default.css b/modules/editor/skins/ckeditor/css/default.css index b0620a956..e69de29bb 100755 --- a/modules/editor/skins/ckeditor/css/default.css +++ b/modules/editor/skins/ckeditor/css/default.css @@ -1,6 +0,0 @@ -.cke_button__xe_component_label { - display: inline !important; -} -.cke_button__xe_component_icon { - display: none !important; -} diff --git a/modules/editor/skins/ckeditor/editor.html b/modules/editor/skins/ckeditor/editor.html index 6e71a9ad6..76d12ee6e 100755 --- a/modules/editor/skins/ckeditor/editor.html +++ b/modules/editor/skins/ckeditor/editor.html @@ -9,7 +9,7 @@ {@ $css_content = null } - {@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); } + {@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); } {@ $css_content .= ' .xe_content.editable { '} diff --git a/modules/editor/skins/ckeditor/file_upload.html b/modules/editor/skins/ckeditor/file_upload.html index eee60bc85..63ede0eb7 100644 --- a/modules/editor/skins/ckeditor/file_upload.html +++ b/modules/editor/skins/ckeditor/file_upload.html @@ -5,16 +5,14 @@
+ + {$lang->edit->upload_file} + + +

{$lang->ckeditor_about_file_drop_area}

-
- - {$lang->edit->upload_file} - - -
- -

{$lang->allowed_filesize} : 0MB ({$lang->allowed_filetypes} : *.*)

+

{$lang->allowed_filesize} : 0MB ({$lang->allowed_filetypes} : *.*)