Skip to content

Commit

Permalink
Fix mobile device tooltip support
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@Zarel
Zarel committed Feb 20, 2019
1 parent e5febd4 commit 852dec5
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 23 deletions.
38 changes: 34 additions & 4 deletions src/battle-tooltips.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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');
}
}
Expand All @@ -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) => {
Expand Down Expand Up @@ -224,6 +243,10 @@ class BattleTooltips {
*/
static unshowTooltip() {
if (BattleTooltips.isLocked) return;
if (BattleTooltips.isPressed) {
$(BattleTooltips.parentElem).removeClass('pressed');
BattleTooltips.isPressed = false;
}
BattleTooltips.hideTooltip();
}

Expand Down Expand Up @@ -310,6 +333,13 @@ class BattleTooltips {
if (!$wrapper.length) {
$wrapper = $(`<div id="tooltipwrapper" role="tooltip"></div>`);
$(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');
}
Expand Down
4 changes: 3 additions & 1 deletion style/client.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
36 changes: 18 additions & 18 deletions style/sim-types.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand All @@ -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%));
Expand Down

0 comments on commit 852dec5

Please sign in to comment.