Compare commits
5 Commits
filadelfia
...
master
Author | SHA1 | Date |
---|---|---|
Jonatan Nilsson | 852f37dc8d | |
Jonatan Nilsson | 14a3bc3123 | |
Jonatan Nilsson | ab2e7b93c4 | |
Jonatan Nilsson | 2e7b3be8d5 | |
Jonatan Nilsson | 533e279b0b |
|
@ -21,9 +21,22 @@ function safeParseReponse(str, status, url) {
|
|||
}
|
||||
}
|
||||
|
||||
let requests = new Set()
|
||||
let requestIndex = 0
|
||||
|
||||
function clearLoading(request) {
|
||||
requests.delete(request)
|
||||
if (!requests.size) {
|
||||
api.loading = false
|
||||
window.requestAnimationFrame(m.redraw.bind(m))
|
||||
}
|
||||
}
|
||||
|
||||
const api = {
|
||||
loading: false,
|
||||
sendRequest: function(options, isPagination) {
|
||||
let request = requestIndex++
|
||||
requests.add(request)
|
||||
api.loading = true
|
||||
let token = Authentication.getToken()
|
||||
let pagination = isPagination
|
||||
|
@ -61,15 +74,14 @@ const api = {
|
|||
}
|
||||
return out
|
||||
}
|
||||
|
||||
|
||||
return m.request(options)
|
||||
.then(function(res) {
|
||||
api.loading = false
|
||||
window.requestAnimationFrame(m.redraw.bind(m))
|
||||
clearLoading(request)
|
||||
return res
|
||||
})
|
||||
.catch(function (error) {
|
||||
api.loading = false
|
||||
clearLoading(request)
|
||||
window.requestAnimationFrame(m.redraw.bind(m))
|
||||
if (error.status === 403) {
|
||||
Authentication.clearToken()
|
||||
|
@ -82,10 +94,15 @@ const api = {
|
|||
})
|
||||
},
|
||||
|
||||
uploadBanner: function(bannerFile, token) {
|
||||
uploadBanner: function(bannerFile, token, reporter) {
|
||||
let request = requestIndex++
|
||||
requests.add(request)
|
||||
api.loading = true
|
||||
|
||||
var report = reporter || function() {}
|
||||
var data = new FormData()
|
||||
data.append('file', bannerFile)
|
||||
data.append('preview', JSON.stringify({
|
||||
/*data.append('preview', JSON.stringify({
|
||||
"out": "base64",
|
||||
"format": "avif",
|
||||
"resize": {
|
||||
|
@ -96,10 +113,10 @@ const api = {
|
|||
"kernel": "mitchell"
|
||||
},
|
||||
"avif": {
|
||||
"quality": 50,
|
||||
"quality": 40,
|
||||
"effort": 9
|
||||
}
|
||||
}))
|
||||
}))*/
|
||||
data.append('medium', JSON.stringify({
|
||||
"format": "avif",
|
||||
"resize": {
|
||||
|
@ -115,29 +132,75 @@ const api = {
|
|||
}
|
||||
}))
|
||||
|
||||
report(lang.api_banner_upload)
|
||||
|
||||
return api.sendRequest({
|
||||
method: 'POST',
|
||||
url: token.resize + '?token=' + token.token,
|
||||
body: data,
|
||||
})
|
||||
.then(banner => {
|
||||
.then(async (banner) => {
|
||||
let preview = null
|
||||
let quality = 60
|
||||
while (!preview && quality > 10) {
|
||||
report(lang.format(lang.api_banner_generate, quality))
|
||||
let check = await api.sendRequest({
|
||||
method: 'POST',
|
||||
url: token.resize + '/' + banner.filename + '?token=' + token.token,
|
||||
body: {
|
||||
"preview": {
|
||||
"out": "base64",
|
||||
"format": "avif",
|
||||
"resize": {
|
||||
"width": 360,
|
||||
"height": 203,
|
||||
"fit": "cover",
|
||||
"withoutEnlargement": true,
|
||||
"kernel": "mitchell"
|
||||
},
|
||||
"avif": {
|
||||
"quality": quality,
|
||||
"effort": 9
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (check.preview.base64.length < 8000) {
|
||||
preview = check.preview.base64
|
||||
} else {
|
||||
quality -= 5
|
||||
}
|
||||
}
|
||||
report(null)
|
||||
|
||||
api.sendRequest({
|
||||
method: 'DELETE',
|
||||
url: token.delete + banner.filename + '?token=' + token.token,
|
||||
}).catch(err => console.error(err))
|
||||
|
||||
return {
|
||||
file: banner,
|
||||
file: bannerFile,
|
||||
size: bannerFile.size,
|
||||
medium: {
|
||||
filename: banner.medium.filename,
|
||||
path: banner.medium.path,
|
||||
},
|
||||
preview: {
|
||||
base64: banner.preview.base64,
|
||||
base64: preview,
|
||||
},
|
||||
}
|
||||
})
|
||||
.then(
|
||||
function(res) {
|
||||
clearLoading(request)
|
||||
return res
|
||||
},
|
||||
function(err) {
|
||||
clearLoading(request)
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
prettyFormatBytes: function(bytes) {
|
||||
|
@ -153,6 +216,8 @@ const api = {
|
|||
},
|
||||
|
||||
uploadFileProgress: function(options, file, reporter) {
|
||||
let request = requestIndex++
|
||||
requests.add(request)
|
||||
api.loading = true
|
||||
|
||||
return new Promise(function(res, rej) {
|
||||
|
@ -207,12 +272,10 @@ const api = {
|
|||
report(request, 0)
|
||||
})
|
||||
.then(function(res) {
|
||||
api.loading = false
|
||||
window.requestAnimationFrame(m.redraw.bind(m))
|
||||
clearLoading(request)
|
||||
return res
|
||||
}, function(err) {
|
||||
api.loading = false
|
||||
window.requestAnimationFrame(m.redraw.bind(m))
|
||||
clearLoading(request)
|
||||
return Promise.reject(err)
|
||||
})
|
||||
},
|
||||
|
|
|
@ -59,6 +59,10 @@ const i18n = {
|
|||
'Villa við að eyða efni: {0}'],
|
||||
article_error: ['Error while saving: {0}',
|
||||
'Villa við að vista: {0}'],
|
||||
api_banner_upload: ['Uploading banner image',
|
||||
'Er að senda mynd'],
|
||||
api_banner_generate:['Generating preview, testing quality {0}%',
|
||||
'Bý til forsíðumynd, prufa {0}% gæði'],
|
||||
months: {
|
||||
'1': ['January',
|
||||
'Janúar'],
|
||||
|
|
|
@ -19,6 +19,7 @@ const Upload = {
|
|||
this.cacheVideo = null
|
||||
this.cacheImage = null
|
||||
this.uploading = null
|
||||
this.bannerStatus = null
|
||||
this.form = {
|
||||
title: 'Sunnudagssamkoma',
|
||||
date: d,
|
||||
|
@ -49,7 +50,10 @@ const Upload = {
|
|||
return this.cacheImage
|
||||
}
|
||||
|
||||
return api.uploadBanner(this.form.banner, res)
|
||||
return api.uploadBanner(this.form.banner, res, (status) => {
|
||||
this.bannerStatus = status
|
||||
m.redraw()
|
||||
})
|
||||
.then(imageData => {
|
||||
this.cacheImage = imageData
|
||||
return res
|
||||
|
@ -113,6 +117,7 @@ const Upload = {
|
|||
m.route.set('/')
|
||||
})
|
||||
.catch((error) => {
|
||||
this.bannerStatus = null
|
||||
this.uploading = null
|
||||
if (!error) return
|
||||
|
||||
|
@ -196,6 +201,10 @@ const Upload = {
|
|||
value: 'Begin upload',
|
||||
}),
|
||||
api.loading ? m('div.loading-spinner') : null,
|
||||
this.bannerStatus ? [
|
||||
m('p', this.bannerStatus),
|
||||
m('.loading-bar', { style: `--progress: 0%` }),
|
||||
] : null,
|
||||
this.uploading ? [
|
||||
m('p', `${Math.floor(this.uploading.progress)}% (${this.uploading.perSecond}/s)`),
|
||||
m('.loading-bar', { style: `--progress: ${this.uploading.progress}%` }),
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "filadelfia_archive",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.8",
|
||||
"port": 4130,
|
||||
"description": "Filadelfia archive",
|
||||
"main": "index.js",
|
||||
|
@ -51,6 +51,7 @@
|
|||
"dependencies": {
|
||||
"dot": "^2.0.0-beta.1",
|
||||
"flaska": "^1.3.2",
|
||||
"formidable": "^1.2.6",
|
||||
"msnodesqlv8": "^4.1.1",
|
||||
"nconf-lite": "^2.0.0"
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filadelfia web portal</title>
|
||||
<title>Filadelfia myndhvelfing</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||
|
@ -83,8 +83,9 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
|
|||
|
||||
#header { background: var(--bg-component); }
|
||||
|
||||
#header nav { display: flex; }
|
||||
#header nav,
|
||||
#header .nav { display: flex; padding: 0.5rem 1rem 0.5rem 0; }
|
||||
#header .nav { text-align: center; padding: 0.5rem 1rem 0.5rem 0; justify-content: flex-end; flex-wrap: wrap; }
|
||||
|
||||
#header nav a,
|
||||
#header nav button { margin-left: 1rem; }
|
||||
|
@ -103,7 +104,7 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
|
|||
#header .upload { background: var(--main); color: var(--main-fg); }
|
||||
#header .nav { overflow-x: hidden; padding: 0.75rem 1rem 0.25rem; min-height: 4rem; align-items: flex-start; border-bottom: 1px solid #0001; }
|
||||
#header .nav:hover { overflow-x: auto; }
|
||||
#header .nav .inner { flex: 2 1 auto; display: flex; justify-content: center; }
|
||||
#header .nav .inner { padding-top: 0.5rem; }
|
||||
#header .nav a { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; }
|
||||
#header .nav a.empty { opacity: 0.5; }
|
||||
#header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; }
|
||||
|
@ -131,7 +132,7 @@ footer a { font-size: 0.8rem; }
|
|||
.gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; }
|
||||
.gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
|
||||
.gallery .group { display: flex; flex-wrap: wrap; }
|
||||
.gallery .group a { width: 40vw; max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
|
||||
.gallery .group a { width: calc(50vw - 4rem); max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
|
||||
|
||||
.gallery .group a span { align-self: stretch; text-align: center; background: #fffb; }
|
||||
|
||||
|
@ -145,7 +146,6 @@ footer a { font-size: 0.8rem; }
|
|||
.article { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; }
|
||||
.article .full-error { margin-top: 1rem; }
|
||||
.article-name { flex: 2 1 auto; margin-left: 1rem; }
|
||||
.image-banner { height: 160px; }
|
||||
.article h1 { margin: 0; }
|
||||
.article h1,
|
||||
.article p { padding: 0 0.5rem 0.5rem; }
|
||||
|
@ -193,6 +193,16 @@ footer a { font-size: 0.8rem; }
|
|||
|
||||
@keyframes stripes { to { background-size: 100% 100%; } }
|
||||
|
||||
@media (pointer:coarse) {
|
||||
#header .nav { overflow-x: scroll; }
|
||||
}
|
||||
@media screen and (max-width: 700px){
|
||||
.gallery, .gallery-year { margin: 0.25rem; }
|
||||
.gallery-month { margin: 0rem 0.25rem 0.25rem; }
|
||||
.gallery .group a { margin: 0 0.25rem 0.25rem; width: calc(50vw - 1rem); font-size: min(3vw, 1rem); }
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
Loading…
Reference in New Issue