release v1.0.9 | feature: support param opt.showFirstPage

Author: JaminQ

dist/darkmode.js

@@ -9,6 +9,7 @@ API
 - `options` <Object> Dark Mode转换算法配置项。
   - `options.begin` <Function> Dark Mode转换开始时触发的回调。
     - `isSwitch` <boolean> 是否切换Dark Mode时进行转换。
+  - `options.showFirstPage` <Function> 首屏处理完成时触发的回调。
   - `options.error` <Function> 发生error时触发的回调。
     - `err` <Error> 错误对象。
   - `options.mode` <string> 强制指定的颜色模式（dark | light），指定了就不监听系统颜色。

dist/darkmode.min.js

@@ -9,6 +9,7 @@ API
 - `options` <Object> Configuration.
   - `options.begin` <Function> Callback triggered when Dark Mode conversion starts.
     - `isSwitch` <boolean> Whether to switch to Dark Mode.
+  - `options.showFirstPage` <Function> Callback triggered when the first page render finish.
   - `options.error` <Function> Callback triggered when an error occurs.
     - `err` <Error> Error object.
   - `options.mode` <string> The specified color mode (dark | light), if specified, the system color will not be monitored.

doc/cn/API.md

@@ -1,6 +1,6 @@
 {
   "name": "mp-darkmode",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "微信公众平台图文 Dark Mode 转换算法",
   "main": "dist/darkmode.min.js",
   "dependencies": {

doc/en/API.md

@@ -7,6 +7,7 @@
  *
  * @function init 初始化Dark Mode配置
  * @param {Function}   opt.begin                 开始处理时触发的回调
+ * @param {Function}   opt.showFirstPage         首屏处理完成时触发的回调
  * @param {Function}   opt.error                 发生error时触发的回调
  * @param {String}     opt.mode                  强制指定的颜色模式(dark|light), 指定了就不监听系统颜色
  * @param {Object}     opt.whitelist             节点白名单
@@ -43,6 +44,7 @@ const config = {
 
   // hooks
   begin: null, // 开始处理时触发的回调
+  showFirstPage: null, // 首屏处理完成时触发的回调
   error: null, // 发生error时触发的回调
 
   mode: '', // 强制指定的颜色模式(dark|light), 指定了就不监听系统颜色
@@ -141,6 +143,7 @@ const switchToDarkmode = (mqlObj, opt = {
               // 显示首屏
               cssUtils.writeStyle(true); // 写入首屏样式表
               domUtils.showFirstPageNodes(); // 显示首屏节点
+              typeof config.showFirstPage === 'function' && config.showFirstPage(); // 执行首屏回调
 
               cssUtils.addCss(sdk.convert(node), false); // 写入非首屏样式
             }
@@ -152,6 +155,11 @@ const switchToDarkmode = (mqlObj, opt = {
         }));
       }
 
+      if (config.needJudgeFirstPage || (!config.needJudgeFirstPage && !domUtils.showFirstPage)) {
+        // config.needJudgeFirstPage === ture，表示需要判断首屏但是正文长度没超过一屏
+        // config.needJudgeFirstPage === false && domUtils.showFirstPage === false，表示不需要判断首屏且没有做首屏优化
+        typeof config.showFirstPage === 'function' && config.showFirstPage();
+      }
       cssUtils.writeStyle(); // 写入非首屏样式表
     } else {
       // 首次加载页面时为非Dark Mode，标记为不需要判断首屏
@@ -198,6 +206,7 @@ export function init(opt = {}) {
   }
 
   setConfig('function', opt, 'begin');
+  setConfig('function', opt, 'showFirstPage');
   setConfig('function', opt, 'error');
   setConfig('boolean', opt, 'needJudgeFirstPage');
   setConfig('boolean', opt, 'delayBgJudge');

package.json

@@ -56,6 +56,8 @@ export function hasTableClass(dom) {
  * @constructor
  * @param {Object} config Darkmode配置
  *
+ * @attr {boolean} showFirstPage 是否已显示首屏
+ *
  * @method set 设置要处理的节点列表
  * @param {Dom Object Array} nodes 要处理的节点列表
  *
@@ -82,6 +84,8 @@ export class DomUtils {
   _firstPageNodes = []; // 首屏节点列表
   _delayNodes = []; // 延迟处理的节点列表
 
+  showFirstPage = false; // 是否已显示首屏
+
   constructor(config) {
     this._config = config;
   }
@@ -128,5 +132,6 @@ export class DomUtils {
   showFirstPageNodes() {
     this._firstPageNodes.forEach(node => node.style.visibility = 'visible'); // 显示首屏节点
     this._firstPageNodes = []; // 处理完之后清空列表
+    this.showFirstPage = true; // 记录为已显示首屏
   }
 };