From 3a74e90f4a6c47bbecac36c7dadd354e049b7167 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 29 Jun 2022 00:50:02 +1000 Subject: Resolve info-modal size-jump after getting info response Make App get the info response, and pass that into TileInfoModal. Attempting to solve this via transitions doesn't seem to work, as transitioning a height to 'auto' seems disallowed. --- src/App.vue | 20 ++++-- src/components/TileInfoModal.vue | 127 ++++++++++++++++++--------------------- 2 files changed, 74 insertions(+), 73 deletions(-) diff --git a/src/App.vue b/src/App.vue index 42a4cd9..d16ad68 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,9 +50,9 @@ @close="searchOpen = false" @search="onSearch" @info-click="onInfoClick" @setting-chg="onSettingChg" /> - + @@ -83,7 +83,7 @@ import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other // Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain -import {TolNode, TolMap, getServerResponse, Action, UiOptions} from './lib'; +import {TolNode, TolMap, getServerResponse, InfoResponse, Action, UiOptions} from './lib'; import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout'; import {initLayoutTree, initLayoutMap, tryLayout} from './layout'; import {getBreakpoint, getScrollBarWidth, isTouchDevice, @@ -189,6 +189,7 @@ export default defineComponent({ overflownRoot: false, // Set when displaying a root tile with many children, with overflow // For modals infoModalNodeName: null as string | null, // Name of node to display info for, or null + infoModalData: null as InfoResponse | null, searchOpen: false, settingsOpen: false, helpOpen: false, @@ -471,12 +472,21 @@ export default defineComponent({ return success; }, // For tile-info events - onInfoClick(nodeName: string): void { + async onInfoClick(nodeName: string){ this.handleActionForTutorial('tileInfo'); if (!this.searchOpen){ // Close an active non-search mode this.resetMode(); } + // Query server for tol-node info + let urlParams = 'type=info&name=' + encodeURIComponent(nodeName); + urlParams += this.uiOpts.useReducedTree ? '&rtree=true' : ''; + let responseObj: InfoResponse = await getServerResponse(urlParams); + if (responseObj == null){ + return; + } + // Set fields from response this.infoModalNodeName = nodeName; + this.infoModalData = responseObj; }, // For search events onSearchIconClick(): void { diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 82db5d4..581e4cd 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -12,45 +12,42 @@
-
Querying server
- + @@ -65,22 +62,38 @@ import {capitalizeWords} from '../util'; export default defineComponent({ props: { + // Node data to display nodeName: {type: String, required: true}, - tolMap: {type: Object as PropType, required: true}, + infoResponse: {type: Object as PropType, required: true}, // Options lytOpts: {type: Object as PropType, required: true}, uiOpts: {type: Object as PropType, required: true}, }, - data(){ - return { - // These are set using a server response - tolNode: null as null | TolNode, - nodes: [] as TolNode[], // The nodes to display info for - imgInfos: [] as (ImgInfo | null)[], - descInfos: [] as (DescInfo | null)[], - }; - }, computed: { + tolNode(): TolNode { + return this.infoResponse.nodeInfo.tolNode; + }, + nodes(): TolNode[] { + if (this.infoResponse.subNodesInfo.length == 0){ + return [this.tolNode]; + } else { + return this.infoResponse.subNodesInfo.map(nodeInfo => nodeInfo.tolNode); + } + }, + imgInfos(): (ImgInfo | null)[] { + if (this.infoResponse.subNodesInfo.length == 0){ + return [this.infoResponse.nodeInfo.imgInfo]; + } else { + return this.infoResponse.subNodesInfo.map(nodeInfo => nodeInfo.imgInfo); + } + }, + descInfos(): (DescInfo | null)[] { + if (this.infoResponse.subNodesInfo.length == 0){ + return [this.infoResponse.nodeInfo.descInfo]; + } else { + return this.infoResponse.subNodesInfo.map(nodeInfo => nodeInfo.descInfo); + } + }, subNames(): [string, string] | null { const regex = /\[(.+) \+ (.+)\]/; let results = regex.exec(this.nodeName); @@ -156,28 +169,6 @@ export default defineComponent({ } }, }, - async created(){ - // Query server for tol-node info - let urlParams = 'type=info&name=' + encodeURIComponent(this.nodeName); - urlParams += this.uiOpts.useReducedTree ? '&rtree=true' : ''; - let responseObj: InfoResponse = await getServerResponse(urlParams); - if (responseObj == null){ - return; - } - // Set fields from response - this.tolNode = responseObj.nodeInfo.tolNode; - if (responseObj.subNodesInfo.length == 0){ - this.nodes = [this.tolNode] - this.imgInfos = [responseObj.nodeInfo.imgInfo]; - this.descInfos = [responseObj.nodeInfo.descInfo]; - } else { - for (let nodeInfo of responseObj.subNodesInfo){ - this.nodes.push(nodeInfo.tolNode); - this.imgInfos.push(nodeInfo.imgInfo); - this.descInfos.push(nodeInfo.descInfo); - } - } - }, components: {CloseIcon, }, emits: ['close', ], }); -- cgit v1.2.3