Skip to content

Commit b49344a

Browse files
NOHNOLIFENOHNOLIFE
committedSep 30, 2022
PWA support
1 parent 9b17494 commit b49344a

7 files changed

+3141
-110
lines changed
 

‎index.html

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" href="/favicon.ico" />
6-
<!-- <link rel="manifest" href="/public/mangaview.webmanifest">-->
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite App</title>
9-
</head>
10-
<body>
11-
<div id="app"></div>
12-
<script type="module" src="/src/main.ts"></script>
13-
</body>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<link rel="icon" href="/favicon.ico"/>
7+
<title>MangaView</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
1413
</html>

‎package-lock.json

+3,089-48
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
"name": " mangaview",
33
"version": "0.0.0",
44
"scripts": {
5-
"dev": "vite",
65
"build": "run-p type-check build-only",
7-
"preview": "vite preview --port 4173",
86
"build-only": "vite build",
7+
"dev": "vite",
8+
"preview": "vite preview --port 4173",
99
"type-check": "vue-tsc --noEmit"
1010
},
1111
"dependencies": {
1212
"@quasar/extras": "^1.15.4",
1313
"pinia": "^2.0.21",
1414
"quasar": "^2.8.4",
15+
"register-service-worker": "^1.7.2",
1516
"vue": "^3.2.38",
1617
"vue-router": "^4.1.5",
1718
"vue3-dropzone": "^2.0.1"
@@ -21,6 +22,7 @@
2122
"@types/node": "^16.11.56",
2223
"@vitejs/plugin-vue": "^3.0.3",
2324
"@vitejs/plugin-vue-jsx": "^2.0.1",
25+
"@vue/cli-plugin-pwa": "~5.0.0",
2426
"@vue/tsconfig": "^0.1.3",
2527
"npm-run-all": "^4.1.5",
2628
"sass": "^1.32.12",

‎public/mangaview.webmanifest

-31
This file was deleted.

‎src/App.vue

+21-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import {useDropzone} from "vue3-dropzone";
33
import {computed, ref} from "vue";
44
import type {Ref} from 'vue'
5-
import {debounce} from 'quasar'
5+
import {AppFullscreen} from 'quasar'
66
77
let leftDrawerOpen = ref(false)
88
let folders: Ref<{ [key: string]: Map<string, any> }> = ref({'book': new Map()})
@@ -52,18 +52,26 @@ let scroll = (v: any) => {
5252
scrollVal = v
5353
}
5454
55+
function refresh() {
56+
location.reload()
57+
}
58+
59+
let fitWidth = ref(true);
5560
</script>
5661

5762
<template>
5863
<q-layout view="hHh lpR fFf" class="column full-height bg-grey-10 text-grey-1" @dragenter="dragenter"
5964
style="z-index: 0">
6065
<q-header reveal height-hint="98" v-model="showHeader">
6166
<q-toolbar class="bg-grey-9">
62-
<q-btn stretch flat label="full-screen"/>
67+
<q-btn stretch flat icon="refresh" label="refresh" @click="refresh"/>
68+
<q-separator dark vertical inset/>
69+
<q-btn stretch flat label="fullscreen" icon="open_in_full" @click="AppFullscreen.request()"/>
6370
<q-separator dark vertical inset/>
64-
<q-btn stretch flat label="Link"/>
71+
<q-btn stretch flat label="fitWidth" icon="fa-solid fa-arrows-left-right" @click="fitWidth=!fitWidth"/>
6572
<div class="col text-right full-height">
66-
<q-btn-dropdown class="bg-primary text-grey-1" stretch flat :label="tab">
73+
<q-btn-dropdown class="bg-primary text-grey-1 ellipsis" stretch flat :label="tab" style="max-width: 100%"
74+
align="left">
6775
<q-list>
6876
<q-item v-for="n in books" clickable v-close-popup tabindex="0" class="bg-blue-grey-10 text-grey-1">
6977
<q-item-section>
@@ -77,15 +85,15 @@ let scroll = (v: any) => {
7785
</q-toolbar>
7886
</q-header>
7987
<q-page-container class="col column">
80-
<div class="main col scroll-y smooth text-center" v-scroll="scroll">
81-
<img v-for="(i,ii) in files" :src="createUrl(i)" :alt="i[1].name" :id="ii">
88+
<div class="main col scroll-y smooth text-center" :class="{'fit-width':fitWidth}" v-scroll="scroll">
89+
<img v-for="(i,ii) in files" :src="createUrl(i)" :alt="i[1].name" :id="ii.toString()" draggable="false">
8290
<div v-if="files.size===0" class="text-h5 q-pa-lg">drop folder or image files to this page</div>
8391
</div>
8492
</q-page-container>
8593
<q-drawer show-if-above v-model="leftDrawerOpen" side="right" bordered class="bg-grey-10">
8694
<div class="thumbnail">
87-
<a v-for="(i,ii) in files" :href="'#'+ii">
88-
<img :src="createUrl(i)" :alt="i[1].name">
95+
<a v-for="(i,ii) in files" :href="'#'+ii" draggable="false">
96+
<img :src="createUrl(i)" :alt="i[1].name" draggable="false">
8997
</a>
9098
</div>
9199
</q-drawer>
@@ -114,6 +122,11 @@ let scroll = (v: any) => {
114122
115123
.main {
116124
> img {
125+
display: inline-block;
126+
max-width: 100%;
127+
width: auto;
128+
}
129+
&.fit-width > img{
117130
width: 100%;
118131
}
119132
}

‎src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createApp } from 'vue'
22
import { createPinia } from 'pinia'
3-
import {Quasar} from 'quasar'
3+
import {Quasar,AppFullscreen} from 'quasar'
44

55

66
import App from './App.vue'
@@ -21,7 +21,7 @@ const app = createApp(App)
2121
app.use(createPinia())
2222
app.use(router)
2323
app.use(Quasar, {
24-
plugins: {}, // import Quasar plugins and add here
24+
plugins: {AppFullscreen}, // import Quasar plugins and add here
2525
config: {notify: { /* look at QuasarConfOptions from the API card */}
2626
},
2727
})

‎vite.config.ts

+15-8
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,50 @@ import {VitePWA} from "vite-plugin-pwa";
88

99
let showSourceMap = process.env.NODE_ENV === 'development';
1010

11-
// https://vitejs.dev/config/
1211
export default defineConfig({
1312
plugins: [vue({
1413
template: {transformAssetUrls},
1514
}),
1615
vueJsx(),
1716
quasar({}),
1817
VitePWA({
18+
registerType: 'autoUpdate',
19+
includeAssets:['*.ttf','*.woff2', 'images/*.png','*.ico'],
20+
workbox: {
21+
globPatterns: ['**/*.{js,css,html,ttf,woff2,ico,png,jpg}'],
22+
},
23+
devOptions: {
24+
enabled: true
25+
},
1926
manifest: {
20-
"name": "MangaView Progressive Web App",
27+
"name": "MangaView easy view easy fun",
2128
"short_name": "MangaView",
22-
"description": "Progressive Web App use to explore image files",
29+
"description": "Manga explorer reader Viewer",
2330
"icons": [
2431
{
25-
"src": "public/icons/icon-64.png",
32+
"src": "/icons/icon-64.png",
2633
"sizes": "64x64",
2734
"type": "image/png"
2835
},
2936
{
30-
"src": "public/icons/icon-128.png",
37+
"src": "/icons/icon-128.png",
3138
"sizes": "128x128",
3239
"type": "image/png"
3340
},
3441
{
35-
"src": "public/icons/icon-256.png",
42+
"src": "/icons/icon-256.png",
3643
"sizes": "256x256",
3744
"type": "image/png"
3845
},
3946
{
40-
"src": "public/icons/icon-512.png",
47+
"src": "/icons/icon-512.png",
4148
"sizes": "512x512",
4249
"type": "image/png"
4350
}
4451
],
4552
"start_url": "/index.html",
4653
"display": "fullscreen",
47-
"theme_color": "#1976d2",
54+
"theme_color": "#212121",
4855
"background_color": "#212121"
4956
},
5057
})

0 commit comments

Comments
 (0)
Please sign in to comment.