From 7f296446c17524bfec32861d94a2132ec3f20ab7 Mon Sep 17 00:00:00 2001 From: "carl.wu" Date: Fri, 28 Dec 2018 21:20:49 +0800 Subject: [PATCH 1/2] =?UTF-8?q?#issues/66=20=E8=A7=A3=E5=86=B3=E7=94=9F?= =?UTF-8?q?=E6=88=90=E7=9A=84=E9=AA=A8=E6=9E=B6=E5=B1=8F=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=AE=BD=E9=AB=98=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/script/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/script/index.js b/src/script/index.js index af97c97..bf3ce55 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -17,6 +17,9 @@ var Skeleton = (function (exports) { const MOCK_TEXT_ID = 'sk-text-id'; const Node = window.Node; + // 给图片打上固定宽高标签，将会设置行内宽高样式，保证生成骨架后的宽高不会受其他样式影响而变化（目前只针对图片） + const IMAGE_FIXED = 'data-pswp-fixedsize'; + /** * a Map instance to cache the styles which will be inserted into the skeleton page. * key is the selector and value is the css rules. @@ -172,7 +175,7 @@ var Skeleton = (function (exports) { const rule = `{ background: ${color} !important; }`; - + addStyle(`.${imageClass}`, rule); shapeStyle(shape); @@ -217,6 +220,7 @@ var Skeleton = (function (exports) { function imgHandler(ele, { color, shape, shapeOpposite }) { const { width, height } = ele.getBoundingClientRect(); + const fixedSize = ele.hasAttribute(IMAGE_FIXED); const attrs = { width, height, @@ -226,7 +230,11 @@ var Skeleton = (function (exports) { const finalShape = shapeOpposite.indexOf(ele) > -1 ? getOppositeShape(shape) : shape; setAttributes(ele, attrs); - + if (fixedSize) { + ele.style.width = `${width}px`; + ele.style.height = `${height}px`; + } + const className = CLASS_NAME_PREFEX + 'image'; const shapeName = CLASS_NAME_PREFEX + finalShape; const rule = `{ From 3ff1c52be19fb597a719d9d150842817c7f43289 Mon Sep 17 00:00:00 2001 From: "carl.wu" Date: Wed, 2 Jan 2019 16:24:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?#issues/66=20=E8=A7=A3=E5=86=B3=E7=94=9F?= =?UTF-8?q?=E6=88=90=E7=9A=84=E9=AA=A8=E6=9E=B6=E5=B1=8F=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=AE=BD=E9=AB=98=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/config.js | 3 ++- src/config/optionsSchema.json | 25 ++++++++++++++----------- src/script/index.js | 6 +++--- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/config/config.js b/src/config/config.js index 6e11316..0b190d2 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -13,7 +13,8 @@ const defaultOptions = { // `rect` | `circle` shape: 'rect', color: '#EFEFEF', - shapeOpposite: [] + shapeOpposite: [], + fixedSize: false }, button: { color: '#EFEFEF', diff --git a/src/config/optionsSchema.json b/src/config/optionsSchema.json index ffafbb2..2b38a29 100644 --- a/src/config/optionsSchema.json +++ b/src/config/optionsSchema.json @@ -49,6 +49,9 @@ }, "shapeOpposite": { "type": "array" + }, + "fixedSize": { + "type": "boolean" } } }, @@ -102,11 +105,11 @@ }, "device": { "description": "The device you want to generate skeleton page", - "type": "string" + "type": "string" }, "debug": { "description": "Weather to show debug info", - "type": "boolean" + "type": "boolean" }, "minify": { "description": "Weather to minify the HTML", @@ -114,35 +117,35 @@ "type": "object" }, { "type": "boolean" - }] + }] }, "defer": { "description": "Defer to generate skeleton page", - "type": "number" + "type": "number" }, "excludes": { "description": "which element that you dont want to generate skeleton", - "type": "array" + "type": "array" }, "remove": { "description": "the elements that you want to remove", - "type": "array" + "type": "array" }, "hide": { "description": "the element that you want to hide", - "type": "array" + "type": "array" }, "grayBlock": { "description": "the element that you just want to make it display a gray block", - "type": "array" + "type": "array" }, "cookies": { "description": "Add cookies to the page which puppeteer opened", - "type": "array" + "type": "array" }, "headless": { "description": "Open headless chrome or not", - "type": "boolean" + "type": "boolean" }, "cssUnit": { "description": "The css unit used in shell.html", @@ -152,7 +155,7 @@ "vh", "vmin", "vmax" - ] + ] }, "decimal": { "description": "The decimal of CSS value", diff --git a/src/script/index.js b/src/script/index.js index bf3ce55..9ef7c74 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -218,9 +218,9 @@ var Skeleton = (function (exports) { }); } - function imgHandler(ele, { color, shape, shapeOpposite }) { + function imgHandler(ele, { color, shape, shapeOpposite, fixedSize }) { const { width, height } = ele.getBoundingClientRect(); - const fixedSize = ele.hasAttribute(IMAGE_FIXED); + const isFixed = ele.hasAttribute(IMAGE_FIXED) || fixedSize; const attrs = { width, height, @@ -230,7 +230,7 @@ var Skeleton = (function (exports) { const finalShape = shapeOpposite.indexOf(ele) > -1 ? getOppositeShape(shape) : shape; setAttributes(ele, attrs); - if (fixedSize) { + if (isFixed) { ele.style.width = `${width}px`; ele.style.height = `${height}px`; }