Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactive javascript triggered by bootstrap media queries
const xs = document.createElement('div');
xs.setAttribute('class', 'd-inline d-sm-none');
const sm = document.createElement('div');
sm.setAttribute('class', 'd-none d-sm-inline d-md-none');
const md = document.createElement('div');
md.setAttribute('class', 'd-none d-md-inline d-lg-none');
const lg = document.createElement('div');
lg.setAttribute('class', 'd-none d-lg-inline d-xl-none');
const xl = document.createElement('div');
xl.setAttribute('class', 'd-none d-xl-inline');
const breakpoints = { xs, sm, md, lg, xl };
import Vue from 'vue';
const activeBreakpoints = Vue.observable(Object.keys(breakpoints).reduce((a, b) => { a[b] = false; return a; }, {}));
function recalculate() {
Object.keys(breakpoints).map(bp => {
const style = window.getComputedStyle(breakpoints[bp]);
Vue.set(activeBreakpoints, bp, !!style.display && style.display !== 'none');
});
}
document.addEventListener('DOMContentLoaded', () => {
try {
const body = document.querySelector('body');
const div = document.createElement('div');
div.setAttribute('class', 'responsive-bootstrap-toolkit');
Object.values(breakpoints).forEach(bp => { div.appendChild(bp); });
body.appendChild(div);
recalculate();
} catch (error) { /* */ }
});
window.addEventListener('resize', recalculate);
export default activeBreakpoints;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment