From 54535213e0213fda8e6aef0f9e086d4cd5b41427 Mon Sep 17 00:00:00 2001 From: Guangcong Luo Date: Wed, 20 Feb 2019 01:07:39 -0500 Subject: [PATCH] Fix mobile device tooltip support For the first time since original tooltips, we have a pressed-down animation for move/switch buttons! More importantly, long-presses are no longer weird, and now just lock in the tooltip instead of also opening a context menu. In addition, clicking on a locked tooltip dismisses it, which should help address complaints about locked tooltips being hard to dismiss. This makes it slightly harder to select text in locked tooltips, but clicking and dragging on desktop still works. --- src/battle-tooltips.ts | 40 +++++++++++++++++++++++++++++++++++----- style/client.css | 4 +++- style/sim-types.css | 36 ++++++++++++++++++------------------ 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/battle-tooltips.ts b/src/battle-tooltips.ts index f7f261cc2..924c35069 100644 --- a/src/battle-tooltips.ts +++ b/src/battle-tooltips.ts @@ -145,6 +145,7 @@ class BattleTooltips { static elem: HTMLDivElement | null = null; static parentElem: HTMLElement | null = null; static isLocked = false; + static isPressed = false; static hideTooltip() { if (!BattleTooltips.elem) return; @@ -166,6 +167,10 @@ class BattleTooltips { lockTooltip() { if (BattleTooltips.elem && !BattleTooltips.isLocked) { BattleTooltips.isLocked = true; + if (BattleTooltips.isPressed) { + $(BattleTooltips.parentElem!).removeClass('pressed'); + BattleTooltips.isPressed = false; + } $('#tooltipwrapper').addClass('tooltip-locked'); } } @@ -180,15 +185,29 @@ class BattleTooltips { const $elem = $(elem); $elem.on('mouseover', '.has-tooltip', this.showTooltipEvent); $elem.on('click', '.has-tooltip', this.clickTooltipEvent); - $elem.on('touchstart', '.has-tooltip', this.holdLockTooltipEvent); - $elem.on('touchend', '.has-tooltip', BattleTooltips.unshowTooltip); - $elem.on('touchleave', '.has-tooltip', BattleTooltips.unshowTooltip); - $elem.on('touchcancel', '.has-tooltip', BattleTooltips.unshowTooltip); $elem.on('focus', '.has-tooltip', this.showTooltipEvent); $elem.on('mouseout', '.has-tooltip', BattleTooltips.unshowTooltip); $elem.on('mousedown', '.has-tooltip', this.holdLockTooltipEvent); $elem.on('blur', '.has-tooltip', BattleTooltips.unshowTooltip); $elem.on('mouseup', '.has-tooltip', BattleTooltips.unshowTooltip); + + $elem.on('touchstart', '.has-tooltip', e => { + e.preventDefault(); + this.holdLockTooltipEvent(e); + if (e.currentTarget === BattleTooltips.parentElem && BattleTooltips.parentElem!.tagName === 'BUTTON') { + $(BattleTooltips.parentElem!).addClass('pressed'); + BattleTooltips.isPressed = true; + } + }); + $elem.on('touchend', '.has-tooltip', e => { + e.preventDefault(); + if (e.currentTarget === BattleTooltips.parentElem && BattleTooltips.isPressed) { + BattleTooltips.parentElem!.click(); + } + BattleTooltips.unshowTooltip(); + }); + $elem.on('touchleave', '.has-tooltip', BattleTooltips.unshowTooltip); + $elem.on('touchcancel', '.has-tooltip', BattleTooltips.unshowTooltip); } clickTooltipEvent = (e: Event) => { @@ -202,7 +221,7 @@ class BattleTooltips { * * (Namely, a long-tap or long-click) */ - holdLockTooltipEvent = (e: Event) => { + holdLockTooltipEvent = (e: JQuery.TriggeredEvent) => { if (BattleTooltips.isLocked) BattleTooltips.hideTooltip(); const target = e.currentTarget as HTMLElement; this.showTooltip(target); @@ -224,6 +243,10 @@ class BattleTooltips { */ static unshowTooltip() { if (BattleTooltips.isLocked) return; + if (BattleTooltips.isPressed) { + $(BattleTooltips.parentElem!).removeClass('pressed'); + BattleTooltips.isPressed = false; + } BattleTooltips.hideTooltip(); } @@ -310,6 +333,13 @@ class BattleTooltips { if (!$wrapper.length) { $wrapper = $(``); $(document.body).append($wrapper); + $wrapper.on('click', e => { + try { + const selection = window.getSelection(); + if (selection.type === 'Range') return; + } catch (err) {} + BattleTooltips.hideTooltip(); + }); } else { $wrapper.removeClass('tooltip-locked'); } diff --git a/style/client.css b/style/client.css index c83bf5ff5..25428b0db 100644 --- a/style/client.css +++ b/style/client.css @@ -2032,7 +2032,9 @@ a.ilink.yours { border-color: #606060; } .switchmenu button:active, -.movemenu button:active { +.movemenu button:active, +.switchmenu button.pressed, +.movemenu button.pressed { background: linear-gradient(to bottom, #cfcfcf, #f2f2f2); } diff --git a/style/sim-types.css b/style/sim-types.css index a2744977d..18f988f9d 100644 --- a/style/sim-types.css +++ b/style/sim-types.css @@ -13,7 +13,7 @@ background: linear-gradient(to bottom, hsl(60,14%,94%), hsl(60,14%,77%)); border-color: hsl(60,14%,41%); } -.movemenu button.type-Normal:active { +.movemenu button.type-Normal:active, .movemenu button.type-Normal.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(60,14%,77%); background: linear-gradient(to bottom, hsl(60,14%,77%), hsl(60,14%,83%)); @@ -35,7 +35,7 @@ background: linear-gradient(to bottom, hsl(3,40%,94%), hsl(3,40%,77%)); border-color: hsl(3,40%,41%); } -.movemenu button.type-Fighting:active { +.movemenu button.type-Fighting:active, .movemenu button.type-Fighting.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(342, 16%, 77%); background: linear-gradient(to bottom, hsl(3,40%,77%), hsl(3,40%,83%)); @@ -57,7 +57,7 @@ background: linear-gradient(to bottom, hsl(255,20%,94%), hsl(255,20%,77%)); border-color: hsl(255,20%,41%); } -.movemenu button.type-Flying:active { +.movemenu button.type-Flying:active, .movemenu button.type-Flying.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(255,20%,77%); background: linear-gradient(to bottom, hsl(255,20%,77%), hsl(255,20%,83%)); @@ -79,7 +79,7 @@ background: linear-gradient(to bottom, hsl(300,30%,94%), hsl(300,30%,77%)); border-color: hsl(300,30%,41%); } -.movemenu button.type-Poison:active { +.movemenu button.type-Poison:active, .movemenu button.type-Poison.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(300,30%,77%); background: linear-gradient(to bottom, hsl(300,30%,77%), hsl(300,30%,83%)); @@ -101,7 +101,7 @@ background: linear-gradient(to bottom, hsl(44,27%,94%), hsl(44,27%,77%)); border-color: hsl(44,27%,41%); } -.movemenu button.type-Ground:active { +.movemenu button.type-Ground:active, .movemenu button.type-Ground.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(44,27%,77%); background: linear-gradient(to bottom, hsl(44,27%,77%), hsl(44,27%,83%)); @@ -123,7 +123,7 @@ background: linear-gradient(to bottom, hsl(49,35%,94%), hsl(49,35%,77%)); border-color: hsl(49,35%,41%); } -.movemenu button.type-Rock:active { +.movemenu button.type-Rock:active, .movemenu button.type-Rock.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(49,35%,77%); background: linear-gradient(to bottom, hsl(49,35%,77%), hsl(49,35%,83%)); @@ -145,7 +145,7 @@ background: linear-gradient(to bottom, hsl(66,42%,94%), hsl(66,42%,77%)); border-color: hsl(66,42%,41%); } -.movemenu button.type-Bug:active { +.movemenu button.type-Bug:active, .movemenu button.type-Bug.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(66,42%,77%); background: linear-gradient(to bottom, hsl(66,42%,77%), hsl(66,42%,83%)); @@ -167,7 +167,7 @@ background: linear-gradient(to bottom, hsl(262,21%,94%), hsl(262,21%,77%)); border-color: hsl(262,21%,41%); } -.movemenu button.type-Ghost:active { +.movemenu button.type-Ghost:active, .movemenu button.type-Ghost.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(262,21%,77%); background: linear-gradient(to bottom, hsl(262,21%,77%), hsl(262,21%,83%)); @@ -189,7 +189,7 @@ background: linear-gradient(to bottom, hsl(240,6%,94%), hsl(240,6%,77%)); border-color: hsl(240,6%,41%); } -.movemenu button.type-Steel:active { +.movemenu button.type-Steel:active, .movemenu button.type-Steel.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(240,6%,77%); background: linear-gradient(to bottom, hsl(240,6%,77%), hsl(240,6%,83%)); @@ -211,7 +211,7 @@ background: linear-gradient(to bottom, hsl(25,40%,94%), hsl(25,40%,77%)); border-color: hsl(25,40%,41%); } -.movemenu button.type-Fire:active { +.movemenu button.type-Fire:active, .movemenu button.type-Fire.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(25,40%,77%); background: linear-gradient(to bottom, hsl(25,40%,77%), hsl(25,40%,83%)); @@ -233,7 +233,7 @@ background: linear-gradient(to bottom, hsl(222,29%,94%), hsl(222,29%,77%)); border-color: hsl(222,29%,41%); } -.movemenu button.type-Water:active { +.movemenu button.type-Water:active, .movemenu button.type-Water.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(222,29%,77%); background: linear-gradient(to bottom, hsl(222,29%,77%), hsl(222,29%,83%)); @@ -255,7 +255,7 @@ background: linear-gradient(to bottom, hsl(100,30%,94%), hsl(100,30%,77%)); border-color: hsl(100,30%,41%); } -.movemenu button.type-Grass:active { +.movemenu button.type-Grass:active, .movemenu button.type-Grass.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(100,30%,77%); background: linear-gradient(to bottom, hsl(100,30%,77%), hsl(100,30%,83%)); @@ -277,7 +277,7 @@ background: linear-gradient(to bottom, hsl(48,41%,94%), hsl(48,41%,77%)); border-color: hsl(48,41%,41%); } -.movemenu button.type-Electric:active { +.movemenu button.type-Electric:active, .movemenu button.type-Electric.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(48,41%,77%); background: linear-gradient(to bottom, hsl(48,41%,77%), hsl(48,41%,83%)); @@ -299,7 +299,7 @@ background: linear-gradient(to bottom, hsl(342,33%,94%), hsl(342,33%,77%)); border-color: hsl(342,33%,41%); } -.movemenu button.type-Psychic:active { +.movemenu button.type-Psychic:active, .movemenu button.type-Psychic.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(342,33%,77%); background: linear-gradient(to bottom, hsl(342,33%,77%), hsl(342,33%,83%)); @@ -321,7 +321,7 @@ background: linear-gradient(to bottom, hsl(180,15%,94%), hsl(180,15%,77%)); border-color: hsl(180,15%,41%); } -.movemenu button.type-Ice:active { +.movemenu button.type-Ice:active, .movemenu button.type-Ice.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(180,15%,77%); background: linear-gradient(to bottom, hsl(180,15%,77%), hsl(180,15%,83%)); @@ -343,7 +343,7 @@ background: linear-gradient(to bottom, hsl(257,39%,94%), hsl(257,39%,77%)); border-color: hsl(257,39%,41%); } -.movemenu button.type-Dragon:active { +.movemenu button.type-Dragon:active, .movemenu button.type-Dragon.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(257,39%,77%); background: linear-gradient(to bottom, hsl(257,39%,77%), hsl(257,39%,83%)); @@ -365,7 +365,7 @@ background: linear-gradient(to bottom, hsl(24,18%,94%), hsl(24,18%,77%)); border-color: hsl(24,18%,41%); } -.movemenu button.type-Dark:active { +.movemenu button.type-Dark:active, .movemenu button.type-Dark.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(24,18%,77%); background: linear-gradient(to bottom, hsl(24,18%,77%), hsl(24,18%,83%)); @@ -387,7 +387,7 @@ background: linear-gradient(to bottom, hsl(310,41%,94%), hsl(310,41%,77%)); border-color: hsl(310,41%,41%); } -.movemenu button.type-Fairy:active { +.movemenu button.type-Fairy:active, .movemenu button.type-Fairy.pressed { /* bg: 83 to 88, border: 41 */ background: hsl(310,41%,77%); background: linear-gradient(to bottom, hsl(310,41%,77%), hsl(310,41%,83%));