feat: remove delayTime param; handle dl dd dt list item

.gitignore

@@ -1,5 +1,8 @@
 # Created by https://www.gitignore.io/api/vim,node,code,webstorm,sublimetext
 
+### Project ###
+demo
+
 ### Code ###
 # Visual Studio Code - https://code.visualstudio.com/
 .settings/

README.md

@@ -36,7 +36,6 @@ skeleton.config.json:
   "minGrayBlockWidth": 80,
   "minGrayPseudoWidth": 10,
   "debug": true,
-  "delayTime": 0,
   "debugTime": 3000,
   "cookies": [
     {
@@ -92,7 +91,6 @@ $ skeleton -c ./skeleton.config.json
 | openRepeatList | 否 | true | 默认会将每个列表的第一项进行复制 |
 | device | 否 | 空为PC | 参考 puppeteer/DeviceDescriptors.js，可以设置为 'iPhone 6 Plus' |
 | debug | 否 | false | 是否开启调试开关 |
-| delayTime | 否 | 0 | 延迟打开页面时间，用户处理登录等操作 |
 | debugTime | 否 | 0 | 调试模式下，页面停留在骨架图的时间 |
 | minGrayBlockWidth | 否 | 0 | 最小处理灰色块的宽度 |
 | minGrayPseudoWidth | 否 | 0 | 最小处理伪类宽 |

demo/index.js

@@ -8,20 +8,8 @@ getSkeleton({
   minGrayBlockWidth: 80,
   minGrayPseudoWidth: 10,
   debug: true,
+  debugTime: 3000,
   cookies: [{
-    "domain": ".baidu.com",
-    "expirationDate": 3708990421.619608,
-    "hostOnly": false,
-    "httpOnly": false,
-    "name": "BAIDUID",
-    "path": "/",
-    "sameSite": "unspecified",
-    "secure": false,
-    "session": false,
-    "storeId": "0",
-    "value": "xxxxxxxxx",
-    "id": 1
-  }, {
     "domain": ".baidu.com",
     "expirationDate": 1568267131.555328,
     "hostOnly": false,
@@ -35,9 +23,6 @@ getSkeleton({
     "value": "yyyyyyyyy",
     "id": 2
   }],
-  delayTime: 0,
-  debugTime: 0,
 }).then(result => {
   console.log(result.html)
 })
-

package.json

@@ -49,11 +49,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "eslint --fix",
-      "git add"
-    ],
-    "*.json": [
-      "git add"
+      "eslint --fix"
     ]
   },
   "nyc": {

src/index.js

@@ -18,7 +18,6 @@ const insertSkeleton = require('./insertSkeleton');
  * @param {Number} options.minGrayBlockWidth 最小处理灰色块的宽度
  * @param {Number} options.minGrayPseudoWidth 最小处理伪类宽度
  * @param {Boolean} options.debug 是否开启调试
- * @param {Number} options.delayTime 延迟打开页面时间，用户处理登录等操作
  * @param {Number} options.debugTime 调试模式下，页面停留在骨架图的时间
  */
 const getSkeleton = async function(options) {

src/openPage.js

@@ -30,19 +30,16 @@ const openPage = async options => {
     page.on('error', msg => console.log('PAGE ERR: ', ...msg.args));
   }
 
-  // 延迟打开页面，用来处理登录，写入 session/cookie
-  await sleep(options.delayTime || 0);
-
-  await page.goto(options.pageUrl);
-
   // 写入 cookie，解决登录态问题
   if (options.cookies && options.cookies.length) {
     await page.setCookie(...options.cookies);
     await page.cookies(options.pageUrl);
     await sleep(1000);
-    await page.goto(options.pageUrl);
   }
 
+  // 打开页面
+  await page.goto(options.pageUrl);
+
   // 获取 src/script 中打包后的脚本
   const scriptContent = await genScriptContent();
 

src/script/constants.js

@@ -1,5 +1,6 @@
 // 骨架图主色调
 export const MAIN_COLOR = '#EEEEEE';
+export const MAIN_COLOR_RGB = 'rgb(238, 238, 238)';
 
 // 伪类样式
 export const PSEUDO_CLASS = 'sk-pseudo';
@@ -15,3 +16,6 @@ export const SMALLEST_BASE64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///y
 
 // 标记文本
 export const SKELETON_TEXT_CLASS = 'skeleton-text-block-mark';
+
+// 列表项标签
+export const LIST_ITEM_TAG = [ 'LI', 'DT', 'DD' ];

src/script/dist/index.js

@@ -79,6 +79,7 @@
 
   // 骨架图主色调
   const MAIN_COLOR = '#EEEEEE';
+  const MAIN_COLOR_RGB = 'rgb(238, 238, 238)';
 
   // 伪类样式
   const PSEUDO_CLASS = 'sk-pseudo';
@@ -95,6 +96,9 @@
   // 标记文本
   const SKELETON_TEXT_CLASS = 'skeleton-text-block-mark';
 
+  // 列表项标签
+  const LIST_ITEM_TAG = [ 'LI', 'DT', 'DD' ];
+
   function aHandler(node) {
     node.removeAttribute('href');
   }
@@ -353,13 +357,13 @@
     if (!options.openRepeatList || !node.children.length) return;
 
     const children = node.children;
-    const len = Array.from(children).filter(child => child.tagName === 'LI').length;
+    const len = Array.from(children).filter(child => LIST_ITEM_TAG.indexOf(child.tagName) > -1).length;
 
     if (len === 0) return false;
 
     const firstChild = children[0];
-    // 解决有时ul元素子元素不是 li元素的 bug。
-    if (firstChild.tagName !== 'LI') {
+    // 解决有时ul元素子元素不是指定列表元素的 bug。
+    if (LIST_ITEM_TAG.indexOf(firstChild.tagName) === -1) {
       return listHandler(firstChild, options);
     }
 
@@ -443,6 +447,7 @@
 
   function inputHandler(node) {
     node.removeAttribute('placeholder');
+    node.value = '';
   }
 
   function scriptHandler(node) {
@@ -488,6 +493,13 @@
       node.style.background = MAIN_COLOR;
     }
 
+    // 阴影调整为主色调
+    if (ComputedStyle.boxShadow !== 'none') {
+      const oldBoxShadow = ComputedStyle.boxShadow;
+      const newBoxShadow = oldBoxShadow.replace(/^rgb.*\)/, MAIN_COLOR_RGB);
+      node.style.boxShadow = newBoxShadow;
+    }
+
     // 边框改为主色调
     if (ComputedStyle.borderColor) {
       node.style.borderColor = MAIN_COLOR;
@@ -516,7 +528,7 @@
     async startGenSkeleton() {
       this.init();
       try {
-        this.handleNodes(document.body.childNodes);
+        this.handleNode(document.body);
       } catch (e) {
         console.log('==genSkeleton Error==\n', e.message, e.stack);
       }
@@ -680,6 +692,7 @@
           break;
         case 'UL':
         case 'OL':
+        case 'DL':
           listHandler(node, this.options);
           break;
         case 'A': // a 标签处理放在后面，防止 img 显示异常

src/script/handler/before.js

@@ -1,5 +1,6 @@
 import {
   MAIN_COLOR,
+  MAIN_COLOR_RGB,
 } from '../constants';
 
 import {
@@ -31,6 +32,13 @@ function beforeHandler(node, options) {
     node.style.background = MAIN_COLOR;
   }
 
+  // 阴影调整为主色调
+  if (ComputedStyle.boxShadow !== 'none') {
+    const oldBoxShadow = ComputedStyle.boxShadow;
+    const newBoxShadow = oldBoxShadow.replace(/^rgb.*\)/, MAIN_COLOR_RGB);
+    node.style.boxShadow = newBoxShadow;
+  }
+
   // 边框改为主色调
   if (ComputedStyle.borderColor) {
     node.style.borderColor = MAIN_COLOR;

src/script/handler/input.js

@@ -1,5 +1,6 @@
 function inputHandler(node) {
   node.removeAttribute('placeholder');
+  node.value = '';
 }
 
 export default inputHandler;

src/script/handler/list.js

@@ -2,17 +2,21 @@ import {
   removeElement,
 } from '../util';
 
+import {
+  LIST_ITEM_TAG,
+} from '../constants';
+
 const listHandler = (node, options) => {
   if (!options.openRepeatList || !node.children.length) return;
 
   const children = node.children;
-  const len = Array.from(children).filter(child => child.tagName === 'LI').length;
+  const len = Array.from(children).filter(child => LIST_ITEM_TAG.indexOf(child.tagName) > -1).length;
 
   if (len === 0) return false;
 
   const firstChild = children[0];
-  // 解决有时ul元素子元素不是 li元素的 bug。
-  if (firstChild.tagName !== 'LI') {
+  // 解决有时ul元素子元素不是指定列表元素的 bug。
+  if (LIST_ITEM_TAG.indexOf(firstChild.tagName) === -1) {
     return listHandler(firstChild, options);
   }
 

src/script/main.js

@@ -26,7 +26,7 @@ window.AwesomeSkeleton = {
   async startGenSkeleton() {
     this.init();
     try {
-      this.handleNodes(document.body.childNodes);
+      this.handleNode(document.body);
     } catch (e) {
       console.log('==genSkeleton Error==\n', e.message, e.stack);
     }
@@ -190,6 +190,7 @@ window.AwesomeSkeleton = {
         break;
       case 'UL':
       case 'OL':
+      case 'DL':
         handler.list(node, this.options);
         break;
       case 'A': // a 标签处理放在后面，防止 img 显示异常