萌娘百科:MoeSkin/mw.hooks

MoeSkin独占的官方 JavaScript 钩子。

moeskin.instance

[since 3.0.0] Internal hook.

Context

// Fire
mw.hook("moeskin.instance").fire(skin)
// Types
abstract class MoeSkin {
  readonly app: import('vue').App
  readonly pinia: import('pinia').Pinia
  readonly data: GlobalSkinData
}

moeskin.stores

[since 3.0.0] Internal hook.

Context

// Fire
mw.hook("moeskin.stores").fire({
  useDeviceStore,
  useMediaWikiStore,
  useMsgStore,
  useNavigationStore,
  usePagetoolsStore,
  useRouteViewStore,
  useSearchStore,
  useSideRailStore,
  useSitenoticeStore,
  useSkinStore,
  useTocStore,
  useUserStore,
})
// Types
// WIP

Usage demo

/**
 * Recommended: use MoeSkin stores with specific Pinia instance
 */
Promise.all(
  ['moeskin.instance', 'moeskin.stores'].map(function (name) {
    return new Promise(mw.hook(name).add)
  })
).then(function (payload) {
  var moeskin = payload[0]
  var stores = payload[1]
  //                             ↓ This is not necessary, but it's recommended.
  var msg = stores.useMsgStore(moeskin.pinia)
  console.info(msg.get('moeskin-advancedsearch-getmore', '萌百娘')) // 更多有关“萌百娘”的搜索结果
})

/**
 * Or you can use it directly without Pinia context
 * Note that unexepted errors may occur if you use it with multiple Vue instances on the same page
 */
mw.hook('moeskin.stores').add(function (stores) {
  var msg = stores.useMsgStore()
  console.info(msg.get('moeskin-advancedsearch-getmore', '萌百娘')) // 更多有关“萌百娘”的搜索结果
})

useNavigationStore

Types declaration

declare const useNavigationStore: StoreDefinition<'navigation', {
  topbar: TopbarItem[]
  curNavName: SidebarName | ''
  checkIsShow: (pos: SidebarName) => boolean
  show: (pos: SidebarName) => void
  hide: () => void
  toggle: (pos: SidebarName) => void
}>

type SidebarName = 'topbar-navigation' | 'float-toc'
type TopbarItem = MwLink & { children?: MwLink[]; innerHTML?: string }
interface MwLink {
  id: string
  class: string
  text: string
  href: string
  title?: string
  accesskey?: string
  primary?: boolean
  exists?: boolean
  rel?: string
  context?: string
  target?: '_blank'
  data?: Record<string, any>
}

moeskin.addPortletLink

[unofficial] Pollify for mw.util.addPortletLink

Context

// Fire
mw.hook("moeskin.addPortletLink").fire({ addPortletLink, useCustomSidenavBlock })
// Types
function addPortletLink(portletId?: unknown, href: string, text: string, id?: string, tooltip?: string, accesskey?: string, nextnode?: unknown): HTMLLiElement
function useCustomSidenavBlock(): JQuery<HTMLDivElement>

Description

• useCustomSidenavBlock 返回全局侧边栏中的“自定义工具”的 jQuery 对象，若该元素不存在则立即创建一个
• addPortletLink 使用方法与mw.util.addPortletLink相同，行为是向“自定义工具”的列表中添加一个列表项目，返回该列表元素

moeskin.pagetools

[unofficial] 在 PageTools 中新增按钮。

Context

// Fire
mw.hook("moeskin.pagetools").fire({ usePageTools, usePageToolsButton, addPageToolsButton })
// Types
function usePageTools(): JQuery<HTMLDivElement>
function usePageToolsButton(): JQuery<HTMLAnchorElement>
function addPageToolsButton(icon?: string, tooltip?: string | HTMLOrSVGElement, type?: 'action' | 'extra' = 'action'): JQuery<HTMLAnchorElement>

Description

• usePageTools 返回 PageTools 的 jQuery 对象
• usePageToolsButton 克隆一个 PageTools 按钮，返回 jQuery 对象
• addPageToolsButton 向 PageTools 区域添加一个自定义按钮，返回该按钮的 jQuery 对象

Examples

/**
 * @example addPageToolsButton
 */
mw.hook("moeskin.pagetools").add(({ addPageToolsButton }) => {
    /** @type {JQuery<HTMLAnchorElement>} */
    const $myBtn = addPageToolsButton("icon", "tooltip");
    $myBtn.on("click", () => {
        alert("hello, world");
    });
});