Changeset 7699

Timestamp:

07/05/09 04:13:45 (8 months ago)

Author:

daybreaker

Message:

refs #1291: UI 정리, Geolocation 정보 가져오는 부분까지 구현

Location:

branches/1.8/plugins/GoogleMap

Files:

• common.css (modified) (1 diff)
• images/gmap_toolbar.gif (deleted)
• images/icon_loading.gif (added)
• images/toolbox-location.png (added)
• images/toolbox-map.png (added)
• index.php (modified) (4 diffs)
• index.xml (modified) (1 diff)
• popup.css (moved) (moved from branches/1.8/plugins/GoogleMap/insert.css) (4 diffs)
• scripts/editor.js (modified) (1 diff)

branches/1.8/plugins/GoogleMap/common.css

@@ -28 +28 @@
     color: #999;
 }
+
+dl#toolbox-googlemap {
+    display: inline-block;
+    height: 22px;
+}
+
+dl#toolbox-googlemap dd.command-box {
+    float: left;
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
+    background: -webkit-gradient(linear, left 10, left bottom, from(#fff), to(#eee));
+}
+dl#toolbox-googlemap dd.command-box:hover {
+    background: -webkit-gradient(linear, left 10, left bottom, from(#f2f2f2), to(#ddd));
+}
+dl#toolbox-googlemap dd.command-box:active {
+    background: -webkit-gradient(linear, left 10, left bottom, to(#f2f2f2), from(#ddd));
+}
+
+dl#toolbox-googlemap dd.command-box a.button {
+    display: block;
+    border-right: 1px solid #bbb;
+    padding: 0 6px 0 24px;
+    line-height: 22px;
+    background: transparent;
+    background-repeat: no-repeat !important;
+    background-position: 3px center !important;
+    color: black;
+    text-decoration: none;
+}
+
+dl#toolbox-googlemap dd.command-box:first-child a.button {
+    border-left: 1px solid #bbb;
+}
+
+dl#toolbox-googlemap dd.command-box a.button:hover {
+    text-decoration: none;
+}
+
+dl#toolbox-googlemap dd.command-box #gmap-insertMap {
+    background-image: url(./images/toolbox-map.png);
+}
+
+dl#toolbox-googlemap dd.command-box #gmap-getLocation {
+    background-image: url(./images/toolbox-location.png);
+}

branches/1.8/plugins/GoogleMap/index.php

@@ -43 +43 @@
 function GoogleMap_AddToolbox($target) {
     global $pluginURL;
-    $target .= "<img src=\"$pluginURL/images/gmap_toolbar.gif\" border=\"0\" alt=\"구글맵 추가하기\" onclick=\"GMapTool_Insert();\" style=\"cursor:pointer\" />\n";
+    $target .= "<dl id=\"toolbox-googlemap\">";
+    $target .= "<dd class=\"command-box\"><a class=\"button\" id=\"gmap-insertMap\" href=\"#insertGoogleMap\" onclick=\"GMapTool_insertMap(); return false;\">구글맵 추가하기</a></dd>";
+    $target .= "<dd class=\"command-box\"><a class=\"button\" href=\"#getLocation\" id=\"gmap-getLocation\" onclick=\"GMapTool_getLocation(); return false;\">현재 위치 알아내기</a></dd>";
+    $target .= "</dl>";
     return $target;
 }
@@ -269 +272 @@
 }
 
-function GoogleMapUI_Insert() {
+function GoogleMapUI_InsertMap() {
     global $configVal, $pluginURL;
     requireComponent('Textcube.Function.Misc');
@@ -319 +322 @@
 }
 
+function GoogleMapUI_GetLocation() {
+    global $configVal, $pluginURL;
+    requireComponent('Textcube.Function.Misc');
+    $config = Setting::fetchConfigVal($configVal);
+    $lat = $config['latitude'];
+    $lng = $config['longitude'];
+    $default_type = 'G_HYBRID_MAP';
+    $default_width = 500;
+    $default_height = 400;
+    $zoom = 10;
+    _GMap_printHeaderForUI('현재 위치 알아내기', $config['apiKey']);
+?>
+    <h2>이용 안내</h2>
+    <p>웹브라우저가 제공하는 Geolocation 서비스를 이용하여 현재 위치 정보를 가져옵니다. 정확도는 사용하고 계신 기기나 지역에 따라 다를 수 있습니다. <a href="#help">(자세히 알아보기)</a></p>
+    <p><span id="availability"></span><span id="status"></span></p>
+    <h2>미리보기</h2>
+    <div style="text-align:center;">
+        <div id="GoogleMapPreview" style="width:<?php echo $default_width;?>px; height:<?php echo $default_height;?>px; margin:0 auto;"></div>
+    </div>
+    <script type="text/javascript">
+    //<![CDATA[
+    function initializeMap() {
+        map = new GMap2($('#GoogleMapPreview')[0]);
+        map.addMapType(G_PHYSICAL_MAP);
+        map.setMapType(<?php echo $default_type;?>);
+        map.addControl(new GHierarchicalMapTypeControl());
+        map.addControl(new GLargeMapControl());
+        map.addControl(new GScaleControl());
+        map.enableScrollWheelZoom();
+        map.enableContinuousZoom();
+        map.setCenter(new GLatLng(<?php echo $lat;?>, <?php echo $lng;?>), <?php echo $zoom;?>);
+    }
+    //]]>
+    </script>
+    <script type="text/javascript">
+    //<![CDATA[
+    $(document).ready(function() {
+        if (navigator.geolocation) {
+            $('#availability').html('현재 웹브라우저는 Geolocation 기능을 지원합니다. <button id="getLocation">위치 가져오기</button>')
+            $('#getLocation').click(function() {
+                $('#status').html('<img src="<?php echo $pluginURL; ?>/images/icon_loading.gif" style="vertical-align:middle" width="16" height="16" alt="가져오는 중..." />');
+                navigator.geolocation.getCurrentPosition(function(pos) {
+                    map.setCenter(new GLatLng(pos.coords.latitude, pos.coords.longitude), 10);
+                    $('#status').html('가져오기 완료.');
+                }, function(error) {
+                    alert('위치 정보를 가져오는 데 실패하였습니다. ('+error.code+', '+error.message+')');
+                    $('#status').html('가져오기 실패.');
+                });
+            });
+        } else {
+            $('#availability').html('현재 웹브라우저는 Geolocation 기능을 지원하지 않습니다.')
+        }
+    });
+    //]]>
+    </script>
+<?php
+    _GMap_printFooterForUI();
+}
+
 function _GMap_printHeaderForUI($title, $api_key) {
     global $pluginURL, $blogURL, $service, $adminSkinSetting;
@@ -326 +388 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Google Map Plugin: <?php echo $title;?></title>
-    <link rel="stylesheet" type="text/css" href="<?php echo $pluginURL;?>/insert.css" />
+    <link rel="stylesheet" type="text/css" href="<?php echo $pluginURL;?>/popup.css" />
     <script type="text/javascript" src="<?php echo $pluginURL;?>/scripts/jquery-1.2.6.min.js"></script>
     <script type="text/javascript" src="<?php echo $pluginURL;?>/scripts/jquery-ui-1.6rc2.js"></script>

branches/1.8/plugins/GoogleMap/index.xml

@@ -15 +15 @@
   </requirements>
   <binding>
-    <listener event="/plugin/GMapCustomInsert/">GoogleMapUI_Insert</listener>
+    <listener event="/plugin/GMapCustomInsert/">GoogleMapUI_InsertMap</listener>
+    <listener event="/plugin/GMapGetLocation/">GoogleMapUI_GetLocation</listener>
     <listener event="/plugin/GMapCache/">GoogleMap_Cache</listener>
     <listener event="ViewPostContent">GoogleMap_View</listener>

branches/1.8/plugins/GoogleMap/popup.css

@@ -38 +38 @@
     display: inline-block;
     margin: 2px;
-    padding: 1px 3px 2px 3px;
+    padding: 0 6px;
+    line-height: 20px;
     background: #f2f2f2;
-    border: 1px solid #69c;
+    background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e4e4e4));
+    border: 1px solid #bbb;
     border-radius: 3px;
     -moz-border-radius: 3px;
@@ -47 +49 @@
 }
 button:hover {
-    background-color: #cce8ff;
+    border-color: #999;
+    background: #D7E0EE;
+    background: -webkit-gradient(linear, left top, left bottom, from(#EFF2FB), to(#B5D5EC));
+}
+button:active {
+    background: -webkit-gradient(linear, left top, left bottom, to(#C7DDF4), from(#A9C9F0));
 }
 button.toggled {
+    border-color: #222;
     background-color: #555;
+    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#666));
     color: white;
 }
 button.toggled:hover {
     background-color: #666;
+    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#777));
 }
 
@@ -72 +82 @@
 input, textarea {
     border: 1px solid #ccc;
+    padding: 1px;
+    line-height: 17px;
+    background: -webkit-gradient(linear, left top, 0 10, from(#eee), to(#fff));
+    -webkit-background-origin: padding-box;
+    -webkit-background-clip: content-box;
     font-size: 0.9em;
 }
@@ -107 +122 @@
     text-align: left;
 }
+#status {
+    font-size: 8pt;
+    color: #555;
+}

branches/1.8/plugins/GoogleMap/scripts/editor.js

@@ -6 +6 @@
 }
 
-function GMapTool_Insert() {
+function GMapTool_insertMap() {
     window.open(blogURL + '/plugin/GMapCustomInsert/', 'GMapTool_Insert', 'menubar=no,toolbar=no,width=550,height=650,scrollbars=yes');
 }
 
+function GMapTool_getLocation() {
+    window.open(blogURL + '/plugin/GMapGetLocation/', 'GMapTool_GetLocation', 'menubar=no,toolbar=no,width=550,height=650,scrollbars=no');
+}
+
 STD.addUnloadEventListener(function() { GUnload(); });