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 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 11x 21x 21x 21x 21x 14x 14x 46x 31x 31x 46x 14x 14x 21x 21x 21x 21x 21x 77x 77x 21x 21x 21x 21x 21x 21x 21x 21x 7x | /**
* WikiLambda Vue editor: useBreakpoints composable
*
* @copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
* @license MIT
*/
module.exports = function useBreakpoints( breakpoints ) {
const Vue = require( 'vue' );
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( () => {
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 ] = Vue.computed( () => current.value === breakpoint );
return object;
}, {} );
return Object.assign(
{
current: current
},
dynamicBreakpoints
);
};
|