Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d6675d4a88 | ||
|
|
774188cbf2 | ||
|
|
9f69da4f22 | ||
|
|
f965aad08d | ||
|
|
5febf89397 | ||
|
|
e10f3c8e6b | ||
|
|
829de04bcb | ||
|
|
1eaad8c774 | ||
|
|
ed4a5bc95b | ||
|
|
3d2e34c1c1 | ||
|
|
8357ecc882 | ||
|
|
301ff159f0 | ||
|
|
68accfaf1c | ||
|
|
945edd0dc7 | ||
|
|
ad9423af57 | ||
|
|
3d53a6171b | ||
|
|
d4e36d79ae | ||
|
|
fb3513fc15 | ||
|
|
0b9ed99d27 | ||
|
|
05c16e9239 | ||
|
|
368b250cdf | ||
|
|
5cdb1aac2e | ||
|
|
87f20c5425 | ||
|
|
a4185f0df3 | ||
|
|
62c47d1dd2 | ||
|
|
8861499ef2 | ||
|
|
37f7fc2d5c | ||
|
|
4b5686a4bf | ||
|
|
ad006612ac | ||
|
|
85a144eeb8 | ||
|
|
0bcb155b49 | ||
|
|
25d3cdab44 | ||
|
|
487cbc4e09 | ||
|
|
c26e007b07 | ||
|
|
f49e14315e | ||
|
|
d51d93d083 | ||
|
|
63b2af7a63 | ||
|
|
cc33c1229f | ||
|
|
2d25a470bc | ||
|
|
1fb0778291 | ||
|
|
78be3108e5 | ||
|
|
907117c2f1 | ||
|
|
c31d0c9572 | ||
|
|
def2fac74d | ||
|
|
180f980c6f | ||
|
|
6930856fb5 | ||
|
|
e8407a3674 | ||
|
|
90c1747663 | ||
|
|
ba3886f25f | ||
|
|
476ad72f51 | ||
|
|
de51e692b8 | ||
|
|
d40a6fcde2 | ||
|
|
9eb5b31ed5 | ||
|
|
84edb83dfa | ||
|
|
1de8e0e9fe | ||
|
|
6adb273c74 | ||
|
|
b01a8491b6 | ||
|
|
ce86cc3393 | ||
|
|
5f5a053b01 | ||
|
|
99e19edbb7 | ||
|
|
43ecc211cb | ||
|
|
72e839d856 | ||
|
|
1b5a2b7ea3 | ||
|
|
11887bca8d | ||
|
|
f8d29ce24d | ||
|
|
2df47182ef | ||
|
|
bb2d705a05 | ||
|
|
f2b88bf88e | ||
|
|
3be2757ba3 | ||
|
|
c8366e6677 | ||
|
|
ef3069feb3 | ||
|
|
c0a2df15f1 | ||
|
|
b1e0504d10 | ||
|
|
228c29e5a0 | ||
|
|
06c8267e65 | ||
|
|
9edb2f1c20 | ||
|
|
a2f4ab3883 | ||
|
|
7309c7ce8c | ||
|
|
e79496a0d6 | ||
|
|
cec58b768d | ||
|
|
06b399b2cd | ||
|
|
3b1268ad55 | ||
|
|
0f1a2a4d37 | ||
|
|
bdb5945cb5 | ||
|
|
9bb8488032 | ||
|
|
7cb9312adf | ||
|
|
2f35fcb3be | ||
|
|
e28a19755c | ||
|
|
f25b26b760 | ||
|
|
5328a91058 | ||
|
|
6ea705980e | ||
|
|
7ff99ea56c | ||
|
|
7f6da53b75 | ||
|
|
72238abd47 | ||
|
|
cdb4d9d295 | ||
|
|
381e5c32d5 | ||
|
|
1b2685c02c | ||
|
|
3e91241d63 | ||
|
|
d66dafe9a4 | ||
|
|
b5eaefbd0a | ||
|
|
17de4cb14a | ||
|
|
bad4daa889 | ||
|
|
19c746cf56 | ||
|
|
20f098f7a0 | ||
|
|
60380ae7dd | ||
|
|
3d56f58bc1 | ||
|
|
2a7521f621 | ||
|
|
149b88c653 | ||
|
|
726ce9aaa3 | ||
|
|
8d1b0a9802 | ||
|
|
66baa0e064 | ||
|
|
1a743dbd1f | ||
|
|
6e5ed77583 | ||
|
|
2a35cc4a12 | ||
|
|
a9b20914fb | ||
|
|
481adc5bd7 | ||
|
|
d4c239b3f8 | ||
|
|
493d34d199 | ||
|
|
b7f046ad39 | ||
|
|
34b5353516 | ||
|
|
35a98a2021 | ||
|
|
91797cf195 | ||
|
|
ce3c1923cf | ||
|
|
8a419438bb | ||
|
|
94fd6a5c0d | ||
|
|
1fcd4c23ea | ||
|
|
0dcc8c3162 | ||
|
|
645dd1519d | ||
|
|
0464355d06 | ||
|
|
2cb2eb3874 | ||
|
|
728c605eb0 | ||
|
|
0bce479a17 | ||
|
|
b1681df13b | ||
|
|
dda9b6da57 | ||
|
|
cd0c700cb9 | ||
|
|
b465dda09d | ||
|
|
424d81d7cd | ||
|
|
a8cff4534c | ||
|
|
db6f99011a | ||
|
|
feb92a5c84 | ||
|
|
baa1de10e1 | ||
|
|
5f0ba59c16 | ||
|
|
ca40a4e3a0 | ||
|
|
e9cada50e4 | ||
|
|
b8a3a3aeb7 | ||
|
|
ea6366db08 | ||
|
|
5f885b0af4 | ||
|
|
d677596188 | ||
|
|
9f92704eef | ||
|
|
cf2b3b74ab | ||
|
|
ee698425b6 | ||
|
|
74f2696d09 | ||
|
|
7c01dcbda0 | ||
|
|
930e24d1d2 | ||
|
|
ec2fc2174a | ||
|
|
7f34891b2b | ||
|
|
81296efe27 | ||
|
|
b193f85120 | ||
|
|
16c2acea02 | ||
|
|
1da14a9865 | ||
|
|
6e16569fa0 | ||
|
|
023f94455c | ||
|
|
2bc4d40a13 | ||
|
|
d7ca1335b0 | ||
|
|
424320b5be | ||
|
|
704e92c66e | ||
|
|
cf3be36b24 | ||
|
|
5ab085ddff | ||
|
|
5cb572f05d | ||
|
|
e77e2bbf99 | ||
|
|
b8471a6e6e | ||
|
|
2ea959cc5d | ||
|
|
53aef1b0d4 | ||
|
|
702aff8313 | ||
|
|
0460471ab8 | ||
|
|
4ba8f81982 | ||
|
|
8996129930 | ||
|
|
125ea1acf7 | ||
|
|
0c7718d5d9 | ||
|
|
05cb32e8d9 | ||
|
|
279012fcf2 | ||
|
|
fa04c65569 | ||
|
|
4c32ed5493 | ||
|
|
972134c15d | ||
|
|
4797d1c645 | ||
|
|
426b53116f | ||
|
|
38212a070b | ||
|
|
9f0d82ce7d | ||
|
|
d4718d5ae6 | ||
|
|
3b41b08853 | ||
|
|
dea90edd01 | ||
|
|
f01f34da21 | ||
|
|
63da23c01a | ||
|
|
ba9c78761f | ||
|
|
dc78aeffa5 | ||
|
|
4d4e53f759 | ||
|
|
6578aa208c | ||
|
|
934022fb72 | ||
|
|
55ec4b2972 | ||
|
|
9191be770e | ||
|
|
2206e9beaf | ||
|
|
c65b2a6e3b | ||
|
|
98202057de | ||
|
|
4a460d8511 | ||
|
|
672fbffbad | ||
|
|
8a562ab27d | ||
|
|
526c2c5a37 | ||
|
|
c7ad887cde | ||
|
|
a4e9e2a0a7 | ||
|
|
f0ccad4f52 | ||
|
|
c1097b5267 | ||
|
|
f1566d555d | ||
|
|
0051a8a573 | ||
|
|
f6a2e81782 | ||
|
|
d64aba08e1 | ||
|
|
ecdcffa563 | ||
|
|
025ea2c9e5 | ||
|
|
1f47562b7e | ||
|
|
d5ae18b3a4 | ||
|
|
0f62533660 | ||
|
|
59ee05dc77 | ||
|
|
d000946842 | ||
|
|
e3e45489aa | ||
|
|
b6fe19342a | ||
|
|
b38dc47bcd | ||
|
|
595eb081d4 | ||
|
|
754449dfb6 | ||
|
|
5e11ae032e | ||
|
|
c9ee985799 | ||
|
|
348eac8ad4 | ||
|
|
14c543156a | ||
|
|
ed804e6ad2 | ||
|
|
4dfeaf28a4 | ||
|
|
2295dc8b91 | ||
|
|
4bbdbadd32 | ||
|
|
96f7b0b469 | ||
|
|
1ab83f2b64 | ||
|
|
eeab24d38d | ||
|
|
843269ac7c | ||
|
|
479422d0f8 | ||
|
|
1d78344d09 | ||
|
|
747304510e | ||
|
|
40660ca838 | ||
|
|
ddfe97dea3 | ||
|
|
4933e236fb | ||
|
|
39947d141a | ||
|
|
ed93b8dce8 | ||
|
|
6bf0ddf8c1 | ||
|
|
6a72d3c5b9 | ||
|
|
f3897b58ec | ||
|
|
742110b039 | ||
|
|
4194dd7fc8 | ||
|
|
a07d4c6bb0 | ||
|
|
21567013dc | ||
|
|
5fae65ea0b | ||
|
|
6f5214764b | ||
|
|
3359cfaa0a | ||
|
|
a54ce97165 | ||
|
|
8fe26f9385 | ||
|
|
7390fe50e3 | ||
|
|
14e97fefb3 | ||
|
|
8e365b194d | ||
|
|
662479e312 | ||
|
|
1b88cd8ee6 | ||
|
|
8c56140009 | ||
|
|
6918b3201f | ||
|
|
c5456b64e2 | ||
|
|
7e5e84963a | ||
|
|
2e8724ee02 | ||
|
|
601328db2b | ||
|
|
98a9f0536d | ||
|
|
d10b3587e2 | ||
|
|
40eae210ca | ||
|
|
6c49cb29b6 | ||
|
|
e59c529443 | ||
|
|
d86b9e4ade | ||
|
|
871ad8a8c9 | ||
|
|
9d13061595 | ||
|
|
fd038ea4b1 | ||
|
|
4c5f2bdc03 | ||
|
|
c7f3776fdd | ||
|
|
15690037df | ||
|
|
78e08a93e1 | ||
|
|
cf00c445d1 | ||
|
|
95b87b6126 |
@@ -0,0 +1,2 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
@@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
.pswp img{max-width:none!important;-o-object-fit:contain!important;object-fit:contain!important}#home[data-v-3b55a765]{font-size:16px}div{background-position:50%;background-repeat:no-repeat;background-size:cover}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#title{margin-bottom:-10vh;position:relative;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}#title #title-text{font-size:46px}#title #title-sub{font-size:20px}#title #nav{position:absolute;bottom:15vh;width:100vw;font-family:Nunito,Roboto Light,Arial,sans-serif}#title #nav .nav-item{margin:5px;border-bottom:2px solid;color:hsla(0,0%,100%,.66)}#title #nav .nav-item.selected{color:#fff}#width-detector{max-width:1400px}#artwork-container{margin:auto;max-width:1400px}#artwork-container .artwork{display:inline-block;margin:2vh;border:none}#artwork-container .artwork .image{height:40vh;position:relative}#artwork-container .artwork .description{background:rgba(0,0,0,.51);color:#f5f5f5;padding:14px 0;position:absolute;bottom:0;width:100%}#artwork-container .artwork .description .time{font-size:12px}#home{margin:15vh 5vw 5vh 5vw;text-align:left}#footer{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clickable{cursor:pointer}
|
||||
|
Before Width: | Height: | Size: 6.6 MiB |
|
Before Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 955 KiB |
|
Before Width: | Height: | Size: 868 KiB |
|
Before Width: | Height: | Size: 4.4 MiB |
|
Before Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 4.2 MiB |
|
Before Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 313 KiB |
|
Before Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 334 KiB |
|
Before Width: | Height: | Size: 287 KiB |
|
Before Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 300 KiB |
|
Before Width: | Height: | Size: 658 KiB |
|
Before Width: | Height: | Size: 536 KiB |
|
Before Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 314 KiB |
@@ -1 +0,0 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>Loading...</title><link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css><link href="https://fonts.googleapis.com/css?family=Neucha&display=swap" rel=stylesheet><link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel=stylesheet><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css integrity="sha256-LWdHSKWG7zv3DTpee8YAgoTfkj3gNkfauF624h4P2Nw=" crossorigin=anonymous><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css integrity="sha256-Q9bBMw/rHRRag46GDWY84J3elDNc8JJjKXL9tIC4oe8=" crossorigin=anonymous><script src=https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.js integrity="sha256-AC9ChpELidrhGHX23ZU53vmRdz3FhKaN9E28+BbcWBw=" crossorigin=anonymous></script><script src=https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.js integrity="sha256-91Lzh0IJF7SzxZa01l+VErcZNJbeFFCUYDkmi47ZsN0=" crossorigin=anonymous></script><link href=/css/app.8051372c.css rel=preload as=style><link href=/js/app.b2c18eb8.js rel=preload as=script><link href=/js/chunk-vendors.6112ee01.js rel=preload as=script><link href=/css/app.8051372c.css rel=stylesheet></head><body style="margin: 0; background: #00000014;"><noscript><strong>We're sorry but charlie-gallery doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.6112ee01.js></script><script src=/js/app.b2c18eb8.js></script></body></html>
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "charlie-gallery",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/photoswipe": "^4.0.29",
|
||||
"core-js": "^3.4.3",
|
||||
"element-ui": "^2.13.0",
|
||||
"p-wait-for": "^3.1.0",
|
||||
"photoswipe": "^4.1.3",
|
||||
"vue": "^2.6.10",
|
||||
"vue-class-component": "^7.0.2",
|
||||
"vue-property-decorator": "^8.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^5.0.8",
|
||||
"@vue/cli-plugin-typescript": "^5.0.8",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^8.0.2",
|
||||
"typescript": "~3.5.3",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Loading...</title>
|
||||
|
||||
<!-- Element -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Neucha&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Photoswipe -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"
|
||||
integrity="sha256-LWdHSKWG7zv3DTpee8YAgoTfkj3gNkfauF624h4P2Nw=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css"
|
||||
integrity="sha256-Q9bBMw/rHRRag46GDWY84J3elDNc8JJjKXL9tIC4oe8=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.js"
|
||||
integrity="sha256-AC9ChpELidrhGHX23ZU53vmRdz3FhKaN9E28+BbcWBw=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.js"
|
||||
integrity="sha256-91Lzh0IJF7SzxZa01l+VErcZNJbeFFCUYDkmi47ZsN0=" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body style="margin: 0; background: #00000014;">
|
||||
<noscript>
|
||||
<strong>We're sorry but charlie-gallery doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,210 @@
|
||||
import {Component, Vue} from 'vue-property-decorator';
|
||||
|
||||
import config from '@/content/config.json';
|
||||
import Responsive from "@/responsive";
|
||||
import PhotoSwipper from "@/PhotoSwipper.vue";
|
||||
import Home from "@/content/Home.vue";
|
||||
|
||||
/**
|
||||
* Data class for artworks
|
||||
*/
|
||||
class Artwork
|
||||
{
|
||||
rawDate: string;
|
||||
title: string;
|
||||
description: string;
|
||||
|
||||
type: any;
|
||||
video: boolean;
|
||||
|
||||
url: string;
|
||||
imgThumb: string;
|
||||
|
||||
constructor(type: any, json: any)
|
||||
{
|
||||
// Check null case
|
||||
if (json.date == null) Error('Error: No date specified.');
|
||||
if (json.title == null) json.title = config.post.default_title;
|
||||
if (json.format == null) json.format = config.post.default_format;
|
||||
if (type.video == null) type.video = false;
|
||||
if (json.video == null) json.video = type.video;
|
||||
|
||||
// Check image null case
|
||||
let base;
|
||||
if (type.folder != null)
|
||||
{
|
||||
base = type.folder.toLowerCase() + '/' +
|
||||
json.date.split(' ').join('-') + '-' + json.title.split(' ')[0].toLowerCase() + '/';
|
||||
}
|
||||
else
|
||||
{
|
||||
base = type.type.toLowerCase() + '/' +
|
||||
json.date.split(' ').join('-') + '-' + json.title.split(' ')[0].toLowerCase() + '/';
|
||||
}
|
||||
|
||||
if (json.file == null) json.file = base + 'public.' + json.format;
|
||||
if (json.thumbnail == null) json.thumbnail = base + 'thumb.' + json.format;
|
||||
|
||||
// Check image loadability
|
||||
let thumb = this.getURL(json.thumbnail);
|
||||
let url = this.getURL(json.file);
|
||||
|
||||
// Youtube video thumbnail
|
||||
if (json.video && thumb == null && json.file.toLowerCase().includes('youtube'))
|
||||
{
|
||||
thumb = `https://img.youtube.com/vi/${getYoutubeVID(json.file)}/sddefault.jpg`;
|
||||
}
|
||||
|
||||
// Assign
|
||||
this.rawDate = json.date;
|
||||
this.title = json.title;
|
||||
this.description = json.description;
|
||||
|
||||
this.type = type;
|
||||
this.video = json.video;
|
||||
|
||||
this.url = json.video ? json.file : url;
|
||||
this.imgThumb = thumb;
|
||||
}
|
||||
|
||||
get date()
|
||||
{
|
||||
return new Date(this.rawDate);
|
||||
}
|
||||
|
||||
getURL(img: string)
|
||||
{
|
||||
if (img.toLowerCase().startsWith('http')) return img;
|
||||
try
|
||||
{
|
||||
return require('./assets/' + img);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Component({components: {PhotoSwipper, Home}})
|
||||
export default class App extends Vue
|
||||
{
|
||||
// Create variable from imported config
|
||||
config = config;
|
||||
|
||||
// Parsed artworks
|
||||
artworks: Artwork[] = [];
|
||||
|
||||
// Responsive view
|
||||
responsive = new Responsive(30, 2);
|
||||
|
||||
// Selected type
|
||||
selectedType = config.post.default_type;
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
mounted()
|
||||
{
|
||||
// Set title
|
||||
document.title = config.title.text;
|
||||
|
||||
// Parse artwork types
|
||||
config.types.forEach((type: any) =>
|
||||
{
|
||||
// Parse artworks
|
||||
type.posts.forEach((a: any) =>
|
||||
{
|
||||
this.artworks.push(new Artwork(type, a));
|
||||
})
|
||||
});
|
||||
|
||||
// Sort by date
|
||||
// this.artworks.sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||
|
||||
// Add home as a type
|
||||
if (this.config.types[0].type != 'Home')
|
||||
{
|
||||
this.config.types.unshift({type: 'Home', posts: []});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter out artworks of selected type
|
||||
*/
|
||||
get selectedArtworks()
|
||||
{
|
||||
return this.artworks.filter(a => a.type.type == this.selectedType);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update on resize
|
||||
*/
|
||||
created()
|
||||
{
|
||||
window.addEventListener("resize", () => this.$forceUpdate());
|
||||
}
|
||||
|
||||
/**
|
||||
* Style for title
|
||||
*/
|
||||
get titleStyle()
|
||||
{
|
||||
let dim = `rgba(0, 0, 0, ${config.title.dim / 100})`;
|
||||
let url = require('./assets/' + config.title.background);
|
||||
|
||||
return {
|
||||
'padding': (config.title.height / 2 - 5) + 'vh 0',
|
||||
'background-image': `linear-gradient(${dim}, ${dim}), url(${url})`,
|
||||
'color': config.title.text_color,
|
||||
'font-family': config.title.font
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Style for footer
|
||||
*/
|
||||
get footerStyle()
|
||||
{
|
||||
return {
|
||||
height: config.footer.height + 'vh',
|
||||
background: config.footer.background
|
||||
}
|
||||
}
|
||||
|
||||
swipeItems()
|
||||
{
|
||||
return this.selectedArtworks.map(a =>
|
||||
{
|
||||
return {
|
||||
src: a.url,
|
||||
alt: a.title,
|
||||
title: a.description ? a.title + ': ' + a.description : a.title
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onImageClick(artwork: Artwork, index: number)
|
||||
{
|
||||
if (artwork.video) open(artwork.url, '_blank');
|
||||
|
||||
// @ts-ignore
|
||||
else this.$refs.ps.show(this.swipeItems(), {index: index});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get VID from youtube url
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
function getYoutubeVID(url: string)
|
||||
{
|
||||
let video_id = url.split('v=')[1];
|
||||
let ampersandPosition = video_id.indexOf('&');
|
||||
if(ampersandPosition != -1)
|
||||
{
|
||||
video_id = video_id.substring(0, ampersandPosition);
|
||||
}
|
||||
return video_id;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="title" class="no-select" :style="titleStyle">
|
||||
<div id="title-text">{{config.title.text}}</div>
|
||||
<div id="title-sub">{{config.title.sub}}</div>
|
||||
|
||||
<div id="nav">
|
||||
<span v-for="type in config.types" class="nav-item clickable"
|
||||
:class="{selected: type.type === selectedType}"
|
||||
@click="selectedType = type.type">{{type.type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="width-detector" ref="widthDetect"></div>
|
||||
|
||||
<div id="artwork-container" v-if="selectedType !== 'Home'">
|
||||
<el-card class="artwork clickable" :body-style="{padding: '0px',
|
||||
width: responsive.getBlockWidth($refs.widthDetect.clientWidth).toFixed(0) + 'px'}"
|
||||
v-for="(artwork, i) in selectedArtworks" :key="artwork.date + artwork.title">
|
||||
<div class="image" :style="{'background-image': `url(${artwork.imgThumb})`}"
|
||||
@click="onImageClick(artwork, i)">
|
||||
<div class="description">
|
||||
<div class="title">{{artwork.title}}</div>
|
||||
<div class="time">{{artwork.rawDate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<photo-swipper ref="ps"/>
|
||||
|
||||
<home id="home" v-if="selectedType === 'Home'"/>
|
||||
|
||||
<div id="footer" :style="footerStyle">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./App.ts"/>
|
||||
|
||||
<style lang="scss">
|
||||
// Global div property
|
||||
div
|
||||
{
|
||||
// Center and scale the image nicely
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#app
|
||||
{
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#title
|
||||
{
|
||||
// Alignment
|
||||
margin-bottom: -10vh;
|
||||
position: relative;
|
||||
|
||||
// Shadow
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
|
||||
#title-text
|
||||
{
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
#title-sub
|
||||
{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#nav
|
||||
{
|
||||
// Alignment
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
width: 100vw;
|
||||
|
||||
// Font
|
||||
font-family: 'Nunito', "Roboto Light", Arial, sans-serif;
|
||||
|
||||
.nav-item
|
||||
{
|
||||
margin: 5px;
|
||||
|
||||
// Bottom line
|
||||
border-bottom: 2px solid;
|
||||
|
||||
// Emphasize
|
||||
color: #ffffffa8;
|
||||
}
|
||||
|
||||
.nav-item.selected
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#width-detector
|
||||
{
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
#artwork-container
|
||||
{
|
||||
// Center
|
||||
margin: auto;
|
||||
max-width: 1400px;
|
||||
|
||||
.artwork
|
||||
{
|
||||
display: inline-block;
|
||||
margin: 2vh;
|
||||
border: none;
|
||||
|
||||
.image
|
||||
{
|
||||
height: 40vh;
|
||||
// width: 30vh; dynamically updated
|
||||
|
||||
// Alignment for description
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.description
|
||||
{
|
||||
// Color
|
||||
background: #00000082;
|
||||
color: whitesmoke;
|
||||
|
||||
// Alignment - Bottom align
|
||||
padding: 14px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.time
|
||||
{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#home
|
||||
{
|
||||
margin: 15vh 5vw 5vh 5vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#footer
|
||||
{
|
||||
// Shadow
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.no-select
|
||||
{
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
user-select: none; /* Standard */
|
||||
}
|
||||
|
||||
.clickable
|
||||
{
|
||||
// Clickable
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div id="photoswipper" class="pswp" tabindex="-1" role="dialog" aria-hidden="true" ref="pswp">
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
<div class="pswp__counter"></div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"/>
|
||||
<button class="pswp__button pswp__button--share" title="Share"/>
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"/>
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"/>
|
||||
|
||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"/>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"/>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Prop, Vue} from "vue-property-decorator";
|
||||
import PhotoSwipe from 'photoswipe';
|
||||
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
|
||||
|
||||
@Component
|
||||
export default class PhotoSwipper extends Vue
|
||||
{
|
||||
ps: PhotoSwipe<any>;
|
||||
|
||||
show(items: any[], options: any)
|
||||
{
|
||||
this.update(items);
|
||||
this.ps = new PhotoSwipe(this.$refs.pswp as any, PhotoSwipeUI_Default, items, options);
|
||||
this.ps.init();
|
||||
|
||||
window.addEventListener("resize", () => this.update(this.ps.items));
|
||||
}
|
||||
|
||||
update(items: PhotoSwipe.Item[])
|
||||
{
|
||||
// Update inner width and inner height
|
||||
items.forEach(item =>
|
||||
{
|
||||
item.w = window.innerWidth;
|
||||
item.h = window.innerHeight;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pswp img
|
||||
{
|
||||
max-width: none !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 9.6 MiB After Width: | Height: | Size: 9.6 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 9.7 MiB After Width: | Height: | Size: 9.7 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 524 KiB After Width: | Height: | Size: 524 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 5.2 MiB After Width: | Height: | Size: 5.2 MiB |
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 678 KiB |
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 7.7 MiB After Width: | Height: | Size: 7.7 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 10 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 4.9 MiB After Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 747 KiB After Width: | Height: | Size: 747 KiB |
|
Before Width: | Height: | Size: 6.3 MiB After Width: | Height: | Size: 6.3 MiB |
|
Before Width: | Height: | Size: 851 KiB After Width: | Height: | Size: 851 KiB |
|
Before Width: | Height: | Size: 8.2 MiB After Width: | Height: | Size: 8.2 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 7.4 MiB After Width: | Height: | Size: 7.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 9.6 MiB After Width: | Height: | Size: 9.6 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 3.7 MiB After Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 548 KiB After Width: | Height: | Size: 548 KiB |
|
Before Width: | Height: | Size: 8.6 MiB After Width: | Height: | Size: 8.6 MiB |
|
Before Width: | Height: | Size: 1012 KiB After Width: | Height: | Size: 1012 KiB |
|
After Width: | Height: | Size: 8.3 MiB |
|
After Width: | Height: | Size: 666 KiB |
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 9.1 MiB |
|
After Width: | Height: | Size: 1000 KiB |
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 386 KiB After Width: | Height: | Size: 386 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 308 KiB After Width: | Height: | Size: 308 KiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 324 KiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 494 KiB After Width: | Height: | Size: 494 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 373 KiB |
|
Before Width: | Height: | Size: 9.4 MiB After Width: | Height: | Size: 9.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 8.9 MiB After Width: | Height: | Size: 8.9 MiB |
|
Before Width: | Height: | Size: 933 KiB After Width: | Height: | Size: 933 KiB |
|
Before Width: | Height: | Size: 8.5 MiB After Width: | Height: | Size: 8.5 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 5.5 MiB After Width: | Height: | Size: 5.5 MiB |
|
Before Width: | Height: | Size: 558 KiB After Width: | Height: | Size: 558 KiB |
|
Before Width: | Height: | Size: 3.8 MiB After Width: | Height: | Size: 3.8 MiB |
|
Before Width: | Height: | Size: 484 KiB After Width: | Height: | Size: 484 KiB |
|
Before Width: | Height: | Size: 4.7 MiB After Width: | Height: | Size: 4.7 MiB |
|
Before Width: | Height: | Size: 516 KiB After Width: | Height: | Size: 516 KiB |