devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

fix: 500px 지도모드에서 tooltip 위치 조정

Browse Source
This commit is contained in:
Hide_D
2021-11-28 19:24:31 +09:00
parent 8eda98ff4c
commit 526fa11c20
3 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/css/map.css
+5
View File
@@ -493,4 +493,9 @@
.map_basic .city_base .city_state.city_state_good{ .map_basic .city_base .city_state.city_state_good{
background-color:blue; background-color:blue;
}
.btn.btn-minimum{
padding-top: 1px;
padding-bottom: 1px;
} }
hwe/templates/map.php
+2 -2
View File
@@ -9,10 +9,10 @@
<div class="map_bglayer2"></div> <div class="map_bglayer2"></div>
<div class="map_bgroad"></div> <div class="map_bgroad"></div>
<div class="map_button_stack"> <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 type="button" class="btn btn-primary map_toggle_cityname btn-sm btn-minimum" data-toggle="button" aria-pressed="false" autocomplete="off">
도시명 표기 도시명 표기
</button><br> </button><br>
<button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off"> <button type="button" class="btn btn-secondary map_toggle_single_tap btn-sm btn-minimum" data-toggle="button" aria-pressed="false" autocomplete="off">
두번 탭 해 도시 이동 두번 탭 해 도시 이동
</button> </button>
</div> </div>
hwe/ts/map.ts
+35 -19
View File
@@ -18,7 +18,7 @@ declare global {
interface Window { interface Window {
sam_toggleSingleTap?: boolean, sam_toggleSingleTap?: boolean,
getCityPosition: () => CityPositionMap; getCityPosition: () => CityPositionMap;
formatCityInfo: (city: MapCityParsedRaw)=>MapCityParsedRegionLevelText formatCityInfo: (city: MapCityParsedRaw) => MapCityParsedRegionLevelText
} }
} }
@@ -323,7 +323,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
}; };
} }
function mergeNationInfo(city: MapCityParsedName):MapCityParsedNation{ function mergeNationInfo(city: MapCityParsedName): MapCityParsedNation {
//nationID 값으로 isCapital, color, nation을 통합 //nationID 값으로 isCapital, color, nation을 통합
const nationID = city.nationID; const nationID = city.nationID;
@@ -343,7 +343,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
}; };
} }
function mergeClickable(city:MapCityParsedNation): MapCityParsedClickable { function mergeClickable(city: MapCityParsedNation): MapCityParsedClickable {
//clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll
const id = city.id; const id = city.id;
const nationID = city.nationID; const nationID = city.nationID;
@@ -436,7 +436,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
}); });
if(myCity){ if (myCity) {
$world_map.find(`.city_base_${myCity} .city_filler`).addClass('my_city'); $world_map.find(`.city_base_${myCity} .city_filler`).addClass('my_city');
} }
@@ -444,7 +444,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
return obj; return obj;
} }
function drawBasicWorldMap(obj:MapCityDrawable) { function drawBasicWorldMap(obj: MapCityDrawable) {
const $map_body = $(`${drawTarget} .map_body`); const $map_body = $(`${drawTarget} .map_body`);
@@ -496,7 +496,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
$map_body.append($cityObj); $map_body.append($cityObj);
}); });
if(myCity){ if (myCity) {
$world_map.find(`.city_base_${myCity} .city_filler`).addClass('my_city'); $world_map.find(`.city_base_${myCity} .city_filler`).addClass('my_city');
} }
@@ -504,7 +504,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
return obj; return obj;
} }
function setMouseWork(obj:MapCityDrawable) { function setMouseWork(obj: MapCityDrawable) {
const $tooltip = $(drawTarget + ' .city_tooltip'); const $tooltip = $(drawTarget + ' .city_tooltip');
const $tooltip_city = $tooltip.find('.city_name'); const $tooltip_city = $tooltip.find('.city_name');
const $tooltip_nation = $tooltip.find('.nation_name'); const $tooltip_nation = $tooltip.find('.nation_name');
@@ -537,7 +537,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
}); });
$objs.on('touchend', function () { $objs.on('touchend', function (e) {
if (window.sam_toggleSingleTap) { if (window.sam_toggleSingleTap) {
return true; return true;
} }
@@ -555,7 +555,14 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
const left = position.left; const left = position.left;
const top = position.top; const top = position.top;
$tooltip.css({ 'top': top + 45, 'left': left + 35 }).show(); 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; const touchMode = $this.data('touchMode') as number;
if (touchMode <= 1) { if (touchMode <= 1) {
@@ -587,7 +594,16 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft); const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
const top = (e.clientY - rect.top - this.clientTop + this.scrollTop); const top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
$tooltip.css({ 'top': top + 30, 'left': left + 10 }); 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 () { $objs.on('mouseenter', function () {
@@ -615,7 +631,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
$objs.on('click', function () { $objs.on('click', function () {
//xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다. //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
const touchMode = $(this).data('touchMode') as number|undefined; const touchMode = $(this).data('touchMode') as number | undefined;
if (touchMode === undefined) { if (touchMode === undefined) {
return; return;
} }
@@ -629,7 +645,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
return obj; return obj;
} }
function setCityClickable(obj:MapCityDrawable) { function setCityClickable(obj: MapCityDrawable) {
obj.cityList.forEach(function (city) { obj.cityList.forEach(function (city) {
const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`); const $cityLink = $world_map.find(`.city_base_${city.id} .city_link`);
@@ -734,7 +750,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
if ($world_map.hasClass('draw_required')) { if ($world_map.hasClass('draw_required')) {
if (useCachedMap) { if (useCachedMap) {
//일단 불러옴 //일단 불러옴
await (async ()=>{ await (async () => {
const rawStoredMap = localStorage.getItem(storedOldMapKey); const rawStoredMap = localStorage.getItem(storedOldMapKey);
if (!rawStoredMap) { if (!rawStoredMap) {
return; return;
@@ -745,14 +761,14 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
} }
await setMapBackground(storedMap) await setMapBackground(storedMap)
.then(convertCityObjs) .then(convertCityObjs)
.then(isDetailMap?drawDetailWorldMap:drawBasicWorldMap) .then(isDetailMap ? drawDetailWorldMap : drawBasicWorldMap)
.then(setMouseWork) .then(setMouseWork)
.then(setCityClickable) .then(setCityClickable)
.then(saveCityInfo); .then(saveCityInfo);
})(); })();
} else if (option.year && option.month) { } else if (option.year && option.month) {
const rawStartYear = localStorage.getItem(storedStartYear) as string|undefined; const rawStartYear = localStorage.getItem(storedStartYear) as string | undefined;
let startYear: number; let startYear: number;
if (rawStartYear) { if (rawStartYear) {
startYear = JSON.parse(rawStartYear); startYear = JSON.parse(rawStartYear);