fix: 지도 관련 클릭 무효 수정
This commit is contained in:
@@ -456,8 +456,10 @@ function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
|
|||||||
function clickOutside($event: MouseEvent): void {
|
function clickOutside($event: MouseEvent): void {
|
||||||
$event.preventDefault();
|
$event.preventDefault();
|
||||||
$event.stopPropagation();
|
$event.stopPropagation();
|
||||||
touchState.value = 0;
|
if(touchState.value == 1) {
|
||||||
activatedCity.value = undefined;
|
touchState.value = 0;
|
||||||
|
activatedCity.value = undefined;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
|
function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
|
||||||
@@ -473,244 +475,4 @@ function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
|
|||||||
touchState.value = 0;
|
touchState.value = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
</script>
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user