diff --git a/addons/resize_image/css/resize_image.css b/addons/resize_image/css/resize_image.css deleted file mode 100644 index 2706e2f9b..000000000 --- a/addons/resize_image/css/resize_image.css +++ /dev/null @@ -1,5 +0,0 @@ -@charset "utf-8"; - -#forOriginalImageAreaBackground { z-index:1001; background-color:#AAAAAA; top:0px; left:0px; position:relative; padding:0; border:8px solid #444444; white-space:nowrap; } -#forOriginalImageArea { visibility:hidden; padding:0px; margin:0px; width:100%; height:100%; top:0px; left:0px; position:absolute; z-index:1000; text-align:left; overflow:hidden; background-color:#000000;} -#fororiginalimage { z-index:1002; margin:0; padding:0; } diff --git a/addons/resize_image/iconClose.png b/addons/resize_image/iconClose.png new file mode 100755 index 000000000..856217713 Binary files /dev/null and b/addons/resize_image/iconClose.png differ diff --git a/addons/resize_image/iconLeft.png b/addons/resize_image/iconLeft.png new file mode 100755 index 000000000..8709013bf Binary files /dev/null and b/addons/resize_image/iconLeft.png differ diff --git a/addons/resize_image/iconRight.png b/addons/resize_image/iconRight.png new file mode 100755 index 000000000..62807eb95 Binary files /dev/null and b/addons/resize_image/iconRight.png differ diff --git a/addons/resize_image/js/resize_image.js b/addons/resize_image/js/resize_image.js index 754297b78..1de134e96 100644 --- a/addons/resize_image/js/resize_image.js +++ b/addons/resize_image/js/resize_image.js @@ -1,52 +1,67 @@ /** * @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경 **/ +var imageGalleryIndex = new Array(); function resizeImageContents() { - // 일단 모든 이미지에 대한 체크를 시작 - var objs = xGetElementsByTagName("IMG"); - for(var i in objs) { - var obj = objs[i]; - if(!obj.parentNode) continue; + // 이미지 태그 정규 표현식 + var img_regx = new RegExp(" parent_width - 2) { - obj.style.cursor = "pointer"; - var new_w = parent_width - 2; - var new_h = Math.round(obj_height * new_w/obj_width); - xWidth(obj, new_w); - xHeight(obj, new_h); - xAddEventListener(obj,"click", showOriginalImage); - // 선택된 이미지가 부모보다 작을 경우 일단 원본 이미지를 불러와서 비교 - } else { - var orig_img = new Image(); - orig_img.src = obj.src; - if(orig_img.width > parent_width - 2 || orig_img.width != obj_width) { - obj.style.cursor = "pointer"; - xAddEventListener(obj,"click", showOriginalImage); + // files 디렉토리 또는 http로 시작하는 이미지들이 아니면 패스 + if(/^(http|https):\/\//i.test(obj.src) || /\/files\/attach\/images/i.test(obj.src)) { + + var parent = obj.parentNode; + while(parent) { + if(/(document|comment)_([0-9]+)_([0-9]+)/i.test(parent.className) ) break; + parent = parent.parentNode; + } + + var dummy = xCreateElement("div"); + dummy.style.visibility = "hidden"; + dummy.style.border = "1px solid red"; + parent.parentNode.insertBefore(dummy, parent); + + var parent_width = xWidth(dummy); + parent.parentNode.removeChild(dummy); + dummy = null; + + var obj_width = xWidth(obj); + var obj_height = xHeight(obj); + + // 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌) + if(obj_width > parent_width - 2) { + obj.style.cursor = "pointer"; + var new_w = parent_width - 2; + var new_h = Math.round(obj_height * new_w/obj_width); + xWidth(obj, new_w); + xHeight(obj, new_h); + xAddEventListener(obj,"click", showOriginalImage); + // 선택된 이미지가 부모보다 작을 경우 일단 원본 이미지를 불러와서 비교 + } else { + var orig_img = new Image(); + orig_img.src = obj.src; + if(orig_img.width > parent_width - 2 || orig_img.width != obj_width) { + obj.style.cursor = "pointer"; + xAddEventListener(obj,"click", showOriginalImage); + } + } + + imageGalleryIndex[j][i] = obj.src; + obj.setAttribute("rel", j+','+i); } } } @@ -60,73 +75,198 @@ function showOriginalImage(evt) { var e = new xEvent(evt); var obj = e.target; var src = obj.src; + var rel = obj.getAttribute('rel'); + displayOriginalImage(src, rel); +} + +function displayOriginalImage(src, rel) { + // 투명 배경을 지정 + var bgObj = xGetElementById("forOriginalImageBGArea"); + if(!bgObj) { + bgObj = xCreateElement("div"); + bgObj.id = "forOriginalImageBGArea"; + bgObj.style.visibility = "hidden"; + bgObj.style.backgroundColor = "#000000"; + bgObj.style.zIndex = 500; + bgObj.style.position = "absolute"; + document.body.appendChild(bgObj); + } + xWidth(bgObj, xClientWidth()); + xHeight(bgObj, xClientHeight()); + xLeft(bgObj, xScrollLeft()); + xTop(bgObj, xScrollTop()); + bgObj.style.opacity = .5; + bgObj.style.filter = "alpha(opacity=50);"; + bgObj.style.visibility = "visible"; + + // 원본 이미지 노출을 위한 준비 + var foreObj = xGetElementById("forOriginalImageArea"); + if(!foreObj) { + foreObj = xCreateElement("div"); + foreObj.id = "forOriginalImageArea"; + foreObj.style.visibility = "hidden"; + foreObj.style.overflow = "hidden"; + foreObj.style.position = "absolute"; + foreObj.style.zIndex = 510; + document.body.appendChild(foreObj); + } + xWidth(foreObj, xClientWidth()); + xHeight(foreObj, xClientHeight()); + xLeft(foreObj, xScrollLeft()); + xTop(foreObj, xScrollTop()); + foreObj.style.visibility = "visible"; + + var foreWidth = xWidth(foreObj); + var foreHeight = xHeight(foreObj); + + // 버튼 + var iconClose = xGetElementById("forOriginalImageIconClose"); + if(!iconClose) { + iconClose = xCreateElement("img"); + iconClose.id = "forOriginalImageIconClose"; + iconClose.style.position = "absolute"; + iconClose.src = request_uri+"addons/resize_image/iconClose.png"; + iconClose.style.width = iconClose.style.height = "60px"; + iconClose.className = 'iePngFix'; + iconClose.style.zIndex = 530; + iconClose.style.cursor = "pointer"; + foreObj.appendChild(iconClose); + } + iconClose.style.visibility = 'visible'; + xLeft(iconClose, (foreWidth-60)/2); + xTop(iconClose, 10); + + var iconLeft = xGetElementById("forOriginalImageIconLeft"); + if(!iconLeft) { + iconLeft = xCreateElement("img"); + iconLeft.id = "forOriginalImageIconLeft"; + iconLeft.style.position = "absolute"; + iconLeft.src = request_uri+"addons/resize_image/iconLeft.png"; + iconLeft.style.width = iconLeft.style.height = "60px"; + iconLeft.style.zIndex = 530; + iconLeft.className = 'iePngFix'; + iconLeft.style.cursor = "pointer"; + foreObj.appendChild(iconLeft); + } + iconLeft.onclick = null; + xLeft(iconLeft, 10); + xTop(iconLeft, (foreHeight-60)/2); + iconLeft.style.visibility = 'hidden'; + + var iconRight = xGetElementById("forOriginalImageIconRight"); + if(!iconRight) { + iconRight = xCreateElement("img"); + iconRight.id = "forOriginalImageIconRight"; + iconRight.style.position = "absolute"; + iconRight.src = request_uri+"addons/resize_image/iconRight.png"; + iconRight.style.width = iconRight.style.height = "60px"; + iconRight.className = 'iePngFix'; + iconRight.style.zIndex = 530; + iconRight.style.cursor = "pointer"; + foreObj.appendChild(iconRight); + } + iconRight.onclick = null; + xLeft(iconRight, foreWidth - 10 - 60); + xTop(iconRight, (foreHeight-60)/2); + iconRight.style.visibility = 'hidden'; + + + if(rel) { + var tmp = rel.split(','); + var j = parseInt(tmp[0],10); + var i = parseInt(tmp[1],10); + var length = imageGalleryIndex[j].length; + + if(length>1) { + + var prev = i-1; + var next = i+1; + if(prev>=0) { + iconLeft.style.visibility = 'visible'; + iconLeft.onclick = function() { displayOriginalImage(imageGalleryIndex[j][prev], j+','+prev); } + } else { + iconLeft.style.visibility = 'hidden'; + } + + if(next\"original"); - document.body.appendChild(dummy); } - var orig_image = xGetElementById("fororiginalimage"); - var tmp_image = new Image(); - tmp_image.src = src; - var image_width = tmp_image.width; - var image_height = tmp_image.height; + // 원본 이미지를 추가 + var origObj = xGetElementById("forOriginalImage"); + if(origObj) foreObj.removeChild(origObj); - orig_image.style.margin = "0px 0px 0px 0px"; - orig_image.style.cursor = "move"; - orig_image.src = src; + origObj = null; + origObj = xCreateElement("img"); + origObj.id = "forOriginalImage"; + origObj.style.border = "7px solid #ffffff"; + origObj.style.visibility = "hidden"; + origObj.style.cursor = "move"; + origObj.style.zIndex = 520; + foreObj.appendChild(origObj); - var areabg = xGetElementById("forOriginalImageAreaBackground"); - xWidth(areabg, image_width+16); - xHeight(areabg, image_height+16); + origObj.style.position = "relative"; + origObj.src = src; - var area = xGetElementById("forOriginalImageArea"); - xLeft(area, xScrollLeft()); - xTop(area, xScrollTop()); - xWidth(area, xWidth(document)); - xHeight(area, xHeight(document)); - area.style.visibility = "visible"; - var area_width = xWidth(area); - var area_height = xHeight(area); + var objWidth = xWidth(origObj); + var objHeight = xHeight(origObj); - var x = parseInt((area_width-image_width)/2,10); - var y = parseInt((area_height-image_height)/2,10); - if(x<0) x = 0; - if(y<0) y = 0; - xLeft(areabg, x); - xTop(areabg, y); + var posX = 0; + var posY = 0; + + if(objWidth < foreWidth) posX = parseInt( (foreWidth - objWidth) / 2, 10); + if(objHeight < foreHeight) posY = parseInt( (foreHeight - objHeight) / 2, 10); + + xLeft(origObj, posX); + xTop(origObj, posY); + + origObj.style.visibility = "visible"; var sel_list = xGetElementsByTagName("select"); for (var i = 0; i < sel_list.length; ++i) sel_list[i].style.visibility = "hidden"; - xAddEventListener(orig_image, "mousedown", origImageDragEnable); - xAddEventListener(orig_image, "dblclick", closeOriginalImage); + xAddEventListener(origObj, "mousedown", origImageDragEnable); + xAddEventListener(origObj, "dblclick", closeOriginalImage); + xAddEventListener(iconClose, "mousedown", closeOriginalImage); xAddEventListener(window, "scroll", closeOriginalImage); xAddEventListener(window, "resize", closeOriginalImage); xAddEventListener(document, 'keydown',closeOriginalImage); - - areabg.style.visibility = 'visible'; } /** * @brief 원본 이미지 보여준 후 닫는 함수 **/ function closeOriginalImage(evt) { - var area = xGetElementById("forOriginalImageArea"); - if(area.style.visibility != "visible") return; - area.style.visibility = "hidden"; - xGetElementById("forOriginalImageAreaBackground").style.visibility = "hidden"; + var bgObj = xGetElementById("forOriginalImageBGArea"); + var foreObj = xGetElementById("forOriginalImageArea"); + var origObj = xGetElementById("forOriginalImage"); + var iconClose = xGetElementById("forOriginalImageIconClose"); + var iconLeft = xGetElementById("forOriginalImageIconLeft"); + var iconRight = xGetElementById("forOriginalImageIconRight"); var sel_list = xGetElementsByTagName("select"); for (var i = 0; i < sel_list.length; ++i) sel_list[i].style.visibility = "visible"; - xRemoveEventListener(area, "mousedown", closeOriginalImage); + xRemoveEventListener(origObj, "mousedown", origImageDragEnable); + xRemoveEventListener(origObj, "dblclick", closeOriginalImage); + xRemoveEventListener(iconClose, "mousedown", closeOriginalImage); xRemoveEventListener(window, "scroll", closeOriginalImage); xRemoveEventListener(window, "resize", closeOriginalImage); xRemoveEventListener(document, 'keydown',closeOriginalImage); + + bgObj.style.visibility = "hidden"; + foreObj.style.visibility = "hidden"; + origObj.style.visibility = "hidden"; + iconClose.style.visibility = 'hidden'; + iconLeft.style.visibility = 'hidden'; + iconRight.style.visibility = 'hidden'; } /** @@ -136,7 +276,7 @@ var origDragManager = {obj:null, isDrag:false} function origImageDragEnable(evt) { var e = new xEvent(evt); var obj = e.target; - if(obj.id != "fororiginalimage") return; + if(obj.id != "forOriginalImage") return; obj.draggable = true; obj.startX = e.pageX; @@ -154,9 +294,9 @@ function origImageDrag(obj, px, py) { var x = px - obj.startX; var y = py - obj.startY; - var areabg = xGetElementById("forOriginalImageAreaBackground"); - xLeft(areabg, xLeft(areabg)+x); - xTop(areabg, xTop(areabg)+y); + var origObj = xGetElementById("forOriginalImage"); + xLeft(origObj, xLeft(origObj)+x); + xTop(origObj, xTop(origObj)+y); obj.startX = px; obj.startY = py; @@ -165,7 +305,7 @@ function origImageDrag(obj, px, py) { function origImageDragMouseDown(evt) { var e = new xEvent(evt); var obj = e.target; - if(obj.id != "fororiginalimage" || !obj.draggable) return; + if(obj.id != "forOriginalImage" || !obj.draggable) return; if(obj) { xPreventDefault(evt); @@ -193,7 +333,7 @@ function origImageDragMouseMove(evt) { var e = new xEvent(evt); var obj = e.target; if(!obj) return; - if(obj.id != "fororiginalimage") { + if(obj.id != "forOriginalImage") { xPreventDefault(evt); xRemoveEventListener(document, 'mouseup', origImageDragMouseUp, false); xRemoveEventListener(document, 'mousemove', origImageDragMouseMove, false); diff --git a/addons/resize_image/resize_image.addon.php b/addons/resize_image/resize_image.addon.php index 3791925ae..dc8099fc6 100644 --- a/addons/resize_image/resize_image.addon.php +++ b/addons/resize_image/resize_image.addon.php @@ -9,6 +9,5 @@ if($called_position == 'after_module_proc' && Context::getResponseMethod()!="XMLRPC") { Context::addJsFile('./addons/resize_image/js/resize_image.js'); - Context::addCSSFile('./addons/resize_image/css/resize_image.css'); } ?>