Skip to content

Instantly share code, notes, and snippets.

@kyungilpark

kyungilpark/hp_SE_QuickEditor_Image.js

Last active July 18, 2017 02:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kyungilpark/a5901e43be5ef7222ef531a466678918 to your computer and use it in GitHub Desktop.
Save kyungilpark/a5901e43be5ef7222ef531a466678918 to your computer and use it in GitHub Desktop.
Download ZIP
hp_SE_QuickEditor_Image.js
Raw
hp_SE_QuickEditor_Image.js
/**
* @name SE_QuickEditor_Image
* @description Quick Editor Image function Class
* @author NHN AjaxUI Lab - cielo
* @version 1.0
* @since 2009.10
*/
nhn.husky.SE_QuickEditor_Image = jindo.$Class({
name : "SE_QuickEditor_Image",
_aQEImg : [],
elCurrentFocus : "",
nMaxWidth : Infinity,
nMaxHeight : Infinity,
$init : function(elAppContainer){
},
$ON_MSG_APP_READY : function(){
this.elEventTarget = null;
this.elElement = null;
this.welElement = null;
this.nMaxWidth = (nhn.husky.SE2M_Configuration.QuickEditor.Image.nImageMaxWidthSize || Infinity);
this.nMaxHeight = (nhn.husky.SE2M_Configuration.QuickEditor.Image.nImageMaxHeightSize || Infinity);
this.bImgAutoAdjust = true; /* true : 이미지의 가로/세로 비율을 유지함, false : 이미지의 가로/세로 비율을 유지하지 않고 각각 조절 가능함 */
},
_assignHTMLObjects : function(elAppContainer){
this.oApp.exec("LOAD_HTML", ["qe_image"]);
var self = this;
this.elQELayer = jindo.$$.getSingle(".q_img_wrap", elAppContainer);
this.elQELayer.style.zIndex = 150;
this.elBtnBGPalette = jindo.$$.getSingle(".husky_se2m_img_qe_bgcolor_btn", this.elQELayer);
this.elBtnResetPalette = jindo.$$.getSingle(".se2_sreset", this.elQELayer);
this.elPanelBGPaletteHolder = jindo.$$.getSingle(".husky_se2m_img_qe_bg_paletteHolder", this.elQELayer);
this.elPanelAlign0 = jindo.$$.getSingle(".se2_align0", this.elQELayer);
this.elPanelAlign1 = jindo.$$.getSingle(".se2_align1", this.elQELayer);
this.elPanelAlign2 = jindo.$$.getSingle(".se2_align2", this.elQELayer);
this.elPanelImgWidth = jindo.$$.getSingle(".widthimg", this.elQELayer);
this.elPanelImgHeight = jindo.$$.getSingle(".heightimg", this.elQELayer);
this.elCheckImgAutoAdjust = jindo.$$.getSingle(".se2_srate", this.elQELayer); /* 이미지의 가로/세로 길이를 따로따로 설정할 수 있도록 함 */
this.elCheckImgAutoAdjust.checked = true; /* 기본값은 checked (-> 가로 세로 비율 유지함, 가로 길이가 줄 때 세로 길이도 비율에 맞추어 줄어듬) */
this.elPanelImgBorder = jindo.$$.getSingle(".bordersize", this.elQELayer);
this.elPanelHighEdit = jindo.$$.getSingle(".se2_highedit", this.elQELayer);
new jindo.NumericStepper(jindo.$$.getSingle(".se2_numberStepper", this.elQELayer), {
sClassPrefix : '',
nStep : 1, // (Number) 가감(+/-)이 일어나는 단위를 의미합니다.
nMax : 10, // (Number) 최대값의 제한값이 설정됩니다.
nMin : 0, // (Number) 최소값의 제한 값이 설정됩니다.
nDefaultValue : 0, // (Number) Input Box안에 들어갈 default value
bUseMouseWheel : false, // 마우스 휠을 사용하여, input vale를 컨트할 수 있게 할지 여부 세팅
bInputReadOnly : true // Input Box의 속성을 결정하는 option
}).attach({
beforeChange : function(oCustomEvent){
if(oCustomEvent.nValue > oCustomEvent.nMax || oCustomEvent.nValue < oCustomEvent.nMin){
oCustomEvent.stop();
}
},
change : function(oCustomEvent){
self.oApp.exec("IMG_QE_SET_BORDER", [oCustomEvent.nValue]);
}
});
},
$BEFORE_EXECCOMMAND : function(){
this.oApp.exec("CLOSE_QE_LAYER");
},
$BEFORE_CHANGE_EDITING_MODE : function(sMode, bNoFocus){
if(sMode !== "WYSIWYG"){
this.welElement = null;
this.oApp.exec("CLOSE_QE_LAYER");
}
},
_hasThumbnail : function(id) {
return this.oApp.hasThumbnail && this.oApp.hasThumbnail(id);
},
/**
* 퀵에디터 판넬의 각 버튼에 이벤트 설정
*/
$LOCAL_BEFORE_FIRST : function(sMsg){
// CHANGE_EDITING_MODE 시에 불필요한 이벤트 등록을 피하기 위해 추가된 코드임
if(!!sMsg.match(/(REGISTER_CONVERTERS|CHANGE_EDITING_MODE)/)){
this.oApp.acceptLocalBeforeFirstAgain(this, true);
return true;
}
this._assignHTMLObjects(this.oApp.htOptions.elAppContainer);
this.oApp.registerBrowserEvent(this.elBtnBGPalette, "click", "IMG_QE_TOGGLE_BGC_PALETTE");
this.oApp.registerBrowserEvent(this.elBtnResetPalette, "click", "IMG_QE_RESET_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelAlign0, "click", "IMG_QE_ALIGN_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelAlign1, "click", "IMG_QE_ALIGN_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelAlign2, "click", "IMG_QE_ALIGN_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgWidth, "blur", "IMG_QE_RESIZE_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgHeight, "blur", "IMG_QE_RESIZE_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgWidth, "focus", "IMG_QE_RESIZE_START_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgHeight, "focus", "IMG_QE_RESIZE_START_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgWidth, "mousedown", "IMG_QE_RESIZE_START_PALETTE");
this.oApp.registerBrowserEvent(this.elPanelImgHeight, "mousedown", "IMG_QE_RESIZE_START_PALETTE");
this.oApp.registerBrowserEvent(this.elCheckImgAutoAdjust, "click", "IMG_SIZE_ADJUST");
this.oApp.registerBrowserEvent(this.elPanelHighEdit, "click", "HIGH_EDIT_CLICK");
},
$ON_EVENT_EDITING_AREA_DBLCLICK : function(ev){
var elDBClickEventTarget = ev.element;
if(elDBClickEventTarget.tagName != "IMG"){
return;
}
if(this._hasThumbnail(elDBClickEventTarget.id)){
this.oApp.exec("CLOSE_QE_LAYER"); // 퀵에디터 닫음
}
},
$ON_HIGH_EDIT_CLICK : function(){
if(!!this.welElement && this._hasThumbnail(this.elElement.id) && this.welElement.attr("s_subtype") == "photo"){
this.oApp.exec("IMG_SE_REEDIT_PHOTO", [this.welElement]);
}
},
$ON_EVENT_EDITING_AREA_MOUSEDOWN : function(ev){
this.elEventTarget = null;
if(ev.element.tagName != null && (ev.element.tagName).toLowerCase() == 'img'){
this.elEventTarget = ev.element;
}
},
$ON_EVENT_EDITING_AREA_MOUSEUP : function(ev){
if(!!this.elEventTarget && this.elEventTarget == ev.element){
this._mouseUp_WYSIWYGDoc(ev);
}else{
this.elEventTarget = null;
}
},
$ON_REGISTER_CONVERTERS : function(){
this.oApp.exec("ADD_CONVERTER", ["IR_TO_DB", jindo.$Fn(this.irToDB, this).bind()]);
},
irToDB : function(sHtml){
// irToDB시점에 임의로 추가한 속성을 제거한다.
sHtml = sHtml.replace(/sQEId\s*=\s*\"([^>"]*)\"/i,'');
// 'element의 초기속성'을 담은 array를 초기화
this._aQEImg = [];
return sHtml;
},
_mouseUp_WYSIWYGDoc : function(wevE){
if(!wevE.element || 'IMG' != wevE.element.tagName){
return;
}
// 특정 이미지만 퀵 에디터를 사용할 수 없음!
this.elElement = wevE.element;
this.welElement = jindo.$Element(wevE.element);
if('false' == this.welElement.attr("imgqe")){
return;
}
// 기본 bordercolor를 셋팅
this.elElement.style.borderColor = this.elElement.style.borderLeftColor || "rgb(0, 0, 0)";
// sQEId 셋팅
var sQEId = this.welElement.attr("sQEId");
if('undefined' == typeof(sQEId) || !sQEId){
sQEId = nhn.husky.SE2M_Utils.getUniqueId("QE_");
this._aQEImg[sQEId] = this._getInfoImage(this.elElement);
this.welElement.attr("sQEId", sQEId); // key생성
} else if("undefined" == typeof ( this._aQEImg[sQEId] ) || !this._aQEImg[sQEId] ) {
//[SMARTEDITORSUS-356] 임시저장 이후 비워진 array채우는 역할.
// 에디터 초기화시 call되는 func이 생기면 그쪽으로 리팩토링이 필요함.
this._aQEImg[sQEId] = this._getInfoImage(this.elElement);
}
this._panelReSetting();
this._hideImagePalette();
this.oApp.exec("OPEN_QE_LAYER", [this.elElement, this.elQELayer, "img"]);
},
/**
* 이미지 정보를 저장
* @param {Object} elElement
*/
_getInfoImage : function(elElement){
var htImageInfo = {
width : elElement.width,
height : elElement.height,
rwidth : this.welElement.attr("rwidth") || '', // 삽입 시의 이미지 width
rheight : this.welElement.attr("rheight") || '', // 삽입 시의 이미지 height
border : elElement.border || 0,
borderColor : elElement.style.borderLeftColor || "rgb(0, 0, 0)" ,
align : elElement.align || ""
};
return htImageInfo;
},
_panelReSetting : function(){
var elImage = this.elElement;
this.elPanelImgBorder.value = (this.welElement.attr("border") || 0);
this.elPanelImgWidth.value = (elImage.width || this.welElement.width());
this.elPanelImgHeight.value = (elImage.height || this.welElement.height());
this.elBtnBGPalette.style.backgroundColor = elImage.style.borderLeftColor || "rgb(0, 0, 0)";
// 고급편집 버튼 보여주기 여부 체크 (이미지 업로드로 올린 사진 && 첨부영역에 썸네일이 있어야 함)
if(this._hasThumbnail(elImage.id) && this.welElement.attr("s_subtype") == "photo"){
jindo.$Element(this.elPanelHighEdit).show();
}else{
jindo.$Element(this.elPanelHighEdit).hide();
}
},
_hideImagePalette : function(){
this.elPanelBGPaletteHolder.parentNode.style.display = "none";
this.oApp.exec("HIDE_COLOR_PALETTE");
},
/**
* 초기화 버튼 클릭시 사용
* @param {Event} weEvent
*/
$ON_IMG_QE_RESET_PALETTE : function(weEvent){
var sQEId = this.welElement.attr("sQEId");
var elTemp = this._aQEImg[sQEId];
if(!!elTemp){
var htImageSize = {
"width" : elTemp.width,
"height" : elTemp.height,
"rwidth" : elTemp.rwidth,
"rheight" : elTemp.rheight
};
this.welElement.css("borderWidth", elTemp.border+"px");
this.welElement.css("borderStyle", "solid");
this.welElement.css("borderColor", elTemp.borderColor);
this.welElement.attr("border", elTemp.border);
this.welElement.attr("align", elTemp.align);
this.welElement.attr("rwidth", elTemp.rwidth);
this.welElement.attr("rheight", elTemp.rheight);
this._changeSizeValue(htImageSize);
}
this._panelReSetting();
},
/**
* 정비례하게 증감
* @param {Event} weEvent
*/
$ON_IMG_QE_RESIZE_START_PALETTE : function(weEvent){
var elCurrentFocus = jindo.$Element(weEvent.element);
if(elCurrentFocus.isEqual(this.elPanelImgWidth)){
this.elPanelImgWidth.readOnly = false;
this.elPanelImgHeight.readOnly = true;
}else{
this.elPanelImgWidth.readOnly = true;
this.elPanelImgHeight.readOnly = false;
}
},
$ON_IMG_QE_ENROLL_ATTR : function(welQEImg){
welQEImg.attr("imgqe",true);
},
$ON_IMG_QE_RESIZE_PALETTE : function(weEvent){
this._resizeImage(weEvent.element);
weEvent.stop();
},
_resizeImage : function(elEvent){
var elImage = this.elElement;
var elCurrentFocus = jindo.$Element(elEvent);
var nImgAfterWidth = this.elPanelImgWidth.value;
var nImgAfterHeight = this.elPanelImgHeight.value;
var nImgBeforeWidth = (elImage.width || this.welElement.width());
var nImgBeforeHeight = (elImage.height || this.welElement.height());
var nReserveWidth = this.welElement.attr("rwidth");
var nReserveHeight = this.welElement.attr("rheight");
var nTemp;
if(elCurrentFocus.isEqual(this.elPanelImgWidth)){ // change width
if(this.nMaxWidth > nImgAfterWidth && nImgAfterWidth > 0){
nTemp = nImgAfterWidth/nImgBeforeWidth;
var htImageSize = {
nAdjustWidth : Number(nImgAfterWidth),
nAdjustHeight : Number(nImgBeforeHeight * nTemp),
nImgBeforeWidth : nImgBeforeWidth,
nImgBeforeHeight : nImgBeforeHeight,
nReserveWidth : nReserveWidth,
nReserveHeight : nReserveHeight
};
if(this.bImgAutoAdjust){ /* 가로/세로 비율 유지하면서 사이즈 조절 */
var htAdjustImageSize = this._adjustViewImageSize(htImageSize);
this._changeSizeValue(htAdjustImageSize);
}else{
var htAdjustSize = this._adjustViewImageWidth(htImageSize);
this._changeWidth(htAdjustSize);
}
}
}else{ // change height
if(this.nMaxHeight > nImgAfterHeight && nImgAfterHeight > 0){
nTemp = nImgAfterHeight/nImgBeforeHeight;
var htImageSize = {
nAdjustWidth : Number(nImgBeforeWidth * nTemp),
nAdjustHeight : Number(nImgAfterHeight),
nImgBeforeWidth : nImgBeforeWidth,
nImgBeforeHeight : nImgBeforeHeight,
nReserveWidth : nReserveWidth,
nReserveHeight : nReserveHeight
};
if(this.bImgAutoAdjust){ /* 가로/세로 비율 유지하면서 사이즈 조절 */
var htAdjustImageSize = this._adjustViewImageSize(htImageSize);
this._changeSizeValue(htAdjustImageSize);
}else{
this.welElement.attr("noadjust", true);
this._changeHeight(htImageSize);
}
}
}
// 속성 width와 height보다 style의 width와 height 우선시 되기 때문에 둘다 변경해 준다.
this.oApp.exec("OPEN_QE_LAYER", [elImage, this.elQELayer, "img"]);
this._panelReSetting();
},
_changeSizeValue : function(htSize){
var elImage = this.elElement;
elImage.width = htSize.width;
elImage.style.width = htSize.width + "px";
elImage.height = htSize.height;
elImage.style.height = htSize.height + "px";
// 이미지 퀵 에디터에서 설정한 이미지의 width/height 를 이미지에 적용 ([SMARTEDITORSUS-279] related)
this.welElement.attr("rwidth", htSize.rwidth);
this.welElement.css("rwidth", htSize.rwidth + "px");
this.welElement.attr("rheight", htSize.rheight);
this.welElement.css("rheight", htSize.rheight+ "px");
},
_changeWidth : function(htSize){
var elImage = this.elElement;
elImage.width = htSize.width;
elImage.style.width = htSize.width + "px";
elImage.height = htSize.height;
elImage.style.height = htSize.height + "px";
// 이미지 퀵 에디터에서 설정한 이미지의 width 를 이미지에 적용, height 유지 ([SMARTEDITORSUS-279] related)
this.welElement.attr("rwidth", htSize.rwidth);
this.welElement.css("rwidth", htSize.rwidth + "px");
this.welElement.attr("height", htSize.height);
this.welElement.css("height", htSize.height + "px");
},
_changeHeight : function(htSize){
var elImage = this.elElement;
elImage.height = htSize.nAdjustHeight;
elImage.style.height = htSize.nAdjustHeight + "px";
// 이미지 퀵 에디터에서 설정한 이미지의 height 를 이미지에 적용 ([SMARTEDITORSUS-279] related)
this.welElement.attr("rheight", htSize.nAdjustHeight);
this.welElement.css("rheight", htSize.nAdjustHeight + "px");
this.welElement.attr("rwidth", htSize.nReserveWidth);
this.welElement.css("rwidth", htSize.nReserveWidth + "px");
},
/*
* [SMARTEDITORSUS-258, 276, 279]
* 1) 에디터 가로폭 개선에 따라 이미지 첨부 시 가로폭 크기에 맞는 이미지의 사이즈 조절이 필요함
* 2) 에디터 가로폭 꺽쇠가 노출되는 경우에만 에디터 본문 안에 보이는 이미지의 사이즈를 조절함
* 3) 사용자가 조절하는 경우(포토업로더, 이미지 퀵 에디터에서 변경) 이외에는 이미지의 사이즈를 조절하지 않음
* [SMARTEDITORSUS-1858] 가로폭 꺽쇠 적용과 상관없이 큰 이미지는 에디터 가로폭에 맞게 리사이즈되도록 변경
*/
_adjustViewImageSize : function(htSize){
var htImageSize = {
"width" : htSize.nAdjustWidth,
"height" : htSize.nAdjustHeight,
"rwidth" : htSize.nAdjustWidth,
"rheight" : htSize.nAdjustHeight
};
var welWysiwygBody = jindo.$Element(this.oApp.getWYSIWYGDocument().body);
if(welWysiwygBody){
var nEditorWidth = welWysiwygBody.width();
if(htSize.nAdjustWidth > nEditorWidth){
htImageSize.width = htSize.nImgBeforeWidth;
htImageSize.height = htSize.nImgBeforeHeight;
htImageSize.rwidth = htSize.nReserveWidth;
htImageSize.rheight = htSize.nReserveHeight;
var msg = this.oApp.$MSG("SE_QuickEditor_Image.exceedMaxSize").replace("${nEditorWidth}", nEditorWidth);
alert(msg);
}
}
return htImageSize;
},
_adjustViewImageWidth : function(htSize){
var htImageSize = {
"width" : htSize.nAdjustWidth,
"height" : htSize.nImgBeforeHeight,
"rwidth" : htSize.nAdjustWidth,
"rheight" : htSize.nReserveHeight
};
var welWysiwygBody = jindo.$Element(this.oApp.getWYSIWYGDocument().body);
if(welWysiwygBody){
var nEditorWidth = welWysiwygBody.width();
if(htSize.nAdjustWidth > nEditorWidth){
htImageSize.width = htSize.nImgBeforeWidth;
htImageSize.rwidth = htSize.nReserverWidth;
var msg = this.oApp.$MSG("SE_QuickEditor_Image.exceedMaxSize").replace("${nEditorWidth}", nEditorWidth);
alert(msg);
}
}
return htImageSize;
},
/**
* '가로 세로 비율 유지' 옵션 추가 ([SMARTEDITORSUS-150] related)
* 1) 옵션 체크 : 첨부한 사진의 가로나 세로의 길이를 변경할 경우 고정 비율로 이미지 사이즈가 조절됨 (this.bImgAutoAdjust -> true)
* 2) 옵션 체크 해제 : 첨부한 사진의 가로/세로 길이를 따로따로 설정할 수 있음 (this.bImgAutoAdjust -> false)
*/
$ON_IMG_SIZE_ADJUST : function(){
this.bImgAutoAdjust = (this.elCheckImgAutoAdjust.checked) ? true : false;
},
$ON_CLOSE_SUB_LAYER_QE : function(){
if(typeof this.elPanelBGPaletteHolder != 'undefined'){
this.elPanelBGPaletteHolder.parentNode.style.display = "none";
}
if(typeof this.elPanelBGIMGPaletteHolder != 'undefined'){
this.elPanelBGIMGPaletteHolder.parentNode.style.display = "none";
}
},
$ON_IMG_QE_TOGGLE_BGC_PALETTE : function(){ // border BGC 버튼 토글
if(this.elPanelBGPaletteHolder.parentNode.style.display == "block"){
this._hideImagePalette();
}else{
this._showImagePalette();
}
},
$ON_IMG_QE_ALIGN_PALETTE : function(wevE){
var welButtonEvent = jindo.$Element(wevE.element); // Click이 일어난 정렬 버튼
if(welButtonEvent.hasClass("left")){
this.welElement.attr("align", "left");
this.welElement.css("clear", "left");
}else if(welButtonEvent.hasClass("right")){
this.welElement.attr("align", "right");
this.welElement.css("clear", "right");
}else{
this.welElement.attr("align", "");
this.welElement.css("clear", "both");
}
},
$ON_IMG_QE_SET_BORDER : function(nBorderSize){ // border size
this.welElement.css("borderWidth", nBorderSize + "px");
this.welElement.css("borderStyle", "solid");
this.welElement.attr("border", nBorderSize);
this.elElement.border = nBorderSize;
},
$ON_IMG_QE_SET_BGC_FROM_PALETTE : function(sColorCode){ // border color
this.elBtnBGPalette.style.backgroundColor = sColorCode;
this.elElement.style.borderColor = sColorCode;
if(this.elPanelBGPaletteHolder.parentNode.style.display == "block"){
this._hideImagePalette();
}
},
_showImagePalette : function(){
this.elPanelBGPaletteHolder.parentNode.style.display = "block";
this.oApp.exec("SHOW_COLOR_PALETTE", ["IMG_QE_SET_BGC_FROM_PALETTE", this.elPanelBGPaletteHolder]);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment