fix: 지도 관련 클릭 무효 수정
This commit is contained in:
@@ -456,8 +456,10 @@ function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
|
||||
function clickOutside($event: MouseEvent): void {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
touchState.value = 0;
|
||||
activatedCity.value = undefined;
|
||||
if(touchState.value == 1) {
|
||||
touchState.value = 0;
|
||||
activatedCity.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
|
||||
@@ -473,244 +475,4 @@ function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
|
||||
touchState.value = 0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
function setMouseWork(obj: MapCityDrawable) {
|
||||
initTooltip($(drawTarget));
|
||||
|
||||
const $tooltip = $(drawTarget + " .city_tooltip");
|
||||
const $tooltip_city = $tooltip.find(".city_name");
|
||||
const $tooltip_nation = $tooltip.find(".nation_name");
|
||||
|
||||
const $objs = $(drawTarget + " .city_link");
|
||||
|
||||
const $map_body = $(drawTarget + " .map_body");
|
||||
|
||||
//터치스크린 탭
|
||||
|
||||
if (!option.neutralView && is_touch_device()) {
|
||||
$objs.on("touchstart", function () {
|
||||
if (window.sam_toggleSingleTap) {
|
||||
return true;
|
||||
}
|
||||
const $this = $(this);
|
||||
|
||||
const touchMode = $this.data("touchMode") as number;
|
||||
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 () {
|
||||
if (window.sam_toggleSingleTap) {
|
||||
return true;
|
||||
}
|
||||
const $this = $(this);
|
||||
const position = $this.parent().position();
|
||||
$tooltip_city.html($this.data("text") as string);
|
||||
|
||||
const nation_text = $this.data("nation") as string;
|
||||
if (nation_text) {
|
||||
$tooltip_nation.html(nation_text).show();
|
||||
} else {
|
||||
$tooltip_nation.html("").hide();
|
||||
}
|
||||
|
||||
const left = position.left;
|
||||
const top = position.top;
|
||||
|
||||
const tooltipWidth = unwrap($tooltip.width());
|
||||
|
||||
if (left + tooltipWidth + 35 > window.innerWidth) {
|
||||
$tooltip.css({ top: top + 45, left: left - tooltipWidth - 10 }).show();
|
||||
} else {
|
||||
$tooltip.css({ top: top + 45, left: left + 35 }).show();
|
||||
}
|
||||
|
||||
const touchMode = $this.data("touchMode") as number;
|
||||
if (touchMode <= 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
//xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
|
||||
$this.data("touchMode", 0);
|
||||
});
|
||||
|
||||
$map_body.on("touchend", function () {
|
||||
if (window.sam_toggleSingleTap) {
|
||||
return true;
|
||||
}
|
||||
//위의 touchend bind에 해당하지 않는 경우 -> 빈 지도 터치
|
||||
$tooltip.hide();
|
||||
});
|
||||
}
|
||||
|
||||
//Mouse over 모드 작동
|
||||
|
||||
$map_body.on("mousemove", function (e) {
|
||||
if ($(this).data("touchMode")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
const left = e.clientX - rect.left - this.clientLeft + this.scrollLeft;
|
||||
const top = e.clientY - rect.top - this.clientTop + this.scrollTop;
|
||||
|
||||
const tooltipWidth = unwrap($tooltip.width());
|
||||
|
||||
if (e.clientX + rect.left + tooltipWidth + 10 > window.innerWidth) {
|
||||
$tooltip.css({ top: top + 30, left: left - tooltipWidth - 10 });
|
||||
} else {
|
||||
$tooltip.css({ top: top + 30, left: left + 10 });
|
||||
}
|
||||
});
|
||||
|
||||
$objs.on("mouseenter", function () {
|
||||
if ($map_body.data("touchMode")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const $this = $(this);
|
||||
|
||||
$tooltip_city.data("target", $this.data("id"));
|
||||
$tooltip_city.html($this.data("text"));
|
||||
const nation_text = $this.data("nation");
|
||||
if (nation_text) {
|
||||
$tooltip_nation.html(nation_text).show();
|
||||
} else {
|
||||
$tooltip_nation.html("").hide();
|
||||
}
|
||||
|
||||
$tooltip.show();
|
||||
});
|
||||
|
||||
$objs.on("mouseleave", function () {
|
||||
$tooltip.hide();
|
||||
});
|
||||
|
||||
$objs.on("click", function () {
|
||||
//xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
|
||||
const touchMode = $(this).data("touchMode") as number | undefined;
|
||||
if (touchMode === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (touchMode === 1) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function setCityClickable(obj: MapCityDrawable) {
|
||||
obj.cityList.forEach(function (city) {
|
||||
const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`);
|
||||
|
||||
if ("clickable" in city && city.clickable > 0) {
|
||||
$cityLink.attr("href", stringFormat(hrefTemplate, city.id));
|
||||
}
|
||||
|
||||
if (selectCallback) {
|
||||
$cityLink.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
return selectCallback(city);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
async function reloadWorldMap(option: loadMapOption, drawTarget = ".world_map"): Promise<void> {
|
||||
const $world_map = $(drawTarget);
|
||||
|
||||
const defaultOption: loadMapOption = {
|
||||
isDetailMap: true, //복잡 지도, 단순 지도
|
||||
clickableAll: false, //어떤 경우든 클릭을 가능하게 함. 해당 동작의 동작 가능성 여부와는 별도.
|
||||
selectCallback: undefined, //callback을 지정시 clickable과 관계 없이 해당 함수를 실행.
|
||||
hrefTemplate: "#", //도시가 클릭가능할 경우 지정할 href값. {0}은 도시 id로 변환됨
|
||||
|
||||
//아래부터는 post query에 들어갈 녀석
|
||||
year: undefined, //year값, 연감등에 사용
|
||||
month: undefined, //month값, 연감등에 사용
|
||||
neutralView: false, //clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
|
||||
showMe: true, //반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
|
||||
|
||||
callback: undefined,
|
||||
|
||||
//기타 보조 값
|
||||
startYear: undefined,
|
||||
};
|
||||
|
||||
const isDetailMap = props.isDetailMap ?? true;
|
||||
const clickableAll = props.clickableAll ?? false;
|
||||
const selectCallback = props.selectCallback;
|
||||
const hrefTemplate = props.hrefTemplate;
|
||||
|
||||
const cityPosition = window.getCityPosition();
|
||||
|
||||
const storedOldMapKey = `sam.${props.serverNick}.map`;
|
||||
const storedStartYear = `sam.${props.serverNick}.startYear`;
|
||||
//OBJ : startYear, year, month, cityList, nationList, spyList, shownByGeneralList, myCity
|
||||
|
||||
const $hideCityNameBtn = $world_map.find(".map_toggle_cityname");
|
||||
if (localStorage.getItem("sam.hideMapCityName") == "yes") {
|
||||
$world_map.addClass("hide_cityname");
|
||||
$hideCityNameBtn.addClass("active").attr("aria-pressed", "true");
|
||||
}
|
||||
|
||||
$hideCityNameBtn.on("click", function () {
|
||||
//이전 상태 확인
|
||||
const state = localStorage.getItem("sam.hideMapCityName") == "no";
|
||||
if (state) {
|
||||
$world_map.addClass("hide_cityname");
|
||||
localStorage.setItem("sam.hideMapCityName", "yes");
|
||||
} else {
|
||||
$world_map.removeClass("hide_cityname");
|
||||
localStorage.setItem("sam.hideMapCityName", "no");
|
||||
}
|
||||
});
|
||||
|
||||
const $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;
|
||||
}
|
||||
|
||||
const $map_body = $(drawTarget + " .map_body");
|
||||
|
||||
$toggleSingleTapBtn.on("click", function () {
|
||||
//이전 상태 확인
|
||||
const state = localStorage.getItem("sam.toggleSingleTap") == "no";
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
const computedResult = await convertCityObjs(rawObject)
|
||||
.then(isDetailMap ? drawDetailWorldMap : drawBasicWorldMap)
|
||||
.then(setMouseWork)
|
||||
.then(setCityClickable);
|
||||
|
||||
if (option.callback) {
|
||||
option.callback(computedResult, rawObject);
|
||||
}
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user