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 51 52 | 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 37x 37x 37x 37x 37x 37x 21x 37x 37x 37x 37x 37x 20x 37x 37x 37x 37x 24x 24x 96x 61x 61x 96x 24x 24x 37x 37x 37x 37x 37x 157x 157x 37x 37x 37x 37x 37x 37x 37x 37x 20x | /*!
* WikiLambda Vue editor: useBreakpoints composable
*
* @module ext.wikilambda.app.composables.useBreakpoints
* @copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
* @license MIT
*/
'use strict';
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
);
};
|