145 lines
4.9 KiB
JavaScript
145 lines
4.9 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const components_hazardDetail_hazardDetail = require("./hazardDetail.js");
|
|
function useHazardDetailScroll(detailSource, loadingSource) {
|
|
const instance = common_vendor.getCurrentInstance();
|
|
const queryScope = (instance == null ? void 0 : instance.proxy) || instance;
|
|
const historyList = common_vendor.ref([]);
|
|
const activeIndex = common_vendor.ref(0);
|
|
const sectionOffsets = common_vendor.ref([0]);
|
|
const contentViewHeight = common_vendor.ref(0);
|
|
const contentScrollIntoView = common_vendor.ref("");
|
|
const stepScrollIntoView = common_vendor.ref("");
|
|
const scrollWithAnimation = common_vendor.ref(true);
|
|
const isProgrammaticScroll = common_vendor.ref(false);
|
|
let measureLayoutTimer = null;
|
|
const measureLayout = () => {
|
|
if (!historyList.value.length)
|
|
return;
|
|
common_vendor.nextTick$1(() => {
|
|
const query = common_vendor.index.createSelectorQuery().in(queryScope);
|
|
query.select(".content-scroll").boundingClientRect();
|
|
query.select(".content-scroll").scrollOffset();
|
|
query.selectAll(".node-section").boundingClientRect();
|
|
query.exec((res) => {
|
|
const containerRect = res == null ? void 0 : res[0];
|
|
const scrollOffset = res == null ? void 0 : res[1];
|
|
const sections = (res == null ? void 0 : res[2]) || [];
|
|
if (!containerRect || !sections.length)
|
|
return;
|
|
contentViewHeight.value = containerRect.height || 0;
|
|
const baseScrollTop = (scrollOffset == null ? void 0 : scrollOffset.scrollTop) || 0;
|
|
sectionOffsets.value = sections.map(
|
|
(section) => section.top - containerRect.top + baseScrollTop
|
|
);
|
|
});
|
|
});
|
|
};
|
|
const scheduleMeasureLayout = () => {
|
|
clearTimeout(measureLayoutTimer);
|
|
measureLayoutTimer = setTimeout(() => {
|
|
measureLayout();
|
|
}, 80);
|
|
};
|
|
const rebuildHistory = (data) => {
|
|
historyList.value = components_hazardDetail_hazardDetail.generateHazardHistory(data);
|
|
activeIndex.value = 0;
|
|
contentScrollIntoView.value = "";
|
|
scheduleMeasureLayout();
|
|
setTimeout(scheduleMeasureLayout, 300);
|
|
};
|
|
const syncActiveIndex = (scrollTop, scrollHeight = 0) => {
|
|
const count = historyList.value.length;
|
|
if (!count)
|
|
return;
|
|
if (scrollHeight > 0 && contentViewHeight.value > 0) {
|
|
if (scrollTop + contentViewHeight.value >= scrollHeight - 60) {
|
|
if (activeIndex.value !== count - 1) {
|
|
activeIndex.value = count - 1;
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
const offsets = sectionOffsets.value;
|
|
if (!offsets.length)
|
|
return;
|
|
let idx = 0;
|
|
for (let i = offsets.length - 1; i >= 0; i--) {
|
|
if (scrollTop >= offsets[i] - 80) {
|
|
idx = i;
|
|
break;
|
|
}
|
|
}
|
|
if (idx !== activeIndex.value) {
|
|
activeIndex.value = idx;
|
|
}
|
|
};
|
|
const onContentScroll = (e) => {
|
|
if (isProgrammaticScroll.value)
|
|
return;
|
|
const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};
|
|
syncActiveIndex(scrollTop, scrollHeight);
|
|
scheduleMeasureLayout();
|
|
};
|
|
const onScrollToLower = () => {
|
|
const count = historyList.value.length;
|
|
if (count > 0 && activeIndex.value !== count - 1) {
|
|
activeIndex.value = count - 1;
|
|
}
|
|
};
|
|
const scrollToNode = (index) => {
|
|
if (index < 0 || index >= historyList.value.length)
|
|
return;
|
|
isProgrammaticScroll.value = true;
|
|
scrollWithAnimation.value = true;
|
|
activeIndex.value = index;
|
|
contentScrollIntoView.value = "hazard-node-" + index;
|
|
setTimeout(() => {
|
|
contentScrollIntoView.value = "";
|
|
isProgrammaticScroll.value = false;
|
|
scheduleMeasureLayout();
|
|
}, 350);
|
|
};
|
|
common_vendor.watch(
|
|
() => typeof loadingSource === "function" ? loadingSource() : loadingSource == null ? void 0 : loadingSource.value,
|
|
(loading) => {
|
|
if (!loading) {
|
|
scheduleMeasureLayout();
|
|
setTimeout(scheduleMeasureLayout, 300);
|
|
}
|
|
}
|
|
);
|
|
common_vendor.watch(
|
|
() => typeof detailSource === "function" ? detailSource() : detailSource == null ? void 0 : detailSource.value,
|
|
(val) => rebuildHistory(val),
|
|
{ immediate: true, deep: true }
|
|
);
|
|
common_vendor.watch(activeIndex, (index) => {
|
|
stepScrollIntoView.value = "hazard-step-" + index;
|
|
setTimeout(() => {
|
|
stepScrollIntoView.value = "";
|
|
}, 300);
|
|
});
|
|
common_vendor.watch(
|
|
() => historyList.value.length,
|
|
() => scheduleMeasureLayout()
|
|
);
|
|
common_vendor.onReady(() => {
|
|
scheduleMeasureLayout();
|
|
setTimeout(scheduleMeasureLayout, 300);
|
|
});
|
|
return {
|
|
historyList,
|
|
activeIndex,
|
|
contentScrollIntoView,
|
|
stepScrollIntoView,
|
|
scrollWithAnimation,
|
|
onContentScroll,
|
|
onScrollToLower,
|
|
scrollToNode,
|
|
scheduleMeasureLayout
|
|
};
|
|
}
|
|
exports.useHazardDetailScroll = useHazardDetailScroll;
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/hazardDetail/useHazardDetailScroll.js.map
|