arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use <img> for the main photo #361 #185

Browse Source 
- Let the browser decide which photo to load
- Removed photo.getSize
- Automacialy center photos, without adding extra css from small images
This commit is contained in:
Tobias Reich 2016-01-05 11:58:03 +01:00
parent e6059dbd32
commit 51d237dcd2
5 changed files with 37 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/scripts/build.js
View File

@ -113,24 +113,18 @@ build.photo = function(data) {
} }
build.imageview = function(data, size, visibleControls) { build.imageview = function(data, visibleControls) {
let html = '' let html = '',
hasMedium = data.medium!==''
if (size==='big') { if (hasMedium===false) {
if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.url })'></div>` html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }'></div></div>`
else html += lychee.html`<div id='image' style='background-image: url($${ data.url });' class='full'></div>`
} else if (size==='medium') { } else {
if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.medium })'></div>` html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }' srcset='$${ data.medium } 1920w, $${ data.url } $${ data.width }w'></div></div>`
else html += lychee.html`<div id='image' style='background-image: url($${ data.medium });' class='full'></div>`
} else if (size==='small') {
if (visibleControls===true) html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2-20) }px; margin-left: -$${ data.width/2 }px;'></div>`
else html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2) }px; margin-left: -$${ data.width/2 }px;'></div>`
} }

12
src/scripts/header.js
View File

@ -67,17 +67,11 @@ header.bind = function() {
header.show = function() { header.show = function() {
let newMargin = (-1 * ($('#imageview #image').height()/2) + 20)
clearTimeout($(window).data('timeout')) clearTimeout($(window).data('timeout'))
lychee.imageview.removeClass('full') lychee.imageview.removeClass('full')
header.dom().removeClass('header--hidden') header.dom().removeClass('header--hidden')
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
else $('#imageview #image').removeClass('full')
return true return true
} }
@ -90,15 +84,9 @@ header.hide = function(e, delay = 500) {
$(window).data('timeout', setTimeout(function() { $(window).data('timeout', setTimeout(function() {
let newMargin = (-1 * ($('#imageview #image').height()/2))
lychee.imageview.addClass('full') lychee.imageview.addClass('full')
header.dom().addClass('header--hidden') header.dom().addClass('header--hidden')
// Adjust position or size of photo
if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
else $('#imageview #image').addClass('full')
}, delay)) }, delay))
return true return true

36
src/scripts/photo.js
View File

@ -625,42 +625,6 @@ photo.share = function(photoID, service) {
} }
photo.getSize = function() {
// Size can be 'big', 'medium' or 'small'
// Default is big
// Small is centered in the middle of the screen
let size = 'big',
scaled = false,
hasMedium = photo.json.medium!=='',
pixelRatio = window.devicePixelRatio,
view = {
width : $(window).width() - 60,
height : $(window).height() - 100
}
// Detect if the photo will be shown scaled,
// because the screen size is smaller than the photo
if (photo.json.width>view.width || photo.json.height>view.height) scaled = true
// Calculate pixel ratio of screen
if (pixelRatio!=null && pixelRatio>1) {
view.width = view.width * pixelRatio
view.height = view.height * pixelRatio
}
// Medium available and
// Medium still bigger than screen
if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
// Photo not scaled
// Photo smaller then screen
if (scaled===false && (photo.json.width<view.width&& photo.json.width<view.height)) size = 'small'
return size
}
photo.getArchive = function(photoID) { photo.getArchive = function(photoID) {
let link, let link,

40
src/scripts/view/main.js
View File

@ -97,42 +97,6 @@ $(document).ready(function() {
}) })
const getPhotoSize = function(photo) {
// Size can be 'big', 'medium' or 'small'
// Default is big
// Small is centered in the middle of the screen
let size = 'big',
scaled = false,
hasMedium = photo.medium!=='',
pixelRatio = window.devicePixelRatio,
view = {
width : $(window).width() - 60,
height : $(window).height() - 100
}
// Detect if the photo will be shown scaled,
// because the screen size is smaller than the photo
if (photo.width>view.width || photo.height>view.height) scaled = true
// Calculate pixel ratio of screen
if (pixelRatio!=null && pixelRatio>1) {
view.width = view.width * pixelRatio
view.height = view.height * pixelRatio
}
// Medium available and
// Medium still bigger than screen
if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
// Photo not scaled
// Photo smaller then screen
if (scaled===false && (photo.width<view.width&& photo.width<view.height)) size = 'small'
return size
}
const loadPhotoInfo = function(photoID) { const loadPhotoInfo = function(photoID) {
let params = { let params = {
@ -157,10 +121,8 @@ const loadPhotoInfo = function(photoID) {
document.title = 'Lychee - ' + data.title document.title = 'Lychee - ' + data.title
header.dom('.header__title').html(lychee.escapeHTML(data.title)) header.dom('.header__title').html(lychee.escapeHTML(data.title))
let size = getPhotoSize(data)
// Render HTML // Render HTML
imageview.html(build.imageview(data, size, true)) imageview.html(build.imageview(data, true))
imageview.find('.arrow_wrapper').remove() imageview.find('.arrow_wrapper').remove()
imageview.addClass('fadeIn').show() imageview.addClass('fadeIn').show()

49
src/styles/_imageview.scss
View File

@ -17,34 +17,43 @@
// ImageView -------------------------------------------------------------- // // ImageView -------------------------------------------------------------- //
#image { #image {
position: absolute; position: absolute;
top: 60px; top: 30px;
right: 30px; right: 0;
bottom: 30px; bottom: 0;
left: 30px; left: 0;
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce; transition: top .3s;
will-change: transform; will-change: transform;
background-repeat: no-repeat; display: flex;
background-position: 50% 50%; justify-content: center;
background-size: contain; align-items: center;
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: $timingBounce; animation-timing-function: $timingBounce;
}
&.small { &.full #image {
top: 50%; top: 0;
right: auto; }
bottom: auto;
left: 50%;
}
&.full { #image > div {
top: 0; width: 0;
right: 0; height: 0;
bottom: 0; }
left: 0;
} #image img {
max-width: calc(100vw - 60px);
max-height: calc(100vh - 90px);
width: auto;
height: auto;
transform: translate(-50%, -50%);
transition: max-width .3s, max-height .3s;
}
&.full #image img {
max-width: 100vw;
max-height: 100vh;
} }
// Previous/Next Buttons -------------------------------------------------------------- // // Previous/Next Buttons -------------------------------------------------------------- //