[www] Gallery page updated

src/core/Album.js

@@ -4,6 +4,7 @@ const ImageArtifactType = require('./ImageArtifactType')
 const {find, findOne} = require('../lib/store')
 
 const previewTypes = [
+	ImageArtifactType.SMALL,
 	ImageArtifactType.MEDIUM,
 	ImageArtifactType.BIG,
 	ImageArtifactType.ORIGIN,
@@ -31,14 +32,26 @@ const previewFromImage = (imgs = []) => imgs.length
 	: null
 
 const processAlbum = async album => {
+	let preview = {}
+    // {
+    // 	data: [
+    // 		{
+    // 			url: null,
+    // 			width: 0,
+    // 			height: 0,
+    // 		}
+    // 	]
+    // }
+
 	const previewImageId = album.preview ? album.preview : previewFromImage(album.images)
-	let preview
 	if (previewImageId) {
 		const image = await Image.findById(previewImageId)
-		preview = image.findArtifact(previewTypes)
-	} else {
-		preview = {
-			url: null,
+		if (image) {
+            // const imageArtifacts = image.findArtifact(previewTypes)
+            // if (imageArtifacts) {
+            // 	preview = imageArtifacts
+            // }
+			preview = image.getPicture(ImageArtifactType.SMALL)
 		}
 	}
 

src/core/Image.js

@@ -1,4 +1,5 @@
 const Data = require('./Data')
+const ImageArtifactType = require('./ImageArtifactType')
 const {findOne} = require('../lib/store')
 const {mapOf} = require('../lib/common')
 
@@ -32,6 +33,26 @@ class Image {
 
 		return null
 	}
+
+	getPicture(size) {
+		const retinaSize = ImageArtifactType.retina(size)
+
+		const a = this.getArtifact(size)
+		const a2 = this.getArtifact(retinaSize)
+		const pic = {
+			src: a.url,
+			width: a.width,
+			height: a.height,
+			set: [
+				{
+					url: a2.url,
+					density: ImageArtifactType.RETINA_DENSITY,
+				}
+			]
+		}
+		console.log(pic)
+		return pic
+	}
 }
 
 class ImageArtifact {

src/core/ImageArtifactType.js

@@ -1,11 +1,15 @@
-class ImageArtifact {
+class ImageArtifactType {
 	constructor() {
-		throw new Error('Cannot create instance of ImageArtifact')
+		throw new Error('Cannot create instance of ImageArtifactType')
 	}
 }
 
-ImageArtifact.MEDIUM = 'medium'
-ImageArtifact.BIG = 'big'
-ImageArtifact.ORIGIN = 'origin'
+ImageArtifactType.SMALL = 'small'
+ImageArtifactType.MEDIUM = 'medium'
+ImageArtifactType.BIG = 'big'
+ImageArtifactType.ORIGIN = 'origin'
 
-module.exports = ImageArtifact
+ImageArtifactType.RETINA_DENSITY = 2
+ImageArtifactType.retina = type => `${type}@${ImageArtifactType.RETINA_DENSITY}`
+
+module.exports = ImageArtifactType

src/routes/gallery.js

@@ -6,10 +6,6 @@ const {splitBy} = require('../lib/array')
 const getPathWithNoTrailingSlash = require('../lib/url').getPathWithNoTrailingSlash
 const {get} = require('koa-route')
 
-const previewUrl = preview => preview
-	? preview.url
-	: null
-
 function getMeta() {
 	return {
 		title: 'Галерея',
@@ -17,11 +13,30 @@ function getMeta() {
 	}
 }
 
+// {data.set.map((s, i) => (
+// 	<source
+// 		key={i}
+// 		src={i}
+// 	/>
+// ))}
+// const m = 0.5
+const m = 1
+const AlbumImage = ({data, alt}) => (
+	<picture>
+		<img
+			alt={alt}
+			src={data.src}
+			width={data.width * m}
+			height={data.height * m}
+			srcSet={data.set.map(({url, density}) => `${url} ${density}x`)}
+		/>
+	</picture>
+)
+
 const GItem = ({album}) => (
 	<div className="gallery-item">
-		<a href={album.url}>
-			<h2>{album.title}</h2>
-			<img src={previewUrl(album.preview)} alt={album.title}/>
+		<a className="invisible" href={album.url}>
+			<AlbumImage data={album.preview} alt={album.title}/>
 		</a>
 	</div>
 )

src/style/components/album-collection.scss

@@ -5,8 +5,8 @@
     display: flex;
     flex-wrap: wrap;
     position: relative;
-    justify-content: center;
-    align-items:flex-start;
+    justify-content: flex-start;
+    align-items:center;
 
     margin: 0 0 $double-margin;
   }

src/style/components/gallery-item.scss

@@ -8,27 +8,11 @@ $percentage: 25%;
   box-sizing: padding-box;
   padding: 0;
 
-  width: 13em;
-  height: 15em;
   margin: 0 $single-margin $double-margin;
-  overflow: hidden;
 
-  h3 {
-    text-align: center;
-  }
-
-  a {
-    color: $dark-color;
+  a.invisible {
     border-bottom: none;
-
-    &:hover {
-      border-bottom: none;
-      color: $blue-color;
-    }
-  }
-
-  img {
-    width: 100%;
+    text-decoration: none;
   }
 }