mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.9 KiB
TypeScript
88 lines
1.9 KiB
TypeScript
import Shepherd from 'shepherd.js';
|
|
import { Translate } from './translate';
|
|
|
|
function buildWatchDom(selector: string) {
|
|
return () => {
|
|
return new Promise<void>((resolve) => {
|
|
const findDom = () => {
|
|
if (document.querySelector(selector)) {
|
|
resolve();
|
|
} else {
|
|
setTimeout(() => {
|
|
findDom();
|
|
}, 200);
|
|
}
|
|
};
|
|
|
|
findDom();
|
|
});
|
|
};
|
|
}
|
|
|
|
function buildStepOption(options: {
|
|
id: string;
|
|
text: string;
|
|
selector: string;
|
|
position?: Shepherd.Step.StepOptions['attachTo']['on'];
|
|
canClickTarget?: boolean;
|
|
}): Shepherd.Step.StepOptions {
|
|
return {
|
|
id: options.id,
|
|
text: options.text,
|
|
attachTo: {
|
|
element: options.selector,
|
|
on: options.position ?? 'auto',
|
|
},
|
|
canClickTarget: false,
|
|
beforeShowPromise: buildWatchDom(options.selector),
|
|
};
|
|
}
|
|
|
|
export const steps: Shepherd.Step.StepOptions[] = [
|
|
{
|
|
id: 'start',
|
|
text: Translate.step1,
|
|
beforeShowPromise: buildWatchDom('[data-tc-role=navbar]'), // 仅当主界面出现后才显示欢迎
|
|
},
|
|
buildStepOption({
|
|
id: 'navbar',
|
|
text: Translate.step2,
|
|
selector: '[data-tc-role=navbar]',
|
|
position: 'right',
|
|
}),
|
|
buildStepOption({
|
|
id: 'personal',
|
|
text: Translate.step3,
|
|
selector: '[data-tc-role=navbar-personal]',
|
|
position: 'right',
|
|
}),
|
|
buildStepOption({
|
|
id: 'groups',
|
|
text: Translate.step4,
|
|
selector: '[data-tc-role=navbar-groups]',
|
|
position: 'right',
|
|
}),
|
|
buildStepOption({
|
|
id: 'settings',
|
|
text: Translate.step5,
|
|
selector: '[data-tc-role=navbar-settings]',
|
|
position: 'right',
|
|
}),
|
|
buildStepOption({
|
|
id: 'sidebar',
|
|
text: Translate.step6,
|
|
selector: '[data-tc-role^=sidebar-]',
|
|
position: 'right',
|
|
}),
|
|
buildStepOption({
|
|
id: 'content',
|
|
text: Translate.step7,
|
|
selector: '[data-tc-role^=content-]',
|
|
position: 'right',
|
|
}),
|
|
{
|
|
id: 'end',
|
|
text: Translate.step8,
|
|
},
|
|
];
|