두번 탭 해 도시 이동 기능 재 부활, 옵션 설정 가능

hwe/css/map.css

@@ -61,6 +61,7 @@
     position:absolute;
     right:0;
     bottom:0;
+    text-align:right;
 }
 
 .map_body .map_toggle_cityname::after{
@@ -71,6 +72,18 @@
     content: "켜기"
 }
 
+.map_body .map_toggle_single_tap{
+    display:none;
+}
+
+.map_body .map_toggle_single_tap::after{
+    content: "끄기"
+}
+
+.map_body .map_toggle_single_tap.active::after{
+    content: "켜기"
+}
+
 .world_map .city_tooltip{
     position: absolute;
     z-index:6;

hwe/js/map.js

@@ -1,5 +1,20 @@
 
+function is_touch_device() {
+    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+    var mq = function(query) {
+      return window.matchMedia(query).matches;
+    }
 
+    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) { 
+        return true; 
+    }
+
+  
+    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+    // https://git.io/vznFH
+    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
+    return mq(query);
+  }
 
 function reloadWorldMap(option){
     var $world_map = $('.world_map');
@@ -368,8 +383,76 @@ function reloadWorldMap(option){
 
         var $map_body = $('.world_map .map_body');
 
+        //터치스크린 탭
+
+        if(is_touch_device()){
+            $objs.on('touchstart', function(e){
+                if(window.sam_toggleSingleTap){
+                    return true;
+                }
+                var $this = $(this);
+                
+                var touchMode = $this.data('touchMode');
+                if($tooltip_city.data('target') != $this.data('id')){
+                    $this.data('touchMode', 1);
+                }
+                else if(touchMode === undefined){
+                    $this.data('touchMode', 1);
+                }
+                else{
+                    $this.data('touchMode', touchMode + 1);
+                }
+                $map_body.data('touchMode', 1);
+    
+                $tooltip_city.data('target', $this.data('id'));
+                
+                
+            });
+            
+            $objs.on('touchend', function(e){    
+                if(window.sam_toggleSingleTap){
+                    return true;
+                }
+                var $this = $(this);
+                var position = $this.parent().position();
+                $tooltip_city.html($this.data('text'));
+                
+                var nation_text = $this.data('nation');
+                if(nation_text){
+                    $tooltip_nation.html(nation_text).show();
+                }
+                else{
+                    $tooltip_nation.html('').hide();
+                }
+                
+                $tooltip.css({'top': position.top + 25, 'left': position.left + 35}).show();
+                
+                var touchMode = $this.data('touchMode');
+                if(touchMode <= 1){
+                    return false;
+                }
+    
+                //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+                $this.data('touchMode', 0);
+            });
+    
+            $map_body.on('touchend',function(e){
+                if(window.sam_toggleSingleTap){
+                    return true;
+                }
+                //위의 touchend bind에 해당하지 않는 경우 -> 빈 지도 터치
+                $tooltip.hide();
+            });
+
+        }
+
         //Mouse over 모드 작동
+
         $map_body.on('mousemove', function(e){
+            if($(this).data('touchMode')){
+                return true;
+            }
+
             var parentOffset = $map_body.offset(); 
             var relX = e.pageX - parentOffset.left;
             var relY = e.pageY - parentOffset.top;
@@ -378,6 +461,10 @@ function reloadWorldMap(option){
         });
 
         $objs.on('mouseenter', function(e){
+            if($map_body.data('touchMode')){
+                return true;
+            }
+
             var $this = $(this);
 
             $tooltip_city.data('target', $this.data('id'));
@@ -398,7 +485,15 @@ function reloadWorldMap(option){
         });
 
         $objs.on('click', function(e){
-            return;
+            //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+            var touchMode = $(this).data('touchMode');
+            if(touchMode === undefined){
+                return;
+            }
+
+            if(touchMode === 1){
+                return false;
+            }
         });
 
 
@@ -448,6 +543,31 @@ function reloadWorldMap(option){
         }
     });
 
+    var $toggleSingleTapBtn = $world_map.find('.map_toggle_single_tap');
+    if(localStorage.getItem('sam.toggleSingleTap') == 'yes'){
+        window.sam_toggleSingleTap = true;
+        $toggleSingleTapBtn.addClass('active').attr('aria-pressed', 'true');
+    }
+    else{
+        window.sam_toggleSingleTap = false;
+    }
+
+    var $map_body = $('.world_map .map_body');
+
+    $toggleSingleTapBtn.click(function(){
+        //이전 상태 확인
+        var state = !$toggleSingleTapBtn.hasClass('active');
+        if(state){
+            $map_body.removeData('touchMode');
+            localStorage.setItem('sam.toggleSingleTap', 'yes');
+            window.sam_toggleSingleTap = true;
+        }
+        else{
+            localStorage.setItem('sam.toggleSingleTap', 'no');
+            window.sam_toggleSingleTap = false;
+        }
+    });
+
     if(isDetailMap){
         $world_map.addClass('map_detail');
     }
@@ -527,4 +647,8 @@ function reloadWorldMap(option){
         
     }
 }
-
+$(function(){
+    if(is_touch_device()){
+        $('.map_body .map_toggle_single_tap').show();
+    }
+})

hwe/templates/map.php

@@ -11,6 +11,9 @@
         <div class="map_button_stack">
         <button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
             도시명 표기
+        </button><br>
+        <button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
+            두번 탭 해 도시 이동
         </button>
         </div>
         <div class="city_tooltip">