v-track
Version:
一个基于Vue指令的埋点插件
2 lines (1 loc) • 10.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).VTrack=e()}(this,function(){"use strict";function M(t){return(M="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function e(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}function c(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function C(t,e){if(null==t)return{};var n,r,i=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||(i[n]=t[n]);return i}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}function H(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,i=!1,o=void 0;try{for(var l,c=t[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),!e||n.length!==e);r=!0);}catch(t){i=!0,o=t}finally{try{r||null==c.return||c.return()}finally{if(i)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function D(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var n=function(t){return"function"==typeof t||!1},l=function(t){return null==t},u=function(t){return null!=t};function G(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return[Object.values(t),Object.keys(t)]}function a(t,e){if(!function(t,e){return t.key===e.key&&t.tag===e.tag&&t.isComment===e.isComment&&u(t.data)===u(e.data)}(t,e))return!1;var n=e.children,r=t.children;if(l(t.text)&&u(n)&&u(r)){if(n.length!==r.length)return!1;for(var i=0;i<r.length;i++){var o=r[i];if(u(o)&&u(n[i]))return a(o,n[i])}}else if(t.text!==e.text)return!1;return!0}var B=function(t){if(!n(t))throw new Error("The first parameter should be Function.")},f=function(t){return t&&1===t.nodeType};function i(t,e){return window.getComputedStyle(t).getPropertyValue(e)}function F(t){if(t===window.document)return!0;if(!t||!t.parentNode)return!1;var e=t.parentNode,n=i(t,"visibility"),r=i(t,"display");return"hidden"!==n&&"none"!==r&&(!e||F(e))}var q=function(){function i(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:window,r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:1;if(o(this,i),!f(t))throw new Error("not an element node");if(1<r&&r<=0)throw new Error("'percent' must be a number between 0 and 1");this.ele=t,this.ref=e,this.refWin=n,this.started=!1,this.percent=r,this.prevPerc=null,this.listeners={},this.removeScrollLisener=null,this.init()}return e(i,[{key:"init",value:function(){var t,e=this;if(!this.started){var n=function(i){var o,l=1<arguments.length&&void 0!==arguments[1]?arguments[1]:200;return function(){for(var t=this,e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];clearTimeout(o),o=setTimeout(function(){return i.apply(t,n)},l)}}(this.visibilitychange.bind(this));n(),this.removeScrollLisener=(t=n,e.ref?e.ref.$on("scroll",t):(e.refWin.addEventListener("scroll",t,!0),function(){return e.refWin.removeEventListener("scroll",t,!0)})),this.started=!0}}},{key:"viewport",value:function(){var t=this.refWin,e=f(t)?t.getBoundingClientRect():t;return{top:f(t)?e.top:0,right:e.right||e.innerWidth,bottom:e.bottom||e.innerHeight,left:e.left||0,height:t.innerHeight||t.offsetHeight,width:t.innerWidth||t.offsetWidth}}},{key:"$on",value:function(t,e){return(this.listeners[t]||(this.listeners[t]=[])).push(e),this}},{key:"$off",value:function(t,e){if(e){for(var n,r=this.listeners[t],i=r.length;i--;)if((n=r[i])===e||n.cbk===e){r.splice(i,1);break}return this}}},{key:"$once",value:function(i,o){var l=this,t=function t(){l.$off(i,t);for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];o.apply(l,n)};return t.cbk=o,this.$on(i,t),this}},{key:"$emit",value:function(t){for(var e=this,n=arguments.length,r=new Array(1<n?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return(this.listeners[t]||[]).forEach(function(t){return t.apply(e,r)}),this}},{key:"visibilitychange",value:function(){var t=this.ele.getBoundingClientRect(),e=this.viewport();if(!function(t,e){return!(!t||t.width<=0||t.height<=0)&&0<t.bottom&&0<t.right&&t.top<window.innerHeight&&t.left<window.innerWidth&&!(t.left>e.right||t.top>e.bottom||t.right<e.left||t.bottom<e.top)}(t,e)||!F(this.ele))return this.prevPerc=0;var n;e.top<0&&(e.top=0),e.bottom>window.innerHeight&&(e.bottom=window.innerHeight),e.left<0&&(e.left=0),e.right>window.innerWidth&&(e.right=window.innerWidth),n=(t.top>=e.top&&t.bottom>e.bottom?e.bottom-t.top:t.top<e.top&&t.bottom<=e.bottom?t.bottom-e.top:t.height)*(t.left>=e.left&&t.right>e.right?e.right-t.left:t.left<e.left&&t.right<=e.right?t.right-e.left:t.width)/(t.height*t.width),this.prevPerc<this.percent&&n>=this.percent&&(this.$emit("fullyvisible"),this.prevPerc=n)}},{key:"destroy",value:function(){n(this.removeScrollLisener)&&this.removeScrollLisener()}}]),i}(),z=["async","delay","watch","show","once","custom"];function s(o,t,e,n,r,l){var c=this,u=t.value,a=t.arg,f=t.modifiers,i=t.rawName,s=e.context,h=e.componentInstance;if(!l[a])throw new Error("tracking event does not exist");var y=[],v=l[a].bind(null,s),p=function(t,e,n){return function(n,t,r,e){var i=this,o=4<arguments.length&&void 0!==arguments[4]?arguments[4]:{};n.$unwatch=e.$watch(function(){return e[t]},function(t,e){t!==e&&(o.immediate||n.contains(i.target))&&r(),i.target=null})}.call(c,o,t,e,s,n)},d=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return function(t,e){var n=Object.keys(t);return n.length===e.length&&e.every(function(t){return n.includes(t)})}.call(null,f,e)},b=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return function(t,e){var n=Object.keys(t);return e.some(function(t){return n.includes(t)})}.call(null,f,e)};if(Object.keys(f).length)if(d("watch")){var m=Object.keys(u).shift();p(m,v,{immediate:!0})}else if(d("delay"))o.$timer&&clearTimeout(o.$timer),o.$timer=setTimeout(function(){l[a](s)},u);else if(d("watch","delay")){var g=u.delay,w=C(u,["delay"]),$=D(Object.keys(w)).pop();p($,v=function(){o.$timer&&clearTimeout(o.$timer),o.$timer=setTimeout(function(){F(s.$el)&&l[a](s)},g)},{immediate:!0})}else if(b("show")){var k,E=H(G(u),1)[0],O=(k=l[a]).bind.apply(k,[null,s].concat(D(E))),j=b("once"),P=b("custom");o.$visMonitor||setTimeout(function(){var t=new q(o,P&&s.$refs[u.ref],u&&s.$refs[u.viewport],u&&u.percent);(j?t.$once:t.$on).call(t,"fullyvisible",O),o.$visMonitor=t},0)}else if(!h&&f.click||h&&b("native")){switch(M(u)){case"object":var T,A=H(G(u),2),S=A[0],V=A[1],x=S.shift(),W=D(V).pop();B(x),v=(T=l[a]).bind.apply(T,[null,s].concat(D(S))),y=[v,x.bind.apply(x,[null].concat(D(S)))],f.delay&&y.reverse(),f.async&&p(W,y.shift());break;case"function":y=[v,u],f.delay&&y.reverse()}o.$listener=function(e){c.target=e.target,y.forEach(function(t){return t(e)})},o.addEventListener("click",o.$listener)}else{if(!h||h.$el!==o)throw new Error("".concat(i," directive is not supported"));var L,N,U,R,_=Object.keys(f).filter(function(t){return!z.includes(t)}).pop();if("object"===M(u)){var I=H(G(u),2);L=I[0],N=I[1],U=L.shift(),R=D(N).pop(),B(U)}if(o["$on_".concat(_)])return;h.$on(_,function(){var t,e;c.target=o;for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];v=(t=l[a]).bind.apply(t,[null,s].concat(r)),y=[v,(e=U||u).bind.apply(e,[null].concat(r))],f.delay&&y.reverse(),f.async&&p(R,y.shift()),y.forEach(function(t){return t()}),o["$on_".concat(_)]=!0})}else l[a](s,u)}function h(t){if(t.$listener){for(var e=arguments.length,n=new Array(1<e?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];a(n[1],n[2])||(y.call(this,t),s.call.apply(s,[this,t].concat(n)))}}function y(t){t.$listener&&t.removeEventListener("click",t.$listener),t.$timer&&clearTimeout(t.$timer),t.$unwatch&&t.$unwatch(),t.$visMonitor&&t.$visMonitor.destroy()}var t=function(){function t(){o(this,t),this.installed=!1}return e(t,null,[{key:"install",value:function(t,e){var i=this,o=e.trackEvents,n=e.trackEnable,l=void 0===n?{}:n;l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(t){c(e,t,n[t])})}return e}({UVPV:!1,TONP:!1},l);var r=function(t,e){l.TONP&&o.TONP(t,{et:e,dt:Date.now()})};this.installed||(this.installed=!0,t.directive("track",{bind:function(){for(var t,e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return(t=s).call.apply(t,[i].concat(n,[o]))},componentUpdated:function(){for(var t,e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return(t=h).call.apply(t,[i].concat(n,[o]))},unbind:function(){for(var t,e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return(t=y).call.apply(t,[i].concat(n))}}),t.component("TrackView",{render:function(t){return t("span",{style:"display: none"})}}),t.mixin({data:function(){return{PAGE_ENTER_TIME:Date.now()}},created:function(){var t=this;window.onbeforeunload=function(){return r(t,t.PAGE_ENTER_TIME)}},beforeRouteEnter:function(t,e,n){n(function(t){l.UVPV&&o.UVPV(t)})},beforeRouteUpdate:function(t,e,n){var r=this;this.$watch("$route",function(){l.UVPV&&"routeUpdate"===l.UVPV&&o.UVPV(r)}),n()},beforeRouteLeave:function(t,e,n){r(this,this.PAGE_ENTER_TIME),n()}}))}}]),t}();return c(t,"target",null),t});