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 45 46 47 48 49 50 | 7x 7x 7x 7x 7x 7x 7x 7x 20x 20x 20x 20x 20x 20x 21x 20x 20x 20x 20x 20x 9x 20x 20x 20x 20x 13x 13x 41x 28x 28x 41x 13x 13x 20x 20x 20x 20x 20x 72x 72x 20x 20x 20x 20x 20x 20x 20x 20x 7x | /**
* WikiLambda Vue editor: useBreakpoints composable
*
* @copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
* @license MIT
*/
module.exports = function useBreakpoints( breakpoints ) {
const { ref, onMounted, onUnmounted, computed } = require( 'vue' );
breakpoints = breakpoints || {};
const windowWidth = ref( window.innerWidth );
const onWidthChange = () => {
windowWidth.value = window.innerWidth;
};
onMounted( () => {
window.addEventListener( 'resize', onWidthChange );
} );
onUnmounted( () => {
window.removeEventListener( 'resize', onWidthChange );
} );
// return the largest breakpoint as the current selected type
const current = computed( () => {
let currentType = Object.keys( breakpoints )[ 0 ] || null;
for ( const 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 ] = computed( () => current.value === breakpoint );
return object;
}, {} );
return Object.assign(
{
current: current
},
dynamicBreakpoints
);
};
|