All files / ext.wikilambda.edit/components App.vue

83.87% Statements 26/31
62.5% Branches 5/8
75% Functions 6/8
83.87% Lines 26/31

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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 11615x 15x 15x 15x 15x 15x 15x 15x     15x                             20x                       16x         16x             20x 20x 20x 20x 20x     20x                       15x   15x     15x 15x 15x       15x       60x         15x                                                      
<!--
	WikiLambda Vue interface module for generic ZObject manipulation.
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<div id="ext-wikilambda-app" class="ext-wikilambda-edit">
		<template v-if="getZObjectInitialized && isAppSetup">
			<!-- Append wl- prefix to the router current view, to help reference component correctly -->
			<component
				:is="`wl-${getCurrentView}`"
				@mounted="newViewMounted"
			></component>
		</template>
		<span v-else>
			{{ $i18n( 'wikilambda-loading' ).text() }}
		</span>
	</div>
</template>
 
<script>
const mapGetters = require( 'vuex' ).mapGetters,
	mapActions = require( 'vuex' ).mapActions,
	eventLogUtils = require( '../mixins/eventLogUtils.js' ),
	FunctionEvaluator = require( '../views/FunctionEvaluator.vue' ),
	FunctionEditor = require( '../views/FunctionEditor.vue' ),
	FunctionViewer = require( '../views/FunctionViewer.vue' ),
	DefaultView = require( '../views/DefaultView.vue' );
 
const startTime = Date.now();
 
// @vue/component
module.exports = exports = {
	name: 'app',
	components: {
		'wl-function-evaluator': FunctionEvaluator,
		'wl-function-editor': FunctionEditor,
		'wl-function-viewer': FunctionViewer,
		'wl-default-view': DefaultView
	},
	mixins: [ eventLogUtils ],
	inject: {
		viewmode: { default: false }
	},
	data: function () {
		return {
			isAppSetup: false
		};
	},
	computed: $.extend(
		mapGetters( [
			'getZObjectInitialized',
			'isNewZObject',
			'getCurrentView'
		] )
	),
	methods: $.extend(
		mapActions( [
			'initializeView',
			'prefetchZids',
			'fetchUserRights',
			'evaluateUri'
		] ),
		{
			/**
			 * Instrument how long our view took to load, split by type of view
			 */
			newViewMounted: function () {
				// Log using Metrics Platform
				// Pending to remove due to T350495
				const customData = {
					viewname: this.getCurrentView || null,
					isnewzobject: this.isNewZObject,
					loadtime: Date.now() - startTime
				};
				this.dispatchEvent( 'wf.ui.newView.mounted', customData );
				// T350495 Update the WikiLambda instrumentation to use core interaction events
				// We should remove this event after migration (it's a performance event)
			}
		}
	),
	created: function () {
		// Set zobject
		this.fetchUserRights();
		this.prefetchZids().then( () => {
			this.initializeView().then( () => {
				this.evaluateUri();
				this.isAppSetup = true;
			} );
		} );
 
		window.onpopstate = function () {
			// Reinitialize zObject is current zobject is new and user changes route
			if ( this.isNewZObject ) {
				this.initializeView().then(
					function () {
						this.evaluateUri();
					}.bind( this )
				);
				return;
			}
 
			this.evaluateUri();
		}.bind( this );
	}
};
</script>
 
<style lang="less">
.ext-wikilambda-view-nojsfallback,
.ext-wikilambda-editor-nojswarning {
	display: none;
}
</style>