Sync from bytedesk-private: update

modules/python/vendors/FunASR/web-pages/src/components/ui-scrollbar/assets/css/index.scss

@@ -0,0 +1,72 @@
+.ui-scrollbar {
+    overflow: hidden;
+    position: relative;
+
+    &.child-over-width {
+        .ui-scrollbar__view {
+            max-width: 100%;
+        }
+    }
+
+    &:active > .ui-scrollbar__bar,
+    &:focus > .ui-scrollbar__bar,
+    &:hover > .ui-scrollbar__bar {
+        opacity: 1;
+        transition: opacity 0.34s ease-out;
+    }
+}
+
+.ui-scrollbar__wrap {
+    overflow: scroll;
+    height: 100%;
+}
+.ui-scrollbar__view {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 100%;
+}
+
+.ui-scrollbar__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+    opacity: 0;
+    -webkit-transition: opacity 120ms ease-out;
+    transition: opacity 120ms ease-out;
+
+    &.is-horizontal {
+        height: 6px;
+        left: 2px;
+
+        & > div {
+            height: 100%;
+        }
+    }
+
+    &.is-vertical {
+        width: 6px;
+        top: 2px;
+
+        & > div {
+            width: 100%;
+        }
+    }
+}
+
+.ui-scrollbar__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: rgba(144, 147, 153, 0.3);
+    -webkit-transition: 0.3s background-color;
+    transition: 0.3s background-color;
+
+    &:hover {
+        background-color: hsla(220, 4%, 58%, 0.5);
+    }
+}

modules/python/vendors/FunASR/web-pages/src/components/ui-scrollbar/bar.vue

@@ -0,0 +1,104 @@
+<script>
+    import { on, off, renderThumbStyle, BAR_MAP } from './util'
+
+    export default {
+        name: 'scrollbar-Bar',
+        props: {
+            vertical: Boolean,
+            size: String,
+            move: Number
+        },
+        computed: {
+            bar () {
+                return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
+            },
+
+            wrap () {
+                return this.$parent.wrap
+            }
+        },
+        destroyed () {
+            off(document, 'mouseup', this.mouseUpDocumentHandler)
+        },
+        methods: {
+            clickThumbHandler (e) {
+                // prevent click event of right button
+                if (e.ctrlKey || e.button === 2) {
+                    return
+                }
+                this.startDrag(e)
+                this[this.bar.axis] =
+                    e.currentTarget[this.bar.offset] -
+                    (e[this.bar.client] -
+                    e.currentTarget.getBoundingClientRect()[this.bar.direction])
+            },
+
+            clickTrackHandler (e) {
+                const offset = Math.abs(
+                    e.target.getBoundingClientRect()[this.bar.direction] -
+                        e[this.bar.client]
+                )
+                const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
+                const thumbPositionPercentage =
+                    ((offset - thumbHalf) * 100) / this.$el[this.bar.offset]
+
+                this.wrap[this.bar.scroll] =
+                    (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
+                    100
+            },
+
+            startDrag (e) {
+                e.stopImmediatePropagation()
+                this.cursorDown = true
+
+                on(document, 'mousemove', this.mouseMoveDocumentHandler)
+                on(document, 'mouseup', this.mouseUpDocumentHandler)
+                document.onselectstart = () => false
+            },
+
+            mouseMoveDocumentHandler (e) {
+                if (this.cursorDown === false) return
+                const prevPage = this[this.bar.axis]
+
+                if (!prevPage) return
+
+                const offset =
+                    (this.$el.getBoundingClientRect()[this.bar.direction] -
+                    e[this.bar.client]) *
+                    -1
+                const thumbClickPosition =
+                    this.$refs.thumb[this.bar.offset] - prevPage
+                const thumbPositionPercentage =
+                    ((offset - thumbClickPosition) * 100) /
+                    this.$el[this.bar.offset]
+
+                this.wrap[this.bar.scroll] =
+                    (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
+                    100
+            },
+
+            mouseUpDocumentHandler (e) {
+                this.cursorDown = false
+                this[this.bar.axis] = 0
+                off(document, 'mousemove', this.mouseMoveDocumentHandler)
+                document.onselectstart = null
+            }
+        },
+        render (h) {
+            const { size, move, bar } = this
+            return (
+            <div
+                class={['ui-scrollbar__bar', 'is-' + bar.key]}
+                onMousedown={this.clickTrackHandler}
+            >
+                <div
+                    ref="thumb"
+                    class="ui-scrollbar__thumb"
+                    onMousedown={this.clickThumbHandler}
+                    style={renderThumbStyle({ size, move, bar })}
+                ></div>
+            </div>
+            )
+        }
+    }
+</script>

modules/python/vendors/FunASR/web-pages/src/components/ui-scrollbar/index.vue

@@ -0,0 +1,174 @@
+
+<script>
+    import { addResizeListener, removeResizeListener, toObject } from './util'
+    import scrollbarWidth from './scrollbar-width'
+    import Bar from './bar.vue'
+    require('./assets/css/index.scss')
+
+    export default {
+        name: 'ui-scrollbar',
+        components: { Bar },
+        props: {
+            native: Boolean,
+            childOverWidth: {
+                type: Boolean,
+                default: true
+            },
+            wrapStyle: {},
+            wrapClass: {},
+            viewClass: {},
+            viewStyle: {},
+            noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+            tag: {
+                type: String,
+                default: 'div'
+            }
+        },
+
+        data () {
+            return {
+                sizeWidth: '0',
+                sizeHeight: '0',
+                moveX: 0,
+                moveY: 0,
+                scrollbarMiddle: 0
+            }
+        },
+
+        computed: {
+            wrap () {
+                return this.$refs.wrap
+            }
+        },
+
+        mounted () {
+            if (this.native) return
+            this.$nextTick(this.update)
+            !this.noresize && addResizeListener(this.$refs.resize, this.update)
+            !this.noresize && addResizeListener(this.$refs.wrap, this.update)
+        },
+
+        beforeDestroy () {
+            if (this.native) return
+            !this.noresize && removeResizeListener(this.$refs.resize, this.update)
+            !this.noresize && removeResizeListener(this.$refs.wrap, this.update)
+        },
+
+        methods: {
+            handleScroll () {
+                const wrap = this.wrap
+
+                this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight
+                this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth
+                if (wrap.scrollTop + wrap.clientHeight === wrap.scrollHeight) {
+                    this.$emit('scrollbottom')
+                }
+                if (wrap.scrollTop === 0) {
+                    this.$emit('scrolltop')
+                }
+                this.$emit('scrollMove', {
+                    moveX: wrap.scrollLeft,
+                    moveY: wrap.scrollTop,
+                    clientX: wrap.clientWidth,
+                    clientY: wrap.clientHeight,
+                    scrollHeight: wrap.scrollHeight,
+                    scrollWidth: wrap.scrollWidth
+                })
+            },
+
+            update () {
+                let heightPercentage = null
+                let widthPercentage = null
+                const wrap = this.wrap
+                if (!wrap) return
+
+                heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight
+                widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth
+
+                this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : ''
+                this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : ''
+            },
+            continueScroll (rowNum) {
+                const wrap = this.wrap
+                if (this.scrollbarMiddle === 0) {
+                    this.scrollbarMiddle = wrap.scrollTop / 2 + wrap.clientHeight / 2 - wrap.clientHeight / rowNum
+                }
+                wrap.scrollTop = this.scrollbarMiddle
+            }
+        },
+
+        render (h) {
+            const gutter = scrollbarWidth()
+            let style = this.wrapStyle
+
+            if (gutter) {
+                const gutterWith = `-${gutter}px`
+                let gutterStyle = ''
+
+                let overFlowXStr = ''
+                let overflowYStr = ''
+                if (style && style.length > 0) {
+                    style.forEach((styleItem) => {
+                        if (styleItem['overflow-x'] || styleItem.overflowX) {
+                            overFlowXStr = styleItem['overflow-x'] || styleItem.overflowX
+                        }
+                        if (styleItem['overflow-y'] || styleItem.overflowY) {
+                            overflowYStr = styleItem['overflow-y'] || styleItem.overflowY
+                        }
+                    })
+                }
+
+                if (overFlowXStr === 'hidden') {
+                    gutterStyle = `margin-right: ${gutterWith};`
+                } else {
+                    gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
+                }
+
+                if (Array.isArray(this.wrapStyle)) {
+                    style = toObject(this.wrapStyle)
+                    if (overFlowXStr !== 'hidden') {
+                        style.marginBottom = gutterWith
+                    }
+                    if (overflowYStr !== 'hidden') {
+                        style.marginRight = gutterWith
+                    }
+                } else if (typeof this.wrapStyle === 'string') {
+                    style += gutterStyle
+                } else {
+                    style = gutterStyle
+                }
+            }
+            const view = h(
+                this.tag,
+                {
+                    class: ['ui-scrollbar__view', this.viewClass],
+                    style: this.viewStyle,
+                    ref: 'resize'
+                },
+                this.$slots.default
+            )
+            const wrap = (
+                <div
+                    ref="wrap"
+                    style={style}
+                    onScroll={this.handleScroll}
+                    class={[this.wrapClass, 'ui-scrollbar__wrap', gutter ? '' : 'ui-scrollbar__wrap--hidden-default']}
+                >{[view]}</div>
+            )
+            let nodes
+
+            if (!this.native) {
+                nodes = [
+                    wrap,
+                    <Bar move={this.moveX} size={this.sizeWidth}></Bar>,
+                    <Bar vertical move={this.moveY} size={this.sizeHeight}></Bar>
+                ]
+            } else {
+                nodes = [
+                <div ref="wrap" class={[this.wrapClass, 'ui-scrollbar__wrap']} style={style}>{[view]}</div>
+                ]
+            }
+            return h('div', { class: ['ui-scrollbar', { 'child-over-width': !this.childOverWidth }] }, nodes)
+        }
+    }
+</script>

modules/python/vendors/FunASR/web-pages/src/components/ui-scrollbar/scrollbar-width.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+
+let scrollBarWidth
+
+export default function () {
+    if (Vue.prototype.$isServer) return 0
+    if (scrollBarWidth !== undefined) return scrollBarWidth
+
+    const outer = document.createElement('div')
+    outer.className = 'ui-scrollbar__wrap'
+    outer.style.visibility = 'hidden'
+    outer.style.width = '100px'
+    outer.style.position = 'absolute'
+    outer.style.top = '-9999px'
+    document.body.appendChild(outer)
+
+    const widthNoScroll = outer.offsetWidth
+    outer.style.overflow = 'scroll'
+
+    const inner = document.createElement('div')
+    inner.style.width = '100%'
+    outer.appendChild(inner)
+
+    const widthWithScroll = inner.offsetWidth
+    outer.parentNode.removeChild(outer)
+    scrollBarWidth = widthNoScroll - widthWithScroll
+
+    return scrollBarWidth
+};

modules/python/vendors/FunASR/web-pages/src/components/ui-scrollbar/util.js

@@ -0,0 +1,120 @@
+import ResizeObserver from 'resize-observer-polyfill'
+
+export const BAR_MAP = {
+    vertical: {
+        offset: 'offsetHeight',
+        scroll: 'scrollTop',
+        scrollSize: 'scrollHeight',
+        size: 'height',
+        key: 'vertical',
+        axis: 'Y',
+        client: 'clientY',
+        direction: 'top'
+    },
+    horizontal: {
+        offset: 'offsetWidth',
+        scroll: 'scrollLeft',
+        scrollSize: 'scrollWidth',
+        size: 'width',
+        key: 'horizontal',
+        axis: 'X',
+        client: 'clientX',
+        direction: 'left'
+    }
+}
+
+export function renderThumbStyle ({ move, size, bar }) {
+    const style = {}
+    const translate = `translate${bar.axis}(${move}%)`
+
+    style[bar.size] = size
+    style.transform = translate
+    style.msTransform = translate
+    style.webkitTransform = translate
+
+    return style
+};
+
+const isServer = typeof window === 'undefined'
+
+/* istanbul ignore next */
+const resizeHandler = function (entries) {
+    for (const entry of entries) {
+        const listeners = entry.target.__resizeListeners__ || []
+        if (listeners.length) {
+            listeners.forEach(fn => {
+                fn()
+            })
+        }
+    }
+}
+
+/* istanbul ignore next */
+export const addResizeListener = function (element, fn) {
+    if (isServer) return
+    if (!element.__resizeListeners__) {
+        element.__resizeListeners__ = []
+        element.__ro__ = new ResizeObserver(resizeHandler)
+        element.__ro__.observe(element)
+    }
+    element.__resizeListeners__.push(fn)
+}
+
+/* istanbul ignore next */
+export const removeResizeListener = function (element, fn) {
+    if (!element || !element.__resizeListeners__) return
+    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
+    if (!element.__resizeListeners__.length) {
+        element.__ro__.disconnect()
+    }
+}
+
+function extend (to, _from) {
+    for (const key in _from) {
+        to[key] = _from[key]
+    }
+    return to
+};
+
+export function toObject (arr) {
+    const res = {}
+    for (let i = 0; i < arr.length; i++) {
+        if (arr[i]) {
+            extend(res, arr[i])
+        }
+    }
+    return res
+};
+
+export const on = (function () {
+    if (!isServer && document.addEventListener) {
+        return function (element, event, handler) {
+            if (element && event && handler) {
+                element.addEventListener(event, handler, false)
+            }
+        }
+    } else {
+        return function (element, event, handler) {
+            if (element && event && handler) {
+                element.attachEvent('on' + event, handler)
+            }
+        }
+    }
+})()
+
+/* istanbul ignore next */
+export const off = (function () {
+    if (!isServer && document.removeEventListener) {
+        return function (element, event, handler) {
+            if (element && event) {
+                element.removeEventListener(event, handler, false)
+            }
+        }
+    } else {
+        return function (element, event, handler) {
+            if (element && event) {
+                element.detachEvent('on' + event, handler)
+            }
+        }
+    }
+})()