breakpoints.es.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  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. var defaults = {
  9. // Extra small devices (phones)
  10. xs: {
  11. min: 0,
  12. max: 767
  13. },
  14. // Small devices (tablets)
  15. sm: {
  16. min: 768,
  17. max: 991
  18. },
  19. // Medium devices (desktops)
  20. md: {
  21. min: 992,
  22. max: 1199
  23. },
  24. // Large devices (large desktops)
  25. lg: {
  26. min: 1200,
  27. max: Infinity
  28. }
  29. };
  30. var util = {
  31. each: function(obj, fn) {
  32. let continues;
  33. for (let i in obj) {
  34. if (typeof obj !== 'object' || obj.hasOwnProperty(i)) {
  35. continues = fn(i, obj[i]);
  36. if (continues === false) {
  37. break; //allow early exit
  38. }
  39. }
  40. }
  41. },
  42. isFunction: function (obj) {
  43. return typeof obj === 'function' || false;
  44. },
  45. extend: function(obj, source) {
  46. for (let property in source) {
  47. obj[property] = source[property];
  48. }
  49. return obj;
  50. }
  51. };
  52. class Callbacks {
  53. constructor(){
  54. this.length = 0;
  55. this.list = [];
  56. }
  57. add(fn, data, one = false) {
  58. this.list.push({
  59. fn,
  60. data: data,
  61. one: one
  62. });
  63. this.length++;
  64. }
  65. remove(fn) {
  66. for (let i = 0; i < this.list.length; i++) {
  67. if (this.list[i].fn === fn) {
  68. this.list.splice(i, 1);
  69. this.length--;
  70. i--;
  71. }
  72. }
  73. }
  74. empty() {
  75. this.list = [];
  76. this.length = 0;
  77. }
  78. call(caller, i, fn = null) {
  79. if (!i) {
  80. i = this.length - 1;
  81. }
  82. let callback = this.list[i];
  83. if (util.isFunction(fn)) {
  84. fn.call(this, caller, callback, i);
  85. } else if (util.isFunction(callback.fn)) {
  86. callback.fn.call(caller || window, callback.data);
  87. }
  88. if (callback.one) {
  89. delete this.list[i];
  90. this.length--;
  91. }
  92. }
  93. fire(caller, fn = null) {
  94. for (let i in this.list) {
  95. if(this.list.hasOwnProperty(i)){
  96. this.call(caller, i, fn);
  97. }
  98. }
  99. }
  100. }
  101. var ChangeEvent = {
  102. current: null,
  103. callbacks: new Callbacks(),
  104. trigger(size) {
  105. let previous = this.current;
  106. this.current = size;
  107. this.callbacks.fire(size, (caller, callback) => {
  108. if (util.isFunction(callback.fn)) {
  109. callback.fn.call({
  110. current: size,
  111. previous
  112. }, callback.data);
  113. }
  114. });
  115. },
  116. one(data, fn) {
  117. return this.on(data, fn, true);
  118. },
  119. on(data, fn, /*INTERNAL*/ one = false) {
  120. if (typeof fn === 'undefined' && util.isFunction(data)) {
  121. fn = data;
  122. data = undefined;
  123. }
  124. if (util.isFunction(fn)) {
  125. this.callbacks.add(fn, data, one);
  126. }
  127. },
  128. off(fn) {
  129. if (typeof fn === 'undefined') {
  130. this.callbacks.empty();
  131. }
  132. }
  133. };
  134. class MediaQuery {
  135. constructor(name, media) {
  136. this.name = name;
  137. this.media = media;
  138. this.initialize();
  139. }
  140. initialize() {
  141. this.callbacks = {
  142. enter: new Callbacks(),
  143. leave: new Callbacks()
  144. };
  145. this.mql = (window.matchMedia && window.matchMedia(this.media)) || {
  146. matches: false,
  147. media: this.media,
  148. addListener: function() {
  149. // do nothing
  150. },
  151. removeListener: function() {
  152. // do nothing
  153. }
  154. };
  155. const that = this;
  156. this.mqlListener = mql => {
  157. const type = (mql.matches && 'enter') || 'leave';
  158. that.callbacks[type].fire(that);
  159. };
  160. this.mql.addListener(this.mqlListener);
  161. }
  162. on(types, data, fn, one = false) {
  163. if (typeof types === 'object') {
  164. for (let type in types) {
  165. if(types.hasOwnProperty(type)){
  166. this.on(type, data, types[type], one);
  167. }
  168. }
  169. return this;
  170. }
  171. if (typeof fn === 'undefined' && util.isFunction(data)) {
  172. fn = data;
  173. data = undefined;
  174. }
  175. if (!util.isFunction(fn)) {
  176. return this;
  177. }
  178. if (typeof this.callbacks[types] !== 'undefined') {
  179. this.callbacks[types].add(fn, data, one);
  180. if (types === 'enter' && this.isMatched()) {
  181. this.callbacks[types].call(this);
  182. }
  183. }
  184. return this;
  185. }
  186. one(types, data, fn) {
  187. return this.on(types, data, fn, true);
  188. }
  189. off(types, fn) {
  190. let type;
  191. if (typeof types === 'object') {
  192. for (type in types) {
  193. if(types.hasOwnProperty(type)){
  194. this.off(type, types[type]);
  195. }
  196. }
  197. return this;
  198. }
  199. if (typeof types === 'undefined') {
  200. this.callbacks.enter.empty();
  201. this.callbacks.leave.empty();
  202. } else if (types in this.callbacks) {
  203. if (fn) {
  204. this.callbacks[types].remove(fn);
  205. } else {
  206. this.callbacks[types].empty();
  207. }
  208. }
  209. return this;
  210. }
  211. isMatched() {
  212. return this.mql.matches;
  213. }
  214. destroy() {
  215. this.off();
  216. }
  217. }
  218. var MediaBuilder = {
  219. min: function(min, unit = 'px') {
  220. return `(min-width: ${min}${unit})`;
  221. },
  222. max: function(max, unit = 'px') {
  223. return `(max-width: ${max}${unit})`;
  224. },
  225. between: function(min, max, unit = 'px') {
  226. return `(min-width: ${min}${unit}) and (max-width: ${max}${unit})`;
  227. },
  228. get: function(min, max, unit = 'px') {
  229. if (min === 0) {
  230. return this.max(max, unit);
  231. }
  232. if (max === Infinity) {
  233. return this.min(min, unit);
  234. }
  235. return this.between(min, max, unit);
  236. }
  237. };
  238. class Size extends MediaQuery {
  239. constructor(name, min = 0, max = Infinity, unit = 'px') {
  240. let media = MediaBuilder.get(min, max, unit);
  241. super(name, media);
  242. this.min = min;
  243. this.max = max;
  244. this.unit = unit;
  245. const that = this;
  246. this.changeListener = () => {
  247. if (that.isMatched()) {
  248. ChangeEvent.trigger(that);
  249. }
  250. };
  251. if (this.isMatched()) {
  252. ChangeEvent.current = this;
  253. }
  254. this.mql.addListener(this.changeListener);
  255. }
  256. destroy() {
  257. this.off();
  258. this.mql.removeListener(this.changeListener);
  259. }
  260. }
  261. class UnionSize extends MediaQuery {
  262. constructor(names) {
  263. let sizes = [];
  264. let media = [];
  265. util.each(names.split(' '), (i, name) => {
  266. let size = Breakpoints$1.get(name);
  267. if(size){
  268. sizes.push(size);
  269. media.push(size.media);
  270. }
  271. });
  272. super(names, media.join(','));
  273. }
  274. }
  275. var info = {
  276. version:"1.0.6"
  277. };
  278. let sizes = {};
  279. let unionSizes = {};
  280. let Breakpoints = window.Breakpoints = function(...args) {
  281. Breakpoints.define.apply(Breakpoints, args);
  282. };
  283. Breakpoints.defaults = defaults;
  284. Breakpoints = util.extend(Breakpoints, {
  285. version: info.version,
  286. defined: false,
  287. define(values, options = {}) {
  288. if (this.defined) {
  289. this.destroy();
  290. }
  291. if (!values) {
  292. values = Breakpoints.defaults;
  293. }
  294. this.options = util.extend(options, {
  295. unit: 'px'
  296. });
  297. for (let size in values) {
  298. if(values.hasOwnProperty(size)){
  299. this.set(size, values[size].min, values[size].max, this.options.unit);
  300. }
  301. }
  302. this.defined = true;
  303. },
  304. destroy() {
  305. util.each(sizes, (name, size) => {
  306. size.destroy();
  307. });
  308. sizes = {};
  309. ChangeEvent.current = null;
  310. },
  311. is(size) {
  312. const breakpoint = this.get(size);
  313. if (!breakpoint) {
  314. return null;
  315. }
  316. return breakpoint.isMatched();
  317. },
  318. /* get all size name */
  319. all() {
  320. let names = [];
  321. util.each(sizes, name => {
  322. names.push(name);
  323. });
  324. return names;
  325. },
  326. set: function(name, min = 0, max = Infinity, unit = 'px') {
  327. let size = this.get(name);
  328. if (size) {
  329. size.destroy();
  330. }
  331. sizes[name] = new Size(name, min, max, unit);
  332. return sizes[name];
  333. },
  334. get: function(size) {
  335. if (sizes.hasOwnProperty(size)) {
  336. return sizes[size];
  337. }
  338. return null;
  339. },
  340. getUnion(sizes) {
  341. if(unionSizes.hasOwnProperty(sizes)) {
  342. return unionSizes[sizes];
  343. }
  344. unionSizes[sizes] = new UnionSize(sizes);
  345. return unionSizes[sizes];
  346. },
  347. getMin(size) {
  348. const obj = this.get(size);
  349. if (obj) {
  350. return obj.min;
  351. }
  352. return null;
  353. },
  354. getMax(size) {
  355. const obj = this.get(size);
  356. if (obj) {
  357. return obj.max;
  358. }
  359. return null;
  360. },
  361. current() {
  362. return ChangeEvent.current;
  363. },
  364. getMedia(size) {
  365. const obj = this.get(size);
  366. if (obj) {
  367. return obj.media;
  368. }
  369. return null;
  370. },
  371. on(sizes, types, data, fn, /*INTERNAL*/ one = false) {
  372. sizes = sizes.trim();
  373. if (sizes === 'change') {
  374. fn = data;
  375. data = types;
  376. return ChangeEvent.on(data, fn, one);
  377. }
  378. if(sizes.includes(' ')){
  379. let union = this.getUnion(sizes);
  380. if (union) {
  381. union.on(types, data, fn, one);
  382. }
  383. } else {
  384. let size = this.get(sizes);
  385. if (size) {
  386. size.on(types, data, fn, one);
  387. }
  388. }
  389. return this;
  390. },
  391. one(sizes, types, data, fn) {
  392. return this.on(sizes, types, data, fn, true);
  393. },
  394. off(sizes, types, fn) {
  395. sizes = sizes.trim();
  396. if (sizes === 'change') {
  397. return ChangeEvent.off(types);
  398. }
  399. if(sizes.includes(' ')){
  400. let union = this.getUnion(sizes);
  401. if (union) {
  402. union.off(types, fn);
  403. }
  404. } else {
  405. let size = this.get(sizes);
  406. if (size) {
  407. size.off(types, fn);
  408. }
  409. }
  410. return this;
  411. }
  412. });
  413. var Breakpoints$1 = Breakpoints;
  414. export default Breakpoints$1;