cordova-react
Version:
Cordova React Template
294 lines (241 loc) • 11.2 kB
HTML
<!--
Copyright (c) Omar Raad. All rights reserved.
Licensed under the MIT License.
See the LICENSE file in the project root for more information.
-->
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<title>Development Mode</title>
<link rel="stylesheet" href="css/material-icons.css">
<link rel="stylesheet" href="css/material-components-web.min.css">
<style>
body {
margin: 0;
display: flex;
height: 100vh;
}
[hidden] {
display: none ;
}
#splash {
position: absolute;
top: 0;
left: 0;
z-index: 5;
background-color: #282c34;
min-height: 100vh;
min-width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#splash .logo {
animation: logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.app-content {
width: 100%;
}
.main-content {
overflow: auto;
height: 100%;
}
/* canvas {
width: 100%;
height: 100%;
} */
#info {
width: 100%;
height: 100%;
background: var(--mdc-theme-background);
}
</style>
</head>
<body class="mdc-typography">
<div id="splash">
<img src="logo.svg" class="logo" alt="logo">
<p></p>
</div>
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">Development Mode</h3>
<h6 class="mdc-drawer__subtitle">v0.1.0</h6>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="mdc-list-item__graphic">
<svg style="width:24px;height:24px">
<path
d="M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z" />
</svg>
</i>
<span class="mdc-list-item__text">Scan QR code</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">info</i>
<span class="mdc-list-item__text">Info</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Cordova Development App</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<!-- <a href="#" class="material-icons mdc-top-app-bar__action-item"
aria-label="Bookmark this page">brightness_4</a> -->
</section>
</div>
</header>
<div class="mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
<div id="info" hidden>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader mdc-typography--headline5">App Info</h3>
<ul id="lappInfo" class="mdc-list mdc-list--two-line"></ul>
<h3 class="mdc-list-group__subheader mdc-typography--headline5">Platform Info</h3>
<ul id="lplatformInfo" class="mdc-list mdc-list--two-line"></ul>
<h3 class="mdc-list-group__subheader mdc-typography--headline5">Plugins</h3>
<ul id="lplugins" class="mdc-list mdc-list--two-line"></ul>
</div>
</div>
</main>
</div>
</div>
<div class="mdc-snackbar">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
</div>
<div class="mdc-snackbar__actions">
<button type="button" class="mdc-button mdc-snackbar__action"></button>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="app-info.js"></script>
<script src="js/material-components-web.min.js"></script>
<script>
const topAppBar = new mdc.topAppBar.MDCTopAppBar(document.querySelector('.mdc-top-app-bar'))
topAppBar.setScrollTarget(document.getElementById('main-content'))
const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'))
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'))
const list = mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'))
list.wrapFocus = true
const info = document.querySelector('#info')
const appInfoTemplate = (line1 = '', line2 = '') =>
`<li class="mdc-list-item">
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">${line1}</span>
<span class="mdc-list-item__secondary-text">${line2}</span>
</span>
</li>`
const platformInfoTemplate = (line1 = '', line2 = '') =>
`<li class="mdc-list-item">
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">${line1}</span>
<span class="mdc-list-item__secondary-text">${line2}</span>
</span>
</li>`
const pluginTemplate = (line1 = '', line2 = '') =>
`<li class="mdc-list-item">
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">${line1}</span>
<span class="mdc-list-item__secondary-text">${line2}</span>
</span>
</li>`
const appInfo_list = Object.entries(appInfo).map(entry => appInfoTemplate(entry[0], entry[1])).join('\n')
document.querySelector('#lappInfo').innerHTML = appInfo_list
platformInfo.platform = cordova.platformId
platformInfo[`cordova-${cordova.platformId}`] = cordova.platformVersion
const platformInfo_list = Object.entries(platformInfo).map(entry => platformInfoTemplate(entry[0], entry[1])).join('\n')
document.querySelector('#lplatformInfo').innerHTML = platformInfo_list
const plugins_list = plugins.map(plugin => pluginTemplate(plugin.name, plugin.version)).join('\n')
document.querySelector('#lplugins').innerHTML = plugins_list
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open
})
const onDeviceReady = () => {
const platform = cordova.platformId
if (platform === 'browser') {
document.querySelector('#splash p').innerHTML = `For <em>browser</em> development, use Console.`
return
}
document.querySelector('#splash').setAttribute('hidden', true)
list.listen('MDCList:action', (event) => {
switch (event.detail.index) {
case 0:
QRScanner.show(status =>
status.showing &&
QRScanner.scan(displayContents)
)
document.querySelector('#info').setAttribute('hidden', true)
break
case 1:
QRScanner.cancelScan(status =>
!status.scanning &&
QRScanner.hide()
)
document.querySelector('#info').removeAttribute('hidden')
break
}
drawer.open = false
})
const displayContents = (err, text) => {
if (err) {
// an error occurred, or the scan was canceled (error code `6`)
if (err.code == 6) return
snackbar.labelText = err._message
snackbar.actionButtonText = 'Retry'
const onActionClick = (reason) => {
if (event.detail.reason === 'action') {
QRScanner.scan(displayContents)
}
snackbar.unlisten('MDCSnackbar:closing', onActionClick)
}
snackbar.listen('MDCSnackbar:closing', onActionClick)
snackbar.open()
} else {
if (/http[s]*:\/\//.test(text)) {
QRScanner.destroy((status) => {
document.querySelector('#splash').removeAttribute('hidden')
document.querySelector('#splash p').innerHTML = `Redirecting...`
window.location.replace(`${text}?platform=${platform}`)
})
} else {
alert(`QRcode not valid url`)
QRScanner.scan(displayContents)
}
}
}
QRScanner.scan(displayContents)
// Make the webview transparent so the video preview is visible behind it.
QRScanner.show();
// Be sure to make any opaque HTML elements transparent here to avoid
// covering the video.
}
document.addEventListener('deviceready', onDeviceReady, false)
</script>
</body>
</html>