All files / ext.wikilambda.edit/composables useBreakpoints.js

100% Statements 21/21
100% Branches 6/6
100% Functions 7/7
100% Lines 21/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4518x   18x 34x 34x   34x 3x   34x 26x   34x 15x       34x 32x 32x 136x 85x       32x       34x   144x 6x   144x     34x              
var Vue = require( 'vue' );
 
module.exports = function useBreakpoints( breakpoints ) {
	breakpoints = breakpoints || {};
	const windowWidth = Vue.ref( window.innerWidth );
 
	const onWidthChange = () => {
		windowWidth.value = window.innerWidth;
	};
	Vue.onMounted( () => {
		window.addEventListener( 'resize', onWidthChange );
	} );
	Vue.onUnmounted( () => {
		window.removeEventListener( 'resize', onWidthChange );
	} );
 
	// return the largest breakpoint as the current selected type
	const current = Vue.computed( () => {
		var currentType = Object.keys( breakpoints )[ 0 ] || null;
		for ( var breakpoint in breakpoints ) {
			if ( windowWidth.value >= breakpoints[ breakpoint ] ) {
				currentType = breakpoint;
			}
		}
 
		return currentType;
	} );
 
	// Dynamically creates a boolean value for each of the breakpoint
	const dynamicBreakpoints = Object.keys( breakpoints )
		.reduce( ( object, breakpoint ) => {
			object[ breakpoint ] = Vue.computed( () => {
				return current.value === breakpoint;
			} );
			return object;
		}, {} );
 
	return $.extend(
		{
			current: current
		},
		dynamicBreakpoints
	);
};