Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit408a4e0

Browse files
committed
allow theel option to accept anHTMLElement instance
This aligns it with what the docs were already saying erroneously, plusthis is useful in cases when people have refs to an element already(embedding Docsify in a custom element shadow root, or in a Reactcomponent that has a ref to the target element, etc).
1 parent659d18b commit408a4e0

File tree

3 files changed

+71
-23
lines changed

3 files changed

+71
-23
lines changed

‎docs/configuration.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ The config can also be defined as a function, in which case the first argument i
3232

3333
##el
3434

35-
- Type:`String`
36-
- Default:`#app`
35+
- Type:`String | HTMLElement`
36+
- Default:`"#app"`
3737

3838
The DOM element to be mounted on initialization. It can be a CSS selector string or an actual[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
3939

@@ -43,6 +43,16 @@ window.$docsify = {
4343
};
4444
```
4545

46+
or
47+
48+
```js
49+
constsomeElement=document.querySelector('#someElement');
50+
51+
window.$docsify= {
52+
el: someElement,
53+
};
54+
```
55+
4656
##repo
4757

4858
- Type:`String`

‎src/core/util/dom.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,30 @@ export const head = inBrowser && $.head;
2929

3030
/**
3131
* Find elements
32-
*@param {String|Element}el The root elementwheretoperform the search from
33-
*@param {Element}node The query
34-
*@returns {Element}Thefound DOM element
32+
*@param {String|Element}elOrQuery Thequery to use on document, or theroot elementon whichtouse a query.
33+
*@param {Element}query The query to use on elOrQuery if elOrQuery is an element.
34+
*@returns {Element}If elOrQuery is an element and query is not provided, elOrQuery is returned. Otherwise, thefound DOM element is returned.
3535
*@example
3636
* find('nav') => document.querySelector('nav')
3737
* find(nav, 'a') => nav.querySelector('a')
3838
*/
39-
exportfunctionfind(el,node){
40-
returnnode ?el.querySelector(node) :$.querySelector(el);
39+
exportfunctionfind(elOrQuery,query){
40+
letroot;
41+
42+
// f.e. dom.find('#foo') or dom.find(el)
43+
if(arguments.length===1){
44+
if(elOrQueryinstanceofElement){
45+
returnelOrQuery;
46+
}
47+
root=$;
48+
query=elOrQuery;
49+
}
50+
// f.e. dom.find(el, "#foo")
51+
elseif(arguments.length===2){
52+
root=elOrQuery;
53+
}
54+
55+
returnroot.querySelector(query);
4156
}
4257

4358
/**

‎test/integration/docsify.test.js‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
constdocsifyInit=require('../helpers/docsify-init');
22

3-
// Suite
4-
// -----------------------------------------------------------------------------
53
describe('Docsify',function(){
6-
// Tests
7-
// ---------------------------------------------------------------------------
8-
test('allows $docsify configuration to be a function',async()=>{
9-
consttestConfig=jest.fn(vm=>{
10-
expect(vm).toBeInstanceOf(Object);
11-
expect(vm.constructor.name).toEqual('Docsify');
12-
expect(vm.$fetch).toBeInstanceOf(Function);
13-
expect(vm.$resetEvents).toBeInstanceOf(Function);
14-
expect(vm.route).toBeInstanceOf(Object);
15-
});
4+
describe('config options',()=>{
5+
test('allows $docsify configuration to be a function',async()=>{
6+
consttestConfig=jest.fn(vm=>{
7+
expect(vm).toBeInstanceOf(Object);
8+
expect(vm.constructor.name).toEqual('Docsify');
9+
expect(vm.$fetch).toBeInstanceOf(Function);
10+
expect(vm.$resetEvents).toBeInstanceOf(Function);
11+
expect(vm.route).toBeInstanceOf(Object);
12+
});
1613

17-
awaitdocsifyInit({
18-
config:testConfig,
14+
awaitdocsifyInit({
15+
config:testConfig,
16+
});
17+
18+
expect(typeofDocsify).toEqual('object');
19+
expect(testConfig).toHaveBeenCalled();
1920
});
2021

21-
expect(typeofDocsify).toEqual('object');
22-
expect(testConfig).toHaveBeenCalled();
22+
describe('config.el',()=>{
23+
it('accepts an element instance',async()=>{
24+
constconfig=jest.fn(()=>{
25+
constapp=document.querySelector('#app');
26+
expect(app).toBeInstanceOf(HTMLElement);
27+
28+
return{
29+
basePath:`${TEST_HOST}/docs/index.html#/`,
30+
el:app,
31+
};
32+
});
33+
34+
awaitdocsifyInit({
35+
config,
36+
testURL:`${TEST_HOST}/docs/index.html#/`,
37+
});
38+
39+
expect(config).toHaveBeenCalled();
40+
41+
expect(document.querySelector('#main').textContent).toContain(
42+
'A magical documentation site generator.'
43+
);
44+
});
45+
});
2346
});
2447

2548
test('provides the hooks and vm API to plugins',async()=>{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp