From c82add0eca2c77dcd1645b54d5e8e7eaff4f1228 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Thu, 24 Jun 2021 04:31:02 +0000 Subject: [PATCH] =?UTF-8?q?webp=20=EC=A7=80=EC=9B=90=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../photo_uploader/popup/index.html | 105 +++---- .../photo_uploader/popup/js/basic.js | 281 +++++++++--------- 2 files changed, 194 insertions(+), 192 deletions(-) diff --git a/plugin/editor/smarteditor2/photo_uploader/popup/index.html b/plugin/editor/smarteditor2/photo_uploader/popup/index.html index f695d9d02..da775dd2d 100644 --- a/plugin/editor/smarteditor2/photo_uploader/popup/index.html +++ b/plugin/editor/smarteditor2/photo_uploader/popup/index.html @@ -1,64 +1,67 @@ + - - -사진 첨부하기 :: SmartEditor2 - - - - - + + + 사진 첨부하기 :: SmartEditor2 + + + + + + -
- -
-

사진 첨부하기

-
- -
-
-

마우스로 드래그하여 순서를 바꿀수 있습니다.

-
- - 파일선택 - - - - +
+ +
+

사진 첨부하기

+
+ +
+
+

마우스로 드래그하여 순서를 바꿀수 있습니다.

+
+ + 파일선택 + + + + +
+
+
+
    +
+ 마우스로 드래그해서 이미지를 추가해주세요. +
+
이미지는 한번에 10개까지 선택할수 있습니다. 움직이는 webp 이미지는 업로드 불가합니다.
+
+ +
-
-
    -
- 마우스로 드래그해서 이미지를 추가해주세요. -
-
이미지는 한번에 10개까지 선택할수 있습니다.
-
- - -
-
- - - - + + + + - - + + - - + + + + + - - \ No newline at end of file diff --git a/plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js b/plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js index b454a2970..96c7c0edd 100644 --- a/plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js +++ b/plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js @@ -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 = $('
  • ').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 = $('
    ') - .append($('').text(file.name)) - .append($('').addClass("delete_img").attr({"data-delete":file.name,"data-url":file.url}).html("삭제")), + .append($('').text(file.name)) + .append($('').addClass("delete_img").attr({ "data-delete": file.name, "data-url": file.url }).html("삭제")), $img = "", size_text = ''; - - if ( preload && preload != 'swfupload' ){ - var ret = othis.get_ratio( file.width, file.height ), - size_text = file.width+" x "+file.height; - $img = ""; - - } - if (!index) { - node.prepend('
    ') - .prepend($img); - if(size_text){ - node.append('
    ') + + if (preload && preload != 'swfupload') { + var ret = othis.get_ratio(file.width, file.height), + size_text = file.width + " x " + file.height; + $img = ""; + + } + if (!index) { + node.prepend('
    ') + .prepend($img); + if (size_text) { + node.append('
    ') .append($('').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 = "", link = $('') - .attr('target', '_blank') - .prop('href', file.url); - node - //.wrap(link) - .append('
    ') - .append($('').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('
    ') + .append($('').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 = $('').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('
  • Loaded
    • '); - }, - fileQueued: function(event, file){ - if(this.log) $('.log', this).append('
  • File queued - '+file.name+'
    • '); - // 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('
  • Loaded
    • '); + }, + fileQueued: function (event, file) { + if (this.log) $('.log', this).append('
  • File queued - ' + file.name + '
    • '); + // 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('
  • File queue error - '+message+'
    • '); - }, - fileDialogStart: function(event){ - if(this.log) $('.log', this).append('
  • File dialog start
    • '); - }, - fileDialogComplete: function(event, numFilesSelected, numFilesQueued){ - if(this.log) $('.log', this).append('
  • File dialog complete
    • '); - }, - uploadStart: function(event, file){ + if (this.log) $('.log', this).append('
  • File queue error - ' + message + '
    • '); + }, + fileDialogStart: function (event) { + if (this.log) $('.log', this).append('
  • File dialog start
    • '); + }, + fileDialogComplete: function (event, numFilesSelected, numFilesQueued) { + if (this.log) $('.log', this).append('
  • File dialog complete
    • '); + }, + uploadStart: function (event, file) { listeners.data.files = $.makeArray(file); - gnu._add( event, listeners.data, 'swfupload' ); - if(this.log) $('.log', this).append('
  • Upload start - '+file.name+'
    • '); - }, - uploadProgress: function(event, file, bytesLoaded){ - if(this.log) $('.log', this).append('
  • Upload progress - '+bytesLoaded+'
    • '); - }, - uploadSuccess: function(event, file, serverData){ - listeners.data.result = jQuery.parseJSON( serverData ); - gnu._done( event, listeners.data ); - if(this.log) $('.log', this).append('
  • Upload success - '+file.name+'
    • '); + gnu._add(event, listeners.data, 'swfupload'); + if (this.log) $('.log', this).append('
  • Upload start - ' + file.name + '
    • '); + }, + uploadProgress: function (event, file, bytesLoaded) { + if (this.log) $('.log', this).append('
  • Upload progress - ' + bytesLoaded + '
    • '); + }, + uploadSuccess: function (event, file, serverData) { + listeners.data.result = jQuery.parseJSON(serverData); + gnu._done(event, listeners.data); + if (this.log) $('.log', this).append('
  • Upload success - ' + file.name + '
    • '); - }, - uploadComplete: function(event, file){ - if(this.log) $('.log', this).append('
  • Upload complete - '+file.name+'
    • '); - // 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('
  • Upload error - '+message+'
    • '); - } - }; + }, + uploadComplete: function (event, file) { + if (this.log) $('.log', this).append('
  • Upload complete - ' + file.name + '
    • '); + // 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('
  • Upload error - ' + message + '
    • '); + } + }; - $(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(); });