breakpoints.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745
  1. /**
  2. * breakpoints-js v1.0.6
  3. * https://github.com/amazingSurge/breakpoints-js
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. (function(global, factory) {
  9. if (typeof define === 'function' && define.amd) {
  10. define(['exports'], factory);
  11. } else if (typeof exports !== 'undefined') {
  12. factory(exports);
  13. } else {
  14. var mod = {
  15. exports: {}
  16. };
  17. factory(mod.exports);
  18. global.breakpointsEs = mod.exports;
  19. }
  20. })(this, function(exports) {
  21. 'use strict';
  22. Object.defineProperty(exports, '__esModule', {
  23. value: true
  24. });
  25. function _possibleConstructorReturn(self, call) {
  26. if (!self) {
  27. throw new ReferenceError(
  28. "this hasn't been initialised - super() hasn't been called"
  29. );
  30. }
  31. return call && (typeof call === 'object' || typeof call === 'function')
  32. ? call
  33. : self;
  34. }
  35. function _inherits(subClass, superClass) {
  36. if (typeof superClass !== 'function' && superClass !== null) {
  37. throw new TypeError(
  38. 'Super expression must either be null or a function, not ' +
  39. typeof superClass
  40. );
  41. }
  42. subClass.prototype = Object.create(superClass && superClass.prototype, {
  43. constructor: {
  44. value: subClass,
  45. enumerable: false,
  46. writable: true,
  47. configurable: true
  48. }
  49. });
  50. if (superClass)
  51. Object.setPrototypeOf
  52. ? Object.setPrototypeOf(subClass, superClass)
  53. : (subClass.__proto__ = superClass);
  54. }
  55. function _classCallCheck(instance, Constructor) {
  56. if (!(instance instanceof Constructor)) {
  57. throw new TypeError('Cannot call a class as a function');
  58. }
  59. }
  60. var _createClass = (function() {
  61. function defineProperties(target, props) {
  62. for (var i = 0; i < props.length; i++) {
  63. var descriptor = props[i];
  64. descriptor.enumerable = descriptor.enumerable || false;
  65. descriptor.configurable = true;
  66. if ('value' in descriptor) descriptor.writable = true;
  67. Object.defineProperty(target, descriptor.key, descriptor);
  68. }
  69. }
  70. return function(Constructor, protoProps, staticProps) {
  71. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  72. if (staticProps) defineProperties(Constructor, staticProps);
  73. return Constructor;
  74. };
  75. })();
  76. var _typeof =
  77. typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
  78. ? function(obj) {
  79. return typeof obj;
  80. }
  81. : function(obj) {
  82. return obj &&
  83. typeof Symbol === 'function' &&
  84. obj.constructor === Symbol &&
  85. obj !== Symbol.prototype
  86. ? 'symbol'
  87. : typeof obj;
  88. };
  89. /**
  90. * breakpoints-js v1.0.6
  91. * https://github.com/amazingSurge/breakpoints-js
  92. *
  93. * Copyright (c) amazingSurge
  94. * Released under the LGPL-3.0 license
  95. */
  96. var defaults = {
  97. // Extra small devices (phones)
  98. xs: {
  99. min: 0,
  100. max: 767
  101. },
  102. // Small devices (tablets)
  103. sm: {
  104. min: 768,
  105. max: 991
  106. },
  107. // Medium devices (desktops)
  108. md: {
  109. min: 992,
  110. max: 1199
  111. },
  112. // Large devices (large desktops)
  113. lg: {
  114. min: 1200,
  115. max: Infinity
  116. }
  117. };
  118. var util = {
  119. each: function each(obj, fn) {
  120. var continues = void 0;
  121. for (var i in obj) {
  122. if (
  123. (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !==
  124. 'object' ||
  125. obj.hasOwnProperty(i)
  126. ) {
  127. continues = fn(i, obj[i]);
  128. if (continues === false) {
  129. break; //allow early exit
  130. }
  131. }
  132. }
  133. },
  134. isFunction: function isFunction(obj) {
  135. return typeof obj === 'function' || false;
  136. },
  137. extend: function extend(obj, source) {
  138. for (var property in source) {
  139. obj[property] = source[property];
  140. }
  141. return obj;
  142. }
  143. };
  144. var Callbacks = (function() {
  145. function Callbacks() {
  146. _classCallCheck(this, Callbacks);
  147. this.length = 0;
  148. this.list = [];
  149. }
  150. _createClass(Callbacks, [
  151. {
  152. key: 'add',
  153. value: function add(fn, data) {
  154. var one =
  155. arguments.length > 2 && arguments[2] !== undefined
  156. ? arguments[2]
  157. : false;
  158. this.list.push({
  159. fn: fn,
  160. data: data,
  161. one: one
  162. });
  163. this.length++;
  164. }
  165. },
  166. {
  167. key: 'remove',
  168. value: function remove(fn) {
  169. for (var i = 0; i < this.list.length; i++) {
  170. if (this.list[i].fn === fn) {
  171. this.list.splice(i, 1);
  172. this.length--;
  173. i--;
  174. }
  175. }
  176. }
  177. },
  178. {
  179. key: 'empty',
  180. value: function empty() {
  181. this.list = [];
  182. this.length = 0;
  183. }
  184. },
  185. {
  186. key: 'call',
  187. value: function call(caller, i) {
  188. var fn =
  189. arguments.length > 2 && arguments[2] !== undefined
  190. ? arguments[2]
  191. : null;
  192. if (!i) {
  193. i = this.length - 1;
  194. }
  195. var callback = this.list[i];
  196. if (util.isFunction(fn)) {
  197. fn.call(this, caller, callback, i);
  198. } else if (util.isFunction(callback.fn)) {
  199. callback.fn.call(caller || window, callback.data);
  200. }
  201. if (callback.one) {
  202. delete this.list[i];
  203. this.length--;
  204. }
  205. }
  206. },
  207. {
  208. key: 'fire',
  209. value: function fire(caller) {
  210. var fn =
  211. arguments.length > 1 && arguments[1] !== undefined
  212. ? arguments[1]
  213. : null;
  214. for (var i in this.list) {
  215. if (this.list.hasOwnProperty(i)) {
  216. this.call(caller, i, fn);
  217. }
  218. }
  219. }
  220. }
  221. ]);
  222. return Callbacks;
  223. })();
  224. var ChangeEvent = {
  225. current: null,
  226. callbacks: new Callbacks(),
  227. trigger: function trigger(size) {
  228. var previous = this.current;
  229. this.current = size;
  230. this.callbacks.fire(size, function(caller, callback) {
  231. if (util.isFunction(callback.fn)) {
  232. callback.fn.call(
  233. {
  234. current: size,
  235. previous: previous
  236. },
  237. callback.data
  238. );
  239. }
  240. });
  241. },
  242. one: function one(data, fn) {
  243. return this.on(data, fn, true);
  244. },
  245. on: function on(data, fn) {
  246. var one =
  247. arguments.length > 2 && arguments[2] !== undefined
  248. ? arguments[2]
  249. : false;
  250. if (typeof fn === 'undefined' && util.isFunction(data)) {
  251. fn = data;
  252. data = undefined;
  253. }
  254. if (util.isFunction(fn)) {
  255. this.callbacks.add(fn, data, one);
  256. }
  257. },
  258. off: function off(fn) {
  259. if (typeof fn === 'undefined') {
  260. this.callbacks.empty();
  261. }
  262. }
  263. };
  264. var MediaQuery = (function() {
  265. function MediaQuery(name, media) {
  266. _classCallCheck(this, MediaQuery);
  267. this.name = name;
  268. this.media = media;
  269. this.initialize();
  270. }
  271. _createClass(MediaQuery, [
  272. {
  273. key: 'initialize',
  274. value: function initialize() {
  275. this.callbacks = {
  276. enter: new Callbacks(),
  277. leave: new Callbacks()
  278. };
  279. this.mql = (window.matchMedia && window.matchMedia(this.media)) || {
  280. matches: false,
  281. media: this.media,
  282. addListener: function addListener() {
  283. // do nothing
  284. },
  285. removeListener: function removeListener() {
  286. // do nothing
  287. }
  288. };
  289. var that = this;
  290. this.mqlListener = function(mql) {
  291. var type = (mql.matches && 'enter') || 'leave';
  292. that.callbacks[type].fire(that);
  293. };
  294. this.mql.addListener(this.mqlListener);
  295. }
  296. },
  297. {
  298. key: 'on',
  299. value: function on(types, data, fn) {
  300. var one =
  301. arguments.length > 3 && arguments[3] !== undefined
  302. ? arguments[3]
  303. : false;
  304. if (
  305. (typeof types === 'undefined' ? 'undefined' : _typeof(types)) ===
  306. 'object'
  307. ) {
  308. for (var type in types) {
  309. if (types.hasOwnProperty(type)) {
  310. this.on(type, data, types[type], one);
  311. }
  312. }
  313. return this;
  314. }
  315. if (typeof fn === 'undefined' && util.isFunction(data)) {
  316. fn = data;
  317. data = undefined;
  318. }
  319. if (!util.isFunction(fn)) {
  320. return this;
  321. }
  322. if (typeof this.callbacks[types] !== 'undefined') {
  323. this.callbacks[types].add(fn, data, one);
  324. if (types === 'enter' && this.isMatched()) {
  325. this.callbacks[types].call(this);
  326. }
  327. }
  328. return this;
  329. }
  330. },
  331. {
  332. key: 'one',
  333. value: function one(types, data, fn) {
  334. return this.on(types, data, fn, true);
  335. }
  336. },
  337. {
  338. key: 'off',
  339. value: function off(types, fn) {
  340. var type = void 0;
  341. if (
  342. (typeof types === 'undefined' ? 'undefined' : _typeof(types)) ===
  343. 'object'
  344. ) {
  345. for (type in types) {
  346. if (types.hasOwnProperty(type)) {
  347. this.off(type, types[type]);
  348. }
  349. }
  350. return this;
  351. }
  352. if (typeof types === 'undefined') {
  353. this.callbacks.enter.empty();
  354. this.callbacks.leave.empty();
  355. } else if (types in this.callbacks) {
  356. if (fn) {
  357. this.callbacks[types].remove(fn);
  358. } else {
  359. this.callbacks[types].empty();
  360. }
  361. }
  362. return this;
  363. }
  364. },
  365. {
  366. key: 'isMatched',
  367. value: function isMatched() {
  368. return this.mql.matches;
  369. }
  370. },
  371. {
  372. key: 'destroy',
  373. value: function destroy() {
  374. this.off();
  375. }
  376. }
  377. ]);
  378. return MediaQuery;
  379. })();
  380. var MediaBuilder = {
  381. min: function min(_min) {
  382. var unit =
  383. arguments.length > 1 && arguments[1] !== undefined
  384. ? arguments[1]
  385. : 'px';
  386. return '(min-width: ' + _min + unit + ')';
  387. },
  388. max: function max(_max) {
  389. var unit =
  390. arguments.length > 1 && arguments[1] !== undefined
  391. ? arguments[1]
  392. : 'px';
  393. return '(max-width: ' + _max + unit + ')';
  394. },
  395. between: function between(min, max) {
  396. var unit =
  397. arguments.length > 2 && arguments[2] !== undefined
  398. ? arguments[2]
  399. : 'px';
  400. return (
  401. '(min-width: ' + min + unit + ') and (max-width: ' + max + unit + ')'
  402. );
  403. },
  404. get: function get(min, max) {
  405. var unit =
  406. arguments.length > 2 && arguments[2] !== undefined
  407. ? arguments[2]
  408. : 'px';
  409. if (min === 0) {
  410. return this.max(max, unit);
  411. }
  412. if (max === Infinity) {
  413. return this.min(min, unit);
  414. }
  415. return this.between(min, max, unit);
  416. }
  417. };
  418. var Size = (function(_MediaQuery) {
  419. _inherits(Size, _MediaQuery);
  420. function Size(name) {
  421. var min =
  422. arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  423. var max =
  424. arguments.length > 2 && arguments[2] !== undefined
  425. ? arguments[2]
  426. : Infinity;
  427. var unit =
  428. arguments.length > 3 && arguments[3] !== undefined
  429. ? arguments[3]
  430. : 'px';
  431. _classCallCheck(this, Size);
  432. var media = MediaBuilder.get(min, max, unit);
  433. var _this = _possibleConstructorReturn(
  434. this,
  435. (Size.__proto__ || Object.getPrototypeOf(Size)).call(this, name, media)
  436. );
  437. _this.min = min;
  438. _this.max = max;
  439. _this.unit = unit;
  440. var that = _this;
  441. _this.changeListener = function() {
  442. if (that.isMatched()) {
  443. ChangeEvent.trigger(that);
  444. }
  445. };
  446. if (_this.isMatched()) {
  447. ChangeEvent.current = _this;
  448. }
  449. _this.mql.addListener(_this.changeListener);
  450. return _this;
  451. }
  452. _createClass(Size, [
  453. {
  454. key: 'destroy',
  455. value: function destroy() {
  456. this.off();
  457. this.mql.removeListener(this.changeListener);
  458. }
  459. }
  460. ]);
  461. return Size;
  462. })(MediaQuery);
  463. var UnionSize = (function(_MediaQuery2) {
  464. _inherits(UnionSize, _MediaQuery2);
  465. function UnionSize(names) {
  466. _classCallCheck(this, UnionSize);
  467. var sizes = [];
  468. var media = [];
  469. util.each(names.split(' '), function(i, name) {
  470. var size = Breakpoints$1.get(name);
  471. if (size) {
  472. sizes.push(size);
  473. media.push(size.media);
  474. }
  475. });
  476. return _possibleConstructorReturn(
  477. this,
  478. (UnionSize.__proto__ || Object.getPrototypeOf(UnionSize)).call(
  479. this,
  480. names,
  481. media.join(',')
  482. )
  483. );
  484. }
  485. return UnionSize;
  486. })(MediaQuery);
  487. var info = {
  488. version: '1.0.6'
  489. };
  490. var sizes = {};
  491. var unionSizes = {};
  492. var Breakpoints = (window.Breakpoints = function() {
  493. for (
  494. var _len = arguments.length, args = Array(_len), _key = 0;
  495. _key < _len;
  496. _key++
  497. ) {
  498. args[_key] = arguments[_key];
  499. }
  500. Breakpoints.define.apply(Breakpoints, args);
  501. });
  502. Breakpoints.defaults = defaults;
  503. Breakpoints = util.extend(Breakpoints, {
  504. version: info.version,
  505. defined: false,
  506. define: function define(values) {
  507. var options =
  508. arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  509. if (this.defined) {
  510. this.destroy();
  511. }
  512. if (!values) {
  513. values = Breakpoints.defaults;
  514. }
  515. this.options = util.extend(options, {
  516. unit: 'px'
  517. });
  518. for (var size in values) {
  519. if (values.hasOwnProperty(size)) {
  520. this.set(size, values[size].min, values[size].max, this.options.unit);
  521. }
  522. }
  523. this.defined = true;
  524. },
  525. destroy: function destroy() {
  526. util.each(sizes, function(name, size) {
  527. size.destroy();
  528. });
  529. sizes = {};
  530. ChangeEvent.current = null;
  531. },
  532. is: function is(size) {
  533. var breakpoint = this.get(size);
  534. if (!breakpoint) {
  535. return null;
  536. }
  537. return breakpoint.isMatched();
  538. },
  539. all: function all() {
  540. var names = [];
  541. util.each(sizes, function(name) {
  542. names.push(name);
  543. });
  544. return names;
  545. },
  546. set: function set(name) {
  547. var min =
  548. arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  549. var max =
  550. arguments.length > 2 && arguments[2] !== undefined
  551. ? arguments[2]
  552. : Infinity;
  553. var unit =
  554. arguments.length > 3 && arguments[3] !== undefined
  555. ? arguments[3]
  556. : 'px';
  557. var size = this.get(name);
  558. if (size) {
  559. size.destroy();
  560. }
  561. sizes[name] = new Size(name, min, max, unit);
  562. return sizes[name];
  563. },
  564. get: function get(size) {
  565. if (sizes.hasOwnProperty(size)) {
  566. return sizes[size];
  567. }
  568. return null;
  569. },
  570. getUnion: function getUnion(sizes) {
  571. if (unionSizes.hasOwnProperty(sizes)) {
  572. return unionSizes[sizes];
  573. }
  574. unionSizes[sizes] = new UnionSize(sizes);
  575. return unionSizes[sizes];
  576. },
  577. getMin: function getMin(size) {
  578. var obj = this.get(size);
  579. if (obj) {
  580. return obj.min;
  581. }
  582. return null;
  583. },
  584. getMax: function getMax(size) {
  585. var obj = this.get(size);
  586. if (obj) {
  587. return obj.max;
  588. }
  589. return null;
  590. },
  591. current: function current() {
  592. return ChangeEvent.current;
  593. },
  594. getMedia: function getMedia(size) {
  595. var obj = this.get(size);
  596. if (obj) {
  597. return obj.media;
  598. }
  599. return null;
  600. },
  601. on: function on(sizes, types, data, fn) {
  602. var one =
  603. arguments.length > 4 && arguments[4] !== undefined
  604. ? arguments[4]
  605. : false;
  606. sizes = sizes.trim();
  607. if (sizes === 'change') {
  608. fn = data;
  609. data = types;
  610. return ChangeEvent.on(data, fn, one);
  611. }
  612. if (sizes.includes(' ')) {
  613. var union = this.getUnion(sizes);
  614. if (union) {
  615. union.on(types, data, fn, one);
  616. }
  617. } else {
  618. var size = this.get(sizes);
  619. if (size) {
  620. size.on(types, data, fn, one);
  621. }
  622. }
  623. return this;
  624. },
  625. one: function one(sizes, types, data, fn) {
  626. return this.on(sizes, types, data, fn, true);
  627. },
  628. off: function off(sizes, types, fn) {
  629. sizes = sizes.trim();
  630. if (sizes === 'change') {
  631. return ChangeEvent.off(types);
  632. }
  633. if (sizes.includes(' ')) {
  634. var union = this.getUnion(sizes);
  635. if (union) {
  636. union.off(types, fn);
  637. }
  638. } else {
  639. var size = this.get(sizes);
  640. if (size) {
  641. size.off(types, fn);
  642. }
  643. }
  644. return this;
  645. }
  646. });
  647. var Breakpoints$1 = Breakpoints;
  648. exports.default = Breakpoints$1;
  649. });