Compare commits
7 Commits
filadelfia
...
master
Author | SHA1 | Date |
---|---|---|
Jonatan Nilsson | 852f37dc8d | |
Jonatan Nilsson | 14a3bc3123 | |
Jonatan Nilsson | ab2e7b93c4 | |
Jonatan Nilsson | 2e7b3be8d5 | |
Jonatan Nilsson | 533e279b0b | |
Jonatan Nilsson | e75719682e | |
Jonatan Nilsson | c55f0c9a02 |
|
@ -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 = {
|
const api = {
|
||||||
loading: false,
|
loading: false,
|
||||||
sendRequest: function(options, isPagination) {
|
sendRequest: function(options, isPagination) {
|
||||||
|
let request = requestIndex++
|
||||||
|
requests.add(request)
|
||||||
api.loading = true
|
api.loading = true
|
||||||
let token = Authentication.getToken()
|
let token = Authentication.getToken()
|
||||||
let pagination = isPagination
|
let pagination = isPagination
|
||||||
|
@ -61,15 +74,14 @@ const api = {
|
||||||
}
|
}
|
||||||
return out
|
return out
|
||||||
}
|
}
|
||||||
|
|
||||||
return m.request(options)
|
return m.request(options)
|
||||||
.then(function(res) {
|
.then(function(res) {
|
||||||
api.loading = false
|
clearLoading(request)
|
||||||
window.requestAnimationFrame(m.redraw.bind(m))
|
|
||||||
return res
|
return res
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
api.loading = false
|
clearLoading(request)
|
||||||
window.requestAnimationFrame(m.redraw.bind(m))
|
window.requestAnimationFrame(m.redraw.bind(m))
|
||||||
if (error.status === 403) {
|
if (error.status === 403) {
|
||||||
Authentication.clearToken()
|
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()
|
var data = new FormData()
|
||||||
data.append('file', bannerFile)
|
data.append('file', bannerFile)
|
||||||
data.append('preview', JSON.stringify({
|
/*data.append('preview', JSON.stringify({
|
||||||
"out": "base64",
|
"out": "base64",
|
||||||
"format": "avif",
|
"format": "avif",
|
||||||
"resize": {
|
"resize": {
|
||||||
|
@ -96,10 +113,10 @@ const api = {
|
||||||
"kernel": "mitchell"
|
"kernel": "mitchell"
|
||||||
},
|
},
|
||||||
"avif": {
|
"avif": {
|
||||||
"quality": 50,
|
"quality": 40,
|
||||||
"effort": 9
|
"effort": 9
|
||||||
}
|
}
|
||||||
}))
|
}))*/
|
||||||
data.append('medium', JSON.stringify({
|
data.append('medium', JSON.stringify({
|
||||||
"format": "avif",
|
"format": "avif",
|
||||||
"resize": {
|
"resize": {
|
||||||
|
@ -115,29 +132,75 @@ const api = {
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
report(lang.api_banner_upload)
|
||||||
|
|
||||||
return api.sendRequest({
|
return api.sendRequest({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
url: token.resize + '?token=' + token.token,
|
url: token.resize + '?token=' + token.token,
|
||||||
body: data,
|
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({
|
api.sendRequest({
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
url: token.delete + banner.filename + '?token=' + token.token,
|
url: token.delete + banner.filename + '?token=' + token.token,
|
||||||
}).catch(err => console.error(err))
|
}).catch(err => console.error(err))
|
||||||
|
|
||||||
return {
|
return {
|
||||||
file: banner,
|
file: bannerFile,
|
||||||
size: bannerFile.size,
|
size: bannerFile.size,
|
||||||
medium: {
|
medium: {
|
||||||
filename: banner.medium.filename,
|
filename: banner.medium.filename,
|
||||||
path: banner.medium.path,
|
path: banner.medium.path,
|
||||||
},
|
},
|
||||||
preview: {
|
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) {
|
prettyFormatBytes: function(bytes) {
|
||||||
|
@ -153,6 +216,8 @@ const api = {
|
||||||
},
|
},
|
||||||
|
|
||||||
uploadFileProgress: function(options, file, reporter) {
|
uploadFileProgress: function(options, file, reporter) {
|
||||||
|
let request = requestIndex++
|
||||||
|
requests.add(request)
|
||||||
api.loading = true
|
api.loading = true
|
||||||
|
|
||||||
return new Promise(function(res, rej) {
|
return new Promise(function(res, rej) {
|
||||||
|
@ -207,12 +272,10 @@ const api = {
|
||||||
report(request, 0)
|
report(request, 0)
|
||||||
})
|
})
|
||||||
.then(function(res) {
|
.then(function(res) {
|
||||||
api.loading = false
|
clearLoading(request)
|
||||||
window.requestAnimationFrame(m.redraw.bind(m))
|
|
||||||
return res
|
return res
|
||||||
}, function(err) {
|
}, function(err) {
|
||||||
api.loading = false
|
clearLoading(request)
|
||||||
window.requestAnimationFrame(m.redraw.bind(m))
|
|
||||||
return Promise.reject(err)
|
return Promise.reject(err)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -59,6 +59,10 @@ const i18n = {
|
||||||
'Villa við að eyða efni: {0}'],
|
'Villa við að eyða efni: {0}'],
|
||||||
article_error: ['Error while saving: {0}',
|
article_error: ['Error while saving: {0}',
|
||||||
'Villa við að vista: {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: {
|
months: {
|
||||||
'1': ['January',
|
'1': ['January',
|
||||||
'Janúar'],
|
'Janúar'],
|
||||||
|
|
|
@ -19,6 +19,7 @@ const Upload = {
|
||||||
this.cacheVideo = null
|
this.cacheVideo = null
|
||||||
this.cacheImage = null
|
this.cacheImage = null
|
||||||
this.uploading = null
|
this.uploading = null
|
||||||
|
this.bannerStatus = null
|
||||||
this.form = {
|
this.form = {
|
||||||
title: 'Sunnudagssamkoma',
|
title: 'Sunnudagssamkoma',
|
||||||
date: d,
|
date: d,
|
||||||
|
@ -49,7 +50,10 @@ const Upload = {
|
||||||
return this.cacheImage
|
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 => {
|
.then(imageData => {
|
||||||
this.cacheImage = imageData
|
this.cacheImage = imageData
|
||||||
return res
|
return res
|
||||||
|
@ -113,6 +117,7 @@ const Upload = {
|
||||||
m.route.set('/')
|
m.route.set('/')
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
this.bannerStatus = null
|
||||||
this.uploading = null
|
this.uploading = null
|
||||||
if (!error) return
|
if (!error) return
|
||||||
|
|
||||||
|
@ -196,6 +201,10 @@ const Upload = {
|
||||||
value: 'Begin upload',
|
value: 'Begin upload',
|
||||||
}),
|
}),
|
||||||
api.loading ? m('div.loading-spinner') : null,
|
api.loading ? m('div.loading-spinner') : null,
|
||||||
|
this.bannerStatus ? [
|
||||||
|
m('p', this.bannerStatus),
|
||||||
|
m('.loading-bar', { style: `--progress: 0%` }),
|
||||||
|
] : null,
|
||||||
this.uploading ? [
|
this.uploading ? [
|
||||||
m('p', `${Math.floor(this.uploading.progress)}% (${this.uploading.perSecond}/s)`),
|
m('p', `${Math.floor(this.uploading.progress)}% (${this.uploading.perSecond}/s)`),
|
||||||
m('.loading-bar', { style: `--progress: ${this.uploading.progress}%` }),
|
m('.loading-bar', { style: `--progress: ${this.uploading.progress}%` }),
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
"eltro": "^1.4.4",
|
"eltro": "^1.4.4",
|
||||||
"esbuild": "^0.19.5",
|
"esbuild": "^0.19.5",
|
||||||
"flaska": "^1.3.2",
|
|
||||||
"mithril": "^2.2.2",
|
"mithril": "^2.2.2",
|
||||||
"service-core": "^3.0.0-beta.17"
|
"service-core": "^3.0.0-beta.17"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "filadelfia_archive",
|
"name": "filadelfia_archive",
|
||||||
"version": "1.0.1",
|
"version": "1.0.8",
|
||||||
"port": 4130,
|
"port": 4130,
|
||||||
"description": "Filadelfia archive",
|
"description": "Filadelfia archive",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
@ -50,7 +50,9 @@
|
||||||
"homepage": "https://git.nfp.is/nfp/nfp_sites",
|
"homepage": "https://git.nfp.is/nfp/nfp_sites",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dot": "^2.0.0-beta.1",
|
"dot": "^2.0.0-beta.1",
|
||||||
"msnodesqlv8": "^2.4.7",
|
"flaska": "^1.3.2",
|
||||||
|
"formidable": "^1.2.6",
|
||||||
|
"msnodesqlv8": "^4.1.1",
|
||||||
"nconf-lite": "^2.0.0"
|
"nconf-lite": "^2.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -58,7 +60,6 @@
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
"eltro": "^1.4.4",
|
"eltro": "^1.4.4",
|
||||||
"esbuild": "^0.19.5",
|
"esbuild": "^0.19.5",
|
||||||
"flaska": "^1.3.2",
|
|
||||||
"mithril": "^2.2.2",
|
"mithril": "^2.2.2",
|
||||||
"service-core": "^3.0.0-beta.17"
|
"service-core": "^3.0.0-beta.17"
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Filadelfia web portal</title>
|
<title>Filadelfia myndhvelfing</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
<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 { background: var(--bg-component); }
|
||||||
|
|
||||||
|
#header nav { display: flex; }
|
||||||
#header nav,
|
#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 a,
|
||||||
#header nav button { margin-left: 1rem; }
|
#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 .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 { 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: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 { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; }
|
||||||
#header .nav a.empty { opacity: 0.5; }
|
#header .nav a.empty { opacity: 0.5; }
|
||||||
#header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; }
|
#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-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-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
|
||||||
.gallery .group { display: flex; flex-wrap: wrap; }
|
.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; }
|
.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 { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; }
|
||||||
.article .full-error { margin-top: 1rem; }
|
.article .full-error { margin-top: 1rem; }
|
||||||
.article-name { flex: 2 1 auto; margin-left: 1rem; }
|
.article-name { flex: 2 1 auto; margin-left: 1rem; }
|
||||||
.image-banner { height: 160px; }
|
|
||||||
.article h1 { margin: 0; }
|
.article h1 { margin: 0; }
|
||||||
.article h1,
|
.article h1,
|
||||||
.article p { padding: 0 0.5rem 0.5rem; }
|
.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%; } }
|
@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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in New Issue