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 11315x 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
				const customData = {
					viewname: this.getCurrentView || null,
					isnewzobject: this.isNewZObject,
					loadtime: Date.now() - startTime
				};
				this.dispatchEvent( 'wf.ui.newView.mounted', customData );
			}
		}
	),
	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>