Merge pull request #22 from fliiiix/feature/implement-callback-on-ima…

…ge-click

implement callback on image click

.jshintrc

@@ -1,6 +1,6 @@
 {
 	"browser": true,
-    "browserify": true,
+        "browserify": true,
 	"devel": true,
 	"predef": [ "Pangea" ]
 }

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');
+  });
 });

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.

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"

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 {