Skip to content

G
GraceTemplate
Commit e045b5a8 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

new 模板

parent f2e2bdf6
Hide whitespace changes
Inline Side-by-side
Showing with 1179 additions and 17 deletions
dist/index.html
View file @ e045b5a8
......@@ -32,15 +32,15 @@
// alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
}
</script>
<script type="module" crossorigin src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-6Aqtw07R.js"></script>
<link rel="stylesheet" crossorigin href="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-B2EZ7m-P.css">
<script type="module" crossorigin src="//yun.duiba.com.cn/db_games/spark/v3/1729491277603/assets/index-k2qNGyDG.js"></script>
<link rel="stylesheet" crossorigin href="//yun.duiba.com.cn/db_games/spark/v3/1729491277603/assets/index-BCZ-6Ex6.css">
<script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
<script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
</head>
<body>
<div id="root"></div>
<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/polyfills-legacy-DPMTo3qc.js"></script>
<script nomodule crossorigin id="vite-legacy-entry" data-src="//yun.duiba.com.cn/db_games/spark/v3/1729238505291/assets/index-legacy-BjxNED3H.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="//yun.duiba.com.cn/db_games/spark/v3/1729491277603/assets/polyfills-legacy-DPMTo3qc.js"></script>
<script nomodule crossorigin id="vite-legacy-entry" data-src="//yun.duiba.com.cn/db_games/spark/v3/1729491277603/assets/index-legacy-D9beU91V.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body>
</html>
src/App.tsx
View file @ e045b5a8
......@@ -7,12 +7,17 @@ import "./utils/checkwebp";
import '@csstools/normalize.css';
import MD from "./MD"; // 埋点
MD();
import './App.less'
import { PAGE_MAP } from "./utils/constants";
import LoadingDemo from "./pages/LoadingDemo/LoadingDemo";
import HomeDemo from "./pages/HomeDemo/HomeDemo";
import Modal from "./modal/modal";
const pageMap = {
[PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
[PAGE_MAP.HOME_PAGE]: <HomeDemo />,
......
src/MD.ts 0 → 100644
View file @ e045b5a8
import MD from "@/built-in/md";
import { logClick, logExposure } from "@spark/utils/src-js/md";
const appId = CFG.appID;
const dcm = "202." + CFG.projectId + ".0.0";
const domain = "//embedlog.duiba.com.cn";
const dom = `${CFG.channel}.0.0.0`
const MDList = new Array(50).fill("").map((v, i) => {
return {
ele: `.md${i + 1}`,
data: {
dpm: `${appId}.110.${i + 1}.0`,
dcm,
domain,
appId,
dom,
},
once: false,
};
});
export default () =>
MD({
show: MDList, // 曝光
click: MDList, // 点击
});
export function handleLogExposure(id, id2 = 0) {
logExposure({
dpm: `${appId}.110.${id}.${id2}`,
dcm,
domain,
appId,
dom
});
}
export function handleLogClick(id, id2 = 0) {
logClick({
dpm: `${appId}.110.${id}.${id2}`,
dcm,
domain,
appId,
dom
});
}
src/built-in/md/index.ts 0 → 100644
View file @ e045b5a8
import MD from "./main";
import * as utils from "./utils";
// 如果点击埋点和跳转埋点只能添加一个的话，两个mapper可以合并成为一个mapper
const clickMapper = new Map();
const handleClick = (click: any[]) => {
click.forEach((item) => {
// 元素在文档， 并且没有绑定点击埋点
// 那么需要绑定点击埋点
if (typeof item.ele === "string") {
generatorClick(item);
} else {
item.ele.map((eleChild) => generatorClick({ ...item, ele: eleChild }));
}
});
};
const generatorClick = (item) => {
const ele = utils.getReference(item.ele);
if (!!ele && !clickMapper.get(item.ele)) {
const handler = MD.doClickLog.bind(null, item.data);
clickMapper.set(item.ele, {
ele,
handler,
});
ele.addEventListener("click", handler);
}
// 元素不在文档，绑定了点击埋点(其实不是不在文档，而是比如class改变导致选择器无法再选中而已)
// 那么需要将点击埋点移除
if (!ele && clickMapper.get(item.ele)) {
console.log("元素不在文档");
clickMapper.get(item.ele).ele.removeEventListener("click", clickMapper.get(item.ele).handler);
clickMapper.set(item.ele, null);
}
}
const MaiDianConnector = (config) => {
const { show, click } = config;
MD.doShowLog(show);
if (click && click.length) {
handleClick(click);
// 每次dom 插入节点的时候重新检测
const observer = new MutationObserver(function () {
handleClick(click);
});
observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
});
}
}
export default MaiDianConnector;
src/built-in/md/intersection-observer.polyfill.js 0 → 100644
View file @ e045b5a8
/**
* Copyright 2016 Google Inc. All Rights Reserved.
*
* Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
*
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
*/
(function(window, document) {
'use strict';
// Exits early if all IntersectionObserver and IntersectionObserverEntry
// features are natively supported.
if (
'IntersectionObserver' in window &&
'IntersectionObserverEntry' in window &&
'intersectionRatio' in window.IntersectionObserverEntry.prototype
) {
// Minimal polyfill for Edge 15's lack of `isIntersecting`
// See: https://github.com/w3c/IntersectionObserver/issues/211
if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
Object.defineProperty(
window.IntersectionObserverEntry.prototype,
'isIntersecting',
{
get: function() {
return this.intersectionRatio > 0;
}
}
);
}
return;
}
/**
* An IntersectionObserver registry. This registry exists to hold a strong
* reference to IntersectionObserver instances currently observering a target
* element. Without this registry, instances without another reference may be
* garbage collected.
*/
var registry = [];
/**
* Creates the global IntersectionObserverEntry constructor.
* https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
* @param {Object} entry A dictionary of instance properties.
* @constructor
*/
function IntersectionObserverEntry(entry) {
this.time = entry.time;
this.target = entry.target;
this.rootBounds = entry.rootBounds;
this.boundingClientRect = entry.boundingClientRect;
this.intersectionRect = entry.intersectionRect || getEmptyRect();
this.isIntersecting = !!entry.intersectionRect;
// Calculates the intersection ratio.
var targetRect = this.boundingClientRect;
var targetArea = targetRect.width * targetRect.height;
var intersectionRect = this.intersectionRect;
var intersectionArea = intersectionRect.width * intersectionRect.height;
// Sets intersection ratio.
if (targetArea) {
this.intersectionRatio = intersectionArea / targetArea;
} else {
// If area is zero and is intersecting, sets to 1, otherwise to 0
this.intersectionRatio = this.isIntersecting ? 1 : 0;
}
}
/**
* Creates the global IntersectionObserver constructor.
* https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
* @param {Function} callback The function to be invoked after intersection
* changes have queued. The function is not invoked if the queue has
* been emptied by calling the `takeRecords` method.
* @param {Object=} opt_options Optional configuration options.
* @constructor
*/
function IntersectionObserver(callback, opt_options) {
var options = opt_options || {};
if (typeof callback != 'function') {
throw new Error('callback must be a function');
}
if (options.root && options.root.nodeType != 1) {
throw new Error('root must be an Element');
}
// Binds and throttles `this._checkForIntersections`.
this._checkForIntersections = throttle(
this._checkForIntersections.bind(this),
this.THROTTLE_TIMEOUT
);
// Private properties.
this._callback = callback;
this._observationTargets = [];
this._queuedEntries = [];
this._rootMarginValues = this._parseRootMargin(options.rootMargin);
// Public properties.
this.thresholds = this._initThresholds(options.threshold);
this.root = options.root || null;
this.rootMargin = this._rootMarginValues
.map(function(margin) {
return margin.value + margin.unit;
})
.join(' ');
}
/**
* The minimum interval within which the document will be checked for
* intersection changes.
*/
IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
/**
* The frequency in which the polyfill polls for intersection changes.
* this can be updated on a per instance basis and must be set prior to
* calling `observe` on the first target.
*/
IntersectionObserver.prototype.POLL_INTERVAL = null;
/**
* Use a mutation observer on the root element
* to detect intersection changes.
*/
IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
/**
* Starts observing a target element for intersection changes based on
* the thresholds values.
* @param {Element} target The DOM element to observe.
*/
IntersectionObserver.prototype.observe = function(target) {
var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
return item.element == target;
});
if (isTargetAlreadyObserved) {
return;
}
if (!(target && target.nodeType == 1)) {
throw new Error('target must be an Element');
}
this._registerInstance();
this._observationTargets.push({ element: target, entry: null });
this._monitorIntersections();
this._checkForIntersections();
};
/**
* Stops observing a target element for intersection changes.
* @param {Element} target The DOM element to observe.
*/
IntersectionObserver.prototype.unobserve = function(target) {
this._observationTargets = this._observationTargets.filter(function(item) {
return item.element != target;
});
if (!this._observationTargets.length) {
this._unmonitorIntersections();
this._unregisterInstance();
}
};
/**
* Stops observing all target elements for intersection changes.
*/
IntersectionObserver.prototype.disconnect = function() {
this._observationTargets = [];
this._unmonitorIntersections();
this._unregisterInstance();
};
/**
* Returns any queue entries that have not yet been reported to the
* callback and clears the queue. This can be used in conjunction with the
* callback to obtain the absolute most up-to-date intersection information.
* @return {Array} The currently queued entries.
*/
IntersectionObserver.prototype.takeRecords = function() {
var records = this._queuedEntries.slice();
this._queuedEntries = [];
return records;
};
/**
* Accepts the threshold value from the user configuration object and
* returns a sorted array of unique threshold values. If a value is not
* between 0 and 1 and error is thrown.
* @private
* @param {Array|number=} opt_threshold An optional threshold value or
* a list of threshold values, defaulting to [0].
* @return {Array} A sorted list of unique and valid threshold values.
*/
IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
var threshold = opt_threshold || [0];
if (!Array.isArray(threshold)) threshold = [threshold];
return threshold.sort().filter(function(t, i, a) {
if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {
throw new Error(
'threshold must be a number between 0 and 1 inclusively'
);
}
return t !== a[i - 1];
});
};
/**
* Accepts the rootMargin value from the user configuration object
* and returns an array of the four margin values as an object containing
* the value and unit properties. If any of the values are not properly
* formatted or use a unit other than px or %, and error is thrown.
* @private
* @param {string=} opt_rootMargin An optional rootMargin value,
* defaulting to '0px'.
* @return {Array<Object>} An array of margin objects with the keys
* value and unit.
*/
IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
var marginString = opt_rootMargin || '0px';
var margins = marginString.split(/\s+/).map(function(margin) {
var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
if (!parts) {
throw new Error('rootMargin must be specified in pixels or percent');
}
return { value: parseFloat(parts[1]), unit: parts[2] };
});
// Handles shorthand.
margins[1] = margins[1] || margins[0];
margins[2] = margins[2] || margins[0];
margins[3] = margins[3] || margins[1];
return margins;
};
/**
* Starts polling for intersection changes if the polling is not already
* happening, and if the page's visibilty state is visible.
* @private
*/
IntersectionObserver.prototype._monitorIntersections = function() {
if (!this._monitoringIntersections) {
this._monitoringIntersections = true;
// If a poll interval is set, use polling instead of listening to
// resize and scroll events or DOM mutations.
if (this.POLL_INTERVAL) {
this._monitoringInterval = setInterval(
this._checkForIntersections,
this.POLL_INTERVAL
);
} else {
addEvent(window, 'resize', this._checkForIntersections, true);
addEvent(document, 'scroll', this._checkForIntersections, true);
if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
this._domObserver = new MutationObserver(this._checkForIntersections);
this._domObserver.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
}
}
};
/**
* Stops polling for intersection changes.
* @private
*/
IntersectionObserver.prototype._unmonitorIntersections = function() {
if (this._monitoringIntersections) {
this._monitoringIntersections = false;
clearInterval(this._monitoringInterval);
this._monitoringInterval = null;
removeEvent(window, 'resize', this._checkForIntersections, true);
removeEvent(document, 'scroll', this._checkForIntersections, true);
if (this._domObserver) {
this._domObserver.disconnect();
this._domObserver = null;
}
}
};
/**
* Scans each observation target for intersection changes and adds them
* to the internal entries queue. If new entries are found, it
* schedules the callback to be invoked.
* @private
*/
IntersectionObserver.prototype._checkForIntersections = function() {
var rootIsInDom = this._rootIsInDom();
var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
this._observationTargets.forEach(function(item) {
var target = item.element;
var targetRect = getBoundingClientRect(target);
var rootContainsTarget = this._rootContainsTarget(target);
var oldEntry = item.entry;
var intersectionRect =
rootIsInDom &&
rootContainsTarget &&
this._computeTargetAndRootIntersection(target, rootRect);
var newEntry = (item.entry = new IntersectionObserverEntry({
time: now(),
target: target,
boundingClientRect: targetRect,
rootBounds: rootRect,
intersectionRect: intersectionRect
}));
if (!oldEntry) {
this._queuedEntries.push(newEntry);
} else if (rootIsInDom && rootContainsTarget) {
// If the new entry intersection ratio has crossed any of the
// thresholds, add a new entry.
if (this._hasCrossedThreshold(oldEntry, newEntry)) {
this._queuedEntries.push(newEntry);
}
} else {
// If the root is not in the DOM or target is not contained within
// root but the previous entry for this target had an intersection,
// add a new record indicating removal.
if (oldEntry && oldEntry.isIntersecting) {
this._queuedEntries.push(newEntry);
}
}
}, this);
if (this._queuedEntries.length) {
this._callback(this.takeRecords(), this);
}
};
/**
* Accepts a target and root rect computes the intersection between then
* following the algorithm in the spec.
* TODO(philipwalton): at this time clip-path is not considered.
* https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
* @param {Element} target The target DOM element
* @param {Object} rootRect The bounding rect of the root after being
* expanded by the rootMargin value.
* @return {?Object} The final intersection rect object or undefined if no
* intersection is found.
* @private
*/
IntersectionObserver.prototype._computeTargetAndRootIntersection = function(
target,
rootRect
) {
// If the element isn't displayed, an intersection can't happen.
if (window.getComputedStyle(target).display == 'none') return;
var targetRect = getBoundingClientRect(target);
var intersectionRect = targetRect;
var parent = getParentNode(target);
var atRoot = false;
while (!atRoot) {
var parentRect = null;
var parentComputedStyle =
parent.nodeType == 1 ? window.getComputedStyle(parent) : {};
// If the parent isn't displayed, an intersection can't happen.
if (parentComputedStyle.display == 'none') return;
if (parent == this.root || parent == document) {
atRoot = true;
parentRect = rootRect;
} else {
// If the element has a non-visible overflow, and it's not the <body>
// or <html> element, update the intersection rect.
// Note: <body> and <html> cannot be clipped to a rect that's not also
// the document rect, so no need to compute a new intersection.
if (
parent != document.body &&
parent != document.documentElement &&
parentComputedStyle.overflow != 'visible'
) {
parentRect = getBoundingClientRect(parent);
}
}
// If either of the above conditionals set a new parentRect,
// calculate new intersection data.
if (parentRect) {
intersectionRect = computeRectIntersection(
parentRect,
intersectionRect
);
if (!intersectionRect) break;
}
parent = getParentNode(parent);
}
return intersectionRect;
};
/**
* Returns the root rect after being expanded by the rootMargin value.
* @return {Object} The expanded root rect.
* @private
*/
IntersectionObserver.prototype._getRootRect = function() {
var rootRect;
if (this.root) {
rootRect = getBoundingClientRect(this.root);
} else {
// Use <html>/<body> instead of window since scroll bars affect size.
var html = document.documentElement;
var body = document.body;
rootRect = {
top: 0,
left: 0,
right: html.clientWidth || body.clientWidth,
width: html.clientWidth || body.clientWidth,
bottom: html.clientHeight || body.clientHeight,
height: html.clientHeight || body.clientHeight
};
}
return this._expandRectByRootMargin(rootRect);
};
/**
* Accepts a rect and expands it by the rootMargin value.
* @param {Object} rect The rect object to expand.
* @return {Object} The expanded rect.
* @private
*/
IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
var margins = this._rootMarginValues.map(function(margin, i) {
return margin.unit == 'px'
? margin.value
: (margin.value * (i % 2 ? rect.width : rect.height)) / 100;
});
var newRect = {
top: rect.top - margins[0],
right: rect.right + margins[1],
bottom: rect.bottom + margins[2],
left: rect.left - margins[3]
};
newRect.width = newRect.right - newRect.left;
newRect.height = newRect.bottom - newRect.top;
return newRect;
};
/**
* Accepts an old and new entry and returns true if at least one of the
* threshold values has been crossed.
* @param {?IntersectionObserverEntry} oldEntry The previous entry for a
* particular target element or null if no previous entry exists.
* @param {IntersectionObserverEntry} newEntry The current entry for a
* particular target element.
* @return {boolean} Returns true if a any threshold has been crossed.
* @private
*/
IntersectionObserver.prototype._hasCrossedThreshold = function(
oldEntry,
newEntry
) {
// To make comparing easier, an entry that has a ratio of 0
// but does not actually intersect is given a value of -1
var oldRatio =
oldEntry && oldEntry.isIntersecting
? oldEntry.intersectionRatio || 0
: -1;
var newRatio = newEntry.isIntersecting
? newEntry.intersectionRatio || 0
: -1;
// Ignore unchanged ratios
if (oldRatio === newRatio) return;
for (var i = 0; i < this.thresholds.length; i++) {
var threshold = this.thresholds[i];
// Return true if an entry matches a threshold or if the new ratio
// and the old ratio are on the opposite sides of a threshold.
if (
threshold == oldRatio ||
threshold == newRatio ||
threshold < oldRatio !== threshold < newRatio
) {
return true;
}
}
};
/**
* Returns whether or not the root element is an element and is in the DOM.
* @return {boolean} True if the root element is an element and is in the DOM.
* @private
*/
IntersectionObserver.prototype._rootIsInDom = function() {
return !this.root || containsDeep(document, this.root);
};
/**
* Returns whether or not the target element is a child of root.
* @param {Element} target The target element to check.
* @return {boolean} True if the target element is a child of root.
* @private
*/
IntersectionObserver.prototype._rootContainsTarget = function(target) {
return containsDeep(this.root || document, target);
};
/**
* Adds the instance to the global IntersectionObserver registry if it isn't
* already present.
* @private
*/
IntersectionObserver.prototype._registerInstance = function() {
if (registry.indexOf(this) < 0) {
registry.push(this);
}
};
/**
* Removes the instance from the global IntersectionObserver registry.
* @private
*/
IntersectionObserver.prototype._unregisterInstance = function() {
var index = registry.indexOf(this);
if (index != -1) registry.splice(index, 1);
};
/**
* Returns the result of the performance.now() method or null in browsers
* that don't support the API.
* @return {number} The elapsed time since the page was requested.
*/
function now() {
return window.performance && performance.now && performance.now();
}
/**
* Throttles a function and delays its executiong, so it's only called at most
* once within a given time period.
* @param {Function} fn The function to throttle.
* @param {number} timeout The amount of time that must pass before the
* function can be called again.
* @return {Function} The throttled function.
*/
function throttle(fn, timeout) {
var timer = null;
return function() {
if (!timer) {
timer = setTimeout(function() {
fn();
timer = null;
}, timeout);
}
};
}
/**
* Adds an event handler to a DOM node ensuring cross-browser compatibility.
* @param {Node} node The DOM node to add the event handler to.
* @param {string} event The event name.
* @param {Function} fn The event handler to add.
* @param {boolean} opt_useCapture Optionally adds the even to the capture
* phase. Note: this only works in modern browsers.
*/
function addEvent(node, event, fn, opt_useCapture) {
if (typeof node.addEventListener == 'function') {
node.addEventListener(event, fn, opt_useCapture || false);
} else if (typeof node.attachEvent == 'function') {
node.attachEvent('on' + event, fn);
}
}
/**
* Removes a previously added event handler from a DOM node.
* @param {Node} node The DOM node to remove the event handler from.
* @param {string} event The event name.
* @param {Function} fn The event handler to remove.
* @param {boolean} opt_useCapture If the event handler was added with this
* flag set to true, it should be set to true here in order to remove it.
*/
function removeEvent(node, event, fn, opt_useCapture) {
if (typeof node.removeEventListener == 'function') {
node.removeEventListener(event, fn, opt_useCapture || false);
} else if (typeof node.detatchEvent == 'function') {
node.detatchEvent('on' + event, fn);
}
}
/**
* Returns the intersection between two rect objects.
* @param {Object} rect1 The first rect.
* @param {Object} rect2 The second rect.
* @return {?Object} The intersection rect or undefined if no intersection
* is found.
*/
function computeRectIntersection(rect1, rect2) {
var top = Math.max(rect1.top, rect2.top);
var bottom = Math.min(rect1.bottom, rect2.bottom);
var left = Math.max(rect1.left, rect2.left);
var right = Math.min(rect1.right, rect2.right);
var width = right - left;
var height = bottom - top;
return (
width >= 0 &&
height >= 0 && {
top: top,
bottom: bottom,
left: left,
right: right,
width: width,
height: height
}
);
}
/**
* Shims the native getBoundingClientRect for compatibility with older IE.
* @param {Element} el The element whose bounding rect to get.
* @return {Object} The (possibly shimmed) rect of the element.
*/
function getBoundingClientRect(el) {
var rect;
try {
rect = el.getBoundingClientRect();
} catch (err) {
// Ignore Windows 7 IE11 "Unspecified error"
// https://github.com/w3c/IntersectionObserver/pull/205
}
if (!rect) return getEmptyRect();
// Older IE
if (!(rect.width && rect.height)) {
rect = {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.right - rect.left,
height: rect.bottom - rect.top
};
}
return rect;
}
/**
* Returns an empty rect object. An empty rect is returned when an element
* is not in the DOM.
* @return {Object} The empty rect.
*/
function getEmptyRect() {
return {
top: 0,
bottom: 0,
left: 0,
right: 0,
width: 0,
height: 0
};
}
/**
* Checks to see if a parent element contains a child elemnt (including inside
* shadow DOM).
* @param {Node} parent The parent element.
* @param {Node} child The child element.
* @return {boolean} True if the parent node contains the child node.
*/
function containsDeep(parent, child) {
var node = child;
while (node) {
if (node == parent) return true;
node = getParentNode(node);
}
return false;
}
/**
* Gets the parent node of an element or its host element if the parent node
* is a shadow root.
* @param {Node} node The node whose parent to get.
* @return {Node|null} The parent node or null if no parent exists.
*/
function getParentNode(node) {
var parent = node.parentNode;
if (parent && parent.nodeType == 11 && parent.host) {
// If the parent is a shadow root, return the host element.
return parent.host;
}
return parent;
}
// Exposes the constructors globally.
window.IntersectionObserver = IntersectionObserver;
window.IntersectionObserverEntry = IntersectionObserverEntry;
})(window, document);
src/built-in/md/main.ts 0 → 100644
View file @ e045b5a8
import * as utils from "./utils.js";
import "./intersection-observer.polyfill.js";
import "intersection-observer";
const showedMapper = {};
function split(str, seprator) {
return str.split(seprator);
}
/**
*
* @return {} pass
* @param param
*/
function validateParam(param) {
if (!param) {
console.warn("参数MO不能为空，当前的参数为：", param);
return false;
}
if (!param.dcm) {
console.warn("dcm 必填。当前的参数为：", param);
return false;
}
if (!param.dpm && !param.dom) {
console.warn("dpm 和 dom 至少有一个。当前的参数为：", param);
return false;
}
if (param.dpm && split(param.dpm, ".").length !== 4) {
console.warn("dpm格式不正确。 当前的参数为：", param);
return false;
}
if (param.dom && split(param.dom, ".").length !== 4) {
console.warn("dom格式不正确。 当前的参数为：", param);
return false;
}
if (split(param.dcm, ".").length !== 4) {
console.warn("dcm格式不正确。 当前的参数为：", param);
return false;
}
return true;
}
function doClickLog(data) {
if (!validateParam(data)) {
return;
}
const net = {
name: "clickLog",
uri: "/log/click",
type: "get",
dataType: "json",
param: data,
callback: null,
hideMsg: true,
};
doAjax(net);
}
const intersectionObservers: IntersectionObserver[] = []
function registryIntersectionObserver(items) {
for (const observer of intersectionObservers) {
observer.disconnect()
}
intersectionObservers.splice(0)
items.forEach((item) => {
if (typeof item.ele === "string") {
generatorShow(item);
} else {
item.ele.map((eleChild) => generatorShow({ ...item, ele: eleChild }));
}
// // 目标元素在dom中则处理
// if (!!utils.getReference(item.ele)) {
// // 参数校验
// if (!item || !validateParam(item.data)) {
// return;
// }
// var observer = new IntersectionObserver(function (changes) {
// const { once = true, ele, data = {} } = item;
// changes.forEach((change) => {
// // 如果出现在页面中
// if (change.intersectionRatio > 0) {
// // 已经曝光过了
// if (showedMapper[ele]) {
// return;
// }
// showedMapper[ele] = true;
// observer.unobserve(change.target);
// const net = {
// name: "showLog",
// uri: data.domain + "/exposure/standard",
// type: "get",
// dataType: "jsonp",
// param: data,
// callback: null,
// hideMsg: true,
// };
// doAjax(net);
// } else {
// // 消失在视口
// if (!once) {
// // 如果需要曝光多次就移除
// showedMapper[ele] = false;
// }
// }
// });
// }, {});
// // 为目标元素注册IntersectionObserver
// let element = utils.getReference(item.ele);
// element && observer.observe(element);
// }
});
}
const generatorShow = (item) => {
// 目标元素在dom中则处理
if (utils.getReference(item.ele)) {
// 参数校验
if (!item || !validateParam(item.data)) {
return;
}
const observer = new IntersectionObserver(function (changes) {
const { once = true, ele, data = {} } = item;
changes.forEach((change) => {
// 如果出现在页面中
if (change.intersectionRatio > 0) {
// 已经曝光过了
if (showedMapper[ele]) {
return;
}
showedMapper[ele] = true;
observer.unobserve(change.target);
const net = {
name: "showLog",
uri: data.domain + "/exposure/standard",
type: "get",
dataType: "jsonp",
param: data,
callback: null,
hideMsg: true,
};
doAjax(net);
} else {
// 消失在视口
if (!once) {
// 如果需要曝光多次就移除
showedMapper[ele] = false;
}
}
});
}, {});
// 为目标元素注册IntersectionObserver
const element = utils.getReference(item.ele);
element && observer.observe(element);
intersectionObservers.push(observer)
}
};
function doShowLog(items) {
// 先注册一次
registryIntersectionObserver(items);
// 每次dom 插入节点的时候重新检测
const observer = new MutationObserver(function () {
registryIntersectionObserver(items);
});
observer.observe(document, { childList: true, subtree: true });
}
/**
* 发送请求
* @param net
*/
export const doAjax = (net) => {
let realUrl = net.uri;
//url加参数等特殊需求（例如再玩一次需要在dostart接口的url上加埋点）
if (net.addUrl) {
realUrl += net.addUrl;
}
window["$"].ajax({
type: net.type,
url: realUrl,
dataType: net.dataType,
data: net.param,
async: true,
success: (result) => {
console.log(`完成${net.name}${net.param}`);
},
error: (message) => {
console.info(message)
},
});
};
const MD = {
doClickLog: (data) => doClickLog(data),
doShowLog: (items) => doShowLog(items),
};
export default MD;
src/built-in/md/utils.ts 0 → 100644
View file @ e045b5a8
// export const request = (method, url, body?) => {
// method = method.toUpperCase();
// if (method === 'GET') {
// body = undefined;
// } else {
// body = body && JSON.stringify(body);
// }
// return fetch(url, {
// method,
// headers: {
// 'Content-Type': 'application/json',
// 'Accept': 'application/json'
// },
// body
// }).then((res) => {
// if (res.status >= 200 && res.status < 300) {
// return res;
// } else {
// return Promise.reject('请求失败！');
// }
// })
// }
export const getReference = (ele: string | HTMLElement) => {
if (ele instanceof HTMLElement) {
return ele;
} else if (typeof ele === "string") {
return document.querySelector(ele);
}
}
src/pages/HomeDemo/HomeDemo.tsx
View file @ e045b5a8
......@@ -16,7 +16,7 @@ class HomeDemo extends React.Component {
render() {
return <div className="homeDemo">
<div className="homeImg" />
<div className="homeImg md1" />
<img src={png} />
当前为活动首页
<SvgaPlayer className="svga" src={svga} />
......
src/store/store.ts
View file @ e045b5a8
......@@ -18,7 +18,7 @@ class Store {
Did1NDA0NDc: "sharePage",
myPrize: "myPrize", // TODO 举例子 新宿台奖品页
index: PAGE_MAP.HOME_PAGE,
index: PAGE_MAP.LOADING_PAGE,
}[skinId] || PAGE_MAP.LOADING_PAGE;
pageData = {};
......
tsconfig.app.json
View file @ e045b5a8
......@@ -10,7 +10,6 @@
"useDefineForClassFields": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
......@@ -18,12 +17,16 @@
"noEmit": true,
"jsx": "react-jsx",
"jsxImportSource": "react",
"strict": false,
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src"
......
vite.config.ts
View file @ e045b5a8
......@@ -6,6 +6,7 @@ import postcsspxtorem from "postcss-pxtorem"
import { viteMockServe } from "vite-plugin-mock";
import DuibaPublish from "./config/DuibaPublish/DuibaPublish.ts";
import dotenv from 'dotenv';
import * as path from "node:path";
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
......@@ -31,7 +32,15 @@ export default defineConfig(({ mode }) => {
base: !isDev ? prodBase : "",
server: {
// port: 3001
open: true,
open: false,
},
build: {
chunkSizeWarningLimit: 1024,
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
}
},
assetsInclude: [/\.(svga)$/],
plugins: [
......
yarn.lock
View file @ e045b5a8
......@@ -1557,6 +1557,11 @@ argparse@^2.0.1:
resolved "http://npm.dui88.com:80/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha1-JG9Q88p4oyQPbJl+ipvR6sSeSzg=
asynckit@^0.4.0:
version "0.4.0"
resolved "http://npm.dui88.com:80/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
autoprefixer@^10.4.20:
version "10.4.20"
resolved "http://npm.dui88.com:80/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
......@@ -1569,6 +1574,15 @@ autoprefixer@^10.4.20:
picocolors "^1.0.1"
postcss-value-parser "^4.2.0"
axios@^1.6.8:
version "1.7.7"
resolved "http://npm.dui88.com:80/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
dependencies:
follow-redirects "^1.15.6"
form-data "^4.0.0"
proxy-from-env "^1.1.0"
babel-plugin-polyfill-corejs2@^0.4.10:
version "0.4.11"
resolved "http://npm.dui88.com:80/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
......@@ -1751,6 +1765,13 @@ color-name@~1.1.4:
resolved "http://npm.dui88.com:80/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=
combined-stream@^1.0.8:
version "1.0.8"
resolved "http://npm.dui88.com:80/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha1-w9RaizT9cwYxoRCoolIGgrMdWn8=
dependencies:
delayed-stream "~1.0.0"
commander@*:
version "12.1.0"
resolved "http://npm.dui88.com:80/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
......@@ -1879,6 +1900,11 @@ define-data-property@^1.1.4:
es-errors "^1.3.0"
gopd "^1.0.1"
delayed-stream@~1.0.0:
version "1.0.0"
resolved "http://npm.dui88.com:80/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
destroy@^1.0.4:
version "1.2.0"
resolved "http://npm.dui88.com:80/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
......@@ -2189,6 +2215,20 @@ flatted@^3.2.9:
resolved "http://npm.dui88.com:80/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
follow-redirects@^1.15.6:
version "1.15.9"
resolved "http://npm.dui88.com:80/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
form-data@^4.0.0:
version "4.0.1"
resolved "http://npm.dui88.com:80/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
formstream@^1.1.0:
version "1.5.1"
resolved "http://npm.dui88.com:80/formstream/-/formstream-1.5.1.tgz#b25f8121aa434cc82e8b36cdd765338b7b8df4de"
......@@ -2405,6 +2445,11 @@ inherits@^2.0.1, inherits@~2.0.3:
resolved "http://npm.dui88.com:80/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
intersection-observer@^0.12.2:
version "0.12.2"
resolved "http://npm.dui88.com:80/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
is-binary-path@~2.1.0:
version "2.1.0"
resolved "http://npm.dui88.com:80/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
......@@ -2527,6 +2572,11 @@ json5@^2.2.3:
resolved "http://npm.dui88.com:80/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
jsrsasign@^10.5.13:
version "10.9.0"
resolved "http://npm.dui88.com:80/jsrsasign/-/jsrsasign-10.9.0.tgz#cc3f316e7e4c112a976193f9d2c93deb5a0745ee"
integrity sha512-QWLUikj1SBJGuyGK8tjKSx3K7Y69KYJnrs/pQ1KZ6wvZIkHkWjZ1PJDpuvc1/28c1uP0KW9qn1eI1LzHQqDOwQ==
jstoxml@^2.0.0:
version "2.2.9"
resolved "http://npm.dui88.com:80/jstoxml/-/jstoxml-2.2.9.tgz#2eebd5e55383fe66a375022ca0aa88f77bc4fb84"
......@@ -2648,6 +2698,18 @@ micromatch@^4.0.4:
braces "^3.0.3"
picomatch "^2.3.1"
mime-db@1.52.0:
version "1.52.0"
resolved "http://npm.dui88.com:80/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
mime-types@^2.1.12:
version "2.1.35"
resolved "http://npm.dui88.com:80/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"
mime@^1.4.1:
version "1.6.0"
resolved "http://npm.dui88.com:80/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
......@@ -2710,6 +2772,11 @@ mockjs@^1.1.0:
dependencies:
commander "*"
moment@^2.30.1:
version "2.30.1"
resolved "http://npm.dui88.com:80/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
ms@2.0.0:
version "2.0.0"
resolved "http://npm.dui88.com:80/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
......@@ -2913,7 +2980,7 @@ postcss-value-parser@^4.2.0:
resolved "http://npm.dui88.com:80/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
postcss@^8.2.6, postcss@^8.4.41:
postcss@^8.2.6, postcss@^8.4.43:
version "8.4.47"
resolved "http://npm.dui88.com:80/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
......@@ -2946,6 +3013,11 @@ prop-types@^15.6.2:
object-assign "^4.1.1"
react-is "^16.13.1"
proxy-from-env@^1.1.0:
version "1.1.0"
resolved "http://npm.dui88.com:80/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
integrity sha1-4QLxbKNVQkhldV0sno6k8k1Yw+I=
prr@~1.0.1:
version "1.0.1"
resolved "http://npm.dui88.com:80/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
......@@ -3254,6 +3326,16 @@ source-map@^0.6.0, source-map@~0.6.0:
resolved "http://npm.dui88.com:80/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha1-dHIq8y6WFOnCh6jQu95IteLxomM=
spark-utils@^1.1.2:
version "1.1.2"
resolved "http://npm.dui88.com:80/spark-utils/-/spark-utils-1.1.2.tgz#2761d5b3a38319bf8f3adb5c7395f1ae7b5ec332"
integrity sha512-Sc25m6yFFD1ZqKDW4lifjXeBWOk48gKrF/IkhYxKB3fuRVh9ZFusOPQY3e1D9UQZJOG5H+maozmtJiv8klHMmg==
dependencies:
axios "^1.6.8"
crypto-js "^4.2.0"
jsrsasign "^10.5.13"
moment "^2.30.1"
statuses@^1.3.1, statuses@~1.5.0:
version "1.5.0"
resolved "http://npm.dui88.com:80/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
......@@ -3520,13 +3602,13 @@ vite-plugin-mock@^3.0.2:
path-to-regexp "^6.2.1"
picocolors "^1.0.0"
vite@5.4.2:
version "5.4.2"
resolved "http://npm.dui88.com:80/vite/-/vite-5.4.2.tgz#8acb6ec4bfab823cdfc1cb2d6c53ed311bc4e47e"
integrity sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==
vite@^5.4.6:
version "5.4.9"
resolved "http://npm.dui88.com:80/vite/-/vite-5.4.9.tgz#215c80cbebfd09ccbb9ceb8c0621391c9abdc19c"
integrity sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==
dependencies:
esbuild "^0.21.3"
postcss "^8.4.41"
postcss "^8.4.43"
rollup "^4.20.0"
optionalDependencies:
fsevents "~2.3.3"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment