Skip to content

Commit

Permalink
Update google analytics to 4
Browse files Browse the repository at this point in the history
  • Loading branch information
gokulkrishh committed Mar 22, 2022
1 parent eb53bea commit 1b6bcdc
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 188 deletions.
24 changes: 8 additions & 16 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,24 +102,16 @@ <h1>About</h1>
<path clip-path="url(#b)" d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z" />
</svg>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JV7CRR9FCT"></script>
<script>
if (location.hostname !== "localhost") {
(function (i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga");
ga("create", "UA-75516573-1", "auto");
ga("send", "pageview");
}
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-JV7CRR9FCT');
}
</script>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
crossorigin="anonymous">
Expand Down
344 changes: 172 additions & 172 deletions src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,179 +6,179 @@ import '../css/styles.css';

//If service worker is installed, show offline usage notification
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then((reg) => {
console.log('SW registered: ', reg);
if (!localStorage.getItem('offline')) {
localStorage.setItem('offline', true);
snackbar.show('App is ready for offline usage.', 5000);
}
})
.catch((regError) => {
console.log('SW registration failed: ', regError);
});
});
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then((reg) => {
// console.log('SW registered: ', reg);
if (!localStorage.getItem('offline')) {
localStorage.setItem('offline', true);
snackbar.show('App is ready for offline usage.', 5000);
}
})
.catch((regError) => {
console.log('SW registration failed: ', regError);
});
});
}

window.addEventListener('DOMContentLoaded', () => {
//To check the device and add iOS support
window.iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
window.isMediaStreamAPISupported = navigator && navigator.mediaDevices && 'enumerateDevices' in navigator.mediaDevices;
window.noCameraPermission = false;

var copiedText = null;
var frame = null;
var selectPhotoBtn = document.querySelector('.app__select-photos');
var dialogElement = document.querySelector('.app__dialog');
var dialogOverlayElement = document.querySelector('.app__dialog-overlay');
var dialogOpenBtnElement = document.querySelector('.app__dialog-open');
var dialogCloseBtnElement = document.querySelector('.app__dialog-close');
var scanningEle = document.querySelector('.custom-scanner');
var appScanningEle = document.querySelector('.app__scanner-img');
var textBoxEle = document.querySelector('#result');

var helpTextEle = document.querySelector('.app__help-text');
var infoSvg = document.querySelector('.app__header-icon svg');
var videoElement = document.querySelector('video');

var headerIcon = document.querySelector('.app__header-icon');
var infoDialogElement = document.querySelector('.app__infodialog');
var infoDialogCloseBtnElement = document.querySelector('.app__infodialog-close');
var infoDialogOverlayElement = document.querySelector('.app__infodialog-overlay');

window.appOverlay = document.querySelector('.app__overlay');

//Initializing qr scanner
window.addEventListener('load', (event) => {
QRReader.init(); //To initialize QR Scanner
// Set camera overlay size
setTimeout(() => {
setCameraOverlay();
if (window.isMediaStreamAPISupported) {
scan();
}
}, 1000);

// To support other browsers who dont have mediaStreamAPI
selectFromPhoto();
});

function setCameraOverlay() {
window.appOverlay.style.borderStyle = 'solid';
}

function createFrame() {
frame = document.createElement('img');
frame.src = '';
frame.id = 'frame';
}

//Dialog close btn event
dialogCloseBtnElement.addEventListener('click', hideDialog, false);
infoDialogCloseBtnElement.addEventListener('click', closeInfoDialog, false);
dialogOpenBtnElement.addEventListener('click', openInBrowser, false);
headerIcon.addEventListener('click', showInfo, false);

//To open result in browser
function openInBrowser() {
console.log('Result: ', copiedText);

if (!hasProtocolInUrl(copiedText)) {
copiedText = `//${copiedText}`;
}

window.open(copiedText, '_blank', 'toolbar=0,location=0,menubar=0');
copiedText = null;
hideDialog();
}

//Scan
function scan(forSelectedPhotos = false) {
if (window.isMediaStreamAPISupported && !window.noCameraPermission) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}

if (forSelectedPhotos) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}

QRReader.scan((result) => {
copiedText = result;
textBoxEle.value = result;
textBoxEle.select();
scanningEle.style.display = 'none';
appScanningEle.style.display = 'none';
if (isURL(result)) {
dialogOpenBtnElement.style.display = 'inline-block';
}
dialogElement.classList.remove('app__dialog--hide');
dialogOverlayElement.classList.remove('app__dialog--hide');
}, forSelectedPhotos);
}

//Hide dialog
function hideDialog() {
copiedText = null;
textBoxEle.value = '';

if (!window.isMediaStreamAPISupported) {
frame.src = '';
frame.className = '';
}

dialogElement.classList.add('app__dialog--hide');
dialogOverlayElement.classList.add('app__dialog--hide');
scan();
}

function selectFromPhoto() {
//Creating the camera element
var camera = document.createElement('input');
camera.setAttribute('type', 'file');
camera.setAttribute('capture', 'camera');
camera.id = 'camera';
window.appOverlay.style.borderStyle = '';
selectPhotoBtn.style.display = 'flex';
createFrame();

//Add the camera and img element to DOM
var pageContentElement = document.querySelector('.app__layout-content');
pageContentElement.appendChild(camera);
pageContentElement.appendChild(frame);

//Click of camera fab icon
selectPhotoBtn.addEventListener('click', () => {
scanningEle.style.display = 'none';
appScanningEle.style.display = 'none';
document.querySelector('#camera').click();
});

//On camera change
camera.addEventListener('change', (event) => {
if (event.target && event.target.files.length > 0) {
frame.className = 'app__overlay';
frame.src = URL.createObjectURL(event.target.files[0]);
if (!window.noCameraPermission) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}
window.appOverlay.style.borderColor = 'rgb(62, 78, 184)';
scan(true);
}
});
}

function showInfo() {
infoDialogElement.classList.remove('app__infodialog--hide');
infoDialogOverlayElement.classList.remove('app__infodialog--hide');
}

function closeInfoDialog() {
infoDialogElement.classList.add('app__infodialog--hide');
infoDialogOverlayElement.classList.add('app__infodialog--hide');
}
//To check the device and add iOS support
window.iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
window.isMediaStreamAPISupported = navigator && navigator.mediaDevices && 'enumerateDevices' in navigator.mediaDevices;
window.noCameraPermission = false;

var copiedText = null;
var frame = null;
var selectPhotoBtn = document.querySelector('.app__select-photos');
var dialogElement = document.querySelector('.app__dialog');
var dialogOverlayElement = document.querySelector('.app__dialog-overlay');
var dialogOpenBtnElement = document.querySelector('.app__dialog-open');
var dialogCloseBtnElement = document.querySelector('.app__dialog-close');
var scanningEle = document.querySelector('.custom-scanner');
var appScanningEle = document.querySelector('.app__scanner-img');
var textBoxEle = document.querySelector('#result');

var helpTextEle = document.querySelector('.app__help-text');
var infoSvg = document.querySelector('.app__header-icon svg');
var videoElement = document.querySelector('video');

var headerIcon = document.querySelector('.app__header-icon');
var infoDialogElement = document.querySelector('.app__infodialog');
var infoDialogCloseBtnElement = document.querySelector('.app__infodialog-close');
var infoDialogOverlayElement = document.querySelector('.app__infodialog-overlay');

window.appOverlay = document.querySelector('.app__overlay');

//Initializing qr scanner
window.addEventListener('load', (event) => {
QRReader.init(); //To initialize QR Scanner
// Set camera overlay size
setTimeout(() => {
setCameraOverlay();
if (window.isMediaStreamAPISupported) {
scan();
}
}, 1000);

// To support other browsers who dont have mediaStreamAPI
selectFromPhoto();
});

function setCameraOverlay() {
window.appOverlay.style.borderStyle = 'solid';
}

function createFrame() {
frame = document.createElement('img');
frame.src = '';
frame.id = 'frame';
}

//Dialog close btn event
dialogCloseBtnElement.addEventListener('click', hideDialog, false);
infoDialogCloseBtnElement.addEventListener('click', closeInfoDialog, false);
dialogOpenBtnElement.addEventListener('click', openInBrowser, false);
headerIcon.addEventListener('click', showInfo, false);

//To open result in browser
function openInBrowser() {
// console.log('Result: ', copiedText);

if (!hasProtocolInUrl(copiedText)) {
copiedText = `//${copiedText}`;
}

window.open(copiedText, '_blank', 'toolbar=0,location=0,menubar=0');
copiedText = null;
hideDialog();
}

//Scan
function scan(forSelectedPhotos = false) {
if (window.isMediaStreamAPISupported && !window.noCameraPermission) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}

if (forSelectedPhotos) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}

QRReader.scan((result) => {
copiedText = result;
textBoxEle.value = result;
textBoxEle.select();
scanningEle.style.display = 'none';
appScanningEle.style.display = 'none';
if (isURL(result)) {
dialogOpenBtnElement.style.display = 'inline-block';
}
dialogElement.classList.remove('app__dialog--hide');
dialogOverlayElement.classList.remove('app__dialog--hide');
}, forSelectedPhotos);
}

//Hide dialog
function hideDialog() {
copiedText = null;
textBoxEle.value = '';

if (!window.isMediaStreamAPISupported) {
frame.src = '';
frame.className = '';
}

dialogElement.classList.add('app__dialog--hide');
dialogOverlayElement.classList.add('app__dialog--hide');
scan();
}

function selectFromPhoto() {
//Creating the camera element
var camera = document.createElement('input');
camera.setAttribute('type', 'file');
camera.setAttribute('capture', 'camera');
camera.id = 'camera';
window.appOverlay.style.borderStyle = '';
selectPhotoBtn.style.display = 'flex';
createFrame();

//Add the camera and img element to DOM
var pageContentElement = document.querySelector('.app__layout-content');
pageContentElement.appendChild(camera);
pageContentElement.appendChild(frame);

//Click of camera fab icon
selectPhotoBtn.addEventListener('click', () => {
scanningEle.style.display = 'none';
appScanningEle.style.display = 'none';
document.querySelector('#camera').click();
});

//On camera change
camera.addEventListener('change', (event) => {
if (event.target && event.target.files.length > 0) {
frame.className = 'app__overlay';
frame.src = URL.createObjectURL(event.target.files[0]);
if (!window.noCameraPermission) {
scanningEle.style.display = 'block';
appScanningEle.style.display = 'block';
}
window.appOverlay.style.borderColor = 'rgb(62, 78, 184)';
scan(true);
}
});
}

function showInfo() {
infoDialogElement.classList.remove('app__infodialog--hide');
infoDialogOverlayElement.classList.remove('app__infodialog--hide');
}

function closeInfoDialog() {
infoDialogElement.classList.add('app__infodialog--hide');
infoDialogOverlayElement.classList.add('app__infodialog--hide');
}
});

0 comments on commit 1b6bcdc

Please sign in to comment.