media.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. (function(undefined) {
  2. 'use strict';
  3. // Namespace
  4. window.VAMTAM = window.VAMTAM || {};
  5. window.VAMTAM.MEDIA = window.VAMTAM.MEDIA || {
  6. layout: {}
  7. };
  8. var LAYOUT_SIZES = [{
  9. min: 0,
  10. max: window.VAMTAM_FRONT.beaver_small,
  11. className: 'layout-small'
  12. }, {
  13. min: window.VAMTAM_FRONT.beaver_responsive + 1,
  14. max: Infinity,
  15. className: 'layout-max'
  16. }, {
  17. min: window.VAMTAM_FRONT.beaver_responsive + 1,
  18. max: window.VAMTAM_FRONT.content_width,
  19. className: 'layout-max-low'
  20. }, {
  21. min: 0,
  22. max: window.VAMTAM_FRONT.beaver_responsive,
  23. className: 'layout-below-max'
  24. } ];
  25. document.addEventListener('DOMContentLoaded', function () {
  26. if ( document.body.classList.contains( 'responsive-layout' ) && 'matchMedia' in window ) {
  27. var sizesLength = LAYOUT_SIZES.length;
  28. var remap = window.VAMTAM.debounce( function() {
  29. var map = {};
  30. for ( var i = 0; i < sizesLength; i++ ) {
  31. var mq = '(min-width: '+LAYOUT_SIZES[i].min+'px)';
  32. if ( LAYOUT_SIZES[i].max !== Infinity )
  33. mq += ' and (max-width: '+LAYOUT_SIZES[i].max+'px)';
  34. if ( window.matchMedia(mq).matches ) {
  35. map[LAYOUT_SIZES[i].className] = true;
  36. }
  37. else {
  38. map[LAYOUT_SIZES[i].className] = false;
  39. }
  40. }
  41. window.VAMTAM.MEDIA.layout = map;
  42. }, 100 );
  43. window.addEventListener( 'resize', remap, false );
  44. window.addEventListener( 'load', remap, false );
  45. remap();
  46. } else {
  47. window.VAMTAM.MEDIA.layout = { 'layout-max': true, 'layout-below-max': false };
  48. }
  49. } );
  50. })();