tencent.jquery.pix.component 1.0.6-6.beta1

package/components/banner/banner.js

@@ -0,0 +1,461 @@
+import "./banner.scss"
+import { windowEnv, getEnv } from "../config";
+import { addResizeFunc, nextAnimationFrame, removeResizeFunc } from "../utils/utils";
+
+let $ = null;
+
+/**
+ * 在页面上放置一个banner组件
+ * @constructor
+ * @param {object} options 选项
+ * @param {string} options.container 容器元素的jquery选择器
+ * @param {Array<{url: string, title: string}>} options.list 轮播图列表， url 为图片背景， title 为图片标题
+ * @param {number} [options.index=0] 轮播图初始位置
+ * @param {boolean} [options.isTitleEnabled=true] 是否启用标题、翻页栏
+ * @param {number} [options.durationMs=0] 轮播图切换时间间隔，单位毫秒，0表示不自动轮播，默认为 0
+ * @param {boolean} [options.autoResize=true] 是否自动调整容器宽度以适应屏幕宽度，默认为 true
+ * @param {number} [options.dragThreshold=0.2] 拖动翻页阈值，表示拖动距离占宽度的比例，默认为 0.2（20%）
+ * @param {function} [options.click] 点击轮播图时触发，第一个参数为触发元素的jq，第二个参数为 options.list 中对应的项，第三个参数为当前页码
+ * @param {function} [options.pageChanged] 翻页时触发，第一个参数为新生效页面元素的jq，第二个参数为 options.list 中对应的项，第三个参数为当前页码
+ * @param {function} [options.renderCallback] 自定义渲染回调，第一个参数为 options.list 中对应的项，第二个参数为当前页码，返回值为渲染后的元素
+ */
+export function Banner(options = {}) {
+    $ = getEnv().$;
+
+    this.options = options;
+    this.options.isTitleEnabled ??= true;
+    this.options.autoResize ??= true;
+    this.options.durationMs = Number(options.durationMs || 0) || 0;
+    this.options.dragThreshold = Number(options.dragThreshold || 0.2) || 0.2;
+    this.index = Number(options.index || 0) || 0;
+    if (typeof options.renderCallback === 'function') {
+        this.options.isTitleEnabled = false;
+    }
+    this.init();
+}
+
+Banner.prototype.setWidth = function (width) {
+    this.signWidth = width;
+    this.allWidth = this.signWidth * (this.options.list.length + 2);
+    $(this.options.container).width(width);
+    this.$inner.width(this.allWidth);
+    this.$inner.find('.banner-inner-li').width(this.signWidth);
+    this.setTranslate(-this.signWidth * (this.index + 1));
+}
+
+Banner.prototype.fitWidth = function () {
+    console.log('banner fitWidth');
+    const newWidth = $(this.options.container).parent().width();
+    if (newWidth != this.signWidth) {
+        this.setWidth(newWidth);
+    }
+}
+
+/**
+ * 跳转到上一页
+ */
+Banner.prototype.prevPage = async function () {
+    this.pauseAutoPlay();
+    await this.gotoPageUnchecked(this.index - 1);
+    this.startAutoPlay();
+}
+
+/**
+ * 跳转到下一页
+ */
+Banner.prototype.nextPage = async function () {
+    this.pauseAutoPlay();
+    await this.gotoPageUnchecked(this.index + 1);
+    this.startAutoPlay();
+}
+
+/**
+ * 跳转到指定页
+ * @param {number} newIdx 要切换到的页码 [0, len)
+ */
+Banner.prototype.gotoPage = async function (newIdx) {
+    if (newIdx < 0 || newIdx >= this.options.list.length) {
+        throw new Error('index out of range');
+    }
+    if (newIdx == this.index) {
+        return
+    }
+    this.pauseAutoPlay();
+    await this.gotoPageUnchecked(newIdx);
+    this.startAutoPlay();
+}
+
+Banner.prototype.gotoPageUnchecked = async function (newIdx) {
+    const len = this.options.list.length;
+    let wrap = 0;
+    if (newIdx <= -1) {
+        newIdx = len - 1;
+        wrap = 1;
+    } else if (newIdx >= len) {
+        newIdx = 0;
+        wrap = -1;
+    }
+
+    if (wrap !== 0) {
+        this.$inner.css('transition', 'none');
+        this.setTranslate(-this.signWidth * (newIdx + 1 + wrap));
+        await nextAnimationFrame();
+        await nextAnimationFrame();
+    }
+
+    this.$inner.css('transition', 'transform 0.3s ease-out');
+    const newTranslate = -this.signWidth * (newIdx + 1);
+    this.setTranslate(newTranslate);
+    if (this.options.isTitleEnabled) {
+        this.$pagination.children().eq(newIdx + 1).addClass('active').siblings().removeClass('active');
+        this.$titleBox.text(this.options.list[newIdx].title);
+    }
+    if (this.options.pageChanged && newIdx != this.index) {
+        this.options.pageChanged(this.$inner.children().eq(newIdx + 1), this.options.list[newIdx], newIdx);
+    }
+    this.index = newIdx;
+}
+
+/**
+ * 获取当前页的序号
+ * @returns {number} 当前页的序号 [0,len]
+ */
+Banner.prototype.getCurrentPage = function () {
+    return this.index;
+}
+
+Banner.prototype.init = function () {
+    const $t = $(this.options.container)
+    console.log('banner container:', $t.dom);
+    const signWidth = $t.width()
+    $t.width(`${signWidth}px`);
+    $t.css('touch-action', 'none');
+    if (this.options.renderCallback) {
+        this.createCustomHtml();
+    } else {
+        this.createHtml();
+    }
+    this.bindEvent();
+    if (this.options.autoResize) {
+        addResizeFunc({
+            obj: this,
+            func: this.fitWidth,
+        });
+    }
+    this.startAutoPlay();
+    console.log('list:', this.options.list, ' signWidth:', signWidth)
+}
+
+Banner.prototype.startAutoPlay = function () {
+    if (this.options.durationMs > 0 && this.timer == null) {
+        this.timer = setInterval(() => {
+            this.nextPage()
+        }, this.options.durationMs);
+    }
+}
+
+Banner.prototype.pauseAutoPlay = function () {
+    if (this.timer == null) {
+        return;
+    }
+    clearInterval(this.timer);
+    this.timer = null;
+}
+
+Banner.prototype.createHtml = function () {
+    const len = this.options.list.length
+    if (len < 1) {
+        return
+    }
+    const $t = $(this.options.container)
+    $t.empty();
+    const signWidth = this.signWidth = $t.width()
+
+    const allWidth = this.allWidth = signWidth * (len + 2)
+    const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
+    this.currentTranslate = -signWidth * (this.index + 1)
+    $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
+
+    // 加第0个位置
+    $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[len - 1].url}" style="width:${this.signWidth}px;">
+            </div>
+        `)
+    for (let i = 0; i < len; i++) {
+        const item = this.options.list[i]
+        const $li = $(`<div class="banner-inner-li" data-background-url="${item.url}" style="width:${this.signWidth}px;">
+            </div>
+        `)
+        $inner.append($li)
+    }
+    // 加第N+1
+    $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[0].url}" style="width:${this.signWidth}px;">
+            </div>
+        `)
+
+    const preloadIdx = this.index;
+    this.loadBackground(preloadIdx);
+    this.loadBackground((preloadIdx + 1) % len); // prev
+    this.loadBackground((preloadIdx - 1 + len) % len); // next
+
+    $t.append($inner)
+
+    if (this.options.isTitleEnabled) {
+        // 创建 titlebox
+        const $titleBox = $(`<div class="banner-title-box">${this.options.list[this.index].title}</div>`)
+
+        // 创建 pagination
+        const $pagination = $(`<div class="banner-pagination"></div>`)
+
+        $pagination.append($titleBox);
+        for (let i = 0; i < len; i++) {
+            $pagination.append(`<div class="banner-pagination-item ${i === 0 ? 'active' : ''}"></div>`)
+        }
+
+        this.$titleBox = $titleBox
+        this.$pagination = $pagination
+
+        $pagination.children().eq(this.index + 1).addClass('active').siblings().removeClass('active')
+
+        $t.append($pagination)
+    }
+
+    setTimeout(() => {
+        this.loadAllBackgrounds();
+    }, 1000);
+}
+
+/**
+ * 由 this.options.renderCallback 生成页面
+ */
+Banner.prototype.createCustomHtml = function () {
+    const len = this.options.list.length
+    if (len < 1) {
+        return
+    }
+    const $t = $(this.options.container)
+    $t.empty();
+    const signWidth = this.signWidth = $t.width()
+
+    const allWidth = this.allWidth = signWidth * (len + 2)
+    const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
+    this.currentTranslate = -signWidth * (this.index + 1)
+    $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
+
+    let $li = $(this.options.renderCallback(this.options.list[len - 1], len - 1));
+    $li.width(signWidth);
+    $inner.append($li);
+
+    for (let i = 0; i < len; i++) {
+        $li = $(this.options.renderCallback(this.options.list[i], i));
+        $li.width(signWidth);
+        $inner.append($li);
+    }
+
+    $li = $(this.options.renderCallback(this.options.list[0], 0));
+    $li.width(signWidth);
+    $inner.append($li);
+
+    $t.append($inner);
+}
+
+Banner.prototype.bindEvent = function () {
+    const self = this
+    const len = this.options.list.length;
+    const $inner = this.$inner;
+
+    // pStart 时的 clientX
+    let originalX = 0;
+
+    // 随 pMove 的触发动态更新的 clientX
+    let startX = 0;
+
+    let originalTranslate = 0;
+    let isDown = false;
+
+    const pStart = (x, capture) => {
+        if (isDown) {
+            return;
+        }
+        if (capture) {
+            capture();
+        }
+        this.pauseAutoPlay();
+        originalX = x;
+        startX = x;
+        originalTranslate = this.currentTranslate;
+        $inner.css('transition', 'none')
+        isDown = true;
+    };
+
+    const pMove = x => {
+        if (!isDown) {
+            return;
+        }
+        const curX = x;
+        const moveX = curX - startX;
+        let newTranslate = this.currentTranslate + moveX;
+        if (Math.abs(newTranslate - originalTranslate) > this.signWidth) {
+            // 限制滑动范围不超过一个 sign 的宽度
+            newTranslate = Math.max(Math.min(newTranslate, originalTranslate + this.signWidth), originalTranslate - this.signWidth);
+        } else {
+            startX = curX;
+        }
+        this.setTranslate(newTranslate);
+    };
+
+    const pEnd = async (capture) => {
+        if (!isDown) {
+            return;
+        }
+        if (capture) {
+            capture();
+        }
+        isDown = false;
+        // let newTranslate = Math.round(this.currentTranslate / this.signWidth) * this.signWidth;
+        // newTranslate = Math.max(Math.min(newTranslate, 0), -this.signWidth * (len+1));
+        let newTranslate;
+        if (Math.abs(this.currentTranslate - originalTranslate) > this.signWidth * this.options.dragThreshold) {
+            newTranslate = Math.sign(this.currentTranslate - originalTranslate) * this.signWidth + originalTranslate;
+            if (newTranslate > -this.signWidth) {
+                newTranslate -= this.signWidth * len;
+            } else if (newTranslate < -this.signWidth * len) {
+                newTranslate += this.signWidth * len;
+            }
+
+            // 在移动到新位置前，先变换当前位置到正确区域
+            await this.normalizeTranslate();
+        } else {
+            newTranslate = originalTranslate;
+        }
+
+        $inner.css('transition', 'transform 0.3s ease-out')
+        $inner.css('transform', `translateX(${this.currentTranslate}px)`);
+
+        if (newTranslate !== this.currentTranslate) {
+            this.setTranslate(newTranslate);
+        }
+
+        // 计算 newIndex ，取值范围 [0, len)
+        // 由于 newTranslate 包含了前后的循环占位（位置 0 和 len+1 ），需要减1后取模
+        const newIndex = (Math.round(-newTranslate / this.signWidth) + len - 1) % len;
+        if (this.options.isTitleEnabled) {
+            this.$pagination.children().eq(newIndex + 1).addClass('active').siblings().removeClass('active');
+            this.$titleBox.text(this.options.list[newIndex].title);
+        }
+        if (this.options.pageChanged && newIndex != this.index) {
+            this.options.pageChanged(this.$inner.children().eq(newIndex + 1), this.options.list[newIndex], newIndex);
+        }
+        this.index = newIndex;
+        this.startAutoPlay();
+    };
+
+    $inner.off();
+
+    if (windowEnv === 'h5') { // 浏览器环境
+        $inner
+            .attr('draggable', 'false')
+            .on('pointerdown', function (e) {
+                pStart(e.originalEvent.clientX, () => {
+                    this.setPointerCapture(e.originalEvent.pointerId);
+                });
+            })
+            .on('pointermove', function (e) {
+                pMove(e.originalEvent.clientX);
+            })
+            .on('pointerup', async function (e) {
+                await pEnd(() => {
+                    this.releasePointerCapture(e.originalEvent.pointerId);
+                });
+            });
+    } else { // app或模拟器
+        $inner
+            .attr('draggable', 'true')
+            .on('dragstart', e => {
+                pStart(e.clientX);
+            })
+            .on('drag', e => {
+                pMove(e.clientX);
+            })
+            .on('dragend', async () => {
+                await pEnd();
+            })
+    }
+
+    $inner.on('transitionend', () => {
+        $inner.css('transition', 'none');
+    })
+        .on('click', function (e) {
+            if (!self.options.click) {
+                return
+            }
+            if (windowEnv === 'h5' && Math.abs(e.clientX - originalX) > 10) {
+                // 防止浏览器中拖动时触发click
+                return
+            }
+
+            const $t = self.$inner.children().eq(self.index + 1);
+            self.options.click($t, self.options.list[self.index], self.index);
+        });
+}
+
+Banner.prototype.setTranslate = function (transX) {
+    this.currentTranslate = transX;
+    this.$inner.css('transform', `translateX(${this.currentTranslate}px)`);
+}
+
+/**
+ * 当currentTranslate位于补位区时，平移一个周期到另一侧
+ * 如果需要移动，则使用requestAnimationFrame确保动作完成
+ */
+Banner.prototype.normalizeTranslate = async function () {
+    const len = this.options.list.length;
+    if (this.currentTranslate > -this.signWidth) {
+        this.setTranslate(this.currentTranslate - this.signWidth * len);
+        await nextAnimationFrame();
+        await nextAnimationFrame();
+    } else if (this.currentTranslate < -this.signWidth * len) {
+        this.setTranslate(this.currentTranslate + this.signWidth * len);
+        await nextAnimationFrame();
+        await nextAnimationFrame();
+    }
+}
+
+/**
+ * 加载所有背景图片，将data-background-url属性设置为背景图片
+ */
+Banner.prototype.loadAllBackgrounds = function () {
+    this.$inner.children().each(function () {
+        $(this).css('background-image', `url(${$(this).attr('data-background-url')})`)
+    });
+    // console.log('banner images loaded');
+}
+
+/**
+ * 加载背景图片，将data-background-url属性设置为背景图片
+ * @param {number} pos 为加载的图片编号，取值[0, len)，如果为0或len-1，会同时加载滚动占位的图片
+ */
+Banner.prototype.loadBackground = function (pos) {
+    console.log('loadBackground pos === ', pos);
+    let $item = this.$inner.children().eq(pos + 1);
+    $item.css('background-image', `url(${$item.attr('data-background-url')})`);
+
+    // 加载滚动占位的图片
+    if (pos === 0) {
+        $item = this.$inner.children().eq(this.options.list.length + 1);
+        $item.css('background-image', `url(${$item.attr('data-background-url')})`);
+    }
+
+    if (pos === this.options.list.length - 1) {
+        $item = this.$inner.children().eq(0);
+        $item.css('background-image', `url(${$item.attr('data-background-url')})`);
+    }
+}
+
+Banner.prototype.remove = function () {
+    this.pauseAutoPlay();
+    $(this.options.container).empty();
+    removeResizeFunc({
+        obj: this,
+        func: this.fitWidth,
+    });
+}

package/components/banner/banner.scss

@@ -0,0 +1,46 @@
+.banner-inner-transform {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.banner-pagination-item {
+  flex-shrink: 0;
+  width: 0.2rem;
+  height: 0.2rem;
+  background: rgba(255, 255, 255, 0.5);
+  margin: 0 0.075rem;
+  border-radius: 50%;
+}
+
+.banner-pagination {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.6rem;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.banner-pagination-item.active {
+  background: #fff;
+}
+
+.banner-title-box {
+  flex-shrink: 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.6rem;
+  display: flex;
+  justify-content: start;
+  font-size: 0.36rem;
+  align-items: center;
+  z-index: 10;
+  text-wrap: nowrap;
+  overflow: hidden;
+  color: white;
+}

package/components/config.js

@@ -0,0 +1,23 @@
+import { startEventResize, startEventScroll } from './utils/utils.js'
+
+export let windowEnv;
+export let $;
+
+export const setEnv = (config) => {
+    windowEnv = config.windowEnv;
+    $ = config.$;
+    console.log('setEnv', config);
+
+    // 页面resize事件
+    startEventResize();
+
+    // 页面scroll事件
+    startEventScroll($)
+}
+
+export const getEnv = () => {
+    return {
+        windowEnv,
+        $,
+    }
+}