diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 20 | ||||
| -rw-r--r-- | 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" /> </transition> <transition name="fade"> - <tile-info-modal v-if="infoModalNodeName != null" - :nodeName="infoModalNodeName" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" - @close="infoModalNodeName = null"/> + <tile-info-modal v-if="infoModalNodeName != null && infoModalData != null" + :nodeName="infoModalNodeName" :infoResponse="infoModalData" + :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" @close="infoModalNodeName = null"/> </transition> <transition name="fade"> <help-modal v-if="helpOpen" :uiOpts="uiOpts" @close="helpOpen = false" @start-tutorial="onStartTutorial"/> @@ -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 @@ </div> </h1> <hr class="mb-4 border-stone-400"/> - <div v-if="tolNode == null">Querying server</div> - <template v-else> - <div v-if="nodes.length > 1">This is a compound node</div> - <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])"> - <h1 v-if="nodes.length > 1" class="text-center font-bold"> - {{getDisplayName(subNames![idx], nodes[idx])}} - </h1> - <div class="flex gap-1"> - <div class="w-1/2"> - <div :style="getImgStyles(nodes[idx])"/> - <ul v-if="imgInfos[idx]! != null"> - <li>Obtained via: {{imgInfos[idx]!.src}}</li> - <li>License: - <a :href="licenseToUrl(imgInfos[idx]!.license)">{{imgInfos[idx]!.license}}</a> - </li> - <li><a :href="imgInfos[idx]!.url" class="underline">Source URL</a></li> - <li>Artist: {{imgInfos[idx]!.artist}}</li> - <li v-if="imgInfos[idx]!.credit != ''" class="overflow-auto"> - Credit: {{imgInfos[idx]!.credit}} - </li> - </ul> - </div> - <div v-if="descInfos[idx]! != null"> - <div> - Redirected: {{descInfos[idx]!.fromRedirect}} <br/> - Short-description from {{descInfos[idx]!.fromDbp ? 'DBpedia' : 'Wikipedia'}} <br/> - <a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId" class="underline"> - Wikipedia Link - </a> - </div> - <hr/> - <div>{{descInfos[idx]!.text}}</div> - </div> - <div v-else> - (No description found) + <div v-if="nodes.length > 1">This is a compound node</div> + <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])"> + <h1 v-if="nodes.length > 1" class="text-center font-bold"> + {{getDisplayName(subNames![idx], nodes[idx])}} + </h1> + <div class="flex gap-1"> + <div class="w-1/2"> + <div :style="getImgStyles(nodes[idx])"/> + <ul v-if="imgInfos[idx]! != null"> + <li>Obtained via: {{imgInfos[idx]!.src}}</li> + <li>License: + <a :href="licenseToUrl(imgInfos[idx]!.license)">{{imgInfos[idx]!.license}}</a> + </li> + <li><a :href="imgInfos[idx]!.url" class="underline">Source URL</a></li> + <li>Artist: {{imgInfos[idx]!.artist}}</li> + <li v-if="imgInfos[idx]!.credit != ''" class="overflow-auto"> + Credit: {{imgInfos[idx]!.credit}} + </li> + </ul> + </div> + <div v-if="descInfos[idx]! != null"> + <div> + Redirected: {{descInfos[idx]!.fromRedirect}} <br/> + Short-description from {{descInfos[idx]!.fromDbp ? 'DBpedia' : 'Wikipedia'}} <br/> + <a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId" class="underline"> + Wikipedia Link + </a> </div> + <hr/> + <div>{{descInfos[idx]!.text}}</div> + </div> + <div v-else> + (No description found) </div> </div> - </template> + </div> </div> </div> </template> @@ -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<TolMap>, required: true}, + infoResponse: {type: Object as PropType<InfoResponse>, required: true}, // Options lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, uiOpts: {type: Object as PropType<UiOptions>, 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', ], }); |