ab-mediaquery - npm Package Compare versions

Comparing version 2.6.1 to 2.7.0

dist/AB-mediaQuery.js

@@ -1,157 +0,130 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
 
-"use strict";
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
 
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
 
-var AB = __webpack_require__(1);
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
 
-var Plugin = function(opt) {
-  this.settings = window.AB.extend(true, Plugin.defaults, opt);
-  this.queries  = this.settings.bp;
-  this.current  = [];
-  this.animated = false;
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
 
-  this._init();
-};
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
 
-Plugin.defaults = {
-  bp: {}
-};
+      var module = cache[name] = new newRequire.Module(name);
 
-Plugin.prototype = {
-  _init: function() {
-    this.current = this._getCurrent();
-    this._watcher();
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
 
-    return this;
-  },
+    return cache[name].exports;
 
-  _getCurrent: function() {
-    var sizes = [];
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
 
-    for (var key in this.queries) {
-      if (!this.queries.hasOwnProperty(key))
-        continue;
-
-      if (window.matchMedia(this.queries[key]).matches)
-        sizes.push(key);
+    function resolve(x){
+      return modules[name][1][x] || x;
     }
+  }
 
-    return sizes;
-  },
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
 
-  _watcher: function() {
-    var that  = this;
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
 
-    window.addEventListener('resize', function() {
-      if (!that.animated) {
-        window.requestAnimationFrame(that._updateSizes.bind(that));
-        that.animated = true;
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
       }
-    });
-  },
+    }
+  }
 
-  _updateSizes: function() {
-    var newSize = this._getCurrent(),
-        event   = new CustomEvent('changed.ab-mediaquery');
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
 
-    this.animated = false;
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
 
-    // check if it's updated
-    if (newSize.join('|') !== this.current.join('|')) {
-      this.current = newSize;
-      window.dispatchEvent(event);
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
     }
-  },
-
-  is: function(size) {
-    return window.matchMedia(this.queries[size]).matches;
   }
-};
 
-window.abMediaQuery = function(opt) {
-  window.AB.mediaQuery = new Plugin(opt);
-};
+  // Override the current require with this new one
+  parcelRequire = newRequire;
 
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
 
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
+  return newRequire;
+})({"cnAZ":[function(require,module,exports) {
 // polyfill customEvent pour IE
 ;(function() {
-  if ( typeof window.CustomEvent === "function" ) return false;
+  if (typeof window.CustomEvent === "function") return false;
   function CustomEvent ( event, params ) {
     params = params || { bubbles: false, cancelable: false, detail: undefined };
-    var evt = document.createEvent( 'CustomEvent' );
-    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
     return evt;
-   }
+  }
   CustomEvent.prototype = window.Event.prototype;
@@ -161,3 +134,26 @@ window.CustomEvent = CustomEvent;
 
-// main public AB object
+// throttle events with requestAnimationFrame
+(function() {
+  var throttle = function(type, name) {
+    var running = false;
+    var func = function() {
+      if (running) return;
+
+      running = true;
+        window.requestAnimationFrame(function() {
+          window.dispatchEvent(new CustomEvent(name));
+          running = false;
+      });
+    };
+    window.addEventListener(type, func);
+  };
+
+  /* init - you can init any event */
+  throttle("resize", "ab-resize");
+  throttle("scroll", "ab-scroll");
+  throttle("mousemove", "ab-mousemove");
+  throttle("touchmove", "ab-touchmove");
+})();
+
+
 window.AB = {
@@ -205,6 +201,73 @@ // deep extend function
 
-  plugins: {}
+  runUpdaters: function(plugin) {
+    if (window.AB.options[plugin]) {
+      window.AB.plugins[plugin](window.AB.options[plugin]);
+    } else {
+      for(var options in AB.options){
+        if(window.AB.options.hasOwnProperty(options))
+          window.AB.plugins[options](window.AB.options[options]);
+      }
+    }
+  },
+
+  plugins: {},
+  options: {}
 };
 
-/***/ })
-/******/ ]);
+module.exports = window.AB;
+
+},{}],"Focm":[function(require,module,exports) {
+'use strict';
+
+window.AB = require('another-brick');
+
+var mediaQuery = function mediaQuery(opt) {
+  window.AB.mediaQuery = function () {
+    var _settings = opt || {
+      bp: {}
+    };
+
+    var _getCurrent = function _getCurrent() {
+      var sizes = [];
+
+      for (var key in _settings.bp) {
+        if (_settings.bp.hasOwnProperty(key) && window.matchMedia(_settings.bp[key]).matches) {
+          sizes.push(key);
+        }
+      }
+
+      return sizes;
+    };
+
+    var _updateSizes = function _updateSizes() {
+      var newSize = _getCurrent(); // check if it's updated
+
+
+      if (newSize.join('|') !== _currentStore.join('|')) {
+        _currentStore = newSize;
+        window.dispatchEvent(new CustomEvent('changed.ab-mediaquery'));
+      }
+    };
+
+    var is = function is(size) {
+      if (_settings.bp[size]) return window.matchMedia(_settings.bp[size]).matches;
+    }; // get current breakpoints
+
+
+    var _currentStore = _getCurrent(); // change on resize
+
+
+    window.addEventListener('ab-resize', _updateSizes);
+    return {
+      get current() {
+        return _currentStore;
+      },
+
+      is: is
+    };
+  }();
+};
+
+window.AB.plugins.mediaQuery = mediaQuery;
+module.exports = window.AB;
+},{"another-brick":"cnAZ"}]},{},["Focm"], null)

dist/AB-mediaQuery.min.js

@@ -1,1 +0,5 @@
-!function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";var i=(n(1),function(t){this.settings=window.AB.extend(!0,i.defaults,t),this.queries=this.settings.bp,this.current=[],this.animated=!1,this._init()});i.defaults={bp:{}},i.prototype={_init:function(){return this.current=this._getCurrent(),this._watcher(),this},_getCurrent:function(){var t=[];for(var e in this.queries)this.queries.hasOwnProperty(e)&&window.matchMedia(this.queries[e]).matches&&t.push(e);return t},_watcher:function(){var t=this;window.addEventListener("resize",function(){t.animated||(window.requestAnimationFrame(t._updateSizes.bind(t)),t.animated=!0)})},_updateSizes:function(){var t=this._getCurrent(),e=new CustomEvent("changed.ab-mediaquery");this.animated=!1,t.join("|")!==this.current.join("|")&&(this.current=t,window.dispatchEvent(e))},is:function(t){return window.matchMedia(this.queries[t]).matches}},window.abMediaQuery=function(t){window.AB.mediaQuery=new i(t)}},function(t,e){!function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}if("function"==typeof window.CustomEvent)return!1;t.prototype=window.Event.prototype,window.CustomEvent=t}(),window.AB={extend:function(){var t={},e=!1,n=0,i=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],n++);for(;n<i;n++)!function(n){for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e&&"[object Object]"===Object.prototype.toString.call(n[i])?t[i]=window.AB.extend(!0,t[i],n[i]):t[i]=n[i])}(arguments[n]);return t},isJson:function(t){try{JSON.parse(t)}catch(t){return!1}return!0},plugins:{}}}]);
+parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"cnAZ":[function(require,module,exports) {
+!function(){if("function"==typeof window.CustomEvent)return!1;function o(o,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var t=document.createEvent("CustomEvent");return t.initCustomEvent(o,n.bubbles,n.cancelable,n.detail),t}o.prototype=window.Event.prototype,window.CustomEvent=o}(),function(){var o=function(o,n){var t=!1;window.addEventListener(o,function(){t||(t=!0,window.requestAnimationFrame(function(){window.dispatchEvent(new CustomEvent(n)),t=!1}))})};o("resize","ab-resize"),o("scroll","ab-scroll"),o("mousemove","ab-mousemove"),o("touchmove","ab-touchmove")}(),window.AB={extend:function(){var o={},n=!1,t=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(n=arguments[0],t++);for(var i=function(t){for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n&&"[object Object]"===Object.prototype.toString.call(t[e])?o[e]=window.AB.extend(!0,o[e],t[e]):o[e]=t[e])};t<e;t++)i(arguments[t]);return o},isJson:function(o){try{JSON.parse(o)}catch(n){return!1}return!0},runUpdaters:function(o){if(window.AB.options[o])window.AB.plugins[o](window.AB.options[o]);else for(var n in AB.options)window.AB.options.hasOwnProperty(n)&&window.AB.plugins[n](window.AB.options[n])},plugins:{},options:{}},module.exports=window.AB;
+},{}],"Focm":[function(require,module,exports) {
+"use strict";window.AB=require("another-brick");var n=function(n){var e,i,r;window.AB.mediaQuery=(e=n||{bp:{}},r=(i=function(){var n=[];for(var i in e.bp)e.bp.hasOwnProperty(i)&&window.matchMedia(e.bp[i]).matches&&n.push(i);return n})(),window.addEventListener("ab-resize",function(){var n=i();n.join("|")!==r.join("|")&&(r=n,window.dispatchEvent(new CustomEvent("changed.ab-mediaquery")))}),{get current(){return r},is:function(n){if(e.bp[n])return window.matchMedia(e.bp[n]).matches}})};window.AB.plugins.mediaQuery=n,module.exports=window.AB;
+},{"another-brick":"cnAZ"}]},{},["Focm"], null)

package.json

 {
   "name": "ab-mediaquery",
-  "version": "2.6.1",
-  "description": "AB-mediaQuery is the JavaScript side of Media Queries. It proposes you some very useful methods for your scripts",
-  "main": "index.js",
+  "version": "2.7.0",
+  "description": "AB-mediaQuery is the JavaScript side of media queries. It proposes you some very useful methods for your scripts",
+  "main": "src/index.js",
   "repository": {
@@ -10,5 +10,18 @@ "type": "git",
   },
+  "np": {
+    "anyBranch": false,
+    "cleanup": true,
+    "tests": false,
+    "releaseDraft": true
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack index.js dist/AB-mediaQuery.js && webpack index.js dist/AB-mediaQuery.min.js --optimize-minimize"
+    "release": "np",
+    "serve": "yarn reset && parcel src/docs/index.html --out-dir docs",
+    "build": "yarn reset && yarn build:demo && yarn build:dist",
+    "reset": "rimraf dist docs",
+    "build:demo": "parcel build src/docs/index.html --no-source-maps --out-dir docs --public-url ./",
+    "build:dist": "yarn build:js && yarn build:jsmin",
+    "build:js": "parcel build src/index.js --no-source-maps --no-content-hash --out-dir dist --out-file AB-mediaQuery.js --no-minify",
+    "build:jsmin": "parcel build src/index.js --no-source-maps --no-content-hash --out-dir dist --out-file AB-mediaQuery.min.js"
   },
@@ -31,7 +44,12 @@ "keywords": [
   "dependencies": {
-    "another-brick": "^1.2.0"
+    "another-brick": "^1.3.0"
   },
   "devDependencies": {
-    "webpack": "^3.3.0"
+    "np": "^5.1.3",
+    "parcel-bundler": "^1.12.4",
+    "prismjs": "^1.17.1",
+    "rimraf": "^3.0.0",
+    "tachyons": "^4.11.1",
+    "yarn": "^1.19.1"
   }
 }

README.md

 # AB-mediaQuery
 
-AB-mediaQuery is the JavaScript side of Media Queries. It proposes some useful methods for your responsive developments. This is a small, dependencie free and vanilla JavaScript components. Version 1 is used in the French website of [ENGIE](https://particuliers.engie.fr).
+**AB-mediaQuery** is the JavaScript side of Media Queries. It's a very simple, yet convenient tool for your developments.
 
-It's damn small: **less than 1000 bytes** (uglyfied and GZipped).
+This dependencie free and vanilla script is damn small: **less than 1.3KB** (uglyfied and GZipped)!
 
-Have a look at the [Codepen demonstration](https://codepen.io/lordfpx/pen/MeaWmV?editors=0010).
+Have a look at this [demonstration](http://lordfpx.github.io/AB-mediaQuery/) (offline version in the `docs` folder).
 
+Version 1 is used on French websites of [ENGIE](https://particuliers.engie.fr) and [Gaz tarif règlementé](https://gaz-tarif-reglemente.fr/).
+
 [![Maintainability](https://api.codeclimate.com/v1/badges/0d5481a675183a5d3c01/maintainability)](https://codeclimate.com/github/lordfpx/AB-mediaQuery/maintainability)
 
+
 ## Install
 
-Install with npm:
 ```bash
 npm install --save ab-mediaquery
-````
-
-Install with yarn:
-```bash
-yarn add ab-mediaquery
 ```
 
-Because of the usage of `matchMedia` and `requestAnimationFrame`, compatibility start from IE 10. To rise compatibility up to IE 9, you can add [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) and [requestAnimationFrame polyfill](https://gist.github.com/paulirish/1579671).
 
-
 ## Setup
 
-You can then import it in your JS bundle (webpack, ES6, browserify...):
+Import in your JS bundle (webpack, ES6, browserify...):
 ```js
@@ -33,7 +28,7 @@ import abMediaQuery from 'ab-mediaquery';
 
-Or loading the js right before `</body>` if you are not using a builder.
+Built version are also available in the `dist` folder if your are not using a bundler.
 
-Then call it from your JavaScript with your media queries:
+Init the script with:
 ```js
-abMediaQuery({
+AB.plugins.mediaQuery({
   bp: {
@@ -49,3 +44,17 @@ smallOnly:  'screen and (max-width: 767px)',
 
+Other example:
 
+```js
+AB.plugins.mediaQuery({
+  bp: {
+    tiny: "screen and (max-width: 575px)",
+    small: "screen and (min-width: 576px)",
+    medium: "screen and (min-width: 768px)",
+    large: "screen and (min-width: 992px)",
+    huge: "screen and (min-width: 1200px)"
+  }
+});
+```
+
+
 ## Usage
@@ -56,3 +65,2 @@
   AB.mediaQuery.current;
-
   // return an array of current breakpoints
@@ -64,3 +72,2 @@ ```
   AB.mediaQuery.is('mediumOnly');
-
   // will return true or false
@@ -67,0 +74,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112906

increased by46.83%

Number of package files

14

increased by75%

Lines of code

389

increased by68.4%

Number of lines in readme file

80

increased by9.59%

Worsened metrics

Dev dependency count

6

increased by500%

Number of low quality alerts

4

increased by300%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedanother-brick@^1.3.0