Skip to content

Commit 1119a70

Browse files
JaminQJaminQ
committed
release v1.1.0-beta.1 | bugfix: backward compatible & update dependencies
1 parent d6866fd commit 1119a70

File tree

19 files changed

+5284
-5409
lines changed

19 files changed

+5284
-5409
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1+
.DS_Store
2+
*/.DS_Store
13
node_modules
24
dist/darkmode.js.map

‎README_CN.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,21 @@ Darkmode.run(document.body.querySelectorAll('*')); // 处理body下的所有DOM
4343

4444
### `Darkmode.run(nodes[, options])`
4545

46-
- `nodes` <DOM Object Array> 要进行Dark Mode转换的DOM节点数组。
47-
- `options` <Object> Dark Mode转换算法配置项。
48-
- `options.error` <Function> 发生error时触发的回调。
46+
- `nodes` <DOM Object Array> 要进行 Dark Mode 转换的 DOM 节点数组。
47+
- `options` <Object> Dark Mode 转换算法配置项。
48+
- `options.error` <Function> 发生 error 时触发的回调。
4949
- `err` <Error> 错误对象。
50-
- `options.mode` <string> 强制指定的颜色模式（dark | light），指定了就不监听系统颜色。
50+
- `options.mode` <string> 强制指定的颜色模式（ dark | light ），指定了就不监听系统颜色。
5151

52-
运行Dark Mode转换算法。
52+
运行 Dark Mode 转换算法。
5353

5454
```javascript
5555
Darkmode.run(document.body.querySelectorAll('*'), {
5656
mode: 'dark' // 强制指定深色模式
5757
});
5858
```
5959

60-
更多详细用法可参考[API](./doc/cn/API.md)。
60+
更多详细用法可参考 [API](./doc/cn/API.md)。
6161

6262
## 插件
6363

‎dist/darkmode.js‎

Lines changed: 102 additions & 94 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/darkmode.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/cn/API.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@ API
55

66
### `Darkmode.run(nodes[, options])`
77

8-
- `nodes` <DOM Object Array> 要进行Dark Mode转换的DOM节点数组。
9-
- `options` <Object> Dark Mode转换算法配置项。
10-
- `options.begin` <Function> Dark Mode转换开始时触发的回调。
11-
- `isSwitch` <boolean> 是否切换Dark Mode时进行转换。
8+
- `nodes` <DOM Object Array> 要进行 Dark Mode 转换的 DOM 节点数组。
9+
- `options` <Object> Dark Mode 转换算法配置项。
10+
- `options.begin` <Function> Dark Mode 转换开始时触发的回调。
11+
- `isSwitch` <boolean> 是否切换 Dark Mode 时进行转换。
1212
- `options.showFirstPage` <Function> 首屏处理完成时触发的回调。
13-
- `options.error` <Function> 发生error时触发的回调。
13+
- `options.error` <Function> 发生 error 时触发的回调。
1414
- `err` <Error> 错误对象。
15-
- `options.mode` <string> 强制指定的颜色模式（dark | light），指定了就不监听系统颜色。
16-
- `options.whitelist` <Object> 节点白名单，在白名单内的DOM将不会被转换。
15+
- `options.mode` <string> 强制指定的颜色模式（ dark | light ），指定了就不监听系统颜色。
16+
- `options.whitelist` <Object> 节点白名单，在白名单内的 DOM 将不会被转换。
1717
- `options.whitelist.tagName` <string Array> 标签名列表。
1818
- `options.needJudgeFirstPage` <boolean> 是否需要判断首屏，默认 `true`。
1919
- `options.delayBgJudge` <boolean> 是否延迟背景判断，默认 `false`。
20-
- `options.container` <DOM Object> 延迟运行js时使用的容器，默认 `null`。
21-
- `options.cssSelectorsPrefix` <string> css选择器前缀，默认 `''`。
22-
- `opt.defaultLightTextColor` <string> 非Dark Mode下字体颜色，默认 `#191919`。
23-
- `opt.defaultLightBgColor` <string> 非Dark Mode下背景颜色，默认 `#fff`。
24-
- `opt.defaultDarkTextColor` <string> Dark Mode下字体颜色，默认 `#a3a3a3`。
25-
- `opt.defaultDarkBgColor` <string> Dark Mode下背景颜色，默认 `#191919`。
20+
- `options.container` <DOM Object> 延迟运行 js 时使用的容器，默认 `null`。
21+
- `options.cssSelectorsPrefix` <string> css 选择器前缀，默认 `''`。
22+
- `opt.defaultLightTextColor` <string> 非 Dark Mode 下字体颜色，默认 `#191919`。
23+
- `opt.defaultLightBgColor` <string> 非 Dark Mode 下背景颜色，默认 `#fff`。
24+
- `opt.defaultDarkTextColor` <string> Dark Mode 下字体颜色，默认 `#a3a3a3`。
25+
- `opt.defaultDarkBgColor` <string> Dark Mode 下背景颜色，默认 `#191919`。
2626

27-
运行Dark Mode转换算法。**注意：可多次运行转换，但配置只可设置一次。**
27+
运行 Dark Mode 转换算法。**注意：可多次运行转换，但配置只可设置一次。**
2828

2929
```javascript
3030
Darkmode.run(document.body.querySelectorAll('*'), {
@@ -34,9 +34,9 @@ Darkmode.run(document.body.querySelectorAll('*'), {
3434

3535
### `Darkmode.init(options)`
3636

37-
- `options` 和 `Darkmode.run` 中的 `options` 参数一致。
37+
- `options` 和 `Darkmode.run()` 中的 `options` 参数一致。
3838

39-
初始化Dark Mode配置。**注意：配置只可设置一次。**
39+
初始化 Dark Mode 配置。**注意：配置只可设置一次。**
4040

4141
```javascript
4242
Darkmode.init({

‎doc/cn/plugins.md‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,106 @@
33
插件
44
==============================
55

6-
待补充
6+
## 使用插件
7+
8+
```javascript
9+
Darkmode.extend([pluginA, pluginB, pluginC]);
10+
```
11+
12+
**注意：** `Darkmode.extend()` 必须在 `Darkmode.run()` 之前执行，否则插件不生效。
13+
14+
## 编写插件
15+
16+
### 概览
17+
18+
Darkmode 会通过 `extend` 方法传入插件基类 `Plugin`，开发者在编写自己的插件时，需要继承插件基类。通过插件基类，开发者可以访问一些插件内置属性和方法，并且可以使用插件钩子来编写自己的逻辑。
19+
20+
```javascript
21+
export default function (Plugin) {
22+
return class extends Plugin {
23+
constructor() {
24+
super(); // 插件基类包含一些内置属性和方法
25+
26+
... // 可以在这里自定义插件属性
27+
}
28+
29+
// BEGIN: 插件钩子
30+
beforeConvertNode(el) {}
31+
32+
afterConvertNode(el) {}
33+
34+
afterConvertTextColor(el, opt) {}
35+
// END: 插件钩子
36+
37+
... // 可以在这里自定义插件方法
38+
}
39+
};
40+
```
41+
42+
### 内置属性和方法
43+
44+
所有内置属性和方法都可以在插件里通过 `this` 访问。
45+
46+
#### 内置属性
47+
48+
- `loopTimes` <number> 已遍历次数（全部节点遍历结束算一次）。
49+
- `isDarkmode` <boolean> 是否为Dark Mode。
50+
51+
#### 内置方法
52+
53+
##### `addCss(className, kvList, needMediaQuery)`
54+
55+
- `className` <string> DOM 节点类名。
56+
- `kvList` <Array> css 键值对列表。
57+
- `kvList[0].key` <string> css 属性。
58+
- `kvList[0].value` <string> css 值。
59+
- `needMediaQuery` <boolean> 是否需要添加 Dark Mode 媒体查询。
60+
61+
添加样式。
62+
63+
```javascript
64+
this.addCss('test_class1', [{
65+
key: 'color',
66+
value: '#DDD'
67+
}, {
68+
key: 'text-align',
69+
value: 'center'
70+
}], true);
71+
72+
this.addCss('test_class2', [{
73+
key: 'cursor',
74+
value: 'pointer'
75+
}], true);
76+
77+
// 运行结果
78+
// @media (prefers-color-scheme: dark) {.test_class1{color: #DDD !important;text-align: center !important;}.test_class2{cursor: pointer !important;}}
79+
```
80+
81+
### 插件钩子
82+
83+
![生命周期图](../imgs/hooks.png)
84+
85+
#### `beforeConvertNode(el)`
86+
87+
- `el` <DOM Object> 当前转换的 DOM 节点。
88+
89+
节点开始转换前的钩子。
90+
91+
**注意：** 如果在这个钩子里对节点进行操作（如修改内联样式），将会影响后续的转换结果。如果不希望对转换结果造成影响，建议使用 [afterConvertNode()](#afterconvertnodeel) 钩子。
92+
93+
#### `afterConvertTextColor(el, opt)`
94+
95+
- `el` <DOM Object> 当前转换的 DOM 节点。
96+
- `opt` <Object> 文本颜色对象。
97+
- `opt.fontColor` <Color Object> 文本前景色 `Color` 对象。
98+
- `opt.bgColor` <Color Object> 文本背景色 `Color` 对象。
99+
100+
文本样式转换结束后的钩子。
101+
102+
**注意：** `Color` 对象基于 [color](https://www.npmjs.com/package/color)，使用时注意保持版本一致（版本号详见 [package.json](../../package.json#L7)）。
103+
104+
#### `afterConvertNode(el)`
105+
106+
- `el` <DOM Object> 当前转换的 DOM 节点。
107+
108+
节点转换结束后的钩子。

‎doc/en/API.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Darkmode.run(document.body.querySelectorAll('*'), {
3434

3535
### `Darkmode.init(options)`
3636

37-
- `options` Same as the `options` parameter in `Darkmode.run`.
37+
- `options` Same as the `options` parameter in `Darkmode.run()`.
3838

3939
Initialize Dark Mode configuration. **Note: The configuration can only be set once.**
4040

‎doc/en/plugins.md‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,108 @@ English | [简体中文](../cn/plugins.md)
33
Plugins
44
==============================
55

6-
To be added
6+
## How to use
7+
8+
```javascript
9+
Darkmode.extend([pluginA, pluginB, pluginC]);
10+
```
11+
12+
**Note:** `Darkmode.extend()` must be executed before `Darkmode.run()`, otherwise the plugin will not work.
13+
14+
## Make your plugin
15+
16+
### Overview
17+
18+
Darkmode will provide the plugin base class `Plugin` parameter through the `extend` method. When you write your own plugins, you need to inherit the plugin base class. You can use some built-in properties and methods by the plugin base class, and you can use plugin hooks to write your own logic.
19+
20+
```javascript
21+
export default function (Plugin) {
22+
return class extends Plugin {
23+
constructor() {
24+
super(); // The plugin base class contains some built-in properties and methods
25+
26+
... // Plugin properties can be customized here
27+
}
28+
29+
// BEGIN: Plugin Hook
30+
beforeConvertNode(el) {}
31+
32+
afterConvertNode(el) {}
33+
34+
afterConvertTextColor(el, opt) {}
35+
// END: Plugin Hook
36+
37+
... // Plugin methods can be customized here
38+
}
39+
};
40+
```
41+
42+
### Built-in properties and methods
43+
44+
All built-in properties and methods can be accessed in plugins via `this`.
45+
46+
#### Built-in properties
47+
48+
- `loopTimes` <number> The number of times it has been traversed (one time when all nodes are traversed).
49+
- `isDarkmode` <boolean> Whether it is Dark Mode.
50+
51+
#### Built-in methods
52+
53+
##### `addCss(className, kvList, needMediaQuery)`
54+
55+
- `className` <string> DOM class name.
56+
- `kvList` <Array> List of css key-value pairs.
57+
- `kvList[0].key` <string> CSS property.
58+
- `kvList[0].value` <string> CSS value.
59+
- `needMediaQuery` <boolean> Whether the Dark Mode media query needs to be added.
60+
61+
Add styles.
62+
63+
```javascript
64+
this.addCss('test_class1', [{
65+
key: 'color',
66+
value: '#DDD'
67+
}, {
68+
key: 'text-align',
69+
value: 'center'
70+
}], true);
71+
72+
this.addCss('test_class2', [{
73+
key: 'cursor',
74+
value: 'pointer'
75+
}], true);
76+
77+
// Result
78+
// @media (prefers-color-scheme: dark) {.test_class1{color: #DDD !important;text-align: center !important;}.test_class2{cursor: pointer !important;}}
79+
```
80+
81+
### Hooks
82+
83+
![Lifecycle Diagram](../imgs/hooks.png)
84+
85+
#### `beforeConvertNode(el)`
86+
87+
- `el` <DOM Object> The currently transformed node.
88+
89+
Hook before the node starts transforming.
90+
91+
**Note:** If you operate on the node in this hook (such as modifying the inline style), it will affect the subsequent conversion results. If you don't want to affect the conversion result, it is recommended to use the [afterConvertNode()](#afterconvertnodeel) hook.
92+
93+
94+
95+
#### `afterConvertTextColor(el, opt)`
96+
97+
- `el` <DOM Object> The currently transformed node.
98+
- `opt` <Object> Text color object.
99+
- `opt.fontColor` <Color Object> The text foreground color `Color` object.
100+
- `opt.bgColor` <Color Object> Text background color `Color` object.
101+
102+
Hook after the text style conversion.
103+
104+
**Note:** The `Color` object is based on [color](https://www.npmjs.com/package/color). Please keep the same version when using it(refer to [package.json](../../package.json#L7) for the version).
105+
106+
#### `afterConvertNode(el)`
107+
108+
- `el` <DOM Object> The currently transformed node.
109+
110+
Hook after the node conversion.

‎doc/imgs/hooks.png‎

82.4 KB
Loading

0 commit comments

Comments
 (0)