firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

webp 지원하도록 수정중

Browse Source
This commit is contained in:
Ubuntu
2021-06-24 04:31:02 +00:00
parent 58f5e9b5cd
commit c82add0eca
2 changed files with 194 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
plugin/editor/smarteditor2/photo_uploader/popup/index.html
View File

@ -1,64 +1,67 @@
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>사진 첨부하기 :: SmartEditor2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css?v=140715">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>사진 첨부하기 :: SmartEditor2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css?v=140715">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>
<div class="container pop_container">
<!-- header -->
<div id="pop_header">
<h1>사진 첨부하기</h1>
</div>
<!-- //header -->
<div class="content_container">
<div class="drag_explain">
<p>마우스로 드래그하여 순서를 바꿀수 있습니다.</p>
<div class="file_selet_group">
<span class="btn btn-success fileinput-button">
<span>파일선택</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple accept="image/*">
</span>
<button type="button" class="btn btn-danger delete" id="all_remove_btn">
<span>전체삭제</span>
</button>
<div class="container pop_container">
<!-- header -->
<div id="pop_header">
<h1>사진 첨부하기</h1>
</div>
<!-- //header -->
<div class="content_container">
<div class="drag_explain">
<p>마우스로 드래그하여 순서를 바꿀수 있습니다.</p>
<div class="file_selet_group">
<span class="btn btn-success fileinput-button">
<span>파일선택</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple accept="image/*">
</span>
<button type="button" class="btn btn-danger delete" id="all_remove_btn">
<span>전체삭제</span>
</button>
</div>
</div>
<div class="drag_area" id="drag_area">
<ul class="sortable" id="sortable">
</ul>
<em class="blind">마우스로 드래그해서 이미지를 추가해주세요.</em><span id="guide_text" class="bg hidebg"></span>
</div>
<div class="seletion_explain">이미지는 한번에 10개까지 선택할수 있습니다. 움직이는 webp 이미지는 업로드 불가합니다.</div>
<div class="btn_group">
<button type="button" class="btn" id="img_upload_submit">
<span>등록</span>
</button>
<button type="button" class="btn" id="close_w_btn">
<span>취소</span>
</button>
</div>
</div>
<div class="drag_area" id="drag_area">
<ul class="sortable" id="sortable">
</ul>
<em class="blind">마우스로 드래그해서 이미지를 추가해주세요.</em><span id="guide_text" class="bg hidebg"></span>
</div>
<div class="seletion_explain">이미지는 한번에 10개까지 선택할수 있습니다.</div>
<div class="btn_group">
<button type="button" class="btn" id="img_upload_submit">
<span>등록</span>
</button>
<button type="button" class="btn" id="close_w_btn" >
<span>취소</span>
</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="./js/jquery.iframe-transport.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="./js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="./swfupload/swfupload.js"></script>
<script type="text/javascript" src="./swfupload/jquery.swfupload.js"></script>
<script type="text/javascript" src="./swfupload/swfupload.js"></script>
<script type="text/javascript" src="./swfupload/jquery.swfupload.js"></script>
<!-- The basic File Upload plugin -->
<script src="./js/jquery.fileupload.js?v=140715"></script>
<!-- The basic File Upload plugin -->
<script src="./js/jquery.fileupload.js?v=140715"></script>
<script src="./js/basic.js?v3"></script>
</body>
<script src="./js/basic.js?v3"></script>
</body>
</html>

281
plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js
View File

@ -1,9 +1,9 @@
jQuery.fn.bindAll = function(options) {
var $this = this;
jQuery.each(options, function(key, val){
$this.bind(key, val);
});
return this;
jQuery.fn.bindAll = function (options) {
var $this = this;
jQuery.each(options, function (key, val) {
$this.bind(key, val);
});
return this;
}
jQuery(function ($) {
@ -11,130 +11,130 @@ jQuery(function ($) {
var ed_nonce = '';
if( !!opener && !!opener.window && !!opener.window.nhn ){
if (!!opener && !!opener.window && !!opener.window.nhn) {
ed_nonce = opener.window.nhn.husky.SE2M_Configuration.SE2M_Accessibility.ed_nonce;
}
// Change this to the location of your server-side upload handler:
var gnu = {
url : './php/?_nonce='+ed_nonce,
container_el : 'body',
dreg_area : '#drag_area',
dreg_area_list : '#drag_area > ul',
progress_bar : '#progress .progress-bar',
filter : /^(image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png|image\/webp)$/i,
files : [],
file_limit : 10, //한번에 올릴수 파일갯수 제한
imgw : 100,
imgh : 70,
file_api_support : !!(window.ProgressEvent && window.FileReader),
$elTextGuide : $("#guide_text"),
init : function(){
url: './php/?_nonce=' + ed_nonce,
container_el: 'body',
dreg_area: '#drag_area',
dreg_area_list: '#drag_area > ul',
progress_bar: '#progress .progress-bar',
filter: /^(image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png|image\/webp)$/i,
files: [],
file_limit: 10, //한번에 올릴수 파일갯수 제한
imgw: 100,
imgh: 70,
file_api_support: !!(window.ProgressEvent && window.FileReader),
$elTextGuide: $("#guide_text"),
init: function () {
$(this.dreg_area_list).sortable({
'cursor':'pointer',
'placeholder':'placeholder'
'cursor': 'pointer',
'placeholder': 'placeholder'
});
$(this.dreg_area_list).disableSelection();
if( this.file_api_support ) this.$elTextGuide.removeClass("hidebg").addClass("showbg");
if (this.file_api_support) this.$elTextGuide.removeClass("hidebg").addClass("showbg");
},
file_push : function(file){
file_push: function (file) {
var othis = this,
last = othis.files.length;
othis.files.push(file);
},
_readymodebg : function(){
if( this.file_api_support ) {
_readymodebg: function () {
if (this.file_api_support) {
var sClass = this.$elTextGuide.attr('class');
if(sClass.indexOf('hidebg') > 0){
if (sClass.indexOf('hidebg') > 0) {
this.$elTextGuide.removeClass('hidebg');
this.$elTextGuide.addClass('showbg');
}
}
},
_startmodebg : function(){
if( this.file_api_support ) {
_startmodebg: function () {
if (this.file_api_support) {
var sClass = this.$elTextGuide.attr('class');
if(sClass.indexOf('hidebg') < 0){
if (sClass.indexOf('hidebg') < 0) {
this.$elTextGuide.removeClass('showbg');
this.$elTextGuide.addClass('hidebg');
}
}
},
_delete : function(e){
_delete: function (e) {
e.preventDefault();
var othis = gnu,
$button = $(e.currentTarget),
delete_url = $button.attr("data-delete");
if( delete_url ){
if (delete_url) {
$.ajax({
url: othis.url+"&del=1&file="+ delete_url
url: othis.url + "&del=1&file=" + delete_url
}).done(function (result) {
});
}
$button.parents('li.sort_list').fadeOut(300, function(){
$button.parents('li.sort_list').fadeOut(300, function () {
$(this).remove();
var $dreg_area = $(othis.dreg_area_list);
$dreg_area.sortable('refresh');
if( !$dreg_area.children('li').length ) othis._readymodebg();
if (!$dreg_area.children('li').length) othis._readymodebg();
});
},
_add : function(e, data, preload){
_add: function (e, data, preload) {
var othis = this;
othis._startmodebg();
data.context = $('<li/>').addClass("sort_list").appendTo(this.dreg_area_list);
$.each(data.files, function (index, file) {
if ( !preload && !othis.filter.test(file.type)) {
if (!preload && !othis.filter.test(file.type)) {
data.context.remove();
alert('이미지만 허용합니다.');
return true;
}
var node = $('<div/>')
.append($('<span/>').text(file.name))
.append($('<span/>').addClass("delete_img").attr({"data-delete":file.name,"data-url":file.url}).html("<img src='./img/system_delete.png' alt='삭제' title='삭제' >")),
.append($('<span/>').text(file.name))
.append($('<span/>').addClass("delete_img").attr({ "data-delete": file.name, "data-url": file.url }).html("<img src='./img/system_delete.png' alt='삭제' title='삭제' >")),
$img = "<img src='./img/loading.gif' class='pre_thumb' />",
size_text = '';
if ( preload && preload != 'swfupload' ){
var ret = othis.get_ratio( file.width, file.height ),
size_text = file.width+" x "+file.height;
$img = "<img src='"+file.url+"' width='"+ret['width']+"' height='"+ret['height']+"' class='pre_thumb' />";
}
if (!index) {
node.prepend('<br>')
.prepend($img);
if(size_text){
node.append('<br>')
if (preload && preload != 'swfupload') {
var ret = othis.get_ratio(file.width, file.height),
size_text = file.width + " x " + file.height;
$img = "<img src='" + file.url + "' width='" + ret['width'] + "' height='" + ret['height'] + "' class='pre_thumb' />";
}
if (!index) {
node.prepend('<br>')
.prepend($img);
if (size_text) {
node.append('<br>')
.append($('<span/>').text(size_text))
}
}
}
node.appendTo(data.context);
node.find(".delete_img").on("click", othis._delete);
});
$(othis.dreg_area_list).sortable('refresh');
},
get_file_all : function(){
get_file_all: function () {
var othis = this,
oDate = new Date();
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
//url: $('#fileupload').fileupload('option', 'url'),
url: this.url+"&t="+ oDate.getTime(),
url: this.url + "&t=" + oDate.getTime(),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
//$(this).removeClass('fileupload-processing');
}).done(function (result) {
$.each(result.files, function (index, data) {
var tmp = { files : [] };
var tmp = { files: [] };
tmp.files[0] = data;
othis._add( $.Event('add'), tmp, 'preload' );
othis._add($.Event('add'), tmp, 'preload');
});
});
},
_processalways : function(e, data){
_processalways: function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
@ -149,29 +149,29 @@ jQuery(function ($) {
.prop('disabled', !!data.files.error);
}
},
obj_to_arr : function(obj){
var array = $.map(obj, function(value, index) {
obj_to_arr: function (obj) {
var array = $.map(obj, function (value, index) {
return [value];
});
return array;
},
_done : function(e, data){
_done: function (e, data) {
var othis = this;
$.each(data.result.files, function (index, file) {
if (file.url && !file.error) {
var ret = othis.get_ratio( file.width, file.height ),
var ret = othis.get_ratio(file.width, file.height),
node = $(data.context.children()[index]),
size_text = file.width+" x "+file.height,
size_text = file.width + " x " + file.height,
//$img = "<img src='"+file.url+"' width='"+ret['width']+"' height='"+ret['height']+"' />",
link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
node
//.wrap(link)
.append('<br>')
.append($('<span/>').text(size_text))
.find("img.pre_thumb").attr({"src":file.url,"width":ret['width'],"height":ret['height']})
.end().find(".delete_img").attr({"data-delete":file.name,"data-url":file.url});
.attr('target', '_blank')
.prop('href', file.url);
node
//.wrap(link)
.append('<br>')
.append($('<span/>').text(size_text))
.find("img.pre_thumb").attr({ "src": file.url, "width": ret['width'], "height": ret['height'] })
.end().find(".delete_img").attr({ "data-delete": file.name, "data-url": file.url });
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
@ -181,20 +181,20 @@ jQuery(function ($) {
othis.file_push(file);
});
},
get_ratio : function(width, height){
get_ratio: function (width, height) {
var ratio = 0,
ret_img = [];
if( !width || !height ){
if (!width || !height) {
ret_img['width'] = this.imgw;
ret_img['height'] = this.imgh;
return ret_img;
}
if(width > this.imgw){
if (width > this.imgw) {
ratio = this.imgw / width;
height = height * ratio;
width = this.imgw;
}
if( height > this.imgh ){
if (height > this.imgh) {
ratio = this.imgh / height;
width = width * ratio;
height = this.imgh;
@ -203,7 +203,7 @@ jQuery(function ($) {
ret_img['height'] = parseInt(height);
return ret_img;
},
setPhotoToEditor : function(oFileInfo){
setPhotoToEditor: function (oFileInfo) {
if (!!opener && !!opener.nhn && !!opener.nhn.husky && !!opener.nhn.husky.PopUpManager) {
//스마트 에디터 플러그인을 통해서 넣는 방법 (oFileInfo는 Array)
opener.nhn.husky.PopUpManager.setCallback(window, 'SET_PHOTO', [oFileInfo]);
@ -220,19 +220,19 @@ jQuery(function ($) {
dropZone: $(gnu.dreg_area),
autoUpload: true,
sequentialUploads: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|bmp|png)$/i,
acceptFileTypes: /(\.|\/)(gif|jpe?g|bmp|png|webp)$/i,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: true,
limit_filesLength : gnu.file_limit
limit_filesLength: gnu.file_limit
}).on('fileuploadadd', function (e, data) {
gnu._add(e, data);
}).on('fileuploadprocessalways', function (e, data) {
gnu._processalways(e, data);
}).on('fileuploaddone', function (e, data) {
gnu._done( e, data );
gnu._done(e, data);
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index, file) {
@ -246,85 +246,84 @@ jQuery(function ($) {
gnu.init();
var listeners = {
data : {},
log : false,
swfuploadLoaded: function(event){
if(this.log) $('.log', this).append('<li>Loaded</li>');
},
fileQueued: function(event, file){
if(this.log) $('.log', this).append('<li>File queued - '+file.name+'</li>');
// start the upload once it is queued
// but only if this queue is not disabled
if (!$('input[name=disabled]:checked', this).length) {
$(this).swfupload('startUpload');
}
},
fileQueueError: function(event, file, errorCode, message){
switch (errorCode)
{
case -100 :
alert("파일을 "+message+"개 이하로 선택해주세요.");
var listeners = {
data: {},
log: false,
swfuploadLoaded: function (event) {
if (this.log) $('.log', this).append('<li>Loaded</li>');
},
fileQueued: function (event, file) {
if (this.log) $('.log', this).append('<li>File queued - ' + file.name + '</li>');
// start the upload once it is queued
// but only if this queue is not disabled
if (!$('input[name=disabled]:checked', this).length) {
$(this).swfupload('startUpload');
}
},
fileQueueError: function (event, file, errorCode, message) {
switch (errorCode) {
case -100:
alert("파일을 " + message + "개 이하로 선택해주세요.");
break;
}
if(this.log) $('.log', this).append('<li>File queue error - '+message+'</li>');
},
fileDialogStart: function(event){
if(this.log) $('.log', this).append('<li>File dialog start</li>');
},
fileDialogComplete: function(event, numFilesSelected, numFilesQueued){
if(this.log) $('.log', this).append('<li>File dialog complete</li>');
},
uploadStart: function(event, file){
if (this.log) $('.log', this).append('<li>File queue error - ' + message + '</li>');
},
fileDialogStart: function (event) {
if (this.log) $('.log', this).append('<li>File dialog start</li>');
},
fileDialogComplete: function (event, numFilesSelected, numFilesQueued) {
if (this.log) $('.log', this).append('<li>File dialog complete</li>');
},
uploadStart: function (event, file) {
listeners.data.files = $.makeArray(file);
gnu._add( event, listeners.data, 'swfupload' );
if(this.log) $('.log', this).append('<li>Upload start - '+file.name+'</li>');
},
uploadProgress: function(event, file, bytesLoaded){
if(this.log) $('.log', this).append('<li>Upload progress - '+bytesLoaded+'</li>');
},
uploadSuccess: function(event, file, serverData){
listeners.data.result = jQuery.parseJSON( serverData );
gnu._done( event, listeners.data );
if(this.log) $('.log', this).append('<li>Upload success - '+file.name+'</li>');
gnu._add(event, listeners.data, 'swfupload');
if (this.log) $('.log', this).append('<li>Upload start - ' + file.name + '</li>');
},
uploadProgress: function (event, file, bytesLoaded) {
if (this.log) $('.log', this).append('<li>Upload progress - ' + bytesLoaded + '</li>');
},
uploadSuccess: function (event, file, serverData) {
listeners.data.result = jQuery.parseJSON(serverData);
gnu._done(event, listeners.data);
if (this.log) $('.log', this).append('<li>Upload success - ' + file.name + '</li>');
},
uploadComplete: function(event, file){
if(this.log) $('.log', this).append('<li>Upload complete - '+file.name+'</li>');
// upload has completed, lets try the next one in the queue
// but only if this queue is not disabled
if (!$('input[name=disabled]:checked', this).length) {
$(this).swfupload('startUpload');
}
},
uploadError: function(event, file, errorCode, message){
if(this.log) $('.log', this).append('<li>Upload error - '+message+'</li>');
}
};
},
uploadComplete: function (event, file) {
if (this.log) $('.log', this).append('<li>Upload complete - ' + file.name + '</li>');
// upload has completed, lets try the next one in the queue
// but only if this queue is not disabled
if (!$('input[name=disabled]:checked', this).length) {
$(this).swfupload('startUpload');
}
},
uploadError: function (event, file, errorCode, message) {
if (this.log) $('.log', this).append('<li>Upload error - ' + message + '</li>');
}
};
$(gnu.container_el).bindAll(listeners);
$(gnu.container_el).bindAll(listeners);
/* listeners이벤트 */
$(gnu.dreg_area).bind('drop dragover', function (e) {
e.preventDefault();
if( !gnu.file_api_support && e.type == 'drop' ) alert("브라우저가 드래그 앤 드랍을 지원하지 않습니다.");
if (!gnu.file_api_support && e.type == 'drop') alert("브라우저가 드래그 앤 드랍을 지원하지 않습니다.");
});
$("#all_remove_btn").bind("click", function(e){
$("#all_remove_btn").bind("click", function (e) {
e.preventDefault();
if( $(gnu.dreg_area_list).children().length ){
if (confirm("추가한 이미지가 있습니다.정말 삭제 하시겠습니까?")){
$(gnu.dreg_area_list).find(".delete_img").each( function(i){
if ($(gnu.dreg_area_list).children().length) {
if (confirm("추가한 이미지가 있습니다.정말 삭제 하시겠습니까?")) {
$(gnu.dreg_area_list).find(".delete_img").each(function (i) {
$(this).trigger("click");
});
$(gnu.dreg_area_list).sortable('refresh');
}
}
});
$("#img_upload_submit").bind("click", function(e){
$("#img_upload_submit").bind("click", function (e) {
e.preventDefault();
var aResult = [], j = 0;
$(gnu.dreg_area_list).find(".delete_img").each( function(i, f){
if( !$(this).attr("data-url") ) return true;
var aResult = [], j = 0;
$(gnu.dreg_area_list).find(".delete_img").each(function (i, f) {
if (!$(this).attr("data-url")) return true;
aResult[j] = [];
aResult[j]['bNewLine'] = 'true';
aResult[j]['sAlign'] = '';
@ -332,13 +331,13 @@ jQuery(function ($) {
aResult[j]['sFileURL'] = $(this).attr("data-url");
j++;
});
if( aResult.length ){
if (aResult.length) {
gnu.setPhotoToEditor(aResult);
aResult = null;
}
window.close();
});
$("#close_w_btn").bind("click", function(e){
$("#close_w_btn").bind("click", function (e) {
e.preventDefault();
window.close();
});