From e9d1fdb4ee7005fa1e025d4758f55bd2c147a608 Mon Sep 17 00:00:00 2001 From: hide_d Date: Tue, 5 Mar 2019 23:06:34 +0900 Subject: [PATCH] =?UTF-8?q?=EB=91=90=EB=B2=88=20=ED=83=AD=20=ED=95=B4=20?= =?UTF-8?q?=EB=8F=84=EC=8B=9C=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=9E=AC=20=EB=B6=80=ED=99=9C,=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hwe/css/map.css | 13 +++++ hwe/js/map.js | 128 +++++++++++++++++++++++++++++++++++++++++- hwe/templates/map.php | 3 + 3 files changed, 142 insertions(+), 2 deletions(-) diff --git a/hwe/css/map.css b/hwe/css/map.css index 935458c6..e89b79aa 100644 --- a/hwe/css/map.css +++ b/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; diff --git a/hwe/js/map.js b/hwe/js/map.js index 09686e8d..b1c49e67 100644 --- a/hwe/js/map.js +++ b/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(); + } +}) \ No newline at end of file diff --git a/hwe/templates/map.php b/hwe/templates/map.php index 72b97147..bc50e3b0 100644 --- a/hwe/templates/map.php +++ b/hwe/templates/map.php @@ -11,6 +11,9 @@

+