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

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

@@ -0,0 +1,79 @@
+@charset "utf-8";
+.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;
+    height:25px;
+}
+
+.editor_button {
+    margin-top:4px;
+    background-color:#FFFFFF;
+    border:1px solid #AAAAAA;
+    height:18px;
+    font-size:9pt;
+}

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

@@ -0,0 +1,67 @@
+<!--%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">{$component_info->title} ver. {$component_info->version} <a href="#" onclick="winopen('./?module=editor&amp;act=viewComponentInfo&amp;component_name={$component_info->component_name}','ComponentInfo','left=10,top=10,width=10,height=10,resizable=no,scrollbars=no,toolbars=no');return false;"><img src="../../../tpl/images/about_component.gif" title="{$lang->about_component}" alt="{$lang->about_component}" class="about_component_icon" border="0" /></a></div>
+
+        <div class="header">{$lang->image_url}</div>
+        <div class="body"><input type="text" class="image_url" id="image_url" value="{url_decode($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/image_link/tpl/popup.js

@@ -0,0 +1,92 @@
+/**
+ * popup으로 열렸을 경우 부모창의 위지윅에디터에 select된 이미지가 있는지 체크하여
+ * 있으면 가져와서 원하는 곳에 삽입
+ **/
+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.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);