fix(timepicker): change getPopupStyle form timepicker, datepicker to …

…util docs: fix docs layout
clair-design · Nov 28, 2018 · 5f0ee33 · 5f0ee33
1 parent 488d483
commit 5f0ee33
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 75 deletions.
diff --git a/docs/layouts/principle.vue b/docs/layouts/principle.vue
@@ -9,7 +9,7 @@
             :to="item.link",
             :key="item.title"
           ) {{item.title}}
-      c-box-item.content(xs=12 sm=8 md=9 lg=10)
+      c-box-item.content(xs=12 sm="8 offset-4" md="9 offset-3" lg="10 offset-2")
         transition(name='fade')
           router-view.c-container.is-lg
         c-footer

diff --git a/src/components/datepicker/index.vue b/src/components/datepicker/index.vue
@@ -81,8 +81,7 @@
 import './index.css'
 import validatable from '@scripts/mixins/validatable'
 import resettable from '@scripts/mixins/resettable'
-import ZIndexManager from '@scripts/utils/zIndexManager.js'
-import { getScrollBarSize } from '@util'
+import { getPopupStyle } from '@util'
 
 import Icon from '../icon/index.vue'
 import Input from '../input/index.vue'
@@ -305,36 +304,13 @@ export default {
       this.close()
     },
     setDate (date, notClose) {
-      // this.date = date
       console.log(date)
       this.showDate = date
       this.$emit('change', date)
       !notClose && this.close()
     },
     getStyle () {
-      const clientRect = this.$el.getBoundingClientRect()
-      const windowH = window.innerHeight
-      const windowW = window.innerWidth
-      const marginTop = 2
-      const scrollHeight = document.body.scrollWidth > window.innerWidth ? 20 : 0
-      const droplistHeight = this.datepickerPanel.clientHeight
-      const droplistWidth = this.datepickerPanel.clientWidth
-      const defaultTop = clientRect.top + clientRect.height + marginTop + window.pageYOffset
-      const clientHeight = clientRect.height + marginTop
-
-      const clientY = clientRect.y
-      const compTop = windowH - droplistHeight - scrollHeight
-      const marginRight = getScrollBarSize() + 5 // scrollbar width
-      const left = droplistWidth + clientRect.left + marginRight + window.pageXOffset > windowW ? windowW - droplistWidth - marginRight : clientRect.left + window.pageXOffset
-      const top = droplistHeight + clientHeight + clientY + scrollHeight > windowH ? compTop : defaultTop
-      const zIndex = ZIndexManager.next()
-
-      return `
-        position: absolute;
-        top: ${top}px;
-        left: ${left}px;
-        z-index: ${zIndex};
-      `
+      return getPopupStyle(this.$el, this.datepickerPanel)
     },
     resize () {
       this.$nextTick(() => {

diff --git a/src/components/timepicker/index.vue b/src/components/timepicker/index.vue
@@ -52,8 +52,7 @@
 
 <script>
 import './index.css'
-import { getScrollBarSize } from '@util'
-import ZIndexManager from '../../scripts/utils/zIndexManager.js'
+import { getPopupStyle } from '@util'
 
 export default {
   name: 'c-timepicker',
@@ -211,28 +210,7 @@ export default {
       this.isOpen = true
     },
     getStyle () {
-      const clientRect = this.$el.getBoundingClientRect()
-      const windowH = window.innerHeight
-      const windowW = window.innerWidth
-      const marginTop = 2
-      const scrollHeight = document.body.scrollWidth > window.innerWidth ? 20 : 0
-      const droplistHeight = this.timepickerPanel.clientHeight
-      const droplistWidth = this.timepickerPanel.clientWidth
-      const defaultTop = clientRect.top + clientRect.height + marginTop + window.pageYOffset
-      const clientHeight = clientRect.height + marginTop
-
-      const clientY = clientRect.y
-      const compTop = windowH - droplistHeight - scrollHeight
-      const marginRight = getScrollBarSize() + 5 // scrollbar width
-      const left = droplistWidth + clientRect.left + marginRight + window.pageXOffset > windowW ? windowW - droplistWidth - marginRight : clientRect.left + window.pageXOffset
-      const top = droplistHeight + clientHeight + clientY + scrollHeight > windowH ? compTop : defaultTop
-      const zIndex = ZIndexManager.next()
-      return `
-        position: absolute;
-        top: ${top}px;
-        left: ${left}px;
-        z-index: ${zIndex};
-      `
+      return getPopupStyle(this.$el, this.timepickerPanel)
     },
     resize () {
       this.$nextTick(() => {

diff --git a/src/components/timepicker/timerange.vue b/src/components/timepicker/timerange.vue
@@ -65,8 +65,7 @@
 </template>
 <script>
 import './index.css'
-import { getScrollBarSize } from '@util'
-import ZIndexManager from '../../scripts/utils/zIndexManager.js'
+import { getPopupStyle } from '@util'
 export default {
   name: 'c-timerange',
   props: {
@@ -181,28 +180,7 @@ export default {
       }
     },
     getStyle () {
-      const clientRect = this.$parent.$refs.timepicker.getBoundingClientRect()
-      const windowH = window.innerHeight
-      const windowW = window.innerWidth
-      const marginTop = 2
-      const scrollHeight = document.body.scrollWidth > window.innerWidth ? 20 : 0
-      const droplistHeight = this.timerange.clientHeight
-      const droplistWidth = this.timerange.clientWidth
-      const defaultTop = clientRect.top + clientRect.height + marginTop + window.pageYOffset
-      const clientHeight = clientRect.height + marginTop
-
-      const clientY = clientRect.y
-      const compTop = windowH - droplistHeight - scrollHeight
-      const marginRight = getScrollBarSize() + 5 // scrollbar width
-      const left = droplistWidth + clientRect.left + marginRight + window.pageXOffset > windowW ? windowW - droplistWidth - marginRight : clientRect.left + window.pageXOffset
-      const top = droplistHeight + clientHeight + clientY + scrollHeight > windowH ? compTop : defaultTop
-      const zIndex = ZIndexManager.next()
-      return `
-        position: absolute;
-        top: ${top}px;
-        left: ${left}px;
-        z-index: ${zIndex};
-      `
+      return getPopupStyle(this.$parent.$refs.timepicker, this.timerange)
     },
     resize () {
       this.$nextTick(() => {

diff --git a/src/scripts/utils/index.js b/src/scripts/utils/index.js
@@ -1,4 +1,5 @@
 import VueTypes from './vue-types'
+import ZIndexManager from './ZIndexManager'
 export { VueTypes }
 
 /**
@@ -111,3 +112,40 @@ export function defer () {
 export function contains (elem, target) {
   return elem && elem.contains ? elem.contains(target) : false
 }
+
+/**
+ *
+ */
+export function getPopupStyle (elem, panel) {
+  if (!elem || !panel) {
+    return 'position: absolute;'
+  }
+  const clientRect = elem.getBoundingClientRect()
+  const windowH = window.innerHeight
+  const windowW = window.innerWidth
+  const marginTop = 4
+  const scrollBarSize = getScrollBarSize()
+  const droplistHeight = panel.clientHeight
+  const droplistWidth = panel.clientWidth
+  const clientHeight = clientRect.height + marginTop
+  const defaultTop = clientRect.top + clientHeight + window.pageYOffset
+
+  const clientY = clientRect.y
+  const compTop = clientY + window.pageYOffset - droplistHeight - marginTop
+  const left =
+    droplistWidth + clientRect.left + scrollBarSize + window.pageXOffset > windowW
+      ? windowW - droplistWidth - scrollBarSize
+      : clientRect.left + window.pageXOffset
+  const top =
+    droplistHeight + clientHeight + clientY + scrollBarSize > windowH
+      ? compTop
+      : defaultTop
+  const zIndex = ZIndexManager.next()
+
+  return `
+        position: absolute;
+        top: ${top}px;
+        left: ${left}px;
+        z-index: ${zIndex};
+      `
+}