본문내 이미지 크기 조절 애드온의 동작 방식 변경 및 원본 이미지 보기 기능 변경

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@4256 201d5d3c-b55e-5fd7-737f-ddc643e51545

addons/resize_image/css/resize_image.css

@@ -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; }

addons/resize_image/js/resize_image.js

@@ -1,52 +1,67 @@
 /**
  * @brief 화면내에서 상위 영역보다 이미지가 크면 리사이즈를 하고 클릭시 원본을 보여줄수 있도록 변경
  **/
+var imageGalleryIndex = new Array();
 function resizeImageContents() {
-    // 일단 모든 이미지에 대한 체크를 시작
+    // 이미지 태그 정규 표현식
-    var objs = xGetElementsByTagName("IMG");
+    var img_regx = new RegExp("<img","im");
-    for(var i in objs) {
+    
-        var obj = objs[i];
+    // xe_content 내의 이미지 요소들에 대한 체크
-        if(!obj.parentNode) continue;
+    var xe_objs = xGetElementsByClassName("xe_content");
+    for(var j=0;j<xe_objs.length;j++) {
 
-        if(/\/modules\//i.test(obj.src)) continue;
+        imageGalleryIndex[j] = new Array();
-        if(/\/layouts\//i.test(obj.src)) continue;
-        if(/\/widgets\//i.test(obj.src)) continue;
-        if(/\/classes\//i.test(obj.src)) continue;
-        if(/\/common\/tpl\//i.test(obj.src)) continue;
-        if(/\/member_extra_info\//i.test(obj.src)) continue;
 
-        // 상위 node의 className이 document_ 또는 comment_ 로 시작하지 않으면 패스
+        var html = xInnerHtml(xe_objs[j]);
-        var parent = obj.parentNode;
+        if(!img_regx.test(html)) continue;
-        while(parent) {
-            if(parent.className && parent.className.search(/xe_content|document_|comment_/i) != -1) break;
-            parent = parent.parentNode;
-        }
-        if (!parent || parent.className.search(/xe_content|document_|comment_/i) < 0) continue;
 
-        if(parent.parentNode) xWidth(parent, xWidth(parent.parentNode));
+        // 모든 이미지에 대한 체크를 시작
-        parent.style.width = '100%';
+        var objs = xGetElementsByTagName("IMG", xe_objs[j]);
-        parent.style.overflow = 'hidden';
 
-        var parent_width = xWidth(parent);
+        for(var i=0;i<objs.length;i++) {
-        if(parent.parentNode && xWidth(parent.parentNode)<parent_width) parent_width = xWidth(parent.parentNode);
+            var obj = objs[i];
-        var obj_width = xWidth(obj);
-        var obj_height = xHeight(obj);
 
-        // 만약 선택된 이미지의 가로 크기가 부모의 가로크기보다 크면 리사이즈 (이때 부모의 가로크기 - 2 정도로 지정해줌)
+            // files 디렉토리 또는 http로 시작하는 이미지들이 아니면 패스
-        if(obj_width > parent_width - 2) {
+            if(/^(http|https):\/\//i.test(obj.src) || /\/files\/attach\/images/i.test(obj.src)) {
-            obj.style.cursor = "pointer";
+
-            var new_w = parent_width - 2;
+                var parent = obj.parentNode;
-            var new_h = Math.round(obj_height * new_w/obj_width);
+                while(parent) {
-            xWidth(obj, new_w);
+                    if(/(document|comment)_([0-9]+)_([0-9]+)/i.test(parent.className) ) break;
-            xHeight(obj, new_h);
+                    parent = parent.parentNode;
-            xAddEventListener(obj,"click", showOriginalImage);
+                }
-        // 선택된 이미지가 부모보다 작을 경우 일단 원본 이미지를 불러와서 비교
+
-        } else {
+                var dummy = xCreateElement("div");
-            var orig_img = new Image();
+                dummy.style.visibility = "hidden";
-            orig_img.src = obj.src;
+                dummy.style.border = "1px solid red";
-            if(orig_img.width > parent_width - 2 || orig_img.width != obj_width) {
+                parent.parentNode.insertBefore(dummy, parent);
-                obj.style.cursor = "pointer";
+
-                xAddEventListener(obj,"click", showOriginalImage);
+                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<length) {
+                iconRight.style.visibility = 'visible';
+                iconRight.onclick = function() { displayOriginalImage(imageGalleryIndex[j][next], j+','+next); }
+            } else {
+                iconRight.style.visibility = 'hidden';
+            }
+
+        }
 
-    if(!xGetElementById("forOriginalImageArea")) {
-        var dummy = xCreateElement("div");
-        dummy.id = "forOriginalImageArea";
-        dummy.style.visibility = "hidden";
-        xInnerHtml(dummy, "<div id=\"forOriginalImageAreaBackground\"><img src=\""+request_uri+"common/tpl/images/blank.gif\" alt=\"original image\" border=\"0\" id=\"fororiginalimage\" /></div>");
-        document.body.appendChild(dummy);
     }
 
-    var orig_image = xGetElementById("fororiginalimage");
+    // 원본 이미지를 추가
-    var tmp_image = new Image();
+    var origObj = xGetElementById("forOriginalImage");
-    tmp_image.src = src;
+    if(origObj) foreObj.removeChild(origObj);
-    var image_width = tmp_image.width;
-    var image_height = tmp_image.height;
 
-    orig_image.style.margin = "0px 0px 0px 0px";
+    origObj = null;
-    orig_image.style.cursor = "move";
+    origObj = xCreateElement("img");
-    orig_image.src = src;
+    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");
+    origObj.style.position = "relative";
-    xWidth(areabg, image_width+16);
+    origObj.src = src;
-    xHeight(areabg, image_height+16);
 
-    var area = xGetElementById("forOriginalImageArea");
+    var objWidth = xWidth(origObj);
-    xLeft(area, xScrollLeft());
+    var objHeight = xHeight(origObj);
-    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 x = parseInt((area_width-image_width)/2,10);
+    var posX = 0;
-    var y = parseInt((area_height-image_height)/2,10);
+    var posY = 0;
-    if(x<0) x = 0;
+
-    if(y<0) y = 0;
+    if(objWidth < foreWidth) posX = parseInt( (foreWidth - objWidth) / 2, 10);
-    xLeft(areabg, x);
+    if(objHeight < foreHeight) posY = parseInt( (foreHeight - objHeight) / 2, 10);
-    xTop(areabg, y);
+
+    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(origObj, "mousedown", origImageDragEnable);
-    xAddEventListener(orig_image, "dblclick", closeOriginalImage);
+    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");
+    var bgObj = xGetElementById("forOriginalImageBGArea");
-    if(area.style.visibility != "visible") return;
+    var foreObj = xGetElementById("forOriginalImageArea");
-    area.style.visibility = "hidden";
+    var origObj = xGetElementById("forOriginalImage");
-    xGetElementById("forOriginalImageAreaBackground").style.visibility = "hidden";
+    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");
+    var origObj = xGetElementById("forOriginalImage");
-    xLeft(areabg, xLeft(areabg)+x);
+    xLeft(origObj, xLeft(origObj)+x);
-    xTop(areabg, xTop(areabg)+y);
+    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);

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');
     }
 ?>