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

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

@@ -0,0 +1,66 @@
+<?php
+    /**
+     * @class  image_link
+     * @author zero (zero@nzeo.com)
+     * @brief  이미지를 추가하거나 속성을 수정하는 컴포넌트
+     **/
+
+    class image_link extends EditorHandler { 
+
+        // upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
+        var $upload_target_srl = 0;
+        var $component_path = '';
+
+        /**
+         * @brief upload_target_srl과 컴포넌트의 경로를 받음
+         **/
+        function image_link($upload_target_srl, $component_path) {
+            $this->upload_target_srl = $upload_target_srl;
+            $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);
+
+            require_once("./classes/template/TemplateHandler.class.php");
+            $oTemplate = new TemplateHandler();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+        /**
+         * @brief 에디터 컴포넌트가 별도의 고유 코드를 이용한다면 그 코드를 html로 변경하여 주는 method
+         *
+         * 이미지나 멀티미디어, 설문등 고유 코드가 필요한 에디터 컴포넌트는 고유코드를 내용에 추가하고 나서
+         * DocumentModule::transContent() 에서 해당 컴포넌트의 transHtml() method를 호출하여 고유코드를 html로 변경
+         **/
+        function transHTML($xml_obj) {
+            $src = $xml_obj->attrs->src;
+            $alt = $xml_obj->attrs->alt;
+            $width = $xml_obj->attrs->width;
+            $height = $xml_obj->attrs->height;
+            $align = $xml_obj->attrs->align;
+            $border = $xml_obj->attrs->border;
+
+            $src = str_replace(array('&','"'), array('&amp;','&qout;'), $src);
+            if(!$alt) $alt = $src;
+
+            $output = array();
+            $output = array("src=\"".$src."\"");
+            if($alt) $output[] = "alt=\"".$alt."\"";
+            if($alt) $output[] = "title=\"".$alt."\"";
+            if($width) $output[] = "width=\"".$width."\"";
+            if($height) $output[] = "height=\"".$height."\"";
+            if($align) $output[] = "align=\"".$align."\"";
+            if($border) $output[] = "border=\"".$border."\"";
+            return "<img ".implode(" ", $output)." />";
+        }
+
+    }
+?>

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

@@ -0,0 +1,20 @@
+<?php
+    /**
+     * @file   /modules/editor/components/image_link/lang/ko.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  위지윅에디터(editor) 모듈 > 이미지링크(image_link) 컴포넌트의 언어팩
+     **/
+
+    $lang->imagelink = "이미지 자료 연결"; 
+    $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->cmd_get_scale = "크기 구하기";
+?>

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

@@ -0,0 +1,77 @@
+.editor_window {
+  width:500px;
+  text-align:center;
+}
+
+.editor_title {
+  font-size:10pt;
+  font-weight:bold;
+  clear:both;
+  height:20px;
+  background-color:#555555;
+  color:#EFEFEF;
+  vertical-align:middle;
+  padding-top:5px;
+  border-bottom:1px solid #000000;
+  text-align:center;
+}
+
+.header {
+  float:left;
+  width:100px;
+  clear:left;
+  text-align:left;
+  font-weight:bold;
+  margin:5px;
+  font-size:9pt;
+}
+
+.body {
+  float:left;
+  width:350px;
+  text-align:left;
+  margin:5px;
+  font-size:9pt;
+  font-size:9pt;
+}
+
+.body label {
+  cursor:pointer;
+  font-size:9pt;
+}
+
+.image_align {
+  margin:0px 0px 5px 0px;
+  float:left;
+  width:150px;
+}
+
+.image_url {
+  width:350px;
+  height:13px;
+  font-size:9pt;
+  border:1px solid #AAAAAA;
+}
+
+.editor_input {
+  width:40px;
+  height:13px;
+  font-size:9pt;
+  border:1px solid #AAAAAA;
+}
+
+.editor_button_area {
+  border-top:1px solid #AAAAAA;
+  text-align:center;
+  background-color:#EEEEEE;
+  padding:2px 0px 2px 0px;
+  clear:both;
+}
+
+.editor_button {
+  margin-top:4px;
+  background-color:#FFFFFF;
+  border:1px solid #AAAAAA;
+  height:16px;
+  font-size:9pt;
+}

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

@@ -0,0 +1,64 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+
+<form action="./" method="get" onSubmit="return false" id="fo">
+  <div class="editor_window">
+
+    <div class="editor_title">{$lang->imagelink}</div>
+
+    <div class="header">{$lang->image_url}</div>
+    <div class="body"><input type="text" class="image_url" id="image_url" value="{$manual_url}" onblur="getImageScale();" /></div>
+
+    <div class="header">{$lang->image_scale}</div>
+    <div class="body">
+      <input type="text" class="editor_input" id="width" value="0" />px 
+      <input type="text" class="editor_input" id="height" value="0" />px 
+      <input type="button" value="{$lang->cmd_get_scale}" class="editor_button" onclick="getImageScale();return false;" />
+    </div>
+
+
+    <div class="header">{$lang->image_alt}</div>
+    <div class="body"><input type="text" class="image_url" id="image_alt" value="" /></div>
+
+    <div class="header">{$lang->image_align}</div>
+    <div class="body">
+      <div class="image_align">
+        <input type="radio" name="align" value="" id="align_normal" checked="true"/>
+        <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>
+    </div>
+
+    <div class="header">{$lang->image_border}</div>
+    <div class="body"><input type="text" class="editor_input" id="image_border" value="0" />px</div>
+
+    <div class="editor_button_area">
+      <input type="button" value="{$lang->cmd_insert}" class="editor_button" onclick="insertImage()" />
+      <input type="button" value="{$lang->cmd_close}" class="editor_button" onclick="window.close();" />
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,92 @@
+/**
+ * popup으로 열렸을 경우 부모창의 위지윅에디터에 select된 이미지가 있는지 체크하여
+ * 있으면 가져와서 원하는 곳에 삽입
+ **/
+function getImage() {
+    // 부모 위지윅 에디터에서 선택된 영역이 있는지 확인
+    if(typeof(opener)=="undefined") return;
+
+    // url이 미리 입력되어 있을 경우 scale구해줌
+    if(xGetElementById("image_url").value) {
+        setTimeout(function() { getImageScale(); }, 500);
+        return;
+    }
+
+    // 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
+    var node = opener.editorPrevNode;
+    if(!node || node.nodeName != "IMG") {
+        return;
+    }
+    var src = node.getAttribute("src");
+    var border = node.getAttribute("border");
+    var align = node.getAttribute("align");
+    var alt = node.getAttribute("alt");
+    var width = node.getAttribute("width");
+    var height = node.getAttribute("height");
+
+    xGetElementById("image_url").value = src;
+    xGetElementById("image_alt").value = alt;
+
+    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;
+    }
+
+    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;
+    
+}
+function insertImage(obj) {
+    if(typeof(opener)=="undefined") return;
+
+    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 = "left";
+    else if(xGetElementById("align_middle").checked==true) align = "middle";
+    else if(xGetElementById("align_right").checked==true) align = "right";
+    var border = parseInt(xGetElementById("image_border").value,10);
+
+    var width = xGetElementById("width").value;
+    var height = xGetElementById("height").value;
+
+    if(!url) {
+      window.close();
+      return;
+    }
+
+    var text = "<img editor_component=\"image_link\" src=\""+url+"\" border=\""+border+"\" ";
+    if(alt) text+= " alt=\""+alt+"\"";
+    if(align) text+= " align=\""+align+"\" ";
+    if(width) text+= " width=\""+width+"\" ";
+    if(height) text+= " height=\""+height+"\" ";
+    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);