tencent.jquery.pix.component 1.0.53

package/components/waterfall/waterfall.js

@@ -0,0 +1,393 @@
+import { $, windowEnv } from "../config.js";
+import { remToPx } from "../../utils/utils.js";
+
+// 默认配置
+const DEFAULTS = {
+    columns: 2,       // 列数
+    columnGap: 10,              // 左右间隔
+    rowGap: 12,         // 上下间隔
+    marginTop: 0,  // 距离顶部距离
+    marginBottom: 12,  // 最后一行距离底部距离
+    bufferHeight: '2rem', // 缓冲高度，进行可能的预先添加高度
+    data: [],              // 数据源
+    container: '',                // 容器元素
+    renderItem(data, index) {      // 元素首次渲染时的回调函数, 如果把updateItem设置为空，那么更新时则会兜底触发renderItem
+        return '<div class="waterfall-item"></div>';
+    },
+    // 传入 $node, data, index
+    updateItem: null, // 元素更新时的回调函数
+    onscroll: null,   // 滚动事件回调函数
+};
+
+export function Waterfall(optionsInput = {}) {
+    this.options = Object.assign({}, DEFAULTS, optionsInput);
+    const options = this.options;
+    const $container = $(options.container);
+    // 标记是否有更新元素用的回调函数
+    this.hasUpdateItem = options.updateItem && (options.updateItem.constructor === Function) ? true : false;
+
+    // 间隔字符串转数字
+    if (options.columnGap.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.columnGap.indexOf('rem') > -1) {
+            options.columnGap = remToPx(options.columnGap);
+        } else {
+            options.columnGap = parseFloat(options.columnGap);
+        }
+    }
+    if (options.rowGap.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.rowGap.indexOf('rem') > -1) {
+            options.rowGap = remToPx(options.rowGap);
+        } else {
+            options.rowGap = parseFloat(options.rowGap);
+        }
+    }
+    if (options.bufferHeight.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.bufferHeight.indexOf('rem') > -1) {
+            options.bufferHeight = remToPx(options.bufferHeight);
+        } else {
+            options.bufferHeight = parseFloat(options.bufferHeight);
+        }
+    }
+    if (options.marginTop.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.marginTop.indexOf('rem') > -1) {
+            options.marginTop = remToPx(options.marginTop);
+        } else {
+            options.marginTop = parseFloat(options.marginTop);
+        }
+    }
+    if (options.marginBottom.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.marginBottom.indexOf('rem') > -1) {
+            options.marginBottom = remToPx(options.marginBottom);
+        } else {
+            options.marginBottom = parseFloat(options.marginBottom);
+        }
+    }
+
+    const allWidth = $container.width();
+    this.allWidth = allWidth;
+    // 计算每列的宽度
+    this.columnWidth = (allWidth - (options.columns - 1) * options.columnGap) / options.columns;
+
+    // 记录列数
+    this.columns = options.columns;
+
+    this.columnItems = [];  // 列元素数组
+    for (let i = 0; i < this.columns; i++) {
+        this.columnItems.push(this.createColumn(i));
+    }
+
+    this.renderIndex = 0;  // 渲染索引
+    this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
+    this.nodePool = [];            // DOM 节点池
+
+    this.init();
+}
+
+Waterfall.prototype.init = function () {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+
+    this.nodePool = [];            // DOM 节点池
+    this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
+
+
+
+    $container.html(`
+        <div class="waterfall-list-scroll" style="">
+          <div class="waterfall-list-viewport"></div>
+        </div>
+      `);
+
+    // 绑定滚动事件（节流处理）
+    $container.off().on('scroll', function () {
+        self.scrollTop = $(this).scrollTop();
+
+        window.requestAnimationFrame(() => {
+            self.updateVisibleItems();
+        });
+
+        if (options.onscroll && options.onscroll.constructor === Function) {
+            options.onscroll(this, self.scrollTop);
+        }
+    });
+
+    this.scrollTop = $container.scrollTop();  // 当前滚动位置
+
+    // 首次渲染
+    self.updateVisibleItems();
+
+}
+
+// force 强制更新渲染
+Waterfall.prototype.updateVisibleItems = function (force = false) {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+
+    const startTop = this.scrollTop;
+    const endTop = startTop + $container.height();
+
+    // 进行可见区域的渲染更新
+    this.updateCardsInView({
+        start: startTop,
+        end: endTop,
+        force
+    });
+}
+
+// 新增卡片
+Waterfall.prototype.appendCard = function (data, index, { top, left }) {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+    const $viewport = $container.find('.waterfall-list-viewport');
+    const $card = $(
+        `<div class="waterfall-item" 
+              data-index="${index}"
+              style="position: absolute;transform:translate(${left}px,${top}px); width:${this.columnWidth}px;"
+        >
+        ${options.renderItem(data, index)}
+         </div> `
+    );
+
+    $viewport.append($card);
+    return $card;
+}
+
+// 获取指定高度下的卡片索引
+Waterfall.prototype.updateCardsInView = function ({ start, end, force = false }) {
+    const options = this.options;
+    const minHeight = this.getMinHeight();
+    const endBuffer = end + options.bufferHeight;
+    if (minHeight < endBuffer) {
+        // 如果不够 进行补建
+        this.createCards({ end: endBuffer });
+    }
+
+    // 基于已有的列信息，进行高度可视区域下的判定 操作已有信息。 如果是新建信息 则依赖上方的createCards方法进行创建,那么在上方会异步创建新卡片。
+    // 阶段1：复用已有节点
+    const newActiveNodes = new Map();
+    for (let i = 0; i < this.columns; i++) {
+        const column = this.columnItems[i];
+
+        for (let j = 0; j < column.children.length; j++) {
+            const row = column.children[j];
+            const renderIndex = row.renderIndex;
+            // 在可视区域内 进行有关卡片的操作
+            if (row.top <= end && row.bottom >= start) {
+                // 理论上什么都不动，因为卡片的位置不会变
+                const $card = this.activeNodes.get(renderIndex);
+
+                let $node = null;
+                // 如果卡片已经在DOM中，则不用更新位置
+                if ($card) {
+                    $node = $card;
+                    this.activeNodes.delete(renderIndex);
+                    if (force) {
+                        this.updateRenderUI($node, options.data[renderIndex], renderIndex);
+                    }
+                } else {
+                    // 卡片不在DOM中，则更新位置
+                    let nodePool = this.nodePool;
+                    if (nodePool.length === 0) {
+                        // 这里是往上方拖动时，可能需要补建的情况
+                        // 如果池子没有节点,那么进行创建
+                        $node = this.appendCard(options.data[renderIndex], renderIndex, {
+                            top: row.top, left: row.left
+                        })
+                        row.$node = $node;
+                    } else {
+                        $node = $(this.nodePool.pop());
+                        $node.css({
+                            'transform': `translate(${row.left}px,${row.top}px)`,
+                        }).attr('data-index', renderIndex);
+                        this.updateRenderUI($node, options.data[renderIndex], renderIndex);
+                        row.$node = $node;
+                    }
+                }
+
+                newActiveNodes.set(renderIndex, $node);
+            }
+        }
+    }
+
+    // 阶段2：处理不活跃节点
+    this.activeNodes.forEach($node => {
+        $node.css('transform', `translateY(-9999px)`);// 移出可视区域
+        this.nodePool.push($node);
+    });
+    this.activeNodes = newActiveNodes;
+}
+
+Waterfall.prototype.getMaxHeight = function () {
+    let maxHeight = 0;
+    for (let i = 0; i < this.columns; i++) {
+        const column = this.columnItems[i]
+
+        // 获取每组元素列表的最后一个bottom值
+        maxHeight = Math.max(maxHeight, column.bottom);
+
+    }
+    return maxHeight;
+}
+
+Waterfall.prototype.getMinHeight = function () {
+    let minHeight = 0;
+    for (let i = 0; i < this.columns; i++) {
+        const column = this.columnItems[i]
+        if (minHeight === 0) {
+            minHeight = column.bottom;
+        }
+        // 获取每组元素列表的最后一个bottom值
+        minHeight = Math.min(minHeight, column.bottom);
+
+    }
+    return minHeight;
+}
+
+Waterfall.prototype.getMinHeightColumn = function () {
+    let minHeight = -1;
+    let mimHeightColumn = null;
+    for (let i = 0; i < this.columns; i++) {
+        const column = this.columnItems[i]
+
+        // 获取每组元素列表的最后一个bottom值
+        if (minHeight > column.bottom) {
+            minHeight = column.bottom;
+            mimHeightColumn = column;
+        } else if (minHeight === -1) {
+            minHeight = column.bottom;
+            mimHeightColumn = column;
+        }
+
+    }
+
+    return mimHeightColumn;
+}
+
+// 创建卡片
+Waterfall.prototype.createCards = function ({ end }) {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+    const renderIndex = this.renderIndex;
+
+    if (renderIndex >= options.data.length) {
+        const maxHeight = this.getMaxHeight();
+        // 设置一次整体高度
+        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom)
+        return;
+    }
+
+    let column = this.getMinHeightColumn();
+    if (column === null) {
+        // 没有可用的列，则在第一列创建，说明此时还没有数据
+        column = this.columnItems[0];
+    }
+
+    const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
+
+    // 设置卡片位置
+    const position = {
+        top,
+        left: column.left,
+    }
+
+    const row = createDefaultRow(position);
+
+
+    // 添加卡片
+    let $card = null;
+    if (this.nodePool.length === 0) {
+        $card = this.appendCard(options.data[renderIndex], renderIndex, position);
+    } else {
+        $card = $(this.nodePool.pop());
+        $card.css({
+            'transform': `translate(${row.left}px,${row.top}px)`,
+        }).attr('data-index', renderIndex);
+        this.updateRenderUI($card, options.data[renderIndex], renderIndex);
+    }
+
+
+    row.$node = $card;
+
+    // 把新增的卡片放进 activeNodes, 当前是 展示状态的
+    this.activeNodes.set(renderIndex, $card);
+
+
+    // 更新列的底部距离
+    column.bottom = top + $card.height();
+    column.children.push(row);
+
+    // 计算当前卡片的位置
+    row.bottom = column.bottom;
+    row.renderIndex = renderIndex;
+
+    this.renderIndex += 1;
+
+    let hasNextData = this.renderIndex < options.data.length;
+
+    const minHeight = this.getMinHeight();
+    if (hasNextData && (minHeight < end)) {
+        window.requestAnimationFrame(() => {
+            this.createCards({ end });
+        });
+    } else {
+        const maxHeight = this.getMaxHeight();
+        // 设置一次整体高度
+        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom)
+    }
+}
+
+Waterfall.prototype.createColumn = function (index) {
+    const res = {
+        left: 0,
+        bottom: 0,
+        width: 0,
+        children: []
+    }
+
+    const options = this.options;
+    const columnWidth = this.columnWidth;
+
+    res.width = this.columnWidth;
+    res.left = (index * (columnWidth + options.columnGap));
+    return res;
+}
+
+Waterfall.prototype.updateRenderUI = function ($node, data, index) {
+    const options = this.options;
+    if (this.hasUpdateItem === true) {
+        options.updateItem($node, data, index)
+    } else {
+        $node.html(options.renderItem(data, index));
+    }
+}
+
+Waterfall.prototype.updateData = function (newData) {
+    this.options.data = newData;
+    this.updateVisibleItems(true); // 强制更新渲染
+}
+
+function createDefaultRow({ top, left }) {
+    return {
+        top,
+        left,
+        bottom: 0,
+        $node: null,
+        renderIndex: -1
+    }
+}
+
+function getBottomByColumn(rows) {
+    if (rows.children.length === 0) {
+        return 0;
+    }
+    return rows[rows.length - 1].bottom;
+}

package/index.js

@@ -0,0 +1,10 @@
+export { VideoPlayer } from './components/video/videoplayer';
+export { tips, showTips } from './components/tips/tipv2';
+export { Banner } from './components/banner/banner';
+export { List } from './components/list/list';
+export { Waterfall } from './components/waterfall/waterfall';
+export { getEnv, setEnv } from './components/config';
+export { getFontSize, remToPx } from './utils/utils';
+
+
+

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "tencent.jquery.pix.component",
+  "version": "1.0.53",
+  "description": "",
+  "main": "index.js",
+  "files": [
+    "components",
+    "utils"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "winkchen, jackyjhe",
+  "license": "ISC",
+  "dependencies": {}
+}

package/readme.md

@@ -0,0 +1,15 @@
+# jquery.pix.component
+
+基于jquery.pix开发的pixui通用组件库。
+
+- 用于web浏览器基于正常的jquery版本(1.9系列)
+
+- 用于pix小应用基于@tencent/jquery.pix
+
+git 地址
+
+https://git.woa.com/linksee-web/pix/jquery.pix.component
+
+在线文档
+
+https://static-exp.native.qq.com/webfront/pixcomponent/QNgV5k6r/dist/#/

package/utils/utils.js

@@ -0,0 +1,16 @@
+import { $ } from "../components/config";
+
+let fontSize = -1;
+
+// 获取字体大小
+export const getFontSize = () => {
+    if (fontSize === -1) {
+        fontSize = parseFloat($(document.body).css("font-size").replace('px', ''));
+    }
+    return fontSize;
+}
+
+// rem 转 px
+export const remToPx = (rem) => {
+    return getFontSize() * parseFloat(rem.toString().replace('rem', ''));
+}