Skip to content

Commit

Permalink
Fix wowhead tooltips in icon enum picker (#4243)
Browse files Browse the repository at this point in the history 
* port two SoD updates

* fix icon enum tooltips
  • Loading branch information
@kayla-glick
kayla-glick authored Apr 14, 2024
1 parent da41664 commit b3bbd90
Showing 1 changed file with 40 additions and 48 deletions.
88 changes: 40 additions & 48 deletions ui/core/components/icon_enum_picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { element, fragment } from 'tsx-vanilla';

import { ActionId } from '../proto_utils/action_id.js';
import { TypedEvent } from '../typed_event.js';

import { Input, InputConfig } from './input.js';

export enum IconEnumPickerDirection {
Expand All @@ -13,32 +12,32 @@ export enum IconEnumPickerDirection {
}

export interface IconEnumValueConfig<ModObject, T> {
value: T,
value: T;
// One of these should be set. If actionId is set, shows the icon for that id. If
// color is set, shows that color.
actionId?: ActionId,
color?: string,
actionId?: ActionId;
color?: string;
// Text to be displayed on the icon.
text?: string,
text?: string;
// Hover tooltip.
tooltip?: string,
tooltip?: string;

showWhen?: (obj: ModObject) => boolean,
showWhen?: (obj: ModObject) => boolean;
}

export interface IconEnumPickerConfig<ModObject, T> extends InputConfig<ModObject, T> {
numColumns?: number,
numColumns?: number;
values: Array<IconEnumValueConfig<ModObject, T>>;
// Value that will be considered inactive.
zeroValue: T,
zeroValue: T;
// Function for comparing two values.
// Tooltip that will be shown whne hovering over the icon-picker-button
tooltip?: string,
tooltip?: string;
// The direction the menu will open in relative to the root element
direction?: IconEnumPickerDirection,
equals: (a: T, b: T) => boolean,
backupIconUrl?: (value: T) => ActionId,
showWhen?: (obj: ModObject) => boolean,
direction?: IconEnumPickerDirection;
equals: (a: T, b: T) => boolean;
backupIconUrl?: (value: T) => ActionId;
showWhen?: (obj: ModObject) => boolean;
}

// Icon-based UI for picking enum values.
Expand All @@ -60,15 +59,14 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
if (config.showWhen) {
config.changedEvent(this.modObject).on(_eventID => {
const show = config.showWhen && config.showWhen(this.modObject);
if (!show)
this.rootElem.classList.add('hide');
if (!show) this.rootElem.classList.add('hide');
});
}

if (config.tooltip) {
Tooltip.getOrCreateInstance(this.rootElem, {
html: true,
title: config.tooltip
title: config.tooltip,
});
}
this.rootElem.appendChild(
Expand All @@ -77,67 +75,63 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
href="javascript:void(0)"
className="icon-picker-button"
attributes={{
'aria-expanded':"false",
role: 'button'
'aria-expanded': 'false',
role: 'button',
}}
dataset={{
bsToggle: 'dropdown',
bsPlacement: 'bottom',
whtticon:"false",
disableWowheadTouchTooltip:'true'
}}
>
<span className='icon-picker-label'></span>
whtticon: 'false',
disableWowheadTouchTooltip: 'true',
}}>
<span className="icon-picker-label"></span>
</a>
<ul className="dropdown-menu"></ul>
</>
)
</>,
);

this.buttonElem = this.rootElem.querySelector('.icon-picker-button') as HTMLAnchorElement;
this.buttonText = this.buttonElem.querySelector('.icon-picker-label') as HTMLElement;
const dropdownMenu = this.rootElem.querySelector('.dropdown-menu') as HTMLElement;

if (this.config.numColumns)
dropdownMenu.style.gridTemplateColumns = `repeat(${this.config.numColumns}, 1fr)`;
if (this.config.numColumns) dropdownMenu.style.gridTemplateColumns = `repeat(${this.config.numColumns}, 1fr)`;

if (this.config.direction == IconEnumPickerDirection.Horizontal)
dropdownMenu.style.gridAutoFlow = 'column';
if (this.config.direction == IconEnumPickerDirection.Horizontal) dropdownMenu.style.gridAutoFlow = 'column';

config.values.forEach((valueConfig, _i) => {
const optionContainer = document.createElement('li');
optionContainer.classList.add('icon-dropdown-option', 'dropdown-option')
optionContainer.classList.add('icon-dropdown-option', 'dropdown-option');
dropdownMenu.appendChild(optionContainer);

const option = document.createElement('a');
option.classList.add('icon-picker-button');
option.dataset.disableWowheadTouchTooltip='true';
option.dataset.whtticon = 'false';
option.dataset.disableWowheadTouchTooltip = 'true';
optionContainer.appendChild(option);
this.setImage(option, valueConfig);

if (valueConfig.text != undefined) {
const optionText = document.createElement('div');
optionText.classList.add("icon-picker-label");
optionText.classList.add('icon-picker-label');
optionText.textContent = valueConfig.text;
option.append(optionText);
}

if (valueConfig.tooltip) {
Tooltip.getOrCreateInstance(option, {
html: true,
title: valueConfig.tooltip
title: valueConfig.tooltip,
});
}

const show = !valueConfig.showWhen || valueConfig.showWhen(this.modObject);
if (!show) optionContainer.classList.add('hide')
if (!show) optionContainer.classList.add('hide');

if (valueConfig.showWhen) {
config.changedEvent(this.modObject).on(_eventID => {
const show = valueConfig.showWhen && valueConfig.showWhen(this.modObject);
if (show)
optionContainer.classList.remove('hide');
else
optionContainer.classList.add('hide');
if (show) optionContainer.classList.remove('hide');
else optionContainer.classList.add('hide');
});
}

Expand Down Expand Up @@ -179,17 +173,17 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {

setInputValue(newValue: T) {
this.currentValue = newValue;
this.setActive(this.enabled && !this.config.equals(this.currentValue, this.config.zeroValue))
this.setActive(this.enabled && !this.config.equals(this.currentValue, this.config.zeroValue));

this.buttonText.textContent = ''
this.buttonText.style.display = 'none'
this.buttonText.textContent = '';
this.buttonText.style.display = 'none';

const valueConfig = this.config.values.find(valueConfig => this.config.equals(valueConfig.value, this.currentValue))!;
if (valueConfig) {
this.setImage(this.buttonElem, valueConfig);
if (valueConfig.text != undefined) {
this.buttonText.style.display = 'block'
this.buttonText.textContent = valueConfig.text
this.buttonText.style.display = 'block';
this.buttonText.textContent = valueConfig.text;
}
} else if (this.config.backupIconUrl) {
const backupId = this.config.backupIconUrl(this.currentValue);
Expand All @@ -199,9 +193,7 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
}

setActive(active: boolean) {
if (active)
this.buttonElem.classList.add('active');
else
this.buttonElem.classList.remove('active');
if (active) this.buttonElem.classList.add('active');
else this.buttonElem.classList.remove('active');
}
}

0 comments on commit b3bbd90

Please sign in to comment.