From a0cf87eb68d0d8d69d51ab23f3e040a97b5852f6 Mon Sep 17 00:00:00 2001 From: fliiiix Date: Thu, 29 Aug 2019 21:32:09 +0200 Subject: [PATCH 1/2] Implement callback onClickHandler function --- README.md | 17 ++++++++++++++--- src/pig.js | 14 +++++++++++++- src/pig.min.js | 2 +- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f7b7150..54ae733 100644 --- a/README.md +++ b/README.md @@ -50,17 +50,17 @@ Create a directory structure like: │   | ├── blue.jpg │   | ├── red.jpg │   | ... -│   | +│   | │   ├── 100 │   | ├── blue.jpg │   | ├── red.jpg │   | ... -│   | +│   | │   ├── 250 │   | ├── blue.jpg │   | ├── red.jpg │   | ... -│   | +│   | │   └── 500 │   ├── blue.jpg │   ├── red.jpg @@ -144,6 +144,7 @@ var options = { urlForSize: function(filename, size) { return '/img/' + size + '/' + filename; }, + onClickHander: function(filename) { }, getMinAspectRatio: function(lastWindowWidth) { if (lastWindowWidth <= 640) // Phones return 2; @@ -275,6 +276,16 @@ Get the image size (height in pixels) to use for this window width. Responsive r > } > ``` +#### `options.onClickHandler` _(function)_ + +Add callback function which is called when a image is clicked with the image name. By default this is an empty function. + +> **Parameters** +> - `filename` _(string)_ - The name of the clicked image +> +> **Default** +> function(filename) {} + ### Pig.enable() Enable the Pig library by beginning to listen to scroll and resize events, loading images and displaying them in the grid. diff --git a/src/pig.js b/src/pig.js index 42638a3..32c72a8 100644 --- a/src/pig.js +++ b/src/pig.js @@ -273,6 +273,15 @@ return '/img/' + size + '/' + filename; }, + /** + * Get a callback with the filename of the image + * which was clicked. + * + * @param {string} filename - The filename of the image. + */ + onClickHandler: function(filename) { + }, + /** * Get the minimum required aspect ratio for a valid row of images. The * perfect rows are maintained by building up a row of images by adding @@ -804,6 +813,7 @@ this.getElement().appendChild(this.fullImage); } + }.bind(this), 100); }; @@ -848,12 +858,14 @@ 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) ); this._updateStyles(); } return this.element; }; + /** * Updates the style attribute to reflect this style property on this object. */ @@ -868,7 +880,7 @@ // Export Pig into the global scope. if (typeof define === 'function' && define.amd) { - define([], function() { return Pig }); + define([], function() { return Pig; }); } else if (typeof module !== 'undefined' && module.exports) { module.exports = Pig; } else { diff --git a/src/pig.min.js b/src/pig.min.js index e226351..da35769 100644 --- a/src/pig.min.js +++ b/src/pig.min.js @@ -1 +1 @@ -!function(t){"use strict";function i(t,i,e){var s="body { overflow-y: scroll;}#"+t+" { position: relative;}."+i+"-figure { background-color: #D5D5D5; overflow: hidden; left: 0; position: absolute; top: 0; margin: 0;}."+i+"-figure img { left: 0; position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; transition: "+e/1e3+"s ease opacity; -webkit-transition: "+e/1e3+"s ease opacity;}."+i+"-figure img."+i+"-thumbnail { -webkit-filter: blur(30px); filter: blur(30px); left: auto; position: relative; width: auto;}."+i+"-figure img."+i+"-loaded { opacity: 1;}",n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",a.styleSheet?a.styleSheet.cssText=s:a.appendChild(document.createTextNode(s)),n.appendChild(a)}function e(t,i){for(var e in i)i.hasOwnProperty(e)&&(t[e]=i[e])}function s(t){var i=0;do isNaN(t.offsetTop)||(i+=t.offsetTop),t=t.offsetParent;while(t);return i}function n(t,s){return this.inRAF=!1,this.isTransitioning=!1,this.minAspectRatioRequiresTransition=!1,this.minAspectRatio=null,this.latestYOffset=0,this.lastWindowWidth=window.innerWidth,this.scrollDirection="down",this.visibleImages=[],this.settings={containerId:"pig",classPrefix:"pig",figureTagName:"figure",spaceBetweenImages:8,transitionSpeed:500,primaryImageBufferHeight:1e3,secondaryImageBufferHeight:300,thumbnailSize:20,urlForSize:function(t,i){return"/img/"+i+"/"+t},getMinAspectRatio:function(t){return t<=640?2:t<=1280?4:t<=1920?5:6},getImageSize:function(t){return t<=640?100:t<=1920?250:500}},e(this.settings,s||{}),this.container=document.getElementById(this.settings.containerId),this.container||console.error("Could not find element with ID "+this.settings.containerId),this.images=this._parseImageData(t),i(this.settings.containerId,this.settings.classPrefix,this.settings.transitionSpeed),this}function a(t,i,e){return this.existsOnPage=!1,this.aspectRatio=t.aspectRatio,this.filename=t.filename,this.index=i,this.pig=e,this.classNames={figure:e.settings.classPrefix+"-figure",thumbnail:e.settings.classPrefix+"-thumbnail",loaded:e.settings.classPrefix+"-loaded"},this}var o=function(){function t(){s||(s=!0,window.requestAnimationFrame?window.requestAnimationFrame(i):setTimeout(i,66))}function i(){e.forEach(function(t){t()}),s=!1}var e=[],s=!1;return{add:function(i){e.length||window.addEventListener("resize",t),e.push(i)},disable:function(){window.removeEventListener("resize",t)},reEnable:function(){window.addEventListener("resize",t)}}}();n.prototype._getTransitionTimeout=function(){var t=1.5;return this.settings.transitionSpeed*t},n.prototype._getTransitionString=function(){return this.isTransitioning?this.settings.transitionSpeed/1e3+"s transform ease":"none"},n.prototype._recomputeMinAspectRatio=function(){var t=this.minAspectRatio;this.minAspectRatio=this.settings.getMinAspectRatio(this.lastWindowWidth),null!==t&&t!==this.minAspectRatio?this.minAspectRatioRequiresTransition=!0:this.minAspectRatioRequiresTransition=!1},n.prototype._parseImageData=function(t){var i=[];return t.forEach(function(t,e){var s=new a(t,e,this);i.push(s)}.bind(this)),i},n.prototype._computeLayout=function(){var t=parseInt(this.container.clientWidth),i=[],e=0,s=0,n=0;this._recomputeMinAspectRatio(),!this.isTransitioning&&this.minAspectRatioRequiresTransition&&(this.isTransitioning=!0,setTimeout(function(){this.isTransitioning=!1},this._getTransitionTimeout()));var a=this._getTransitionString();[].forEach.call(this.images,function(o,h){if(n+=parseFloat(o.aspectRatio),i.push(o),n>=this.minAspectRatio||h+1===this.images.length){n=Math.max(n,this.minAspectRatio);var r=t-this.settings.spaceBetweenImages*(i.length-1),l=r/n;i.forEach(function(t){var i=l*t.aspectRatio;t.style={width:parseInt(i),height:parseInt(l),translateX:e,translateY:s,transition:a},e+=i+this.settings.spaceBetweenImages}.bind(this)),i=[],n=0,s+=parseInt(l)+this.settings.spaceBetweenImages,e=0}}.bind(this)),this.totalHeight=s-this.settings.spaceBetweenImages},n.prototype._doLayout=function(){this.container.style.height=this.totalHeight+"px";var t="up"===this.scrollDirection?this.settings.primaryImageBufferHeight:this.settings.secondaryImageBufferHeight,i="down"===this.scrollDirection?this.settings.secondaryImageBufferHeight:this.settings.primaryImageBufferHeight,e=s(this.container),n=window.innerHeight,a=this.latestYOffset-e-t,o=this.latestYOffset-e+n+i;this.images.forEach(function(t){t.style.translateY+t.style.heighto?t.hide():t.load()}.bind(this))},n.prototype._getOnScroll=function(){var t=this,i=function(){var i=window.pageYOffset;t.previousYOffset=t.latestYOffset||i,t.latestYOffset=i,t.scrollDirection=t.latestYOffset>t.previousYOffset?"down":"up",t.inRAF||(t.inRAF=!0,window.requestAnimationFrame(function(){t._doLayout(),t.inRAF=!1}))};return i},n.prototype.enable=function(){return this.onScroll=this._getOnScroll(),window.addEventListener("scroll",this.onScroll),this.onScroll(),this._computeLayout(),this._doLayout(),o.add(function(){this.lastWindowWidth=window.innerWidth,this._computeLayout(),this._doLayout()}.bind(this)),this},n.prototype.disable=function(){return window.removeEventListener("scroll",this.onScroll),o.disable(),this},a.prototype.load=function(){this.existsOnPage=!0,this._updateStyles(),this.pig.container.appendChild(this.getElement()),setTimeout(function(){this.existsOnPage&&(this.thumbnail||(this.thumbnail=new Image,this.thumbnail.src=this.pig.settings.urlForSize(this.filename,this.pig.settings.thumbnailSize),this.thumbnail.className=this.classNames.thumbnail,this.thumbnail.onload=function(){this.thumbnail&&(this.thumbnail.className+=" "+this.classNames.loaded)}.bind(this),this.getElement().appendChild(this.thumbnail)),this.fullImage||(this.fullImage=new Image,this.fullImage.src=this.pig.settings.urlForSize(this.filename,this.pig.settings.getImageSize(this.pig.lastWindowWidth)),this.fullImage.onload=function(){this.fullImage&&(this.fullImage.className+=" "+this.classNames.loaded)}.bind(this),this.getElement().appendChild(this.fullImage)))}.bind(this),100)},a.prototype.hide=function(){this.getElement()&&(this.thumbnail&&(this.thumbnail.src="",this.getElement().removeChild(this.thumbnail),delete this.thumbnail),this.fullImage&&(this.fullImage.src="",this.getElement().removeChild(this.fullImage),delete this.fullImage)),this.existsOnPage&&this.pig.container.removeChild(this.getElement()),this.existsOnPage=!1},a.prototype.getElement=function(){return this.element||(this.element=document.createElement(this.pig.settings.figureTagName),this.element.className=this.classNames.figure,this._updateStyles()),this.element},a.prototype._updateStyles=function(){this.getElement().style.transition=this.style.transition,this.getElement().style.width=this.style.width+"px",this.getElement().style.height=this.style.height+"px",this.getElement().style.transform="translate3d("+this.style.translateX+"px,"+this.style.translateY+"px, 0)"},"function"==typeof define&&define.amd?define(n):"undefined"!=typeof module&&module.exports?module.exports=n:t.Pig=n}(this); \ No newline at end of file +!function(t){"use strict";var i,e,s=(e=!(i=[]),{add:function(t){i.length||window.addEventListener("resize",n),i.push(t)},disable:function(){window.removeEventListener("resize",n)},reEnable:function(){window.addEventListener("resize",n)}});function n(){e||(e=!0,window.requestAnimationFrame?window.requestAnimationFrame(o):setTimeout(o,66))}function o(){i.forEach(function(t){t()}),e=!1}function a(t,i){return this.inRAF=!1,this.isTransitioning=!1,this.minAspectRatioRequiresTransition=!1,this.minAspectRatio=null,this.latestYOffset=0,this.lastWindowWidth=window.innerWidth,this.scrollDirection="down",this.visibleImages=[],this.settings={containerId:"pig",scroller:window,classPrefix:"pig",figureTagName:"figure",spaceBetweenImages:8,transitionSpeed:500,primaryImageBufferHeight:1e3,secondaryImageBufferHeight:300,thumbnailSize:20,urlForSize:function(t,i){return"/img/"+i+"/"+t},onClickHandler:function(t){},getMinAspectRatio:function(t){return t<=640?2:t<=1280?4:t<=1920?5:6},getImageSize:function(t){return t<=640?100:t<=1920?250:500}},function(t,i){for(var e in i)i.hasOwnProperty(e)&&(t[e]=i[e])}(this.settings,i||{}),this.container=document.getElementById(this.settings.containerId),this.container||console.error("Could not find element with ID "+this.settings.containerId),this.scroller=this.settings.scroller,this.images=this._parseImageData(t),function(t,i,e){var s="#"+t+" { position: relative;}."+i+"-figure { background-color: #D5D5D5; overflow: hidden; left: 0; position: absolute; top: 0; margin: 0;}."+i+"-figure img { left: 0; position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; transition: "+e/1e3+"s ease opacity; -webkit-transition: "+e/1e3+"s ease opacity;}."+i+"-figure img."+i+"-thumbnail { -webkit-filter: blur(30px); filter: blur(30px); left: auto; position: relative; width: auto;}."+i+"-figure img."+i+"-loaded { opacity: 1;}",n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=s:o.appendChild(document.createTextNode(s)),n.appendChild(o)}(this.settings.containerId,this.settings.classPrefix,this.settings.transitionSpeed),this}function r(t,i,e){return this.existsOnPage=!1,this.aspectRatio=t.aspectRatio,this.filename=t.filename,this.index=i,this.pig=e,this.classNames={figure:e.settings.classPrefix+"-figure",thumbnail:e.settings.classPrefix+"-thumbnail",loaded:e.settings.classPrefix+"-loaded"},this}a.prototype._getTransitionTimeout=function(){return 1.5*this.settings.transitionSpeed},a.prototype._getTransitionString=function(){return this.isTransitioning?this.settings.transitionSpeed/1e3+"s transform ease":"none"},a.prototype._recomputeMinAspectRatio=function(){var t=this.minAspectRatio;this.minAspectRatio=this.settings.getMinAspectRatio(this.lastWindowWidth),null!==t&&t!==this.minAspectRatio?this.minAspectRatioRequiresTransition=!0:this.minAspectRatioRequiresTransition=!1},a.prototype._parseImageData=function(t){var s=[];return t.forEach(function(t,i){var e=new r(t,i,this);s.push(e)}.bind(this)),s},a.prototype._computeLayout=function(){var s=parseInt(this.container.clientWidth),n=[],o=0,a=0,r=0;this._recomputeMinAspectRatio(),!this.isTransitioning&&this.minAspectRatioRequiresTransition&&(this.isTransitioning=!0,setTimeout(function(){this.isTransitioning=!1},this._getTransitionTimeout()));var h=this._getTransitionString();[].forEach.call(this.images,function(t,i){if(r+=parseFloat(t.aspectRatio),n.push(t),r>=this.minAspectRatio||i+1===this.images.length){r=Math.max(r,this.minAspectRatio);var e=(s-this.settings.spaceBetweenImages*(n.length-1))/r;n.forEach(function(t){var i=e*t.aspectRatio;t.style={width:parseInt(i),height:parseInt(e),translateX:o,translateY:a,transition:h},o+=i+this.settings.spaceBetweenImages}.bind(this)),n=[],r=0,a+=parseInt(e)+this.settings.spaceBetweenImages,o=0}}.bind(this)),this.totalHeight=a-this.settings.spaceBetweenImages},a.prototype._doLayout=function(){this.container.style.height=this.totalHeight+"px";var t="up"===this.scrollDirection?this.settings.primaryImageBufferHeight:this.settings.secondaryImageBufferHeight,i="down"===this.scrollDirection?this.settings.secondaryImageBufferHeight:this.settings.primaryImageBufferHeight,e=function(t){for(var i=0;isNaN(t.offsetTop)||(i+=t.offsetTop),t=t.offsetParent;);return i}(this.container),s=this.scroller===window?window.innerHeight:this.scroller.offsetHeight,n=this.latestYOffset-e-t,o=this.latestYOffset-e+s+i;this.images.forEach(function(t){t.style.translateY+t.style.heighto?t.hide():t.load()}.bind(this))},a.prototype._getOnScroll=function(){var i=this;return function(){var t=i.scroller===window?window.pageYOffset:i.scroller.scrollTop;i.previousYOffset=i.latestYOffset||t,i.latestYOffset=t,i.scrollDirection=i.latestYOffset>i.previousYOffset?"down":"up",i.inRAF||(i.inRAF=!0,window.requestAnimationFrame(function(){i._doLayout(),i.inRAF=!1}))}},a.prototype.enable=function(){return this.onScroll=this._getOnScroll(),this.scroller.addEventListener("scroll",this.onScroll),this.onScroll(),this._computeLayout(),this._doLayout(),s.add(function(){this.lastWindowWidth=this.scroller===window?window.innerWidth:this.scroller.offsetWidth,this._computeLayout(),this._doLayout()}.bind(this)),this},a.prototype.disable=function(){return this.scroller.removeEventListener("scroll",this.onScroll),s.disable(),this},r.prototype.load=function(){this.existsOnPage=!0,this._updateStyles(),this.pig.container.appendChild(this.getElement()),setTimeout(function(){this.existsOnPage&&(this.thumbnail||(this.thumbnail=new Image,this.thumbnail.src=this.pig.settings.urlForSize(this.filename,this.pig.settings.thumbnailSize),this.thumbnail.className=this.classNames.thumbnail,this.thumbnail.onload=function(){this.thumbnail&&(this.thumbnail.className+=" "+this.classNames.loaded)}.bind(this),this.getElement().appendChild(this.thumbnail)),this.fullImage||(this.fullImage=new Image,this.fullImage.src=this.pig.settings.urlForSize(this.filename,this.pig.settings.getImageSize(this.pig.lastWindowWidth)),this.fullImage.onload=function(){this.fullImage&&(this.fullImage.className+=" "+this.classNames.loaded)}.bind(this),this.getElement().appendChild(this.fullImage)))}.bind(this),100)},r.prototype.hide=function(){this.getElement()&&(this.thumbnail&&(this.thumbnail.src="",this.getElement().removeChild(this.thumbnail),delete this.thumbnail),this.fullImage&&(this.fullImage.src="",this.getElement().removeChild(this.fullImage),delete this.fullImage)),this.existsOnPage&&this.pig.container.removeChild(this.getElement()),this.existsOnPage=!1},r.prototype.getElement=function(){return 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)),this._updateStyles()),this.element},r.prototype._updateStyles=function(){this.getElement().style.transition=this.style.transition,this.getElement().style.width=this.style.width+"px",this.getElement().style.height=this.style.height+"px",this.getElement().style.transform="translate3d("+this.style.translateX+"px,"+this.style.translateY+"px, 0)"},"function"==typeof define&&define.amd?define([],function(){return a}):"undefined"!=typeof module&&module.exports?module.exports=a:t.Pig=a}("undefined"!=typeof window?window:this); \ No newline at end of file From aa355a569443c7531eb5dba5efe0b03834744adb Mon Sep 17 00:00:00 2001 From: fliiiix Date: Thu, 29 Aug 2019 21:32:34 +0200 Subject: [PATCH 2/2] Update dependencies --- .jshintrc | 2 +- Gulpfile.js | 17 +++++++++++------ package.json | 15 ++++++++------- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/.jshintrc b/.jshintrc index 1f725bb..9c96134 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,6 +1,6 @@ { "browser": true, - "browserify": true, + "browserify": true, "devel": true, "predef": [ "Pangea" ] } diff --git a/Gulpfile.js b/Gulpfile.js index c9bce64..905822e 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -7,24 +7,29 @@ var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); -gulp.task('js:build', function() { +gulp.task('js:build', function (done) { gulp.src(['./src/**/*.js', '!./src/**/*.min.js']) .pipe(plumber()) .pipe(uglify()) - .pipe(rename({suffix: '.min'})) + .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('./src')); + done(); }); -gulp.task('js:lint', function() { +gulp.task('js:lint', function (done) { gulp.src(['./src/**/*.js', '!./src/**/*.min.js', 'Gulpfile.js']) .pipe(plumber()) .pipe(jscs()) .pipe(jshint()) .pipe(jshint.reporter('default')); + done(); }); -gulp.task('build', ['js:lint', 'js:build']); +gulp.task('build', gulp.series(['js:lint', 'js:build'])); -gulp.task('watch', ['build'], function() { - gulp.watch(['./src/**/*.js', 'Gulpfile.js'], ['build']); +gulp.task('watch', function () { + var watcher = gulp.watch(['./src/**/*.js', '!./src/**/*min*.js'], gulp.parallel('build')); + watcher.on('change', function (path, stats) { + console.log('File ' + path + ' was changed'); + }); }); diff --git a/package.json b/package.json index 1c9da28..74eb6df 100644 --- a/package.json +++ b/package.json @@ -4,14 +4,15 @@ "description": "Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms.", "repository": "https://github.com/schlosser/pig.js", "devDependencies": { - "gulp": "^3.9.0", - "gulp-jscs": "^3.0.1", - "gulp-jshint": "^1.11.2", + "gulp": "^4.0.2", + "gulp-jscs": "^4.1.0", + "gulp-jshint": "^2.1.0", "gulp-jsmin": "^0.1.5", - "gulp-minify": "0.0.5", - "gulp-plumber": "^1.0.1", - "gulp-rename": "^1.2.2", - "gulp-uglify": "^1.4.2" + "gulp-minify": "3.1.0", + "gulp-plumber": "^1.2.1", + "gulp-rename": "^1.4.0", + "gulp-uglify": "^3.0.2", + "jshint": "^2.10.2" }, "author": "Dan Schlosser", "license": "MIT"