Add support for bower, yarn and npm

Author: capynet

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

README.md

@@ -3,6 +3,15 @@
 This plugin allows you to react when an element is in the viewport.
 You need throw confetti when the user scroll and see an element?, so this plugin is for you!
 
+## Install
+```bash
+npm install jquery-is-in-viewport --save
+// or
+yarn add jquery-is-in-viewport
+// or 
+bower install jquery-is-in-viewport
+```
+
 ## Usage
 ```javascript
 $('.block').isInViewport(function (status) {

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "jquery-is-in-viewport",
+  "homepage": "https://github.com/frontid/jQueryIsInViewport",
+  "authors": [
+    "capynet <[email protected]>"
+  ],
+  "description": "React when an element is in the viewport.",
+  "main": "isInViewport.jquery.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

dist/isInViewport.jquery.js

@@ -0,0 +1,67 @@
+/* ====================================================
+ * jQuery Is In Viewport.
+ * https://github.com/frontid/jQueryIsInViewport
+ * Marcelo Iván Tosco (capynet)
+ * Inspired on https://stackoverflow.com/a/40658647/1413049
+ * ==================================================== */
+!function ($) {
+  'use strict'
+
+  var plugin
+
+  var Class = function (el, cb) {
+    plugin = this
+    this.$el = $(el)
+    this.cb = cb
+    watch()
+    return this
+  }
+
+  /**
+   * Checks if the element is in.
+   *
+   * @returns {boolean}
+   */
+  function isIn () {
+    var $win = $(window)
+    var elementTop = plugin.$el.offset().top
+    var elementBottom = elementTop + plugin.$el.outerHeight()
+    var viewportTop = $win.scrollTop()
+    var viewportBottom = viewportTop + $win.height()
+    return elementBottom > viewportTop && elementTop < viewportBottom
+  }
+
+  /**
+   * Launch a callback indicating when the element is in and when is out.
+   */
+  function watch () {
+    var _isIn = false
+
+    $(window).on('resize scroll', function () {
+
+      if (isIn() && _isIn === false) {
+        plugin.cb('entered')
+        _isIn = true
+      }
+
+      if (_isIn === true && !isIn()) {
+        plugin.cb('leaved')
+        _isIn = false
+      }
+
+    })
+  }
+
+  // jQuery plugin.
+  //-----------------------------------------------------------
+  $.fn.isInViewport = function (cb) {
+    return this.each(function () {
+      var $element = $(this)
+      var data = $element.data('isInViewport')
+      if (!data) {
+        $element.data('isInViewport', (new Class(this, cb)))
+      }
+    })
+  }
+
+}(window.jQuery)

dist/isInViewport.jquery.min.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var minify = require('gulp-minify')
+
+gulp.task('build', function () {
+  gulp.src('isInViewport.jquery.js').pipe(minify({
+    ext: {
+      src: '.js',
+      min: '.min.js',
+    },
+    exclude: ['tasks'],
+    ignoreFiles: ['-min.js'],
+  })).pipe(gulp.dest('dist'))
+})

gulpfile.js

@@ -0,0 +1,13 @@
+{
+  "name": "jquery-is-in-viewport",
+  "version": "1.0.0",
+  "description": "React when an element is in the viewport.",
+  "main": "isInViewport.jquery.js",
+  "repository": "https://github.com/frontid/jQueryIsInViewport.git",
+  "author": "capynet <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "*",
+    "gulp-minify": "^1.0.0"
+  }
+}