franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better handling of # variables + bump simplebar to v5.2.1

Browse Source
This commit is contained in:
Franzz
2020-08-16 10:34:49 +02:00
parent 354f824588
commit 75d64ed911
10 changed files with 117 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
script/lightbox.js
View File

@@ -123,7 +123,7 @@
this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav');
//ADDED-START
if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" controls autoplay></video>');
@@ -136,7 +136,7 @@
};
}
//ADDED-END
// Store css values for future lookup
this.containerPadding = {
top: parseInt(this.$container.css('padding-top'), 10),
@@ -232,23 +232,23 @@
$window.on('resize', $.proxy(this.sizeOverlay, this));
this.sizeOverlay();
//ADDED-START
this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex];
if(!asImg.video) {
if(!asImg.type != 'video') {
asTransform = this.$image.css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var fOldZoom = parseFloat(asTransform[0] || 1);
var fOldTranslateX = parseFloat(asTransform[4] || 0);
var fOldTranslateY = parseFloat(asTransform[5] || 0);
var fOldZoom = parseFloat(asTransform[0] || 1);
var fNewZoom = Math.min(Math.max(fOldZoom + e.deltaY / 10, 1), Math.max(asImg.width/this.$image.width(), asImg.height/this.$image.height()));
var fTransX = fOldTranslateX + (fNewZoom - fOldZoom) * (this.$image.width()/2 - e.offsetX);
var fTransY = fOldTranslateY + (fNewZoom - fOldZoom) * (this.$image.height()/2 - e.offsetY);
var fTransMaxX = (fNewZoom - 1) * this.$image.width() / 2;
var fTransMaxY = (fNewZoom - 1) * this.$image.height() / 2;
fTransX = Math.max(Math.min(fTransX, fTransMaxX), fTransMaxX * -1);
fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
@@ -269,7 +269,8 @@
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, video: (self.options.hasVideo && typeof $link.attr('data-video') !== 'undefined' && $link.attr('data-video') === 'true')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
//ADDED-END
});
}
@@ -311,7 +312,7 @@
left: left + 'px'
})*/.fadeIn(this.options.fadeDuration);
//ADDED-END
// Disable scrolling of the page while open
if (this.options.disableScrolling) {
$('body').addClass('lb-disable-scrolling');
@@ -339,9 +340,9 @@
this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
//ADDED-END
this.$outerContainer.addClass('animating');
//ADDED-START
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
@@ -349,36 +350,38 @@
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth;
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right;
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop;
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height();
var iImageRatio = iMediaWidth / iMediaHeight;
//Case horizontal
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
//Case vertical
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
else iMaxMediaWidth -= iDataMaxWidth;
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
};
updateHash('media', self.album[imageNumber].id);
if(self.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
if(self.album[imageNumber].video) {
if(self.album[imageNumber].type == 'video') {
this.$video.on('loadedmetadata', function(){
var $This = $(this);
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video');
maxVideoWidth = oMaxSizes.maxWidth;
maxVideoHeight = oMaxSizes.maxHeight;
@@ -394,7 +397,7 @@
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
}
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
//option than we need to size down while maintaining the aspect ratio.
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
@@ -412,14 +415,14 @@
}
$This.width(videoWidth);
$This.height(videoHeight);
self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata');
});
this.currentImageIndex = imageNumber;
this.$video.attr('src', self.album[imageNumber].link);
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
return;
}
@@ -447,7 +450,7 @@
});
$preloader = $(preloader);
//ADDED-START
if(Math.abs(self.album[imageNumber].orientation) == 90) {
var sWidth = preloader.width;
@@ -473,7 +476,7 @@
maxImageHeight = oMaxSizes.maxHeight;
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
//ADDED-END
/*
SVGs that don't have width and height attributes specified are reporting width and height
values of 0 in Firefox 47 and IE11 on Windows. To fix, we set the width and height to the max
@@ -534,7 +537,7 @@
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function(e) {
var self = this;
/*
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
@@ -556,7 +559,7 @@
}
//ADDED-END
};
// Animate the size of the lightbox to fit the image we are showing
// This method also shows the the image.
//ADDED-START
@@ -575,7 +578,7 @@
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + mediaBorderWidth.left + mediaBorderWidth.right;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + mediaBorderWidth.top + mediaBorderWidth.bottom;
//ADDED-END
function postResize() {
//ADDED-START
//self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -606,13 +609,13 @@
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
//ADDED-START
//this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].video) this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].type == 'video') this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
//ADDED-END
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
@@ -743,17 +746,18 @@
// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
//ADDED-START
if(this.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
this.$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
flushHash();
//ADDED-END
$(window).off('resize', this.sizeOverlay);
this.$nav.off('mousewheel');
this.$lightbox.fadeOut(this.options.fadeDuration);