From 20e0fafa2ab7fabf8642031b3de38c2b0b7811d0 Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 16:21:47 +0200 Subject: [PATCH 1/6] Replace var with const / let to restrict scope --- src/pig.js | 60 +++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/pig.js b/src/pig.js index 3a04596..9a20fe7 100644 --- a/src/pig.js +++ b/src/pig.js @@ -8,9 +8,9 @@ * optimizedResize is adapted from Mozilla code: * https://developer.mozilla.org/en-US/docs/Web/Events/resize */ - var optimizedResize = (function() { - var callbacks = []; - var running = false; + const optimizedResize = (function() { + const callbacks = []; + let running = false; // fired on resize event function resize() { @@ -72,7 +72,7 @@ */ function _injectStyle(containerId, classPrefix, transitionSpeed) { - var css = ( + const css = ( '#' + containerId + ' {' + ' position: relative;' + '}' + @@ -106,8 +106,8 @@ '}' ); - var head = document.head || document.getElementsByTagName("head")[0]; - var style = document.createElement("style"); + const head = document.head || document.getElementsByTagName('head')[0]; + const style = document.createElement('style'); style.type = "text/css"; if (style.styleSheet) { @@ -127,7 +127,7 @@ * @param {object} obj2 - The overrides to apply onto obj1. */ function _extend(obj1, obj2) { - for (var i in obj2) { + for (const i in obj2) { if (obj2.hasOwnProperty(i)) { obj1[i] = obj2[i]; } @@ -142,7 +142,7 @@ * @param {object} elem - The element to compute the offset of. **/ function _getOffsetTop(elem){ - var offsetTop = 0; + let offsetTop = 0; do { if (!isNaN(elem.offsetTop)){ offsetTop += elem.offsetTop; @@ -362,7 +362,7 @@ * have been completed. */ Pig.prototype._getTransitionTimeout = function() { - var transitionTimeoutScaleFactor = 1.5; + const transitionTimeoutScaleFactor = 1.5; return this.settings.transitionSpeed * transitionTimeoutScaleFactor; }; @@ -387,7 +387,7 @@ * or not the value of this.minAspectRatio has changed. */ Pig.prototype._recomputeMinAspectRatio = function() { - var oldMinAspectRatio = this.minAspectRatio; + const oldMinAspectRatio = this.minAspectRatio; this.minAspectRatio = this.settings.getMinAspectRatio(this.lastWindowWidth); if (oldMinAspectRatio !== null && oldMinAspectRatio !== this.minAspectRatio) @@ -409,10 +409,10 @@ * instances that we created. */ Pig.prototype._parseImageData = function(imageData) { - var progressiveImages = []; + const progressiveImages = []; imageData.forEach(function(image, index) { - var progressiveImage = new ProgressiveImage(image, index, this); + const progressiveImage = new ProgressiveImage(image, index, this); progressiveImages.push(progressiveImage); }.bind(this)); @@ -436,13 +436,13 @@ */ Pig.prototype._computeLayout = function() { // Constants - var wrapperWidth = parseInt(this.container.clientWidth); + const wrapperWidth = parseInt(this.container.clientWidth, 10); // State - var row = []; // The list of images in the current row. - var translateX = 0; // The current translateX value that we are at - var translateY = 0; // The current translateY value that we are at - var rowAspectRatio = 0; // The aspect ratio of the row we are building + let row = []; // The list of images in the current row. + let translateX = 0; // The current translateX value that we are at + let translateY = 0; // The current translateY value that we are at + let rowAspectRatio = 0; // The aspect ratio of the row we are building // Compute the minimum aspect ratio that should be applied to the rows. this._recomputeMinAspectRatio(); @@ -463,7 +463,7 @@ } // Get the valid-CSS transition string. - var transition = this._getTransitionString(); + const transition = this._getTransitionString(); // Loop through all our images, building them up into rows and computing // the working rowAspectRatio. @@ -481,8 +481,8 @@ rowAspectRatio = Math.max(rowAspectRatio, this.minAspectRatio); // Compute this row's height. - var totalDesiredWidthOfImages = wrapperWidth - this.settings.spaceBetweenImages * (row.length - 1); - var rowHeight = totalDesiredWidthOfImages / rowAspectRatio; + const totalDesiredWidthOfImages = wrapperWidth - this.settings.spaceBetweenImages * (row.length - 1); + const rowHeight = totalDesiredWidthOfImages / rowAspectRatio; // For each image in the row, compute the width, height, translateX, // and translateY values, and set them (and the transition value we @@ -493,7 +493,7 @@ // will be updated in _doLayout. row.forEach(function(img) { - var imageWidth = rowHeight * img.aspectRatio; + const imageWidth = rowHeight * img.aspectRatio; // This is NOT DOM manipulation. img.style = { @@ -591,26 +591,26 @@ this.container.style.height = this.totalHeight + 'px'; // Get the top and bottom buffers heights. - var bufferTop = + const bufferTop = (this.scrollDirection === 'up') ? this.settings.primaryImageBufferHeight : this.settings.secondaryImageBufferHeight; - var bufferBottom = + const bufferBottom = (this.scrollDirection === 'down') ? this.settings.secondaryImageBufferHeight : this.settings.primaryImageBufferHeight; // Now we compute the location of the top and bottom buffers: - var containerOffset = _getOffsetTop(this.container); - var scrollerHeight = this.scroller === window ? window.innerHeight : this.scroller.offsetHeight; + const containerOffset = _getOffsetTop(this.container); + const scrollerHeight = this.scroller === window ? window.innerHeight : this.scroller.offsetHeight; // This is the top of the top buffer. If the bottom of an image is above // this line, it will be removed. - var minTranslateYPlusHeight = this.latestYOffset - containerOffset - bufferTop; + const minTranslateYPlusHeight = this.latestYOffset - containerOffset - bufferTop; // This is the bottom of the bottom buffer. If the top of an image is // below this line, it will be removed. - var maxTranslateY = this.latestYOffset - containerOffset + scrollerHeight + bufferBottom; + const maxTranslateY = this.latestYOffset - containerOffset + scrollerHeight + bufferBottom; // Here, we loop over every image, determine if it is inside our buffers or // no, and either insert it or remove it appropriately. @@ -633,7 +633,7 @@ * @returns {function} Our optimized onScroll handler. */ Pig.prototype._getOnScroll = function() { - var _this = this; + const _this = this; /** * This function is called on scroll. It computes variables about the page @@ -646,10 +646,10 @@ * * @returns {function} The onScroll handler that we should attach. */ - var onScroll = function() { + const onScroll = function() { // Compute the scroll direction using the latestYOffset and the // previousYOffset - var newYOffset = _this.scroller === window ? window.pageYOffset : _this.scroller.scrollTop; + const newYOffset = _this.scroller === window ? window.pageYOffset : _this.scroller.scrollTop; _this.previousYOffset = _this.latestYOffset || newYOffset; _this.latestYOffset = newYOffset; _this.scrollDirection = (_this.latestYOffset > _this.previousYOffset) ? 'down' : 'up'; From 5e6c06508efe32a2cb4405ea569ebfbd682c3caa Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 16:23:19 +0200 Subject: [PATCH 2/6] Add missing comments --- src/pig.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pig.js b/src/pig.js index 9a20fe7..4269e09 100644 --- a/src/pig.js +++ b/src/pig.js @@ -66,9 +66,10 @@ /** * Inject CSS needed to make the grid work in the . * + * @param {string} containerId - ID of the container for the images. * @param {string} classPrefix - the prefix associated with this library that * should be prepended to classnames. - * @param {string} containerId - ID of the container for the images. + * @param {number} transitionSpeed - animation duration in milliseconds */ function _injectStyle(containerId, classPrefix, transitionSpeed) { @@ -111,6 +112,7 @@ style.type = "text/css"; if (style.styleSheet) { + // set style for IE8 and below style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); @@ -140,7 +142,8 @@ * the top of the page. * * @param {object} elem - The element to compute the offset of. - **/ + * @returns {number} - distance of `elem` to the top of the page + */ function _getOffsetTop(elem){ let offsetTop = 0; do { @@ -277,7 +280,7 @@ * Get a callback with the filename of the image * which was clicked. * - * @param {string} filename - The filename of the image. + * @param {string} filename - The filename property of the image. */ onClickHandler: function(filename) { }, @@ -630,7 +633,7 @@ /** * Create our onScroll handler and return it. * - * @returns {function} Our optimized onScroll handler. + * @returns {function} Our optimized onScroll handler that we should attach to. */ Pig.prototype._getOnScroll = function() { const _this = this; @@ -643,8 +646,6 @@ * We use the boolean variable _this.inRAF to ensure that we don't overload * the number of layouts we perform by starting another layout while we are * in the middle of doing one. - * - * @returns {function} The onScroll handler that we should attach. */ const onScroll = function() { // Compute the scroll direction using the latestYOffset and the @@ -732,6 +733,10 @@ * @param {string} singleImageData[0].filename - The filename of the image. * @param {string} singleImageData[0].aspectRatio - The aspect ratio of the * image. + * @param {number} index - Index of the image in the list of images + * @param {object} pig - The Pig instance + * + * @returns {object} The Pig instance, for easy chaining with the constructor. */ function ProgressiveImage(singleImageData, index, pig) { From 240a8ac329936a54a371ad31e02f4b89b8293b95 Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 17:24:44 +0200 Subject: [PATCH 3/6] Harmonize style consistent (single) quotes consistent indentation consistent curly brackets no dangling commas --- src/pig.js | 47 +++++++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/src/pig.js b/src/pig.js index 4269e09..7d1fba1 100644 --- a/src/pig.js +++ b/src/pig.js @@ -59,7 +59,7 @@ */ reEnable: function() { window.addEventListener('resize', resize); - }, + } }; }()); @@ -110,7 +110,7 @@ const head = document.head || document.getElementsByTagName('head')[0]; const style = document.createElement('style'); - style.type = "text/css"; + style.type = 'text/css'; if (style.styleSheet) { // set style for IE8 and below style.styleSheet.cssText = css; @@ -146,13 +146,13 @@ */ function _getOffsetTop(elem){ let offsetTop = 0; - do { - if (!isNaN(elem.offsetTop)){ - offsetTop += elem.offsetTop; - } - elem = elem.offsetParent; - } while(elem); - return offsetTop; + do { + if (!isNaN(elem.offsetTop)){ + offsetTop += elem.offsetTop; + } + elem = elem.offsetParent; + } while(elem); + return offsetTop; } /** @@ -300,12 +300,13 @@ * @returns {Number} The minimum aspect ratio at this window width. */ getMinAspectRatio: function(lastWindowWidth) { - if (lastWindowWidth <= 640) + if (lastWindowWidth <= 640) { return 2; - else if (lastWindowWidth <= 1280) + } else if (lastWindowWidth <= 1280) { return 4; - else if (lastWindowWidth <= 1920) + } else if (lastWindowWidth <= 1920) { return 5; + } return 6; }, @@ -321,10 +322,11 @@ * @returns {Number} The size (height in pixels) of the images to load. */ getImageSize: function(lastWindowWidth) { - if (lastWindowWidth <= 640) + if (lastWindowWidth <= 640) { return 100; - else if (lastWindowWidth <= 1920) + } else if (lastWindowWidth <= 1920) { return 250; + } return 500; } }; @@ -393,10 +395,11 @@ const oldMinAspectRatio = this.minAspectRatio; this.minAspectRatio = this.settings.getMinAspectRatio(this.lastWindowWidth); - if (oldMinAspectRatio !== null && oldMinAspectRatio !== this.minAspectRatio) + if (oldMinAspectRatio !== null && oldMinAspectRatio !== this.minAspectRatio) { this.minAspectRatioRequiresTransition = true; - else + } else { this.minAspectRatioRequiresTransition = false; + } }; /** @@ -504,7 +507,7 @@ height: parseInt(rowHeight), translateX: translateX, translateY: translateY, - transition: transition, + transition: transition }; // The next image is this.settings.spaceBetweenImages pixels to the @@ -596,12 +599,12 @@ // Get the top and bottom buffers heights. const bufferTop = (this.scrollDirection === 'up') ? - this.settings.primaryImageBufferHeight : - this.settings.secondaryImageBufferHeight; + this.settings.primaryImageBufferHeight : + this.settings.secondaryImageBufferHeight; const bufferBottom = (this.scrollDirection === 'down') ? - this.settings.secondaryImageBufferHeight : - this.settings.primaryImageBufferHeight; + this.settings.secondaryImageBufferHeight : + this.settings.primaryImageBufferHeight; // Now we compute the location of the top and bottom buffers: const containerOffset = _getOffsetTop(this.container); @@ -754,7 +757,7 @@ this.classNames = { figure: pig.settings.classPrefix + '-figure', thumbnail: pig.settings.classPrefix + '-thumbnail', - loaded: pig.settings.classPrefix + '-loaded', + loaded: pig.settings.classPrefix + '-loaded' }; return this; From 753142e099248bc92aa6f4c95c8a15d96eed0cca Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 17:25:32 +0200 Subject: [PATCH 4/6] Add base to parseInt --- src/pig.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pig.js b/src/pig.js index 7d1fba1..7c22b5f 100644 --- a/src/pig.js +++ b/src/pig.js @@ -503,8 +503,8 @@ // This is NOT DOM manipulation. img.style = { - width: parseInt(imageWidth), - height: parseInt(rowHeight), + width: parseInt(imageWidth, 10), + height: parseInt(rowHeight, 10), translateX: translateX, translateY: translateY, transition: transition @@ -519,7 +519,7 @@ // Reset our state variables for next row. row = []; rowAspectRatio = 0; - translateY += parseInt(rowHeight) + this.settings.spaceBetweenImages; + translateY += parseInt(rowHeight, 10) + this.settings.spaceBetweenImages; translateX = 0; } }.bind(this)); From 8fc0f0873f0dc245a8ae237a5d6fe6535697f4f1 Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 17:26:13 +0200 Subject: [PATCH 5/6] explicitly convert numbers to string if needed --- src/pig.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pig.js b/src/pig.js index 7c22b5f..beafd5d 100644 --- a/src/pig.js +++ b/src/pig.js @@ -92,8 +92,8 @@ ' height: 100%;' + ' width: 100%;' + ' opacity: 0;' + - ' transition: ' + (transitionSpeed / 1000) + 's ease opacity;' + - ' -webkit-transition: ' + (transitionSpeed / 1000) + 's ease opacity;' + + ' transition: ' + (transitionSpeed / 1000).toString(10) + 's ease opacity;' + + ' -webkit-transition: ' + (transitionSpeed / 1000).toString(10) + 's ease opacity;' + '}' + '.' + classPrefix + '-figure img.' + classPrefix + '-thumbnail {' + ' -webkit-filter: blur(30px);' + @@ -273,7 +273,7 @@ * @returns {string} The URL of the image at the given size. */ urlForSize: function(filename, size) { - return '/img/' + size + '/' + filename; + return '/img/' + size.toString(10) + '/' + filename; }, /** @@ -379,7 +379,7 @@ */ Pig.prototype._getTransitionString = function() { if (this.isTransitioning) { - return (this.settings.transitionSpeed / 1000) + 's transform ease'; + return (this.settings.transitionSpeed / 1000).toString(10) + 's transform ease'; } return 'none'; @@ -528,7 +528,6 @@ this.totalHeight = translateY - this.settings.spaceBetweenImages; }; - /** * Update the DOM to reflect the style values of each image in the PIG, * adding or removing images appropriately. @@ -853,7 +852,6 @@ } this.existsOnPage = false; - }; /** From 7d9b67e68aa842979c71e68aa0d860c4095bb968 Mon Sep 17 00:00:00 2001 From: Bernhard Pottler Date: Sat, 9 Oct 2021 17:37:37 +0200 Subject: [PATCH 6/6] feature: add onClickHandler only if needed Changed default value of onClickHandler setting to null and added click handler to ProgressiveImage element only, if there is an onClickHandler. This way no unused click handler is added to image. --- src/pig.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pig.js b/src/pig.js index beafd5d..57a3113 100644 --- a/src/pig.js +++ b/src/pig.js @@ -282,8 +282,7 @@ * * @param {string} filename - The filename property of the image. */ - onClickHandler: function(filename) { - }, + onClickHandler: null, /** * Get the minimum required aspect ratio for a valid row of images. The @@ -864,7 +863,11 @@ if (!this.element) { this.element = document.createElement(this.pig.settings.figureTagName); this.element.className = this.classNames.figure; - this.element.addEventListener("click", function (){ this.pig.settings.onClickHandler(this.filename); }.bind(this) ); + if (this.pig.settings.onClickHandler !== null) { + this.element.addEventListener('click', function() { + this.pig.settings.onClickHandler(this.filename); + }.bind(this) ); + } this._updateStyles(); }