이미지링크 에디터컴포넌트 다시 추가

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

modules/editor/components/image_link/image_link.class.php

@@ -0,0 +1,97 @@
+<?php
+    /**
+     * @class  image_link
+     * @author zero (zero@nzeo.com)
+     * @brief  이미지를 추가하거나 속성을 수정하는 컴포넌트
+     **/
+
+    class image_link extends EditorHandler { 
+
+        // editor_sequence 는 에디터에서 필수로 달고 다녀야 함....
+        var $editor_sequence = 0;
+        var $component_path = '';
+
+        /**
+         * @brief editor_sequence과 컴포넌트의 경로를 받음
+         **/
+        function image_link($editor_sequence, $component_path) {
+            $this->editor_sequence = $editor_sequence;
+            $this->component_path = $component_path;
+        }
+
+        /**
+         * @brief popup window요청시 popup window에 출력할 내용을 추가하면 된다
+         **/
+        function getPopupContent() {
+            // 템플릿을 미리 컴파일해서 컴파일된 소스를 return
+            $tpl_path = $this->component_path.'tpl';
+            $tpl_file = 'popup.html';
+
+            Context::set("tpl_path", $tpl_path);
+
+            $oTemplate = &TemplateHandler::getInstance();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+        /**
+         * @brief 에디터 컴포넌트가 별도의 고유 코드를 이용한다면 그 코드를 html로 변경하여 주는 method
+         *
+         * 이미지나 멀티미디어, 설문등 고유 코드가 필요한 에디터 컴포넌트는 고유코드를 내용에 추가하고 나서
+         * DocumentModule::transContent() 에서 해당 컴포넌트의 transHtml() method를 호출하여 고유코드를 html로 변경
+         **/
+        function transHTML($xml_obj) {
+            $src = $xml_obj->attrs->src;
+            $width = $xml_obj->attrs->width;
+            $height = $xml_obj->attrs->height;
+            $align = $xml_obj->attrs->align;
+            $alt = $xml_obj->attrs->alt;
+            $border = (int)$xml_obj->attrs->border;
+            $link_url = $xml_obj->attrs->link_url;
+            $open_window = $xml_obj->attrs->open_window;
+            $style = $xml_obj->attrs->style;
+            $margin = (int)$xml_obj->attrs->margin;
+
+            if(!$alt) {
+                $tmp_arr = explode('/',$src);
+                $alt = array_pop($tmp_arr);
+            }
+
+            $src = str_replace(array('&','"'), array('&amp;','&qout;'), $src);
+            if(!$alt) $alt = $src;
+
+            $attr_output = array();
+            $attr_output = array("src=\"".$src."\"");
+            if($alt) {
+                $attr_output[] = "alt=\"".$alt."\"";
+                $attr_output[] = "title=\"".$alt."\"";
+            }
+            if($margin) {
+                $style = trim(preg_replace('/margin[a-z\-]*[ ]*:[ ]*[0-9 a-z]+(;| )/i','', $style)).';';
+                $style = str_replace(';;',';',$style);
+                if($style == ';') $style = '';
+                $style .= ' margin:'.$margin.'px;';
+            }
+            if($align) $attr_output[] = "align=\"".$align."\"";
+
+            if(preg_match("/\.png$/i",$src)) $attr_output[] = "class=\"iePngFix\"";
+
+            if($width) $attr_output[] = 'width="'.$width.'"';
+            if($height) $attr_output[] = 'height="'.$height.'"';
+            if($border) {
+                $style = trim(preg_replace('/border[a-z\-]*[ ]*:[ ]*[0-9 a-z]+(;| )/i','', $style)).';';
+                $style = str_replace(';;',';',$style);
+                if($style == ';') $style = '';
+                $style .= ' border-style: solid; border-width:'.$border.'px;';
+            }
+
+            $code = sprintf("<img %s style=\"%s\" />", implode(' ',$attr_output), $style);
+
+            if($link_url) {
+                if($open_window =='Y') $code = sprintf('<a href="%s" onclick="window.open(this.href);return false;">%s</a>', $link_url, $code);
+                else $code = sprintf('<a href="%s" >%s</a>', $link_url, $code);
+            }
+            return $code;
+        }
+
+    }
+?>

modules/editor/components/image_link/info.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component version="0.2">
+    <title xml:lang="ko">이미지 추가</title>
+    <title xml:lang="jp">イメージ追加</title>
+    <title xml:lang="zh-CN">插入图像</title>
+    <title xml:lang="en">Add Images</title>
+    <title xml:lang="es">Añadir imágenes</title>
+    <title xml:lang="ru">Добавление изображений</title>
+    <title xml:lang="zh-TW">圖片連結</title>
+    <description xml:lang="ko">에디터에 이미지를 추가하거나 속성을 변경할 수 있습니다.</description>
+    <description xml:lang="jp">エディターでイメージの追加、属性の変更が出来ます。</description>
+    <description xml:lang="zh-CN">可以插入图像或编辑其相应属性。</description>
+    <description xml:lang="en">It can add an image to editor or change the attribution of image.</description>
+    <description xml:lang="es">Se puede añadir una imagen a editor o cambiar la atribución de la imagen.</description>
+    <description xml:lang="ru">Это может добавить изображение в редактор или изменить параметры изображения.</description>
+    <description xml:lang="zh-TW">可以新增或編輯其相關屬性。</description>
+    <version>0.1</version>
+    <date>2007-02-28</date>
+
+    <author email_address="zero@zeroboard.com" link="http://blog.nzeo.com">
+        <name xml:lang="ko">zero</name>
+        <name xml:lang="jp">zero</name>
+        <name xml:lang="zh-CN">zero</name>
+        <name xml:lang="en">zero</name>
+        <name xml:lang="es">zero</name>
+        <name xml:lang="ru">zero</name>
+        <name xml:lang="zh-TW">zero</name>
+    </author>
+</component>

modules/editor/components/image_link/lang/en.lang.php

@@ -0,0 +1,22 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/en.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  editor Module > language pack of image_link component
+     **/
+
+    $lang->image_url = "Image Path";
+    $lang->image_alt = "Input Description";
+    $lang->image_scale = "Image Size";
+    $lang->image_align = "Align Style";
+    $lang->image_align_normal = "Occupy a Paragraph";
+    $lang->image_align_left = "Left of Article";
+    $lang->image_align_middle = "Center";
+    $lang->image_align_right = "Right of Article";
+    $lang->image_border = "Border Thickness";
+    $lang->urllink_url = "URL";
+    $lang->image_margin = 'Image Margin';
+
+    $lang->about_url_link_open_window = "Make the link to open as a new window";
+    $lang->cmd_get_scale = "Get Image Size";
+?>

modules/editor/components/image_link/lang/es.lang.php

@@ -0,0 +1,22 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/en.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  editor Module > language pack of image_link component
+     **/
+
+     $lang->image_url = "Ruta de la imagen";
+     $lang->image_alt = "Descripcion de Entrada";
+     $lang->image_scale = "Tamano de la Imagen";
+     $lang->image_align = "Alinear Estilo";
+     $lang->image_align_normal = "Occupy un parrafo";
+     $lang->image_align_left = "Izquierda del articulo";
+     $lang->image_align_middle = "Centro";
+     $lang->image_align_right = "Derecho de articulo";
+     $lang->image_border = "Grosor de Fronteras";
+     $lang->urllink_url = "URL";
+     $lang->image_margin = 'Image Margin';
+
+     $lang->about_url_link_open_window = "Hacer el vinculo para abrir una nueva ventana";
+     $lang->cmd_get_scale = "Obtener tamano de la imagen";
+?>

modules/editor/components/image_link/lang/jp.lang.php

@@ -0,0 +1,23 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/jp.lang.php
+     * @author zero <zero@nzeo.com> 翻訳：RisaPapa、ミニミ
+     * @brief  ウィジウィグエディター（editor）モジュール > イメージリンク（image_link）コンポネント言語パッケージ
+     **/
+
+    $lang->image_url = "イメージパス";
+    $lang->image_alt = "説明（Alt）入力";
+    $lang->image_scale = "イメージサイズ";
+    $lang->image_align = "アライン位置";
+    $lang->image_align_normal = "一段落";
+    $lang->image_align_left = "左揃え";
+    $lang->image_align_middle = "中央揃え";
+    $lang->image_align_right = "右揃え";
+    $lang->image_border = "ボーダー";
+    $lang->image_margin = '外側の空白(Margin)';
+
+    $lang->urllink_open_window = "新しいウィンドウで開く";
+    $lang->about_url_link_open_window = "チェックすると、リンクをクリックする際、新しいウィンドウで開きます。";
+
+    $lang->cmd_get_scale = "イメージサイズを計算";
+?>

modules/editor/components/image_link/lang/ko.lang.php

@@ -0,0 +1,23 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/ko.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  위지윅에디터(editor) 모듈 > 이미지링크(image_link) 컴포넌트의 언어팩
+     **/
+
+    $lang->image_url = '이미지 경로';
+    $lang->image_alt = '설명 입력';
+    $lang->image_scale = '이미지크기';
+    $lang->image_align = '정렬 방법';
+    $lang->image_align_normal = '한 문단을 차지';
+    $lang->image_align_left = '글의 왼쪽으로';
+    $lang->image_align_middle = '가운데';
+    $lang->image_align_right = '글의 우측으로';
+    $lang->image_border = '경계선 두께';
+    $lang->image_margin = '바깥 여백';
+
+    $lang->urllink_open_window = '새창열기';
+    $lang->about_url_link_open_window = '선택하시면 링크 선택시 새창으로 열립니다';
+
+    $lang->cmd_get_scale = '크기 구하기';
+?>

modules/editor/components/image_link/lang/ru.lang.php

@@ -0,0 +1,22 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/ru.lang.php
+     * @author zero <zero@nzeo.com> | translation by Maslennikov Evgeny aka X-[Vr]bL1s5 | e-mail: x-bliss[a]tut.by; ICQ: 225035467;
+     * @brief  editor Module > language pack of image_link component
+     **/
+
+    $lang->image_url = "Путь изображения";
+    $lang->image_alt = "Введите описание";
+    $lang->image_scale = "Размер изображения";
+    $lang->image_align = "Стиль выравнивания";
+    $lang->image_align_normal = "Занять параграф";
+    $lang->image_align_left = "Лево";
+    $lang->image_align_middle = "Центр";
+    $lang->image_align_right = "Право";
+    $lang->image_border = "Толщина рамки";
+    $lang->urllink_url = "URL";
+    $lang->image_margin = 'Image Margin';
+
+    $lang->about_url_link_open_window = "Создайте ссылку для открытия в новом окне";
+    $lang->cmd_get_scale = "Получить размер изображения";
+?>

modules/editor/components/image_link/lang/zh-CN.lang.php

@@ -0,0 +1,23 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/zh-CN.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  网页编辑器(editor) 模块 > 图像链接(image_link) 组件的语言包
+     **/
+
+    $lang->image_url = "图像路径";
+    $lang->image_alt = "图像说明";
+    $lang->image_scale = "图像大小";
+    $lang->image_align = "对齐方式";
+    $lang->image_align_normal = "占一个段落";
+    $lang->image_align_left = "内容左侧";
+    $lang->image_align_middle = "居中";
+    $lang->image_align_right = "内容右侧";
+    $lang->image_border = "边框粗细";
+    $lang->image_margin = '外边距';
+
+    $lang->urllink_open_window = '新窗口打开';
+    $lang->about_url_link_open_window = "将在新窗口中打开链接。";
+
+    $lang->cmd_get_scale = "获得图片大小";
+?>

modules/editor/components/image_link/lang/zh-TW.lang.php

@@ -0,0 +1,22 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/zh-TW.lang.php
+     * @author zero <zero@nzeo.com> 翻譯：royallin
+     * @brief  網頁編輯器(editor)模組 > 圖片連結(image_link)組件語言
+     **/
+
+    $lang->image_url = "圖片路徑";
+    $lang->image_alt = "圖片說明";
+    $lang->image_scale = "圖片大小";
+    $lang->image_align = "對齊方式";
+    $lang->image_align_normal = "段落";
+    $lang->image_align_left = "靠左";
+    $lang->image_align_middle = "置中";
+    $lang->image_align_right = "靠右";
+    $lang->image_border = "邊框粗細";
+    $lang->urllink_url = "網址";
+    $lang->image_margin = '圖片邊距';
+
+    $lang->about_url_link_open_window = "開啟連結於新視窗。";
+    $lang->cmd_get_scale = "取得圖片大小";
+?>

modules/editor/components/image_link/tpl/popup.css

@@ -0,0 +1,10 @@
+@charset "utf-8";
+@import url(../../../../../modules/admin/tpl/css/admin.css);
+
+.image_align {
+    margin:0px 0px 5px 0px;
+    float:left;
+    width:200px;
+}
+
+li {list-style:none; float:left; margin-right:.5em;}

modules/editor/components/image_link/tpl/popup.html

@@ -0,0 +1,93 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+
+<div id="popHeader">
+    <h3 class="xeAdmin">{$component_info->title} ver. {$component_info->version}</h3>
+</div>
+
+<form action="./" method="get" onSubmit="return false" id="fo">
+
+    <div id="popBody">
+        <table cellspacing="0" class="rowTable">
+        <col width="100" />
+        <col />
+
+        <tr>
+            <th scope="row"><div>{$lang->image_url}</div></th>
+            <td><input type="text" id="image_url" value="{url_decode($manual_url)}" onblur="getImageScale();" class="inputTypeText w400" /></td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->image_scale}</div></th>
+            <td>
+                <ul>
+                    <li><input type="text" id="width" value="0" size="4" class="inputTypeText" onblur="setScale('width');return false;" />px </li>
+                    <li><input type="text" id="height" value="0" size="4" class="inputTypeText" onblur="setScale('height');return false;" />px </li>
+                    <li><a href="#" onclick="getImageScale(); return false;" class="button"><span>{$lang->cmd_get_scale}</span></a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row"><div>URL</div></th>
+            <td><input type="text" id="link_url" value="" class="inputTypeText w400"/></td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->urllink_open_window}</div></th>
+            <td><input type="checkbox" id="open_window" value="Y" /> {$lang->about_url_link_open_window}</td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->image_alt}</div></th>
+            <td><input type="text" id="image_alt" value="" class="inputTypeText w400"/></td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->image_align}</div></th>
+            <td>
+                <div class="image_align">
+                    <input type="radio" name="align" value="" id="align_normal" checked="checked"/>
+                    <label for="align_normal">
+                        <img src="./images/align_normal.gif" alt="{$lang->image_align_normal}" />
+                        {$lang->image_align_normal}
+                    </label>
+                </div>
+
+                <div class="image_align">
+                    <input type="radio" name="align" value="left" id="align_left" />
+                    <label for="align_left">
+                        <img src="./images/align_left.gif" alt="{$lang->image_align_left}" />
+                        {$lang->image_align_left}
+                    </label>
+                </div>
+
+                <div class="image_align">
+                    <input type="radio" name="align" value="middle" id="align_middle" />
+                    <label for="align_middle">
+                        <img src="./images/align_middle.gif" alt="{$lang->image_align_middle}" />
+                        {$lang->image_align_middle}
+                    </label>
+                </div>
+
+                <div class="image_align">
+                    <input type="radio" name="align" value="right" id="align_right" />
+                    <label for="align_right">
+                        <img src="./images/align_right.gif" alt="{$lang->image_align_right}" />
+                        {$lang->image_align_right}
+                    </label>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->image_border}</div></th>
+            <td><input type="text" id="image_border" value="0" size="2" class="inputTypeText" />px</td>
+        </tr>
+        <tr>
+            <th scope="row"><div>{$lang->image_margin}</div></th>
+            <td><input type="text" id="image_margin" value="0" size="2" class="inputTypeText" />px</td>
+        </tr>
+        </table>
+    </div>
+    <div id="popFooter" class="tCenter">
+        <a href="#" onclick="insertImage()" class="button black strong"><span>{$lang->cmd_insert}</span></a>
+        <a href="#" onclick="winopen('./?module=editor&amp;act=dispEditorComponentInfo&amp;component_name={$component_info->component_name}','ComponentInfo','left=10,top=10,width=10,height=10,resizable=no,scrollbars=no,toolbars=no');return false;" class="button"><span>{$lang->about_component}</span></a>
+    </div>
+
+</form>

modules/editor/components/image_link/tpl/popup.js

@@ -0,0 +1,156 @@
+/**
+ * popup으로 열렸을 경우 부모창의 위지윅에디터에 select된 이미지가 있는지 체크하여
+ * 있으면 가져와서 원하는 곳에 삽입
+ **/
+
+var orig_width = 0;
+var orig_height = 0;
+function getImage() {
+    // 부모 위지윅 에디터에서 선택된 영역이 있는지 확인
+    if(typeof(opener)=="undefined") return;
+
+    // url이 미리 입력되어 있을 경우 scale구해줌
+    if(xGetElementById("image_url").value) {
+        getImageScale();
+        return;
+    }
+
+    // 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
+    var node = opener.editorPrevNode;
+    if(!node || node.nodeName != "IMG") {
+        return;
+    }
+    var src = node.getAttribute("src");
+    var border = node.style.borderWidth ? 
+        node.style.borderWidth.match("[0-9]+") : node.getAttribute("border");
+    var align = node.style.cssFloat ?
+        node.style.cssFloat : node.style.styleFloat;
+    if(!align) align = node.style.verticalAlign?
+        node.style.verticalAlign : node.getAttribute("align");
+    var margin = node.style.margin ? 
+        node.style.margin.match("[0-9]+") : node.getAttribute("margin");
+    var alt = node.getAttribute("alt");
+    var width = xWidth(node);
+    var height = xHeight(node);
+    orig_width = width;
+    orig_height = height;
+    var link_url = node.getAttribute("link_url");
+    var open_window = node.getAttribute("open_window");
+
+    xGetElementById("image_url").value = src;
+    xGetElementById("image_alt").value = alt;
+
+    if(link_url) {
+        link_url = link_url.replace(/<([^>]*)>/ig,'').replace(/&lt;/ig,'<').replace(/&gt;/ig,'>').replace(/&amp;/ig,'&');
+        xGetElementById('link_url').value = link_url;
+    }
+    if(open_window == 'Y') xGetElementById('open_window').checked = "true";
+
+    switch(align) {
+        case 'left' : xGetElementById("align_left").checked = true; break;
+        case 'middle' : xGetElementById("align_middle").checked = true; break;
+        case 'right' : xGetElementById("align_right").checked = true; break;
+        default : xGetElementById("align_normal").checked = true; break;
+    }
+
+    if(margin) {
+        xGetElementById('image_margin').value = margin;
+    }
+
+    if(border) {
+        xGetElementById("image_border").value = border;
+    }
+
+    xGetElementById("width").value = width;
+    xGetElementById("height").value = height;
+
+}
+
+function getImageScale() {
+    var url = xGetElementById("image_url").value;
+    if(!url) return;
+
+    var img = new Image();
+    img.src = url;
+
+    xGetElementById("width").value = img.width;
+    xGetElementById("height").value = img.height;
+
+    orig_width = img.width;
+    orig_height = img.height;
+}
+function insertImage(obj) {
+    if(typeof(opener)=="undefined") return;
+
+    var link_url = xGetElementById('link_url').value;
+    if(link_url) link_url = link_url.replace(/&/ig,'&amp;').replace(/</ig,'&lt;').replace(/>/ig,'&gt;');
+    var open_window = 'N';
+    if(xGetElementById('open_window').checked) open_window = 'Y';
+
+    var url = xGetElementById("image_url").value;
+    var alt = xGetElementById("image_alt").value;
+    var align = "";
+    if(xGetElementById("align_normal").checked==true) align = "";
+    else if(xGetElementById("align_left").checked==true) align = "float: left";
+    else if(xGetElementById("align_middle").checked==true) align = "vertical-align: middle";
+    else if(xGetElementById("align_right").checked==true) align = "float: right";
+    var border = parseInt(xGetElementById("image_border").value,10);
+    var margin = parseInt(xGetElementById("image_margin").value,10);
+
+    var width = xGetElementById("width").value;
+    var height = xGetElementById("height").value;
+
+    if(!url) {
+      window.close();
+      return;
+    }
+
+    url = url.replace(request_uri,'');
+    var text = "<img editor_component=\"image_link\" src=\""+url+"\"";
+    if(alt) text+= " alt=\""+alt+"\"";
+    if(width) text+= " width=\""+width+"\"";
+    if(height) text+= " height=\""+height+"\"";
+    if(link_url) text+= " link_url=\""+link_url+"\"";
+    if(open_window=='Y') text+= " open_window=\"Y\"";
+    if(align || border || margin){
+        text+= " style=\"";
+        if(align) text+= align+"; ";
+        if(border) text+= "border: solid "+border+"px; ";
+        if(margin) text+= "margin: "+margin+"px; ";
+        text+= "\" ";
+    }
+    if(border) text+= " border=\""+border+"\""
+    if(margin) text+= " margin=\""+margin+"\""
+    text+= " />";
+
+    opener.editorFocus(opener.editorPrevSrl);
+
+    var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)
+
+    opener.editorReplaceHTML(iframe_obj, text);
+    opener.editorFocus(opener.editorPrevSrl);
+
+    window.close();
+}
+
+xAddEventListener(window, "load", getImage);
+
+function setScale(type) {
+    switch(type) {
+        case 'width' :
+                if(!orig_height) return;
+                var n_width = xGetElementById('width').value;
+                var p = n_width/orig_width;
+                var n_height = parseInt(orig_height * p,10);
+                xGetElementById('height').value = n_height;
+            break;
+        case 'height' :
+                if(!orig_width) return;
+                var n_height = xGetElementById('height').value;
+                var p = n_height/orig_height;
+                var n_width = parseInt(orig_width * p,10);
+                xGetElementById('width').value = n_width;
+            break;
+    }
+
+}