Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class MediaQueryListener {
- afterElement = window.getComputedStyle ? window.getComputedStyle(document.body, ':after') : false;
- currentBreakpoint = '';
- lastBreakpoint = '';
- constructor() {
- if(!this.afterElement) {
- return;
- }
- this.resizeListener();
- }
- updateCurrentBreakpoint() {
- this.currentBreakpoint = this.afterElement.getPropertyValue('content').replace(/"/g, '');
- if (this.currentBreakpoint !== this.lastBreakpoint) {
- const event = new CustomEvent(
- 'breakpoint-change',
- { detail: { currentBreakpoint: this.currentBreakpoint } }
- );
- window.dispatchEvent(event);
- this.lastBreakpoint = this.currentBreakpoint;
- }
- }
- resizeListener() {
- window.addEventListener('resize', () => {
- this.updateCurrentBreakpoint();
- });
- window.addEventListener('orientationchange', () => {
- this.updateCurrentBreakpoint();
- });
- window.addEventListener('load', () => {
- this.updateCurrentBreakpoint();
- });
- }
- };
- export default MediaQueryListener;
Add Comment
Please, Sign In to add comment