@endgame/eva v1.0.8-alpha.0
EVA
EVA: Easy Viewport Access
Installation
yarn add @endgame/eva
# or
npm i -S @endgame/eva
The initialization
Vanilla js users
// Import the constructor
import { Eva } from '@endgame/eva';
// Ask EVA to help you š
const eva = new Eva();
/**
* EVA will be at your disposal everywhere at:
* š window.$endgame.eva
*/
window.$endgame = {
eva,
};
Framework usage (example: Nuxt)
// Import the constructor
import { Eva } from '@endgame/eva';
/**
* If you're using Nuxt I recommend you
* to do that in a plugin š
*/
... global-plugin.client.js
const initializeEndgame = (_context, inject) => {
inject('endgame', {
eva: new Eva(),
});
};
...
... YourComponent.vue
mounted() {
/**
* EVA will be at your disposal at:
* š this.$endgame.eva
*/
}
...
The methods
The initialize method
With this method you'll:
š Initialize the window's resize event listener.
š Prepare EVA to be able to give you info on the viewport.
š„ Vanilla
window.$endgame.eva.initialize();
š³ Nuxt
... YourComponent.vue
beforeMount() {
// š For Nuxt: preferably in layout/default.vue
this.$endgame.eva.initialize();
},
...
The destroy method
The destroy method will remove all watchers and the resize event listener. Everything will be ready for garbage collection š
š„ Vanilla
window.$endgame.eva.destroy();
š³ Vue.js
... YourComponent.vue
beforeDestroy(){
this.$endgame.eva.destroy();
},
...
Access and watch viewport data
For purposes of listening to window's width, height changes, breakpoints updates, etc. you only need one method: watch.
/**
* width, height, outerWidth and outerHeight are built-in watchers.
* With them you'll be able to listen to the window's resized values.
*/
// š„ Vanilla EVA access
const { eva } = window.$endgame;
// š³ Vue EVA access
// const { eva } = this.$endgame;
// Access the declared window reactive data
// SEE: @endgame/calvin
console.log(eva.viewport.data.width);
console.log(eva.viewport.data.height);
console.log(eva.viewport.data.outerWidth);
console.log(eva.viewport.data.outerHeight);
// Get notified any time the window's data are updated
eva.viewport.watch({
width: (val) => {
console.log(`window inner width: ${val}`);
},
height: (val) => {
console.log(`window inner height: ${val}`);
},
outerWidth: (val) => {
console.log(`window outer width: ${val}`);
},
outerHeight: (val) => {
console.log(`window outer height: ${val}`);
},
});
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago