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

modules/editor/components/naver_map/info.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component version="0.1">
+    <title xml:lang="ko">네이버맵 연동</title>
+    <author email_address="zero@zeroboard.com" link="http://www.zeroboard.com" date="2007. 2. 28">
+        <name xml:lang="ko">제로</name>
+        <description xml:lang="ko">네이버에서 제공하는 네이버 지도 open api를 이용하여 에디터에 원하는 곳의 지도를 추가하거나 수정할 수 있습니다.\n네이버 지도 open api키를 발급 받아서 등록을 해주셔야 정상적인 사용이 가능합니다.</description>
+    </author>
+    <extra_vars>
+        <var name="api_key">
+            <title xml:lang="ko">네이버지도 api key</title>
+            <description xml:lang="ko">http://www.naver.com/ 에서 네이버 지도 API key를 발급 받으신 후 입력해주세요.</description>
+        </var>
+    </extra_vars>
+</component>

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

@@ -0,0 +1,21 @@
+<?php
+    /**
+     * @file   /modules/editor/components/naver_map/lang/ko.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  위지윅에디터(editor) 모듈 > 멀티미디어 링크 (naver_map) 컴포넌트의 언어팩
+     **/
+
+    $lang->map_width = "가로크기";
+    $lang->map_height = "세로크기";
+
+    // 문구
+    $lang->about_address = "예) 분당 정자동, 역삼";
+    $lang->about_address_use = "검색창에서 원하는 주소를 검색하신후 출력된 결과물을 선택하시고 [추가] 버튼을 눌러주시면 글에 지도가 추가가 됩니다";
+
+    // 에러 메세지들
+    $lang->msg_not_exists_addr = "검색하려는 대상이 없습니다";
+    $lang->msg_fail_to_socket_open = "우편번호 검색 대상 서버 접속이 실패하였습니다";
+    $lang->msg_no_result = "검색 결과가 없습니다";
+
+    $lang->msg_no_apikey = "네이버맵 사용을 위해서는 네이버맵 open api key가 있어야 합니다.\nopen api key를 관리자 >  위지윅에디터 > <a href=\"#\" onclick=\"winopen('./?module=editor&amp;act=setupComponent&amp;component_name=naver_map','SetupComponent','width=10,height=10,scrollbars=no,resizable=no,toolbars=no');return false;\">네이버 지도 연동 컴포넌트 설정</a>을 선택한 후 입력하여 주세요";
+?>

modules/editor/components/naver_map/naver_map.class.php

@@ -0,0 +1,178 @@
+<?php
+    /**
+     * @class  naver_map
+     * @author zero (zero@nzeo.com)
+     * @brief  본문에 네이버의 지도 open api로 지도 삽입
+     **/
+
+    class naver_map extends EditorHandler { 
+
+        // upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
+        var $upload_target_srl = 0;
+        var $component_path = '';
+
+        // 네이버맵 openapi 키 값
+        var $api_key = '';
+
+        /**
+         * @brief upload_target_srl과 컴포넌트의 경로를 받음
+         **/
+        function naver_map($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';
+
+            if(!$this->api_key) $tpl_file = 'error.html';
+            else $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 naver map open api에서 주소를 찾는 함수
+         **/
+        function search_address() {
+            $address = Context::get('address');
+            if(!$address) return new Object(-1,'msg_not_exists_addr');
+
+            Context::loadLang($this->component_path."lang");
+
+            // 지정된 서버에 요청을 시도한다
+            $query_string = iconv("UTF-8","EUC-KR",sprintf('/api/geocode.php?key=%s&query=%s', $this->api_key, $address));
+
+            $fp = fsockopen('maps.naver.com', 80, $errno, $errstr);
+            if(!$fp) return new Object(-1, 'msg_fail_to_socket_open');
+
+            fputs($fp, "GET {$query_string} HTTP/1.0\r\n");
+            fputs($fp, "Host: maps.naver.com\r\n\r\n");
+
+            $buff = '';
+            while(!feof($fp)) {
+                $str = fgets($fp, 1024);
+                if(trim($str)=='') $start = true;
+                if($start) $buff .= trim($str);
+            }
+
+            fclose($fp);
+
+            $buff = trim(iconv("EUC-KR", "UTF-8", $buff));
+            $buff = str_replace('<?xml version="1.0" encoding="euc-kr" ?>', '', $buff);
+
+            $oXmlParser = new XmlParser();
+            $xml_doc = $oXmlParser->parse($buff);
+
+            $addrs = $xml_doc->geocode->item;
+            if(!is_array($addrs)) $addrs = array($addrs);
+            $addrs_count = count($addrs);
+
+            $address_list = array();
+            for($i=0;$i<$addrs_count;$i++) {
+                $item = $addrs[$i];
+
+                $address_list[] = sprintf("%s,%s,%s", $item->point->x->body, $item->point->y->body, $item->address->body);
+
+            }
+
+            $this->add("address_list", implode("\n", $address_list));
+        }
+
+        /**
+         * @brief 에디터 컴포넌트가 별도의 고유 코드를 이용한다면 그 코드를 html로 변경하여 주는 method
+         *
+         * 이미지나 멀티미디어, 설문등 고유 코드가 필요한 에디터 컴포넌트는 고유코드를 내용에 추가하고 나서
+         * DocumentModule::transContent() 에서 해당 컴포넌트의 transHtml() method를 호출하여 고유코드를 html로 변경
+         *
+         * 네이버 지도 open api 는 doctype에 대한 오류 및 기타 등등등등의 문제 때문에 iframe 을 만들고 컴포넌트를 다시 호출해서 html을 출력하게 한다.
+         * 네이버 지도 open api 가 xhtml1-transitional.dtd 를 지원하게 되면 다시 깔끔하게 고쳐야 함..
+         * 2006년 3월 12일 하루 다 날렸다~~~ ㅡ.ㅜ
+         **/
+        function transHTML($xml_obj) {
+            $x = $xml_obj->attrs->x;
+            $y = $xml_obj->attrs->y;
+            $marker = $xml_obj->attrs->marker;
+            $width = $xml_obj->attrs->width;
+            $height = $xml_obj->attrs->height;
+            $body_code = sprintf('<div style="width:%dpx;height:%dpx;margin-bottom:5px;"><iframe src="%s?module=editor&amp;act=procCall&amp;method=displayMap&amp;component=naver_map&amp;width=%s&amp;height=%s&amp;x=%s&amp;y=%s&amp;marker=%s" frameBorder="0" style="padding:1px; border:1px solid #AAAAAA;width:%dpx;height:%dpx;margin:0px;"></iframe></div>', $width, $height, Context::getRequestUri(), $width, $height, $x, $y, $marker, $width, $height);
+            return $body_code;
+        }
+
+        function displayMap() {
+            $id = "navermap".rand(11111111,99999999);
+
+            $width = Context::get('width');
+            if(!$width) $width = 640;
+
+            $height = Context::get('height');
+            if(!$height) $height = 480;
+
+            $x = Context::get('x');
+            if(!$x) $x = 321198;
+
+            $y = Context::get('y');
+            if(!$y) $y = 529730;
+
+            $marker = Context::get('marker');
+
+            $html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'.
+                    '<html>'.
+                    '<head>'.
+                    '<title></title>'.
+                    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'.
+                    '<script type="text/javascript" src="./common/js/x.js"></script>'.
+                    '<script type="text/javascript" src="http://maps.naver.com/js/naverMap.naver?key='.$this->api_key.'"></script>'.
+                    '<script type="text/javascript">'.
+                    'function moveMap(x,y,scale) {mapObj.setCenterAndZoom(new NPoint(x,y),scale);}'.
+                    'function createMarker(pos) { if(typeof(top.addMarker)=="function") { if(!top.addMarker(pos)) return; var iconUrl = "http://static.naver.com/local/map_img/set/icos_free_"+String.fromCharCode(96+top.marker_count-1)+".gif"; var marker = new NMark(pos,new NIcon(iconUrl,new NSize(15,14))); mapObj.addOverlay(marker); } }'.
+                    '</script>'.
+                    '</head>'.
+                    '<body style="margin:0px;">'.
+                    '<div id="'.$id.'" style="width:'.$width.'px;height:'.$height.'px;"></div>'.
+                    '<script type="text/javascript">'.
+                    'var mapObj = new NMap(document.getElementById("'.$id.'"));'.
+                    'mapObj.addControl(new NSaveBtn());'.
+                    'var zoom = new NZoomControl();'.
+                    'zoom.setValign("bottom");'.
+                    'mapObj.addControl(zoom);'.
+                    'var infowin = new NInfoWindow();'.
+                    'mapObj.addOverlay(infowin);'.
+                    'NEvent.addListener(mapObj,"click",createMarker);'.
+                    '';
+
+            if($x&&$y) $html .= 'mapObj.setCenterAndZoom(new NPoint('.$x.','.$y.'),3);';
+
+            if($marker) {
+                $marker_list = explode('|@|', $marker);
+                $icon_no = 0;
+                for($i=0;$i<count($marker_list);$i++) {
+                    $pos = trim($marker_list[$i]);
+                    if(!$pos) continue;
+                    $icon_url = 'http://static.naver.com/local/map_img/set/icos_free_'.chr(ord('a')+$icon_no).'.gif';
+                    $html .= 'mapObj.addOverlay( new NMark(new NPoint('.$pos.'),new NIcon("'.$icon_url.'",new NSize(15,14))) );';
+                    $icon_no++;
+                }
+            }
+
+            $html .= ''.
+                     //'mapObj.enableWheelZoom();'.
+                     'NEvent.addListener(mapObj, "click", function(pos) { if(typeof(top.mapClicked)!="undefined") top.mapClicked(pos); });'.
+                     'NEvent.addListener(mapObj, "mouseup", function(pos) { if(typeof(top.mapClicked)!="undefined") top.mapClicked(pos); });'.
+                     '</script>'.
+                     '</body>'.
+                     '</html>';
+
+            print $html;
+            exit();
+        }
+    }
+?>

modules/editor/components/naver_map/tpl/error.html

@@ -0,0 +1,10 @@
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+<div class="error_window">
+    <div class="error_text">
+        {nl2br($lang->msg_no_apikey)}
+    </div>
+    <div class="editor_button_area">
+        <input type="button" value="{$lang->cmd_close}" onclick="window.close();" class="editor_button" />
+    </div>
+</div>

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

@@ -0,0 +1,131 @@
+@charset "utf-8";
+.editor_window {
+    width:700px;
+    clear:both;
+}
+
+.error_window {
+    width:700px;
+}
+
+.error_text {
+    padding:20px;
+    color:#444444;
+    border:10px solid #DDDDDD;
+    font-size:9pt;
+    line-height:200%;
+}
+
+.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;
+}
+
+.address_box {
+    float:left;
+    width:250px;
+    border:1px solid #EEEEEE;
+    padding:5px;
+    margin:5px;
+}
+
+
+.input_address {
+    width:200px;
+    border:1px solid #AAAAAA;
+    height:12px;
+    font-size:9pt;
+}
+
+.address_button {
+    margin-top:4px;
+    background-color:#AAAAAA;
+    border:1px solid #333333;
+    color:#FFFFFF;
+    height:16px;
+    font-size:9pt;
+}
+
+.about_address {
+    font-size:8pt;
+    color:#AAAAAA;
+    margin-top:3px;
+}
+
+.address_list_box {
+    border:1px solid #DDDDDD;
+    padding:5px;
+    float:left;
+    width:250px;
+    height:288px;
+    margin:5px;
+    font-size:9pt;
+    color:#AAAAAA;
+    overflow:auto;
+}
+
+.address_list_box A {
+    color:#888888;
+    line-height:15px;
+}
+
+.map_scale_box {
+    float:left;
+    width:250px;
+    border:1px solid #EEEEEE;
+    padding:5px;
+    margin:5px;
+}
+
+.map_scale_header {
+    float:left;
+    font-size:9pt;
+    width:60px;
+}
+
+.map_scale_body {
+    width:180px;
+    float:left;
+    margin-left:5px;
+    font-size:9pt;
+}
+
+.input_map_size {
+    width:30px;
+    border:1px solid #EEEEEE;
+    height:12px;
+    font-size:9pt;
+}
+
+.map_display {
+    float:right;
+    width:410px;
+    height:410px;
+    margin:5px 5px 0px 6px;
+}
+
+.editor_button_area {
+    width:100%;
+    border-top:1px solid #AAAAAA;
+    text-align:center;
+    background-color:#EEEEEE;
+    padding:0px 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/naver_map/tpl/popup.html

@@ -0,0 +1,35 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+
+<form action="./" method="get" onSubmit="search_address(); return false;" id="fo">
+    <input type="hidden" id="map_x" name="x" value="" />
+    <input type="hidden" id="map_y" name="x" value="" />
+    <input type="hidden" id="marker" name="marker_1" value="" />
+
+    <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="map_display"><iframe name="display_map" id="display_map" frameBorder="0" style="width:400px;height:400px;border:0px;margin:5px;" src="./?module=editor&amp;component=naver_map&amp;act=procCall&amp;method=displayMap&amp;width=400&amp;height=400"></iframe></div>
+
+        <div class="address_box">
+            <input type="text" class="input_address" id="address" value="" /><input type="submit" value="{$lang->cmd_search}" class="address_button" onclick="search_address();return false;"/>
+            <div class="about_address">{$lang->about_address}</div>
+        </div>
+
+        <div class="address_list_box" id="address_list">{$lang->about_address_use}</div>
+
+        <div class="map_scale_box">
+            <div class="map_scale_header">{$lang->map_width}</div>
+            <div class="map_scale_body"><input type="text" class="input_map_size" id="map_width" value="640" />px</div>
+
+            <div class="map_scale_header">{$lang->map_height}</div>
+            <div class="map_scale_body"><input type="text" class="input_map_size" id="map_height" value="480" />px</div>
+        </div>
+
+        <div class="editor_button_area">
+            <input type="button" value="{$lang->cmd_insert}" class="editor_button" onclick="insertNaverMap()" />
+            <input type="button" value="{$lang->cmd_close}" class="editor_button" onclick="window.close();" />
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,111 @@
+/**
+ * popup으로 열렸을 경우 부모창의 위지윅에디터에 select된 멀티미디어 컴포넌트 코드를 체크하여
+ * 있으면 가져와서 원하는 곳에 삽입
+ **/
+function getNaverMap() {
+    // 부모 위지윅 에디터에서 선택된 영역이 있는지 확인
+    if(typeof(opener)=="undefined") return;
+
+    var node = opener.editorPrevNode;
+    if(!node || node.nodeName != "DIV") return;
+
+    var x = node.getAttribute("x");
+    var y = node.getAttribute("y");
+    var width = xWidth(node);
+    var height = xHeight(node);
+    var address = node.getAttribute("address");
+
+    if(x&&y) {
+        xGetElementById("map_x").value = x;
+        xGetElementById("map_y").value = y;
+        moveMap(x,y,3);
+    }
+    if(address) {
+        xGetElementById("address").value = address;
+        search_address(address);
+    }
+
+    xGetElementById("map_width").value = width-6;
+    xGetElementById("map_height").value = height-6;
+}
+
+function insertNaverMap(obj) {
+    if(typeof(opener)=="undefined") return;
+    
+    var x = xGetElementById("map_x").value;
+    var y = xGetElementById("map_y").value;
+    var marker = xGetElementById("marker").value;
+    var address = xGetElementById("address").value;
+
+    var width = xGetElementById("map_width").value;
+    if(!width) width = 640;
+
+    var height = xGetElementById("map_height").value;
+    if(!height) height= 480;
+
+    var text = "<div editor_component=\"naver_map\" class=\"editor_component_output\" address=\""+address+"\" x=\""+x+"\" y=\""+y+"\" width=\""+width+"\" height=\""+height+"\" style=\"width:"+width+"px;height:"+height+"px;\" marker=\""+marker+"\"></div>";
+
+    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", getNaverMap);
+
+/* 네이버의 map openapi로 주소에 따른 좌표를 요청 */
+function search_address(selected_address) {
+  if(typeof(selected_address)=="undefined") selected_address = null;
+  var address = xGetElementById("address").value;
+  if(!address) return;
+  var params = new Array();
+  params['component'] = "naver_map";
+  params['address'] = address;
+  params['method'] = "search_address";
+
+  var response_tags = new Array('error','message','address_list');
+  exec_xml('editor', 'procCall', params, complete_search_address, response_tags, selected_address);
+}
+
+function moveMap(x,y,scale) {
+    if(typeof(scale)=="undefined") scale = 3;
+    display_map.moveMap(x,y,scale);
+}
+
+function mapClicked(pos) {
+    xGetElementById("map_x").value = pos.x;
+    xGetElementById("map_y").value = pos.y;
+}
+
+var naver_address_list = new Array();
+function complete_search_address(ret_obj, response_tags, selected_address) {
+  var address_list = ret_obj['address_list'];
+  if(!address_list) return;
+
+  naver_address_list = new Array();
+
+  var html = "";
+  var address_list = address_list.split("\n");
+  for(var i=0;i<address_list.length;i++) {
+    var item = address_list[i].split(",");
+
+    naver_address_list[naver_address_list.length] = item;
+    html += "<a href='#' onclick=\"moveMap('"+item[0]+"','"+item[1]+"');return false;\">"+item[2]+"</a><br />";
+  }
+
+  var list_zone = xGetElementById("address_list");
+  xInnerHtml(list_zone, html);
+}
+
+/* 마커 표시 */
+var marker_count = 1;
+function addMarker(pos) {
+    if(marker_count>10) return;
+    xGetElementById("marker").value += '|@|'+pos;
+    marker_count++;
+    return true;
+}