Skip to content
This repository was archived by the owner on Jan 2, 2021. It is now read-only.

Commit 545031f

Browse files
gokulkrishhgokulkrishh
committed
Some more changes related to scanner
1 parent 3053694 commit 545031f

File tree

4 files changed

+229
-193
lines changed

4 files changed

+229
-193
lines changed

‎app/css/styles.css

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ body {
99
position: absolute;
1010
width: 100%;
1111
height: 100%;
12-
-webkit-overflow-scrolling: touch;
1312
overflow: hidden;
13+
background-color: rgba(0, 0, 0, 0.5);
1414
}
1515

1616
.app__header {
@@ -212,7 +212,7 @@ video {
212212

213213
.app__snackbar {
214214
position: fixed;
215-
bottom: 20px;
215+
bottom: 15px;
216216
left: 20px;
217217
pointer-events: none;
218218
z-index: 9999;
@@ -319,17 +319,39 @@ video {
319319

320320
.app__overlay {
321321
position: fixed;
322-
top: -56px;
322+
top: 0;
323323
bottom: 0;
324324
right: 0;
325325
left: 0;
326-
border-color: #ffffff;
327-
border-width: 2px;
328326
transition: all 200ms ease-in;
329-
width: 360px;
330-
height: 360px;
327+
width: 320px;
328+
height: 320px;
331329
margin: auto;
332-
border-radius: 2px;
330+
}
331+
332+
333+
.app__overlay-left,
334+
.app__overlay-right {
335+
width: 52px;
336+
height: 340px;
337+
background: #7f7f7f;
338+
}
339+
340+
.app__overlay-left {
341+
margin-left: -57px;
342+
margin-top: -10px;
343+
}
344+
345+
.app__overlay-right {
346+
margin-right: -57px;
347+
margin-top: -340px;
348+
float: right;
349+
}
350+
351+
.app__overlay {
352+
/* border-color: #ffffff;
353+
border-width: 5px; */
354+
border: 0;
333355
}
334356

335357
.app__help-text,
@@ -387,3 +409,8 @@ video {
387409
input[type='file'] {
388410
display: none;
389411
}
412+
413+
#frame {
414+
width: auto;
415+
height: auto;
416+
}

‎app/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,11 @@ <h5>QR Code</h5>
5959
<div class="app__overlay-frame"></div>
6060
<!-- Scanner animation -->
6161
<div class="custom-scanner"></div>
62-
<div class="app__help-text">Your browser doesn't support Camera API</div>
63-
<div class="app__select-photos"></div>
62+
<div class="app__help-text"></div>
6463
</div>
6564

65+
<div class="app__select-photos"></div>
66+
6667
<script>
6768
if (location.hostname !== "localhost") {
6869
(function (i, s, o, g, r, a, m) {

‎app/js/main.js

Lines changed: 138 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,150 @@
11
import QRReader from './vendor/qrscan.js';
2-
import {snackbar} from './snackbar.js';
2+
import { snackbar } from './snackbar.js';
33
import styles from '../css/styles.css';
44
import isURL from 'is-url';
55

66
//If service worker is installed, show offline usage notification
7-
if ("serviceWorker" in navigator) {
8-
navigator.serviceWorker.ready.then((registration) => {
9-
if (!localStorage.getItem("offline")) {
10-
localStorage.setItem("offline", true);
11-
snackbar.show('App is ready for offline usage.', 5000);
12-
}
13-
});
7+
if ('serviceWorker' in navigator && window.location.hostname !== 'localhost') {
8+
navigator.serviceWorker.ready.then(registration => {
9+
if (!localStorage.getItem('offline')) {
10+
localStorage.setItem('offline', true);
11+
snackbar.show('App is ready for offline usage.', 5000);
12+
}
13+
});
1414
}
1515

1616
//To generate sw.js file
1717
if (process.env.NODE_ENV === 'production') {
18-
require('offline-plugin/runtime').install();
18+
require('offline-plugin/runtime').install();
1919
}
2020

21-
window.addEventListener("DOMContentLoaded", () => {
22-
//To check the device and add iOS support
23-
window.iOS = ["iPad", "iPhone", "iPod"].indexOf(navigator.platform) >= 0;
24-
window.isMediaStreamAPISupported = (navigator && navigator.mediaDevices && 'enumerateDevices' in navigator.mediaDevices);
25-
26-
var copiedText = null;
27-
var frame = null;
28-
var selectPhotoBtn = document.querySelector('.app__select-photos');
29-
var dialogElement = document.querySelector('.app__dialog');
30-
var dialogOverlayElement = document.querySelector('.app__dialog-overlay');
31-
var dialogOpenBtnElement = document.querySelector('.app__dialog-open');
32-
var dialogCloseBtnElement = document.querySelector('.app__dialog-close');
33-
var scanningEle = document.querySelector('.custom-scanner');
34-
var textBoxEle = document.querySelector('#result');
35-
var helpTextEle = document.querySelector('.app__help-text');
36-
var infoSvg = document.querySelector('.app__header-icon svg');
37-
var videoElement = document.querySelector('video');
38-
window.appOverlay = document.querySelector('.app__overlay');
39-
40-
//Initializing qr scanner
41-
window.addEventListener('load', (event) => {
42-
QRReader.init(); //To initialize QR Scanner
43-
// Set camera overlay size
44-
setTimeout(() => {
45-
setCameraOverlay();
46-
if (window.isMediaStreamAPISupported) {
47-
scan();
48-
}
49-
}, 1000);
50-
51-
// To support other browsers who dont have mediaStreamAPI
52-
selectFromPhoto();
53-
});
54-
55-
function setCameraOverlay() {
56-
window.appOverlay.style.borderStyle = 'solid';
57-
}
58-
59-
function createFrame() {
60-
frame = document.createElement('img');
61-
frame.src = '';
62-
frame.id = 'frame';
63-
}
64-
65-
//Dialog close btn event
66-
dialogCloseBtnElement.addEventListener('click', hideDialog, false);
67-
dialogOpenBtnElement.addEventListener('click', openInBrowser, false);
68-
69-
//To open result in browser
70-
function openInBrowser() {
71-
console.log('Result: ', copiedText);
72-
window.open(copiedText, '_blank', 'toolbar=0,location=0,menubar=0');
73-
copiedText = null;
74-
hideDialog();
75-
}
76-
77-
//Scan
78-
function scan(forSelectedPhotos = false) {
79-
if (window.isMediaStreamAPISupported) scanningEle.style.display = 'block';
80-
else { helpTextEle.style.display = 'block'; }
81-
QRReader.scan((result) => {
82-
83-
copiedText = result;
84-
textBoxEle.value = result;
85-
textBoxEle.select();
86-
scanningEle.style.display = 'none';
87-
if (isURL(result)) {
88-
dialogOpenBtnElement.style.display = 'inline-block';
89-
}
90-
dialogElement.classList.remove('app__dialog--hide');
91-
dialogOverlayElement.classList.remove('app__dialog--hide');
92-
}, forSelectedPhotos);
93-
}
94-
95-
//Hide dialog
96-
function hideDialog() {
97-
copiedText = null;
98-
textBoxEle.value = "";
99-
100-
if (!window.isMediaStreamAPISupported) {
101-
frame.src = "";
102-
frame.className = "";
103-
}
104-
105-
dialogElement.classList.add('app__dialog--hide');
106-
dialogOverlayElement.classList.add('app__dialog--hide');
107-
scan();
108-
}
109-
110-
function selectFromPhoto() {
111-
//Creating the camera element
112-
var camera = document.createElement('input');
113-
camera.setAttribute('type', 'file');
114-
camera.setAttribute('capture', 'camera');
115-
camera.id = 'camera';
116-
infoSvg.style.fill = '#212121';
117-
window.appOverlay.style.borderStyle = '';
118-
selectPhotoBtn.style.color = "#212121";
119-
selectPhotoBtn.style.display = 'block';
120-
createFrame();
121-
122-
//Add the camera and img element to DOM
123-
var pageContentElement = document.querySelector('.app__layout-content');
124-
pageContentElement.appendChild(camera);
125-
pageContentElement.appendChild(frame);
126-
127-
//Click of camera fab icon
128-
selectPhotoBtn.addEventListener('click', () => {
129-
scanningEle.style.display = 'none';
130-
document.querySelector("#camera").click();
131-
});
132-
133-
//On camera change
134-
camera.addEventListener('change', (event) => {
135-
if (event.target && event.target.files.length > 0) {
136-
frame.className = 'app__overlay';
137-
frame.src = URL.createObjectURL(event.target.files[0]);
138-
scanningEle.style.display = 'block';
139-
window.appOverlay.style.borderColor = '#212121';
140-
scan();
141-
}
142-
});
143-
}
21+
window.addEventListener('DOMContentLoaded', () => {
22+
//To check the device and add iOS support
23+
window.iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
24+
window.isMediaStreamAPISupported = navigator && navigator.mediaDevices && 'enumerateDevices' in navigator.mediaDevices;
25+
window.noCameraPermission = false;
26+
27+
var copiedText = null;
28+
var frame = null;
29+
var selectPhotoBtn = document.querySelector('.app__select-photos');
30+
var dialogElement = document.querySelector('.app__dialog');
31+
var dialogOverlayElement = document.querySelector('.app__dialog-overlay');
32+
var dialogOpenBtnElement = document.querySelector('.app__dialog-open');
33+
var dialogCloseBtnElement = document.querySelector('.app__dialog-close');
34+
var scanningEle = document.querySelector('.custom-scanner');
35+
var textBoxEle = document.querySelector('#result');
36+
var helpTextEle = document.querySelector('.app__help-text');
37+
var infoSvg = document.querySelector('.app__header-icon svg');
38+
var videoElement = document.querySelector('video');
39+
window.appOverlay = document.querySelector('.app__overlay');
40+
41+
//Initializing qr scanner
42+
window.addEventListener('load', event => {
43+
QRReader.init(); //To initialize QR Scanner
44+
// Set camera overlay size
45+
setTimeout(() => {
46+
setCameraOverlay();
47+
if (window.isMediaStreamAPISupported) {
48+
scan();
49+
}
50+
}, 1000);
51+
52+
// To support other browsers who dont have mediaStreamAPI
53+
selectFromPhoto();
54+
});
55+
56+
function setCameraOverlay() {
57+
window.appOverlay.style.borderStyle = 'solid';
58+
}
59+
60+
function createFrame() {
61+
frame = document.createElement('img');
62+
frame.src = '';
63+
frame.id = 'frame';
64+
}
65+
66+
//Dialog close btn event
67+
dialogCloseBtnElement.addEventListener('click', hideDialog, false);
68+
dialogOpenBtnElement.addEventListener('click', openInBrowser, false);
69+
70+
//To open result in browser
71+
function openInBrowser() {
72+
console.log('Result: ', copiedText);
73+
window.open(copiedText, '_blank', 'toolbar=0,location=0,menubar=0');
74+
copiedText = null;
75+
hideDialog();
76+
}
77+
78+
//Scan
79+
function scan(forSelectedPhotos = false) {
80+
if (window.isMediaStreamAPISupported && !window.noCameraPermission) {
81+
scanningEle.style.display = 'block';
82+
}
83+
84+
if (forSelectedPhotos) {
85+
scanningEle.style.display = 'block';
86+
}
87+
88+
QRReader.scan(result => {
89+
copiedText = result;
90+
textBoxEle.value = result;
91+
textBoxEle.select();
92+
scanningEle.style.display = 'none';
93+
if (isURL(result)) {
94+
dialogOpenBtnElement.style.display = 'inline-block';
95+
}
96+
dialogElement.classList.remove('app__dialog--hide');
97+
dialogOverlayElement.classList.remove('app__dialog--hide');
98+
const frame = document.querySelector('#frame');
99+
// if (forSelectedPhotos && frame) frame.remove();
100+
}, forSelectedPhotos);
101+
}
102+
103+
//Hide dialog
104+
function hideDialog() {
105+
copiedText = null;
106+
textBoxEle.value = '';
107+
108+
if (!window.isMediaStreamAPISupported) {
109+
frame.src = '';
110+
frame.className = '';
111+
}
112+
113+
dialogElement.classList.add('app__dialog--hide');
114+
dialogOverlayElement.classList.add('app__dialog--hide');
115+
scan();
116+
}
117+
118+
function selectFromPhoto() {
119+
//Creating the camera element
120+
var camera = document.createElement('input');
121+
camera.setAttribute('type', 'file');
122+
camera.setAttribute('capture', 'camera');
123+
camera.id = 'camera';
124+
window.appOverlay.style.borderStyle = '';
125+
selectPhotoBtn.style.display = 'block';
126+
createFrame();
127+
128+
//Add the camera and img element to DOM
129+
var pageContentElement = document.querySelector('.app__layout-content');
130+
pageContentElement.appendChild(camera);
131+
pageContentElement.appendChild(frame);
132+
133+
//Click of camera fab icon
134+
selectPhotoBtn.addEventListener('click', () => {
135+
scanningEle.style.display = 'none';
136+
document.querySelector('#camera').click();
137+
});
138+
139+
//On camera change
140+
camera.addEventListener('change', event => {
141+
if (event.target && event.target.files.length > 0) {
142+
frame.className = 'app__overlay';
143+
frame.src = URL.createObjectURL(event.target.files[0]);
144+
if (!window.noCameraPermission) scanningEle.style.display = 'block';
145+
window.appOverlay.style.borderColor = 'rgb(62, 78, 184)';
146+
scan(true);
147+
}
148+
});
149+
}
144150
});

0 commit comments

Comments
 (0)