Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

GA for Scroll container

This commit is contained in:
CPunisher 2020-07-01 22:27:20 +08:00
parent 9b36efdb4f
commit 99a3853af2
11 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/actions/index.js
View File

@ -1,5 +1,5 @@
import {actionTypes} from "../constant/ActionTypes";
import {handleStyle} from "../utils/gaHelper";
import {handleStyle} from "../utils/GAHelper";
export const genQRInfo = text => ({
type: actionTypes.GENERATE_QR_INFO,

1
src/api/db.js → src/api/TcbHandler.js
View File

@ -10,6 +10,7 @@ const db = app.database();
const _ = db.command
export async function login() {
if (isLogin) return;
await auth.signInAnonymously();
const loginState = await auth.getLoginState();
isLogin = loginState;

2
src/components/app/App.js
View File

@ -7,7 +7,7 @@ import PartMore from "./PartMore";
import PartParams from "./PartParams";
import PartDownloadViewer from "../../containers/app/PartDownloadViewer";
import PartStylesViewer from "../../containers/app/PartStylesViewer";
import {getDownloadCount, login} from "../../api/db";
import {getDownloadCount, login} from "../../api/TcbHandler";
import {connect} from 'react-redux';
import {loadDownloadData} from "../../actions";
import ReactGA from 'react-ga';

31
src/components/app/PartMore.js
View File

@ -8,15 +8,15 @@ import LinkButton from "../link/LinkButton";
import ImageZoom from "../../containers/app/ImageZoom";
import LinkTrace from "../link/LinkTrace";
import {isPC} from "../../utils/navigatorUtils";
import {handleScroll} from "../../utils/GAHelper";
const pictures = [
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=5891c0a78a0220aefd58293ee4ec7db7&t=1593527651',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=f97850ff371131dcf5891b7185c6c16b&t=1593527984',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg?sign=86b896e0c7f9c66881a78a969551e47b&t=1593531244',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg',
]
const PartMore = () => {
const zoom = React.useRef(mediumZoom());
return (
<div className="Qr-titled-nobg">
@ -38,18 +38,12 @@ const PartMore = () => {
</div>
<ScrollContainer
className="Qr-s Qr-s-gallery"
onStartScroll={(e) => handleScroll('gallery')}
hideScrollbars={false}
horizontal={true}
vertical={false}>
<div className="Qr-box">
{
pictures.map((url) => (
<LazyLoad offsetVertical={200}>
<ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
</LazyLoad>
)
)
}
<Gallery contents={pictures}/>
</div>
</ScrollContainer>
<div className="Qr-Centered">
@ -107,4 +101,17 @@ const PartMore = () => {
)
}
const Gallery = ({ contents }) => {
const zoom = React.useRef(mediumZoom());
return (
contents.map((url) => (
<LazyLoad offsetVertical={200}>
<ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
</LazyLoad>
)
)
);
}
export default PartMore;

2
src/components/app/PartStyles.js
View File

@ -3,6 +3,7 @@ import './App.css';
import StyleListViewer from "../../containers/style/StyleListViewer";
import {isPC} from "../../utils/navigatorUtils";
import ScrollContainer from 'react-indiana-drag-scroll'
import {handleScroll} from "../../utils/GAHelper";
const PartStyles = ({ setParamInfo }) => {
const [loaded, setLoaded] = useState(false);
@ -22,6 +23,7 @@ const PartStyles = ({ setParamInfo }) => {
</div>
<ScrollContainer
className="Qr-s"
onStartScroll={(e) => handleScroll('style')}
hideScrollbars={false}
horizontal={true}
vertical={false}

2
src/components/link/LinkTrace.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import {handleLink} from "../../utils/gaHelper";
import {handleLink} from "../../utils/GAHelper";
const LinkTrace = (props) => {
return (

2
src/containers/app/InputText.js
View File

@ -3,7 +3,7 @@ import {genQRInfo} from "../../actions";
import React, {useRef} from "react";
import {isPicture} from "../../utils/imageUtils";
import {decodeData} from "../../utils/qrcodeHandler";
import { handleUpload, handleInputUrl } from "../../utils/gaHelper";
import { handleUpload, handleInputUrl } from "../../utils/GAHelper";
const InputText = ({dispatch}) => {
const textRef = useRef();

4
src/containers/app/PartDownloadViewer.js
View File

@ -1,9 +1,9 @@
import {connect} from 'react-redux';
import PartDownload from "../../components/app/PartDownload";
import {saveImg, saveSvg} from "../../utils/downloader";
import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db";
import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/TcbHandler";
import {getParamDetailedValue, outerHtml} from "../../utils/util";
import {handleDownloadJpg, handleDownloadSvg} from "../../utils/gaHelper";
import {handleDownloadJpg, handleDownloadSvg} from "../../utils/GAHelper";
function saveDB(state, type, updateDownloadData) {
return new Promise(resolve => {

2
src/containers/param/ParamUploadViewer.js
View File

@ -2,7 +2,7 @@ import { connect } from 'react-redux';
import {changeParam} from "../../actions";
import ParamUpload from "../../components/param/ParamUpload";
import {isPicture, toBase64} from "../../utils/imageUtils";
import {handleUpload} from "../../utils/gaHelper";
import {handleUpload} from "../../utils/GAHelper";
const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.rendererIndex,

10
src/utils/gaHelper.js
View File

@ -52,4 +52,12 @@ export function handleInputUrl() {
category: 'URL',
action: 'Input',
});
}
}
export function handleScroll(label) {
ReactGA.event({
category: 'ScrollContainer',
action: 'scroll',
label: label
});
}

6
src/utils/util.js
View File

@ -1,10 +1,6 @@
import {ParamTypes} from "../constant/ParamTypes";
let seed = 0;
export function srand(sd) {
seed = sd;
}
export function rand(min, max) {
seed = (seed * 9301 + 49297) % 233280;
return min + (seed / 233280.0) * (max - min);
@ -64,4 +60,4 @@ function getScrollbarWidth() {
export function setScrollbarWidthProp() {
document.documentElement.style.setProperty('--scrollbar-width', getScrollbarWidth() + "px");
}
}