@sinosun/lib/lib/BaseView/baseScroll.js

sinosun jsbridge and net toolkit

"use strict";
/*
 * @Description: 设置title变化处理-baseScroll
 */

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

require("core-js/modules/es.number.constructor.js");

require("core-js/modules/es.regexp.exec.js");

require("core-js/modules/es.string.replace.js");

require("core-js/modules/es.number.to-fixed.js");

var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));

var _defineProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));

var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));

(0, _defineProperty["default"])(exports, "__esModule", {
  value: true
});

var baseUtils_1 = require("./baseUtils");

var uaUtil_1 = require("../Utils/uaUtil");

var BaseScroll = {
  data: function data() {
    return {
      // 子组件自己定制滑动距离 如果传了距离以传入为准
      distanceHeight: 0,
      // 是否设置完成 如果已完成 往下滑动 就不设置了
      setComplete: false,
      // 以1000 / 60的频率刷新
      scrollEventHandle: baseUtils_1.scrollThrottle(this.scrollEvent, 1000 / 60)
    };
  },
  methods: {
    /**
     * @description: 不是事件e可以传空对象 自己定制获取scrollTop的方法
     * @param {*} e 必传
     * @param {*} type 非必传
     * @param {*} height 非必传
     */
    scrollEvent: function scrollEvent(e, type, height) {
      // pc 没有渐变
      if (baseUtils_1.isPC()) {
        return;
      }

      var scrollTop = this.getScrollTop(e);
      var distanceHeight; // 子组件自己定制滑动距离 如果传了距离以传入为准

      if (typeof this.getDistanceHeight === "function") {
        distanceHeight = this.getDistanceHeight() || 0;
      }

      height = height || distanceHeight;
      this.setBarScrollStatus(scrollTop, height, type);
    },

    /**
     * @abstract
     * @description: 可由子组件定制 获取滚动距离
     * @param {*} e 事件对象 可自定义对象含有scrollTop属性
     */
    getScrollTop: function getScrollTop(e) {
      if (e === void 0) {
        e = {};
      }

      var scrollTop = 0;

      if ((0, _typeof2["default"])(e) === "object") {
        // e.preventDefault 浏览器自带事件对象 是事件对象
        if (e.preventDefault) {
          e = e || window.event;
          var t = e.target || e.srcElement;
          scrollTop = t.scrollTop;
        } else {
          if (e.scrollTop) {
            scrollTop = e.scrollTop;
          }
        }
      } else {
        scrollTop = isNaN(e) ? 0 : Number(e) || 0;
      }

      return scrollTop;
    },

    /**
     * @description: 设置bar的状态
     * @param {type}
     */
    setBarScrollStatus: function setBarScrollStatus(scrollTop, height, type) {
      if (type === void 0) {
        type = "opacity";
      } // 获取实际应该滑动的距离


      var realHeight = this.getRealHeight(height); // 计算失败不执行函数

      if (realHeight < 0) return; // 获取当前页面基础配置

      var pageConfig = (0, _assign["default"])({}, window.TITLEBARCONFIG); // 初始主题色

      var themeMode = pageConfig.themeMode || "light"; // 终止主题色

      var endTheme = this.getEndTheme(themeMode); // 滚动小于需要滚动的高度 则改变状态

      if (scrollTop < realHeight) {
        this.setComplete = false;
        var contentRadio = this.getContentRadio(scrollTop, realHeight); // title渐变

        if ((0, _indexOf["default"])(type).call(type, "opacity") !== -1) {
          pageConfig = this.opacityDeal(pageConfig, contentRadio);
        } // 文字渐变 由 1->0->1


        if ((0, _indexOf["default"])(type).call(type, "contentOpacity") !== -1) {
          pageConfig = this.contentOpacityDeal(pageConfig, type, contentRadio);
        } // 主题变化


        if ((0, _indexOf["default"])(type).call(type, "themeChange") !== -1) {
          pageConfig = this.themeChangeDeal(pageConfig, type, contentRadio, endTheme);
        }
      } else {
        // 稳定装态
        if (this.setComplete) {
          return;
        }

        pageConfig = this.completeDeal(pageConfig, type, endTheme); // 表示已经设置

        this.setComplete = true;
      }

      window.STORECURRENTTITLEBARCONFIG = pageConfig;
      BrowserApi.setTitleBarTheme(pageConfig);
    },

    /**
     * @abstract
     * @description: 可由子组件定制 获取实际滑动距离
     * @param {*}
     */
    getRealHeight: function getRealHeight(height) {
      if (isNaN(height)) {
        if ((0, _indexOf["default"])(height).call(height, "rem")) {
          height = this.getRemHeight(Number(height.replace("rem", "")));
        } else if ((0, _indexOf["default"])(height).call(height, "px")) {
          height = Number(height.replace("px", ""));
        } else {
          try {
            height = Number(height.replace(/[^\d]/g, ""));
          } catch (err) {
            console.log("getRealHeight @@Error ------>", err);
            height = 0;
          }
        }
      }

      if (!window.STATUSBARHEIGHT && !window.TITLEBARHEIGHT) {
        uaUtil_1.getDeviceBarFn();
      }

      var realHeight = height - (window.STATUSBARHEIGHT + window.TITLEBARHEIGHT);
      return realHeight;
    },

    /**
     * @abstract
     * @description:可由子组件定制 获取rem换算的px
     * @param {*}
     */
    getRemHeight: function getRemHeight(remNum) {
      // 浏览器宽度
      var winWidth = document.body.offsetWidth; // 1rem = 100px 750设计稿
      // 获取rem对应当前浏览器的px

      var height = remNum * 100 * (winWidth / 750);
      return height;
    },

    /**
     * @abstract
     * @description: 可由子组件定制 获取终止的tilte主题
     * @param {*}
     */
    getEndTheme: function getEndTheme(themeMode) {
      if (themeMode === void 0) {
        themeMode = "light";
      } // 暗黑模式字体颜色不需要变化


      if (window.SINO_THEME === "dark") {
        themeMode = "dark";
      }

      var themeModeInfo = {
        light: "dark",
        dark: "light"
      };
      return themeModeInfo[themeMode];
    },

    /**
     * @abstract
     * @description: 可由子组件定制 获取比例
     * @param {*}
     */
    getContentRadio: function getContentRadio(scrollTop, realHeight) {
      var radio = scrollTop / realHeight;
      var contentRadio = (0, _parseFloat2["default"])(radio.toFixed(6));
      return contentRadio;
    },

    /**
     * @abstract
     * @description: 可由子组件定制 opacity处理
     * @param {*}
     */
    opacityDeal: function opacityDeal(pageConfig, contentRadio) {
      if (pageConfig === void 0) {
        pageConfig = {};
      }

      pageConfig.opacity = contentRadio;
      return pageConfig;
    },

    /**
     * @abstract
     * @description: 可由子组件定制 文字渐变处理
     * @param {*}
     */
    contentOpacityDeal: function contentOpacityDeal(pageConfig, type, contentRadio) {
      if (pageConfig === void 0) {
        pageConfig = {};
      }

      if ((0, _indexOf["default"])(type).call(type, "themeChange") !== -1) {
        if (contentRadio <= 0.5) {
          pageConfig.contentOpacity = 1 - contentRadio * 2;
        } else {
          pageConfig.contentOpacity = contentRadio * 2 - 1;
        }
      } else {
        pageConfig.contentOpacity = contentRadio;
      }

      return pageConfig;
    },

    /**
     * @abstract
     * @description: 可由子组件定制 主题变化处理
     * @param {*}
     */
    themeChangeDeal: function themeChangeDeal(pageConfig, type, contentRadio, endTheme) {
      if (pageConfig === void 0) {
        pageConfig = {};
      }

      if ((0, _indexOf["default"])(type).call(type, "contentOpacity") !== -1) {
        if (contentRadio > 0.5) {
          pageConfig.themeMode = endTheme;
        }
      }

      return pageConfig;
    },

    /**
     * @abstract
     * @description: 可由子组件定制 所有事件完成处理
     * @param {*}
     */
    completeDeal: function completeDeal(pageConfig, type, endTheme) {
      if (pageConfig === void 0) {
        pageConfig = {};
      } // title渐变


      if ((0, _indexOf["default"])(type).call(type, "opacity") !== -1) {
        pageConfig.opacity = 1.0;
      } // 文字渐变 文字展示


      if ((0, _indexOf["default"])(type).call(type, "contentOpacity") !== -1) {
        pageConfig.contentOpacity = 1.0;
      } // 主题变化


      if ((0, _indexOf["default"])(type).call(type, "themeChange") !== -1) {
        pageConfig.themeMode = endTheme;
      }

      return pageConfig;
    }
  }
};
exports["default"] = BaseScroll;