Merge pull request #167 from tiny-dust/feat-sticky-offsettop

feat(Sticky): the offset attribute adapts to other css units
hellof2e · Nov 25, 2022 · 4fc99a7 · 4fc99a7
2 parents 6102fb4 + 45eea08
commit 4fc99a7
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 13 deletions.
diff --git a/packages/quark/src/sticky/demo.vue b/packages/quark/src/sticky/demo.vue
@@ -12,6 +12,13 @@
         translate("offset")
       }}</quark-button>
     </quark-sticky>
+
+    <h2>{{ translate("otherUnits") }}</h2>
+    <quark-sticky offsettop="150px">
+      <quark-button type="primary" shape="square" style="margin-left: 180px">{{
+        translate("otherUnits")
+        }}</quark-button>
+    </quark-sticky>
   </div>
 </template>
 
@@ -28,10 +35,12 @@ export default createDemo({
         "zh-CN": {
           basic: "基础用法",
           offset: "吸顶距离",
+          otherUnits:'其他单位'
         },
         "en-US": {
           basic: "Basic Usage",
           offset: "Offset Top",
+          otherUnits: 'Other Units'
         },
       });
     });

diff --git a/packages/quark/src/sticky/doc-react.en-US.md b/packages/quark/src/sticky/doc-react.en-US.md
@@ -26,11 +26,19 @@ import { Sticky } from "@quarkd/quark-react";
 </Sticky>
 ```
 
+### Other Units
+
+```html
+<Sticky offsettop="150px">
+  <div value="Other Units">Other Units</div>
+</Sticky>
+```
+
 ## API
 
 ### Props
 
 | Attribute | Description         | Unit      | Default |
 | --------- | ------------------- | --------- | ------- |
-| offsettop | Offset top          | `vw `     | `0vw`   |
-| zindex    | z-index when sticky | `number ` | `99`    |
+| offsettop | Offset top          |  `vw` or `vh` or `px` or `rem` or `%`     | `0vw`   |
+| zindex    | z-index when sticky | `number` | `99`    |
diff --git a/packages/quark/src/sticky/doc-react.zh-CN.md b/packages/quark/src/sticky/doc-react.zh-CN.md
@@ -26,11 +26,19 @@ import { Sticky } from "@quarkd/quark-react";
 </Sticky>
 ```
 
+### 其他单位
+
+```html
+<Sticky offsettop="150px">
+  <div value="其他单位">其他单位</div>
+</Sticky>
+```
+
 ## API
 
 ### Props
 
 | 参数      | 说明               | 单位      | 默认值 |
 | --------- | ------------------ | --------- | ------ |
-| offsettop | 吸顶时与顶部的距离 | `vw `     | `0vw`  |
-| zindex    | 吸顶时的 z-index   | `number ` | `99`   |
+| offsettop | 吸顶时与顶部的距离 |  `vw` or `vh` or `px` or `rem` or `%`    | `0vw`  |
+| zindex    | 吸顶时的 z-index   | `number` | `99`   |
diff --git a/packages/quark/src/sticky/doc.en-US.md b/packages/quark/src/sticky/doc.en-US.md
@@ -26,11 +26,19 @@ import "quarkd/lib/sticky";
 </quark-sticky>
 ```
 
+### Other Units
+
+```html
+<quark-sticky offsettop="150px">
+  <div value="Other Units">Other Units</div>
+</quark-sticky>
+```
+
 ## API
 
 ### Props
 
 | Attribute | Description         | Unit      | Default |
 | --------- | ------------------- | --------- | ------- |
-| offsettop | Offset top          | `vw `     | `0vw`   |
-| zindex    | z-index when sticky | `number ` | `99`    |
+| offsettop | Offset top          |  `vw` or `vh` or `px` or `rem` or `%`     | `0vw`   |
+| zindex    | z-index when sticky | `number` | `99`    |
diff --git a/packages/quark/src/sticky/doc.zh-CN.md b/packages/quark/src/sticky/doc.zh-CN.md
@@ -26,11 +26,19 @@ import "quarkd/lib/sticky";
 </quark-sticky>
 ```
 
+### 其他单位
+
+```html
+<quark-sticky offsettop="150px">
+  <div value="其他单位">其他单位</div>
+</quark-sticky>
+```
+
 ## API
 
 ### Props
 
 | 参数      | 说明               | 单位      | 默认值 |
 | --------- | ------------------ | --------- | ------ |
-| offsettop | 吸顶时与顶部的距离 | `vw `     | `0vw`  |
-| zindex    | 吸顶时的 z-index   | `number ` | `99`   |
+| offsettop | 吸顶时与顶部的距离 | `vw` or `vh` or `px` or `rem` or `%`     | `0vw`  |
+| zindex    | 吸顶时的 z-index   | `number` | `99`   |
diff --git a/packages/quark/src/sticky/index.tsx b/packages/quark/src/sticky/index.tsx
@@ -1,4 +1,5 @@
 import QuarkElement, { property, customElement, createRef } from "@quarkd/core";
+import { remToPx, vhToPx, percentToHeightPx, vwToPx } from "../../utils/public";
 
 import style from "./style.css";
 export interface Props {
@@ -21,7 +22,10 @@ class QuarkSticky extends QuarkElement {
 
   stickyRef: any = createRef();
 
+  calcSizeFuncRef = undefined
+
   componentDidMount() {
+    this.calcSizeFuncRef = this.getCalcEvent(this.offsettop);
     window.addEventListener("scroll", this.scrollEvent);
   }
 
@@ -39,8 +43,9 @@ class QuarkSticky extends QuarkElement {
       containerCurrent.getBoundingClientRect().height
     }px`;
     if (
+      this.calcSizeFuncRef && 
       containerCurrent.getBoundingClientRect().top <=
-      this.convertVw(this.offsettop)
+      this.calcSizeFuncRef(this.offsettop)
     ) {
       stickyCurrent.classList.add("sticky--fixed");
       stickyCurrent.style.top = this.offsettop;
@@ -51,10 +56,21 @@ class QuarkSticky extends QuarkElement {
     }
   };
 
-  convertVw(value: string) {
-    value = value.replace(/vw/g, "");
-    return (+value * document.body.clientWidth) / 100;
-  }
+  getCalcEvent = (offsettop) => {
+    if (offsettop.includes("vw")) {
+      return vwToPx;
+    } else if (offsettop.includes("rem")) {
+      return remToPx;
+    } else if (offsettop.includes("vh")) {
+      return vhToPx;
+    } else if (offsettop.includes("%")) {
+      return percentToHeightPx;
+    } else {
+      return (value: string) => {
+        return Number(value.replace("px", ""));
+      };
+    }
+  };
 
   render() {
     return (

diff --git a/packages/quark/utils/public.ts b/packages/quark/utils/public.ts
@@ -51,3 +51,31 @@ export const slotAssignedElements = (nodes: any[]) => {
   }
   return nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
 };
+
+export const vwToPx = (value: string) => {
+  return (
+    (Number(value.replace("vw", "")) * document.documentElement.clientWidth) /
+    100
+  );
+};
+
+export const vhToPx = (value: string) => {
+  return (
+    (Number(value.replace("vh", "")) * document.documentElement.clientHeight) /
+    100
+  );
+};
+
+export const remToPx = (value: string) => {
+  const htmlFontSize = Number(
+    window.getComputedStyle(document.documentElement).fontSize.replace("px", "")
+  );
+  return Number(value.replace("rem", "")) * htmlFontSize;
+};
+
+export const percentToHeightPx = (value: string) => {
+  return (
+    (Number(value.replace("%", "")) * document.documentElement.clientHeight) /
+    100
+  );
+};