mirror of
https://github.com/flarum/framework.git
synced 2024-11-28 20:16:08 +08:00
f9e8424620
* Add Tooltip component to common Will be used to provide backwards compatibility when we switch to CSS tooltips. All other methods of creating tooltips are deprecated and this component-based method should be used instead. * Modify direct child instead of using container element Instead of using a container to house the tooltip, we'll now modify the first direct child of the Tooltip component. The Tooltip component will ensure that: - children are passed to it - only one child is present - that child is an actual HTML Element and not a text node, or similar - that child is currently present in the DOM Only after all of the above are satisfied, will the tooltip be created on that element. We store a reference to the DOM node that the tooltip should be created on, then use this to perform tooltip actions via jQuery. If this element gets changes (e.g. the tooltip content is updated to another element) then the tooltip will be recreated. If any of the first 3 requirements are not satisfied, an error will be thrown to alert the developer to their misuse of this component. To make this work, we do need to overwrite the title attribute of the element with the tooltip, but this is the only solution other than specifying `title` as an option when making the tooltip, but this is not accessible by screenreaders unless they simulate a hover on the element. * Add warning about component overwriting `title` attr * Update previous uses of Tooltip component
40 lines
936 B
TypeScript
40 lines
936 B
TypeScript
// Mithril
|
|
import Mithril from 'mithril';
|
|
|
|
// Other third-party libs
|
|
import * as _dayjs from 'dayjs';
|
|
import * as _$ from 'jquery';
|
|
|
|
// Globals from flarum/core
|
|
import Application from './src/common/Application';
|
|
|
|
import type { TooltipJQueryFunction } from './@types/tooltips';
|
|
|
|
/**
|
|
* flarum/core exposes several extensions globally:
|
|
*
|
|
* - jQuery for convenient DOM manipulation
|
|
* - Mithril for VDOM and components
|
|
* - dayjs for date/time operations
|
|
*
|
|
* Since these are already part of the global namespace, extensions won't need
|
|
* to (and should not) bundle these themselves.
|
|
*/
|
|
declare global {
|
|
// $ is already defined by `@types/jquery`
|
|
const m: Mithril.Static;
|
|
const dayjs: typeof _dayjs;
|
|
|
|
// Extend JQuery with our custom functions, defined with $.fn
|
|
interface JQuery {
|
|
tooltip: TooltipJQueryFunction;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* All global variables owned by flarum/core.
|
|
*/
|
|
declare global {
|
|
const app: Application;
|
|
}
|