Created XSLT Tooltips (#243)
Co-authored-by: widlam <mikolaj.widla@gmail.com> Reviewed-on: #243
This commit is contained in:
@@ -7,6 +7,8 @@ import xpath1 from '@/assets/tooltips/xpath/xpath1.json';
|
||||
import xpath2 from '@/assets/tooltips/xpath/xpath2.json';
|
||||
import xpath3 from '@/assets/tooltips/xpath/xpath3.json';
|
||||
import xpath31 from '@/assets/tooltips/xpath/xpath31.json';
|
||||
import xslt1 from '@/assets/tooltips/xslt/xslt1.json';
|
||||
import xslt3 from '@/assets/tooltips/xslt/xslt3.json'
|
||||
import TooltipDiffsComponent from './TooltipDiffsComponent.vue';
|
||||
|
||||
|
||||
@@ -14,13 +16,18 @@ const props = defineProps({
|
||||
version: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
toolType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const areTooltipsHidden = ref(true)
|
||||
|
||||
function selectXPathVersion() {
|
||||
switch(props.version) {
|
||||
function selectTooltip() {
|
||||
if(props.toolType == "xpath"){
|
||||
switch(props.version) {
|
||||
case "1.0":
|
||||
return xpath1;
|
||||
case "2.0":
|
||||
@@ -31,6 +38,17 @@ function selectXPathVersion() {
|
||||
default:
|
||||
return xpath31;
|
||||
}
|
||||
} else {
|
||||
switch(props.version){
|
||||
case "1.0":{
|
||||
return xslt1;
|
||||
}
|
||||
case "3.0":{
|
||||
return xslt3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function toggleTooltips() {
|
||||
@@ -45,10 +63,10 @@ function toggleTooltips() {
|
||||
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
|
||||
</button>
|
||||
<div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-scroll rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
|
||||
<TooltipDiffsComponent tool-name="XPath" :tool-version="props.version"></TooltipDiffsComponent>
|
||||
<TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
|
||||
<div class="w-full h-2"> </div>
|
||||
<tooltipCategoryComponent v-for="category in selectXPathVersion()" :name="category.name">
|
||||
<tooltipEntryComponent v-for="entry in category.entries" :entry-data="entry"></tooltipEntryComponent>
|
||||
<tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">
|
||||
<tooltipEntryComponent :tool="toolType" v-for="entry in category.entries" :key="entry.name" :entry-data="entry"></tooltipEntryComponent>
|
||||
</tooltipCategoryComponent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import xpathDiffs from '@/assets/tooltips/xpath/xpathdiffs.json';
|
||||
import { ref } from 'vue';
|
||||
import xsltDiffs from '@/assets/tooltips/xslt/xsltdiffs.json';
|
||||
import TooltipCategoryComponent from './TooltipCategoryComponent.vue';
|
||||
|
||||
const isEntryHidden = ref(true)
|
||||
|
||||
const props = defineProps({
|
||||
toolName: {type: String, required: true},
|
||||
toolVersion: {type: String, required: true}
|
||||
})
|
||||
|
||||
function getDiffEntry(toolVersion : String) : string[] {
|
||||
switch(toolVersion){
|
||||
if ( props.toolName == "xpath" ){
|
||||
switch(toolVersion){
|
||||
case "2.0" : {
|
||||
return xpathDiffs.VersionDiffs[0].diffs
|
||||
}
|
||||
@@ -17,32 +22,49 @@ function getDiffEntry(toolVersion : String) : string[] {
|
||||
return xpathDiffs.VersionDiffs[2].diffs
|
||||
}
|
||||
default: {
|
||||
return xpathDiffs.VersionDiffs[0].diffs
|
||||
return xpathDiffs.VersionDiffs[2].diffs
|
||||
}
|
||||
}
|
||||
} else if (props.toolName == "xslt") {
|
||||
return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
|
||||
} else{
|
||||
return ["foo"]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getInfo(num : number ){
|
||||
if(props.toolName == "xslt"){
|
||||
return xsltDiffs.universalInfo[num]
|
||||
} else{
|
||||
return xpathDiffs.universalInfo[num]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
toolName: {type: String, required: true},
|
||||
toolVersion: {type: String, required: true}
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<TooltipCategoryComponent :name="xpathDiffs.universalInfo[0].category">
|
||||
<TooltipCategoryComponent :name="getInfo(0).category">
|
||||
<span class="text-center">
|
||||
{{ xpathDiffs.universalInfo[0].description }}
|
||||
{{ getInfo(0).description }}
|
||||
</span>
|
||||
</TooltipCategoryComponent>
|
||||
|
||||
<TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="'What\'s new in ' + toolName + ' ' + toolVersion ">
|
||||
<TooltipCategoryComponent v-if="toolVersion !== '1.0'" :name="getInfo(1).category">
|
||||
<span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
|
||||
* {{ diff }}
|
||||
<div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
|
||||
------------ {{ diff }} ------------
|
||||
</div>
|
||||
<span v-else>
|
||||
* {{ diff }}
|
||||
</span>
|
||||
|
||||
</span>
|
||||
</TooltipCategoryComponent>
|
||||
|
||||
|
||||
@@ -3,7 +3,8 @@ import { ref } from 'vue';
|
||||
const isEntryHidden = ref(true)
|
||||
|
||||
const props = defineProps({
|
||||
entryData: {type: Object, required: true}
|
||||
entryData: {type: Object, required: true},
|
||||
tool:{type: String, required:true}
|
||||
})
|
||||
|
||||
function toggleTooltips() {
|
||||
@@ -11,7 +12,11 @@ function toggleTooltips() {
|
||||
}
|
||||
|
||||
function entryHasArguments() {
|
||||
return props.entryData.arguments.length > 0;
|
||||
if("attributes" in props.entryData){
|
||||
return props.entryData.attributes.length > 0;
|
||||
} else if("arguments" in props.entryData){
|
||||
return props.entryData.arguments.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
function entryHasExamples() {
|
||||
@@ -50,18 +55,36 @@ function interpretXPathIndicators( elementType:string ):string {
|
||||
{{ props.entryData.description }}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
<h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
|
||||
<div id="xpathArgTooltip" v-if="tool == 'xpath'">
|
||||
<h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
|
||||
<table v-if="entryHasArguments()" class="w-full">
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr v-for="arg in props.entryData.arguments">
|
||||
<tr v-for="arg in props.entryData.arguments" :key="arg">
|
||||
<td class="text-center">{{ interpretXPathIndicators( arg.type ) }}</td>
|
||||
<td class="text-center">{{ arg.description }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="xsltAttrTooltip" v-if="tool == 'xslt'">
|
||||
<h4 class="text-xl mt-4 mb-2 font-bold"> Attributes</h4>
|
||||
<table v-if="entryHasArguments()" class="w-full">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr v-for="attr in props.entryData.attributes" :key="attr">
|
||||
<td class="text-center p-2">{{ attr.name }}</td>
|
||||
<td class="text-center p-2">{{ interpretXPathIndicators( attr.type ) }}</td>
|
||||
<td class="text-center p-2">{{ attr.description }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<strong>Output: </strong>{{ interpretXPathIndicators(props.entryData.output) }}
|
||||
</div>
|
||||
@@ -73,13 +96,13 @@ function interpretXPathIndicators( elementType:string ):string {
|
||||
<th>Command</th>
|
||||
<th>Output</th>
|
||||
</tr>
|
||||
<tr v-for="ex in props.entryData.examples">
|
||||
<tr v-for="ex in props.entryData.examples" :key="ex">
|
||||
<td class="text-center"><code>{{ ex.command }}</code></td>
|
||||
<td class="text-center">{{ ex.output }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="mt-2">
|
||||
<a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">W3C Documentation Reference</a>
|
||||
<a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">Documentation Reference</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user