Home Reference Source

src/utilities/checkBreakPoint/checkSize.js

  1. // TODO: Need to load jQuery properly.
  2. /**
  3. * Checks if the span is set to display lock via CSS
  4. */
  5. function checkIfBlock(target) {
  6. const { $ } = window;
  7. const isTargetBlcok = $(target).css('display') === 'block';
  8. return isTargetBlcok;
  9. }
  10.  
  11. /**
  12. * Get window width's info in bootstrap 4's grid system standards.
  13. * @example
  14. * const bsGrid = bse.utilities.checkBreakPoint.checkSize();
  15. * @return {string} bsGrid of current window
  16. */
  17. export default function checkSize() {
  18. const { $ } = window;
  19. // Add some invisible elements with Bootstrap CSS visibile utility classes
  20. const $testElement = $("<div style='display:none;' class='breakpoint-check'><span class='xs d-block d-sm-inline'></span><span class='sm d-sm-block d-md-inline'></span><span class='md d-md-block d-lg-inline'></span><span class='lg d-lg-block d-xl-inline'></span><span class='xl d-xl-block'></span></div>");
  21. $('body').append($testElement);
  22. // Set some variables to use with the if checks below
  23. const xs = checkIfBlock('.breakpoint-check .xs');
  24. const md = checkIfBlock('.breakpoint-check .md');
  25. const sm = checkIfBlock('.breakpoint-check .sm');
  26. const lg = checkIfBlock('.breakpoint-check .lg');
  27. const xl = checkIfBlock('.breakpoint-check .xl');
  28. $testElement.remove();
  29.  
  30. // add the breakpoint to the console
  31. if (xs === true) {
  32. return 'xs';
  33. }
  34.  
  35. if (sm === true) {
  36. return 'sm';
  37. }
  38.  
  39. if (md === true) {
  40. return 'md';
  41. }
  42.  
  43. if (lg === true) {
  44. return 'lg';
  45. }
  46.  
  47. if (xl === true) {
  48. return 'xl';
  49. }
  50.  
  51. return 'null';
  52. }