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

80% Statements 20/25
50% Branches 2/4
66.66% Functions 4/6
80% Lines 20/25

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 116                                            12x 12x 12x 12x 12x 12x 12x 12x   12x   12x     12x                         15x                                                           11x   11x                 15x   15x 15x 15x 15x       15x                                
<template>
	<!--
		WikiLambda Vue interface module for generic ZObject manipulation.
 
		@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
		@license MIT
	-->
	<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>
var configureCompat = require( 'vue' ).configureCompat,
	mapGetters = require( 'vuex' ).mapGetters,
	mapActions = require( 'vuex' ).mapActions,
	FunctionEditor = require( '../views/FunctionEditor.vue' ),
	FunctionViewer = require( '../views/FunctionViewer.vue' ),
	ZObjectViewer = require( '../views/ZObjectViewer.vue' ),
	ZObjectEditor = require( '../views/ZObjectEditor.vue' ),
	DefaultView = require( '../views/DefaultView.vue' );
 
const startTime = Date.now();
 
configureCompat( { MODE: 3 } );
 
// @vue/component
module.exports = exports = {
	name: 'app',
	components: {
		'wl-function-editor': FunctionEditor,
		'wl-function-viewer': FunctionViewer,
		'wl-zobject-viewer': ZObjectViewer,
		'wl-zobject-editor': ZObjectEditor,
		'wl-default-view': DefaultView
	},
	inject: {
		viewmode: { default: false }
	},
	data: function () {
		return {
			isAppSetup: false
		};
	},
	computed: $.extend(
		mapGetters( [
			'getZObjectInitialized',
			'isNewZObject'
		] ),
		mapGetters(
			'router',
			[ 'getCurrentView' ]
		)
	),
	methods: $.extend(
		mapActions( [
			'initializeZObject',
			'initialize'
		] ),
		mapActions(
			'router',
			[ 'evaluateUri' ]
		),
		{
			/**
			 * Instrument how long our view took to load, split by type of view
			 */
			newViewMounted: function () {
				// HACK: Is there a nicer way to split this by type of view?
 
				const viewName = ( window.vueInstance && window.vueInstance.getCurrentView ) || 'testComponent';
 
				mw.track(
					'timing.wikiLambda.newView.' + viewName + '.mounted',
					Date.now() - startTime
				);
			}
		}
	),
	created: function () {
		// Set zobject
		this.initializeZObject().then(
			function () {
				this.initialize( this.$i18n );
				$.$i18n = this.$i18n;
				this.evaluateUri();
				this.isAppSetup = true;
			}.bind( this )
		);
 
		window.onpopstate = function () {
			// Reinitialize zObject is current zobject is new and user changes route
			Iif ( this.isNewZObject ) {
				this.initializeZObject().then(
					function () {
						this.evaluateUri();
					}.bind( this )
				);
				return;
			}
 
			this.evaluateUri();
		}.bind( this );
	}
};
</script>