diff --git a/common/js/plugins/jquery.fileupload/css/style.css b/common/js/plugins/jquery.fileupload/css/style.css index 6bdcaf152..4640c1baa 100755 --- a/common/js/plugins/jquery.fileupload/css/style.css +++ b/common/js/plugins/jquery.fileupload/css/style.css @@ -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; } diff --git a/common/js/plugins/jquery.fileupload/js/main.js b/common/js/plugins/jquery.fileupload/js/main.js index a3b662df7..fdb700b67 100644 --- a/common/js/plugins/jquery.fileupload/js/main.js +++ b/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 : '
  • {{source_filename}}{{disp_file_size}} 선택
    • ', + tmplXeUploaderFileitemImage: '
  • {{source_filename}}{{disp_file_size}}
    • ' + }; + 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 += '' + fileinfo.source_filename + ''; + temp_code += '' + fileinfo.source_filename + ''; temp_code += "\r\n


    \r\n"; } else { - temp_code += '' + fileinfo.source_filename + "\n"; + temp_code += '' + fileinfo.source_filename + "\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) { - $('