src/utilities/checkBreakPoint/checkSize.js
- // TODO: Need to load jQuery properly.
- /**
- * Checks if the span is set to display lock via CSS
- */
- function checkIfBlock(target) {
- const { $ } = window;
- const isTargetBlcok = $(target).css('display') === 'block';
- return isTargetBlcok;
- }
-
- /**
- * Get window width's info in bootstrap 4's grid system standards.
- * @example
- * const bsGrid = bse.utilities.checkBreakPoint.checkSize();
- * @return {string} bsGrid of current window
- */
- export default function checkSize() {
- const { $ } = window;
- // Add some invisible elements with Bootstrap CSS visibile utility classes
- 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>");
- $('body').append($testElement);
- // Set some variables to use with the if checks below
- const xs = checkIfBlock('.breakpoint-check .xs');
- const md = checkIfBlock('.breakpoint-check .md');
- const sm = checkIfBlock('.breakpoint-check .sm');
- const lg = checkIfBlock('.breakpoint-check .lg');
- const xl = checkIfBlock('.breakpoint-check .xl');
- $testElement.remove();
-
- // add the breakpoint to the console
- if (xs === true) {
- return 'xs';
- }
-
- if (sm === true) {
- return 'sm';
- }
-
- if (md === true) {
- return 'md';
- }
-
- if (lg === true) {
- return 'lg';
- }
-
- if (xl === true) {
- return 'xl';
- }
-
- return 'null';
- }