chore: add toggle bool for features and tools

This commit is contained in:
Jesús Pérex 2025-06-20 20:39:40 +01:00
parent 0575cd3ac5
commit 248b566f91
3 changed files with 77 additions and 29 deletions

View File

@ -200,7 +200,7 @@
</main>
<div
v-if="show_content && cvdata.core && cvdata.core.name"
class="mr-auto w-full lg:w-1/2 text-center text-sm py-2 pr-5 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-lg"
class="noprint mr-auto w-full lg:w-1/2 text-center text-sm py-2 pr-5 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-lg"
>
<nav-menu
:position="NavPosition.footer"

View File

@ -17,6 +17,7 @@
</div>
</button>
</div>
<div class="project-name" v-html="item.name"></div>
<div v-if="item.auth.show" :id="`project-${index}`">
<div v-for="(info,key,infoindex) in showinfo" :key="infoindex">
<section
@ -24,7 +25,7 @@
:class="key === 'purpose' ? 'mt-2' : 'mb-0'"
>
<div class="left-item">
<div v-if="key === 'name'" class="project-name text-center">
<div v-if="key === 'name'" class="text-center">
<tiptap-editor
v-if="authinfo.editable"
:data="item.name"
@ -34,7 +35,6 @@
:idx="index"
@onEditorBlur="onEditor"
/>
<div v-else v-html="item.name"></div>
</div>
<span v-else class="text-gray-400 dark:text-gray-500">{{ t(key).toLocaleLowerCase() }}</span>
</div>
@ -87,9 +87,17 @@
</span>
</div>
</section>
<section v-if="key === 'features' && item.features && Object.keys(item.features).length > 0">
<section v-if="key === 'features' && item.features && Object.keys(item.features).length > 0"
:class="authinfo.toggle ? 'mt-2' : ''"
>
<div class="left-item">
<span class="text-gray-400 dark:text-gray-500">{{ t(key, key).toLocaleLowerCase() }}</span>
<span
:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
:data="`project-${index}-${key}`"
@click="onClick"
>
{{ t(key, key).toLocaleLowerCase() }}
</span>
</div>
<div class="right-item features">
<tiptap-editor
@ -102,14 +110,23 @@
:idx="index"
@onEditorBlur="onEditor"
/>
<span v-else v-html="`<li>${item[key].join('</li><li>')}</li>`" />
<span v-else >
<span
:id="`project-${index}-${key}`"
:class="authinfo.toggle ? 'hidden' : ''"
v-html="`<li>${item[key].join('</li><li>')}</li>`" />
</span>
</div>
</section>
<section v-if="key === 'builtwith' && item.builtwith && Object.keys(item.builtwith).length > 0">
<section v-if="key === 'builtwith' && item.builtwith && Object.keys(item.builtwith).length > 0"
:class="authinfo.toggle ? 'mt-2' : ''"
>
<span
class="text-gray-400 dark:text-gray-500"
:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
:data="`project-${index}-${key}`"
@click="onClick"
>{{ t('builtwith', 'Builtwith').toLocaleLowerCase() }}</span>
<div class="tag-list my-3">
<div class="my-3">
<tiptap-editor
v-if="authinfo.editable"
:data="`<b>${item[key].join('</b> <b>')}</b> `"
@ -120,7 +137,10 @@
:htmlattrs="{ ...useState().htmlAttrs, bold: 'tag-item font-light mb-2' }"
@onEditorBlur="onEditor"
/>
<div v-else>
<div v-else
:id="`project-${index}-${key}`"
:class="authinfo.toggle ? 'tag-list noprint hidden' : 'tag-list '"
>
<span
v-for="(built ,builtindex) in item[key]"
:key="builtindex"
@ -212,5 +232,13 @@ const onItem = (idx: number) => {
const onLink = (e: any) => {
track_action(e,{ ref: 'projects',text: e.target.href || '', lng: i18n.locale.value },routeKy.toString())
}
const onClick = (e: any) => {
let target: string = e.target.getAttribute('data')
if (target) {
let elem = document.getElementById(target)
if (elem) {
elem.classList.toggle('hidden');
}
}
}
</script>

View File

@ -24,6 +24,12 @@
class="mb-0"
>
<div class="left-item">
<span
class="text-gray-400 dark:text-gray-500"
v-if="key !== 'where' && key !== 'wheredef'"
>{{ t(key).toLocaleLowerCase() }}</span>
</div>
<div class="right-item">
<h3 v-if="key === 'where'">
<tiptap-editor
v-if="authinfo.editable"
@ -35,14 +41,7 @@
@onEditorBlur="onEditor"
/>
<span v-else v-html="item.where"></span>
</h3>
<span
class="text-gray-400 dark:text-gray-500"
v-if="key !== 'where' && key !== 'wheredef'"
>{{ t(key).toLocaleLowerCase() }}</span>
</div>
<div class="right-item">
<span v-if="key === 'where'">
<span class="pr-2">: </span>
<tiptap-editor
v-if="authinfo.editable"
:data="item.wheredef"
@ -53,7 +52,7 @@
@onEditorBlur="onEditor"
/>
<span v-else>{{ item.wheredef }}</span>
</span>
</h3>
<span v-if="key !== 'wheredef' && key !== 'where'">
<tiptap-editor
v-if="authinfo.editable"
@ -114,9 +113,17 @@
</ul>
</div>
</section>
<section v-if="key === 'tools' && item.tools && Object.keys(item.tools).length > 0" class>
<span class="text-gray-400 dark:text-gray-500">{{ t('tools', 'Tools').toLocaleLowerCase() }}</span>
<div class="tag-list my-3">
<section v-if="key === 'tools' && item.tools && Object.keys(item.tools).length > 0"
:class="authinfo.toggle ? 'mt-2' : ''"
>
<span
:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
:data="`workexperience-${index}-${key}`"
@click="onClick"
>
{{ t('tools', 'Tools').toLocaleLowerCase() }}
</span>
<div class="my-3">
<tiptap-editor
v-if="authinfo.editable"
:data="`<b>${item[key].join('</b> <b>')}</b> `"
@ -127,12 +134,16 @@
:htmlattrs="{ ...useState().htmlAttrs, bold: 'tag-item font-light mb-2 leading-loose' }"
@onEditorBlur="onEditor"
/>
<span
v-else
v-for="tool,toolindex in item[key]"
:key="toolindex"
class="tag-item font-light mb-2"
>{{ tool }}</span>
<div v-else
:id="`workexperience-${index}-${key}`"
:class="authinfo.toggle ? 'hidden noprint tag-list' : 'tag-list'"
>
<span
v-for="tool,toolindex in item[key]"
:key="toolindex"
class="tag-item font-light mb-2"
>{{ tool }}</span>
</div>
</div>
</section>
</div>
@ -197,6 +208,15 @@ const onEditor = (info: { src: string, field: string, idx: number, data: string,
const onItem = (idx: number) => {
emit('onItem', { src: 'work_experience', itm: props.data[idx], idx })
}
const onClick = (e: any) => {
let target: string = e.target.getAttribute('data')
if (target) {
let elem = document.getElementById(target)
if (elem) {
elem.classList.toggle('hidden');
}
}
}
// const onItem = (e: any) => {
// const el = e.target && e.target.closest ? e.target.closest('.experience-item') : null
// if (el) {