tencent.jquery.pix.component 1.0.53

package/components/tips/tipv2.js

@@ -0,0 +1,557 @@
+/**
+ * tips组件 
+ * - 会增加设置body的click事件 
+ */
+import { $, windowEnv } from "../config";
+import { addResizeFunc, removeResizeFunc, addScrollFunc, removeScrollFunc } from '../utils/utils'
+
+// 记录是否在body上有过绑定
+let hasBind = false
+// x轴偏移量
+const baseSpaceX = 4
+// y轴偏移量
+const baseSpaceY = -12
+// 已实例的tips对象数组
+const tipsArr = []
+// 临时性的tips对象数组 - 针对showTips
+let tmpTipsArr = []
+// 被主动remove的tips对象数组
+let tmp2TipsArr = []
+
+/**
+ * 实例化绑定某个元素，生成tips
+ * options
+ * {
+ *  - baseDom 基准元素/位置参照物
+ *  - tipElem 要tips的元素/字符串
+ *  - dir    方向位置：left,right
+ *  - position {x,y} 偏移量  距离基础元素的距离
+ *  - clearOther 打开tip时，是否默认关掉其他的tip  默认值true
+ *  - event {
+ *      openClick   是否开启click绑定事件 默认为true
+ *      click       按钮点击时的回调函数
+ *  }
+ * }
+ * @date 2024-11-07
+ * @param { * } options
+ */
+export const tips = (options) => {
+    if (hasBind === false) {
+        hasBind = true
+        initEvent()
+    }
+
+    const tipObj = new tip(options)
+    tipsArr.push(tipObj)
+    return tipObj
+}
+
+/**
+ * 展示tips，临时性的。 如果body点击，则销毁整块内容
+ * @param {*} options 
+ */
+export const showTips = (options) => {
+    if (hasBind === false) {
+        hasBind = true
+        initEvent()
+    }
+    let tipObj = null
+    // 首先获取已有的tip,根据baseDom
+    const alreadyTip = getAlreadyTip(options.baseDom)
+    if (alreadyTip) {
+        tipObj = alreadyTip
+        tipObj.show();
+    } else {
+        tipObj = new tip(options, true)
+        tmpTipsArr.push(tipObj)
+        tipObj.show(false);
+    }
+
+    return tipObj
+}
+
+// 初始化/新增一个新的tips容器元素
+const initNewDom = (options) => {
+    if (!('position' in options)) {
+        options.position = { x: baseSpaceX, y: baseSpaceY }
+    } else {
+        options.position = Object.assign({ x: baseSpaceX, y: baseSpaceY }, options.position)
+    }
+
+    const $tipContent = $('<div class="pix-tips-container"></div>').css({
+        display: 'none',
+        position: 'fixed',
+        zIndex: '99999',
+        opacity: 0,
+        flexDirection: 'column',
+        // overflow:'scroll',
+        height: 'auto'
+        //width:'fit-content',
+    });
+    $(document.body).append($tipContent);
+
+    const $child = $(options.tipElem).css({
+        'opacity': 0
+    });
+    $(document.body).append($child)
+
+    if ($child.css('display') === 'none') {
+        $child.show();
+    }
+    return {
+        $tipContent,
+        $tipChild: $child
+    }
+}
+
+// 初始化body点击事件，用于点击任意处关闭tips
+const initEvent = () => {
+    $(document.body).on('click', function (e) {
+        let info = {
+            clickTip: null,
+            index: -1,
+            type: ''  // 1为tips实例化重复使用的  2为showTips临时生成，如果点击到其他位置则会进行实体删除
+        }
+        for (let i = 0; i < tipsArr.length; i++) {
+            // 点击到基准元素，不做处理
+            // 如果 clearOther 为false才不做处理，为true则要关闭/隐藏其他的tip
+            if (tipsArr[i].$baseContent[0] === e.target) {
+                info = {
+                    clickTip: tipsArr[i],
+                    index: i,
+                    type: '1'
+                }
+                break
+            }
+            // 从基准元素之内触发的事件也不做处理
+            if (tipsArr[i].$baseContent.find(e.target)[0] === e.target) {
+                info = {
+                    clickTip: tipsArr[i],
+                    index: i,
+                    type: '1'
+                }
+                break
+            }
+        }
+        // 如果 clearOther 为false才不做处理，为true则要关闭/隐藏其他的tip
+        if (info.clickTip && info.clickTip.clearOther === false) {
+            return
+        }
+        if (info.clickTip === null) {
+            for (let i = 0; i < tmpTipsArr.length; i++) {
+                const item = tmpTipsArr[i]
+                // 点击到基准元素，不做处理
+                if (isClick(item, e)) {
+                    info = {
+                        clickTip: item,
+                        index: i,
+                        type: '1'
+                    }
+                    break
+                }
+            }
+        }
+        // 如果 clearOther 为false才不做处理，为true则要关闭/隐藏其他的tip
+        if (info.clickTip && info.clickTip.clearOther === false) {
+            return
+        }
+
+        for (let i = 0; i < tipsArr.length; i++) {
+            if (info.clickTip && info.clickTip === tipsArr[i]) {
+                // 如果点的是自己，那么什么都不做
+                continue
+            }
+            tipsArr[i].hide()
+        }
+        for (let i = 0; i < tmpTipsArr.length; i++) {
+            // info.clickTip && info.clickTip === tmpTipsArr[i])
+            if (isClick(tmpTipsArr[i], e)) {
+                // 如果点的是自己，那么什么都不做
+                continue
+            }
+            tmpTipsArr[i].remove()
+            tmpTipsArr.splice(i, 1)
+            i = i - 1
+        }
+
+        //tmpTipsArr = []
+        tmp2TipsArr = []
+    });
+    if (windowEnv === 'pix') {
+        $(document.body).on('click', '.pix-tips-container', function () {
+            // 点击到tip弹窗阻止冒泡
+        }, true)
+    } else {
+        $(document.body).on('click', '.pix-tips-container', function (e) {
+            // 点击到tip弹窗阻止冒泡
+            e.stopPropagation(); // 阻止事件冒泡
+        })
+    }
+}
+
+// 考虑到其他可能存在的场景，用原型链对象形式
+const tip = function (options, isTemp = false) {
+    this.options = options
+    if (!this.options.event) {
+        // 定义默认openClick值 能否点击隐藏/展示
+        this.options.event = { openClick: true }
+    }
+    const self = this
+    this.isTemp = isTemp
+    const info = initNewDom(options)
+
+    this.$baseContent = $(options.baseDom)
+    this.$tipChild = info.$tipChild
+    this.$tipContent = info.$tipContent
+    this.tipHeight = this.$tipChild.height()
+    this.tipWidth = this.getTipChildWidth()
+
+    if (windowEnv === 'pix') {
+        this.basePosition = this.$baseContent.position()
+    } else {
+        this.basePosition = this.$baseContent.get(0).getBoundingClientRect()
+    }
+
+    this.clearOther = 'clearOther' in options ? options.clearOther : true
+
+    this.baseDom = this.$baseContent.length > 0 ? this.$baseContent[0] : null
+
+    this.initEvent(isTemp)
+
+    // 获取tips元素的偏移坐标
+    let leftTip = 0
+    let topTip = 0
+    if (['top', 'bottom'].includes(options.dir)) {
+        leftTip = this.getBasePosition().left;
+        topTip = this.getTipPosition(options)
+    } else {
+        leftTip = this.getTipPosition(options)
+        topTip = self.autoTop();
+    }
+
+    this.$tipChild.appendTo(this.$tipContent)
+
+    this.$tipContent.css({
+        left: leftTip + 'px',
+        top: topTip + 'px',
+        width: self.tipWidth + 'px',
+        height: self.tipHeight + 'px',
+    })
+    // 此时 tipContent是隐藏, tipChild已设置成展示
+    const resizeInfo = {
+        func: this.resizePosition,
+        obj: this
+    }
+
+    addResizeFunc(resizeInfo)
+    addScrollFunc(resizeInfo)
+
+    this.addScrollParents();
+}
+
+tip.prototype.initEvent = function (isTemp = false) {
+    if (isTemp) {
+        return false
+    }
+    const self = this
+    let openClick = true
+    let openClickCall = null
+    if (this.options.event) {
+        if ('openClick' in this.options.event) {
+            openClick = this.options.event.openClick
+        }
+        if ('click' in this.options.event) {
+            openClickCall = this.options.event.click
+        }
+    }
+    this.$baseContent.on('click', function () {
+        if (openClick) {
+            if (self.$tipContent.css('display') === 'none') {
+                self.show()
+            } else {
+                self.hide()
+            }
+        }
+        if (typeof openClickCall === 'function') {
+            openClickCall.call(this, self)
+        }
+
+    })
+}
+
+tip.prototype.show = async function (needResize = true) {
+    if (needResize) {
+        //重新计算位置
+        await this.resizePosition();
+    }
+
+    this.$tipChild.css('opacity', 1)
+    this.$tipContent.css({
+        opacity: 1
+    }).show().parent().show()
+
+}
+
+// 重新计算位置  - 也用作生成好tips之后，页面变化的resize事件
+tip.prototype.resizePosition = function () {
+    if (!this.$tipContent) {
+        return
+    }
+    this.basePosition = this.getBasePosition();
+    // 取不到内容 或者为null 则不处理了
+    if (this.basePosition === null) {
+        return
+    }
+
+    // 获取tips元素的偏移坐标
+    let leftTip = 0
+    let topTip = 0
+    const options = this.options
+
+    const funcTip = () => {
+        if (['top', 'bottom'].includes(options.dir)) {
+            leftTip = this.getBasePosition().left;
+            topTip = this.getTipPosition(options)
+        }
+        else {
+            leftTip = this.getTipPosition(options)
+            topTip = this.autoTop();
+        }
+    }
+
+    if (this.$tipContent && this.$tipContent.css('display') !== 'none') {
+        funcTip();
+        return new Promise(resolve => {
+            this.$tipContent.css({
+                left: leftTip + 'px',
+                top: topTip + 'px',
+            })
+            resolve()
+        })
+    } else {
+        // 再次把子内容移出来，重新计算位置
+        this.$tipChild.css({ 'opacity': 0 }).appendTo($(document.body))
+        funcTip();
+        return new Promise(resolve => {
+            setTimeout(() => {
+                if (this.$tipContent) {
+
+                    this.$tipChild.appendTo(this.$tipContent).css({ 'opacity': 1 })
+                    this.$tipContent.css({
+                        left: leftTip + 'px',
+                        top: topTip + 'px',
+                        width: this.tipWidth + 'px',
+                        height: this.tipHeight + 'px',
+                    })
+                }
+                resolve(true)
+            })
+        })
+    }
+
+
+}
+
+tip.prototype.remove = function () {
+    if (this.$tipContent) {
+        this.$tipContent.remove();
+    }
+    if (this.$baseContent) {
+        this.$baseContent.off('click');
+    }
+    const resizeInfo = {
+        func: this.resizePosition,
+        obj: this
+    }
+
+    removeResizeFunc(resizeInfo)
+    removeScrollFunc(resizeInfo)
+    this.removeScrollParents()
+
+    setTimeout(() => {
+        // 宏任务，body click触发时  让对象的$tipContent还存在
+        this.$tipContent = null
+    })
+
+    if (tmp2TipsArr.indexOf(this) === -1) {
+        tmp2TipsArr.push(this)
+    }
+}
+
+tip.prototype.hide = function () {
+    this.$tipContent.hide();
+}
+
+tip.prototype.isHide = function () {
+    return this.$tipContent.css('display') === 'none'
+}
+
+tip.prototype.isRemove = function () {
+    return this.$tipContent === null
+}
+
+// 计算左侧空间是否足够
+tip.prototype.spaceLeft = function (options) {
+    if (this.basePosition.left - options.position.x > this.getTipChildWidth()) {
+        return true
+    }
+    return false
+}
+// 计算右侧空间是否足够
+tip.prototype.spaceRight = function (options) {
+    if ($(document.body).width() - this.basePosition.left - options.position.x - this.$baseContent.width() > this.getTipChildWidth()) {
+        return true
+    }
+    return false
+}
+
+// 获取具体的起始位置
+// 横向以left为基准
+tip.prototype.getSpaceDirNum = function (options, dir = 'left') {
+    const basePosition = this.getBasePosition()
+    if (dir === 'left') {
+        return basePosition.left - options.position.x - this.getTipChildWidth()
+    } else {
+        return basePosition.left + options.position.x + this.$baseContent.width()
+    }
+}
+
+// 获取要取得的tip元素的left位置
+tip.prototype.getTipPosition = function (options) {
+    // 如果靠左，计算偏移量是否符合条件
+    if (options.dir === 'left') {
+        // 首先尝试左侧侧放置是否足够
+        if (this.spaceLeft(options)) {
+            return this.getSpaceDirNum(options, 'left')
+        } else if (this.spaceRight(options)) {
+            return this.getSpaceDirNum(options, 'right')
+        } else {
+            // 兜底放置在左侧
+            return 0
+        }
+    } else if (options.dir === 'top') {
+        return this.autoTop() - this.getTipChildHeight();
+    } else if (options.dir === 'bottom') {
+        return this.autoTop() + this.$baseContent.height();
+    } else {
+        // 兜底是右侧
+        // 首先尝试右侧放置是否足够
+        if (this.spaceRight(options)) {
+            return this.getSpaceDirNum(options, 'right')
+        } else if (this.spaceLeft(options)) {
+            return this.getSpaceDirNum(options, 'left')
+        } else {
+            // 兜底放置在右侧
+            return $(document.body).width() - options.position.x - this.getTipChildWidth()
+        }
+    }
+}
+
+const getAlreadyTip = (baseDom) => {
+    for (let i = 0; i < tmp2TipsArr.length; i++) {
+        // 意味着刚删除，还没有触发body click事件，没有整体做清空
+        if (baseDom === tmp2TipsArr[i].baseDom) {
+            return false
+        }
+    }
+    for (let i = 0; i < tipsArr.length; i++) {
+        if (baseDom === tipsArr[i].baseDom) {
+            return tipsArr[i]
+        }
+    }
+    for (let i = 0; i < tmpTipsArr.length; i++) {
+        if (baseDom === tmpTipsArr[i].baseDom) {
+            if (tmpTipsArr[i].$tipContent) {
+                return tmpTipsArr[i]
+            } else {
+                tmpTipsArr.splice(i, 1)
+                return false
+            }
+        }
+    }
+    return null
+}
+
+// 计算top距离
+tip.prototype.autoTop = function () {
+    const h = window.innerHeight || $(document.body).height()
+    const top = this.basePosition.top + this.options.position.y
+
+    if (this.tipHeight <= 0) {
+        // 如果计算的这个tipHeight高度不准确，那么取tipContent tipChild再计算一次
+        const tipContentHeight = this.$tipContent.height()
+        if (tipContentHeight > 0) {
+            this.tipHeight = tipContentHeight
+        } else {
+            const tipChildtHeight = this.$tipChild.height()
+            if (tipChildtHeight > 0) {
+                this.tipHeight = tipChildtHeight
+            }
+        }
+    }
+    const hTop = h - this.tipHeight - 4;
+
+    if (hTop < top) {
+        return hTop
+    }
+    return top
+}
+
+// 给基础元素的父元素及祖先元素增加scroll事件，监听位移
+tip.prototype.addScrollParents = function () {
+    let $parent = this.$baseContent.parent()
+    this.scrollFn = () => {
+        return this.resizePosition()
+    }
+    while ($parent[0] !== document.body) {
+        $parent[0].addEventListener("scroll", this.scrollFn);
+        $parent = $parent.parent()
+    }
+}
+
+tip.prototype.removeScrollParents = function () {
+    let $parent = this.$baseContent.parent()
+    while ($parent[0] != null && $parent[0] !== document.body) {
+        $parent[0].removeEventListener("scroll", this.scrollFn);
+        $parent = $parent.parent()
+    }
+}
+
+// 获取tip内容元素的宽度
+tip.prototype.getTipChildWidth = function () {
+    if (windowEnv === 'pix') {
+        return this.$tipChild.width()
+    } else {
+        return this.$tipChild.outerWidth()
+    }
+
+}
+
+// 获取tip内容元素的高度
+tip.prototype.getTipChildHeight = function () {
+    if (windowEnv === 'pix') {
+        return this.$tipChild.height()
+    } else {
+        return this.$tipChild.outerHeight()
+    }
+
+}
+
+// 获取参照元素的位置
+tip.prototype.getBasePosition = function () {
+    if (windowEnv === 'pix') {
+        return this.$baseContent.position()
+    } else {
+        return this.$baseContent.get(0).getBoundingClientRect()
+    }
+}
+
+const isClick = (tipInfo, e) => {
+    if (tipInfo.$baseContent[0] === e.target && tipInfo.$tipContent) {
+        return true
+    }
+    if (tipInfo.$baseContent.find(e.target)[0] === e.target && tipInfo.$tipContent) {
+        return true
+    }
+    return false
+}

package/components/utils/env.js

@@ -0,0 +1,7 @@
+
+
+
+export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
+  navigator.userAgent
+);
+

package/components/utils/utils.js

@@ -0,0 +1,65 @@
+export const nextAnimationFrame = () => {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            resolve();
+        });
+    });
+}
+
+// 进行resize有关的功能设置
+const resizeFunc = []
+export function addResizeFunc(options){
+    if(options.func && options.obj){
+        resizeFunc.push(options)
+    }
+}
+
+export function removeResizeFunc(options){
+  for(let i=0;i<resizeFunc.length;i++){
+    if(options.obj === resizeFunc[i].obj){
+      resizeFunc.splice(i,1)
+      i = i-1;
+    }
+  }
+}
+
+export function startEventResize(){
+  // 监听 window 的 resize 事件
+  window.addEventListener('resize', function(event) {
+    resizeFunc.forEach(item=>{
+        if(item.func && item.obj){
+            item.func.call(item.obj)
+        }
+    })
+  });
+}
+
+// 进行onscroll有关的功能设置
+const scrollFunc = []
+export function addScrollFunc(options){
+    if(options.func && options.obj){
+        scrollFunc.push(options)
+    }
+}
+
+export function removeScrollFunc(options){
+  for(let i=0;i<scrollFunc.length;i++){
+    if(options.obj === scrollFunc[i].obj){
+        scrollFunc.splice(i,1)
+      i = i-1;
+    }
+  }
+}
+
+export function startEventScroll($){
+  const handler = function() {
+    scrollFunc.forEach(item=>{
+        if(item.func && item.obj){
+            item.func.call(item.obj)
+        }
+    })
+  }
+  // 监听 window 的 scroll 事件
+  $(document.body).on('scroll', handler);
+  window.addEventListener('scroll', handler);
+}