Skip to content

Commit

Permalink
Add more info button on my history timeline and create modal componen…
Browse files Browse the repository at this point in the history 
…t . .
  • Loading branch information
@krlan2789
krlan2789 committed Jun 20, 2024
1 parent 315eda0 commit fa9952f
Show file tree
Hide file tree
Showing 8 changed files with 236 additions and 81 deletions.
2 changes: 1 addition & 1 deletion src/components/MarkdownComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<section v-if="sourceMarkdown" id="markdown" class="w-full py-0 max-xs:min-h-screen">
<div id="markdown-content" class="flex-row w-full p-4" v-highlight v-html="sourceMarkdown"></div>
<div id="markdown-content" class="flex-row w-full" v-highlight v-html="sourceMarkdown"></div>
</section>
</template>

Expand Down
59 changes: 59 additions & 0 deletions src/components/ModalComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<div v-show="isVisible" id="block-modal"
class="fixed top-0 bottom-0 left-0 right-0 z-[99999] flex items-center justify-center bg-dark bg-opacity-30"
@click="onCloseModal($event)">
<div class="flex flex-col shadow-md bg-tertiary max-w-[92%] max-h-[80%] xl:max-w-3xl rounded-2xl">
<section
class="relative z-10 flex flex-col items-center justify-center w-full h-auto px-6 py-4 text-center text-dark">
<slot name="header"></slot>
<div class="absolute bottom-0 border-b-[2px] border-quaternary w-full h-px"></div>
</section>

<section class="relative px-6 py-3 overflow-x-hidden overflow-y-auto" ref="modalBody">
<slot name="body"></slot>
</section>

<section class="relative flex items-center justify-center">
<div class="absolute top-0 border-b-[2px] border-quaternary w-full h-px"></div>
<button type="button"
class="p-1 m-3 text-xl font-bold bg-transparent border-2 rounded-full cursor-pointer lan-text-primary"
@click="onCloseModal()">
<CloseIcon class="w-auto h-8"></CloseIcon>
</button>
</section>
</div>
</div>
</template>

<script>
import { ref } from "vue";
import CloseIcon from "./icons/CloseIcon.vue";
export default {
name: 'ModalComponent',
components: { CloseIcon },
setup() {
const isVisible = ref(false);
const modalBody = ref(null);
return {
isVisible,
modalBody
};
},
expose: ['onVisibleChange'],
methods: {
onCloseModal(event = null) {
if (event == null || event.target.id == "block-modal") {
this.$emit('close');
this.onVisibleChange(false);
}
},
onVisibleChange(status) {
this.isVisible = status;
console.log(`onVisibleChange: ${status}`);
document.documentElement.style.overflow = this.isVisible ? 'hidden' : 'auto';
this.modalBody.scrollTop = 0;
}
}
};
</script>
16 changes: 9 additions & 7 deletions src/components/ProfileComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<section v-if="dataUser != null && dataUser.navbarBrand" id="profile" class="pt-24 pb-16 lg:pb-0 max-xs:min-h-screen">
<section v-if="dataUser != null && dataUser.navbarBrand" id="profile"
class="pt-24 pb-16 lg:pb-0 max-xs:min-h-screen">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 pt-4 pb-0 text-center">
Expand All @@ -16,7 +17,8 @@
{{ name }}<span v-if="index < nameParts.length - 1" class="text-primary">_</span>
</span>
</h3>
<table class="w-full mb-6 text-sm font-medium border-separate table-auto text-secondary sm:text-base">
<table
class="w-full mb-6 text-sm font-medium border-separate table-auto text-secondary sm:text-base">
<thead>
<tr>
<th></th>
Expand All @@ -29,18 +31,18 @@
<td class="text-primary" v-html="data.label"></td>
<td class="w-4"></td>
<td v-if="data.type == 'text'" v-html="data.value"></td>
<td
v-else-if="data.type == 'age'"
v-html="monthsToYears(monthDiff(data.value, new Date())).replace('yrs', 'yo').replace('yr', 'yo')"
></td>
<td v-else-if="data.type == 'age'"
v-html="monthsToYears(monthDiff(data.value, new Date())).replace('yrs', 'yo').replace('yr', 'yo')">
</td>
</tr>
</template>

<tr v-if="dataUser.socialMedia?.email">
<td class="text-primary">Email</td>
<td class="w-4"></td>
<td>
<a :href="'mailto://' + dataUser.socialMedia.email" v-html="dataUser.socialMedia.email"></a>
<a :href="'mailto://' + dataUser.socialMedia.email"
v-html="dataUser.socialMedia.email"></a>
</td>
</tr>
</tbody>
Expand Down
60 changes: 57 additions & 3 deletions src/components/StoryComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,80 @@
</div>

<!-- Timeline -->
<Timeline2Component :histories="dataUser.history.timeline"></Timeline2Component>
<Timeline2Component :histories="dataUser.history.timeline" @moreInfoClick="showModal"></Timeline2Component>
<!-- Timeline -->
</div>
</section>

<!-- <div>
<button type="button" class="btn" @click="showModal(0)">
Open Modal!
</button>
</div> -->

<ModalComponent @close="closeModal" ref="modalComponent">
<template #body v-if="dataReadme">
<MarkdownComponent v-if="dataReadme" :sourceMarkdown="dataReadme"></MarkdownComponent>
</template>
</ModalComponent>

</template>

<script setup></script>

<script>
import { ref, inject } from "vue";
import { inject, ref } from "vue";
import markdownit from "markdown-it";
import tools from "../helper/tools";
import Timeline2Component from "./Timeline2Component.vue";
import ModalComponent from './ModalComponent.vue';
import MarkdownComponent from "./MarkdownComponent.vue";
export default {
name: "StoryComponent",
components: { Timeline2Component },
components: { Timeline2Component, ModalComponent, MarkdownComponent },
setup() {
const { dataUser } = inject("dataUser");
const modalComponent = ref(null);
return {
dataUser,
modalComponent,
};
},
data() {
return {
dataReadme: "",
};
},
methods: {
async showModal(id) {
await this.moreInfo(id);
this.modalComponent.onVisibleChange(true);
},
closeModal() {
this.modalComponent.onVisibleChange(false);
},
async moreInfo(id) {
const mdit = markdownit({
typographer: true,
linkify: true,
});
let dataJobSource = {};
if (this.dataUser != null && typeof this.dataUser.history == "object" &&
this.dataUser.history.timeline != null && this.dataUser.history.timeline.length >= id
) {
dataJobSource = this.dataUser.history.timeline[id].source;
}
if (dataJobSource != null) {
const resText = await tools.getContentReadme(dataJobSource);
// console.log(resText);
this.dataReadme = mdit.render(resText);
}
}
}
};
</script>
114 changes: 57 additions & 57 deletions src/components/Timeline2Component.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,46 @@
<div class="flex flex-col grid-cols-9 px-2 mx-auto md:grid">
<template v-for="(history, index) in histories">
<!-- left -->
<div v-if="index % 2 == 0" class="flex flex-row-reverse md:contents" :key="index" :class="'timeline-item-id-' + index">
<div
class="col-start-1 col-end-5 p-4 my-8 ml-auto shadow-md bg-quaternary rounded-xl"
:class="{
'mt-20': index == 0,
'mb-20': index == histories.length - 1,
}"
>
<h3
class="px-2 mb-1 -mx-2 text-base font-semibold text-left md:text-right text-primary"
v-html="history.title"
></h3>
<p
v-if="history.status"
class="text-xs font-semibold mb-2 opacity-75 text-left md:text-right lg:text-sm text-secondary"
v-html="history.status"
></p>
<div v-if="index % 2 == 0" class="flex flex-row-reverse md:contents" :key="index"
:class="'timeline-item-id-' + index">
<div class="col-start-1 col-end-5 p-4 my-8 ml-auto shadow-md bg-quaternary rounded-xl" :class="{
'mt-20': index == 0,
'mb-20': index == histories.length - 1,
}">
<h3 class="px-2 mb-1 -mx-2 text-base font-semibold text-left md:text-right text-primary"
v-html="history.title"></h3>
<p v-if="history.status"
class="mb-2 text-xs font-semibold text-left opacity-75 md:text-right lg:text-sm text-secondary"
v-html="history.status"></p>
<p class="mb-2 text-sm leading-tight text-left md:text-right" v-html="history.desc"></p>
<p class="text-xs font-semibold opacity-75 text-left md:text-right lg:text-sm text-secondary">
{{ `${dateFormat(history.dateFrom, "MMM YYYY")} - ${dateFormat(history.dateTo, "MMM YYYY")}` }}
<p
class="mb-2 text-xs font-semibold text-left opacity-75 md:text-right lg:text-sm text-secondary">
{{ `${dateFormat(history.dateFrom, "MMM YYYY")} - ${dateFormat(history.dateTo, "MMM YYYY")}`
}}
<br />
{{ `(${monthsToYears(monthDiff(history.dateFrom, history.dateTo))})` }}
</p>
<div v-if="typeof history.source == 'object'" class="w-full h-auto">
<button class="w-full px-4 py-1 text-sm text-center rounded-full lan-text-primary"
@click="onMoreInfo(index)">
More Info
</button>
</div>
</div>
<div class="relative col-start-5 col-end-6 mr-10 md:mx-auto">
<div
class="flex items-center justify-center w-6 h-full"
:class="{
'pt-36': index == 0,
}"
>
<div class="flex items-center justify-center w-6 h-full" :class="{
'pt-36': index == 0,
}">
<div class="w-1 h-full pointer-events-none bg-quaternary"></div>
</div>
<div
class="absolute w-6 h-6 -mt-3 rounded-full shadow top-1/2"
:class="{
'bg-quaternary': index != 0,
'bg-primary': index == 0,
'translate-y-6': index == 0,
'-translate-y-6': index == histories.length - 1,
}"
>
<div v-if="index == 0" class="flex items-center justify-center w-full h-full bg-transparent">
<div class="absolute w-6 h-6 -mt-3 rounded-full shadow top-1/2" :class="{
'bg-quaternary': index != 0,
'bg-primary': index == 0,
'translate-y-6': index == 0,
'-translate-y-6': index == histories.length - 1,
}">
<div v-if="index == 0"
class="flex items-center justify-center w-full h-full bg-transparent">
<div class="w-4 h-4 m-auto rounded-full bg-quaternary animate-pulse"></div>
</div>
</div>
Expand All @@ -59,33 +56,31 @@
<div class="flex items-center justify-center w-6 h-full">
<div class="w-1 h-full pointer-events-none bg-quaternary"></div>
</div>
<div
class="absolute w-6 h-6 -mt-3 rounded-full shadow bg-quaternary top-1/2"
:class="{
'translate-y-6': index == 0,
'-translate-y-6': index == histories.length - 1,
}"
></div>
<div class="absolute w-6 h-6 -mt-3 rounded-full shadow bg-quaternary top-1/2" :class="{
'translate-y-6': index == 0,
'-translate-y-6': index == histories.length - 1,
}"></div>
</div>
<div
class="col-start-6 col-end-10 p-4 my-8 mr-auto shadow-md bg-quaternary rounded-xl"
:class="{
'mt-20': index == 0,
'mb-20': index == histories.length - 1,
}"
>
<div class="col-start-6 col-end-10 p-4 my-8 mr-auto shadow-md bg-quaternary rounded-xl" :class="{
'mt-20': index == 0,
'mb-20': index == histories.length - 1,
}">
<h3 class="px-2 mb-1 -mx-2 text-base font-semibold text-primary" v-html="history.title"></h3>
<p
v-if="history.status"
class="text-xs font-semibold mb-2 opacity-75 lg:text-sm text-secondary"
v-html="history.status"
></p>
<p v-if="history.status" class="mb-2 text-xs font-semibold opacity-75 lg:text-sm text-secondary"
v-html="history.status"></p>
<p class="mb-2 text-sm leading-tight" v-html="history.desc"></p>
<p class="text-xs font-semibold opacity-75 lg:text-sm text-secondary">
{{ `${dateFormat(history.dateFrom, "MMM YYYY")} - ${dateFormat(history.dateTo, "MMM YYYY")}` }}
<p class="mb-2 text-xs font-semibold opacity-75 lg:text-sm text-secondary">
{{ `${dateFormat(history.dateFrom, "MMM YYYY")} - ${dateFormat(history.dateTo, "MMM YYYY")}`
}}
<br />
{{ `(${monthsToYears(monthDiff(history.dateFrom, history.dateTo))})` }}
</p>
<div v-if="typeof history.source == 'object'" class="w-full h-auto">
<button class="w-full px-4 py-1 text-sm text-center rounded-full lan-text-primary"
@click="onMoreInfo(index)">
More Info
</button>
</div>
</div>
</div>
<!-- right -->
Expand All @@ -101,6 +96,11 @@ export default {
mixins: [dateTimeMixins],
name: "Timeline2Component",
props: ["histories"],
methods: {},
methods: {
onMoreInfo(index) {
this.$emit('moreInfoClick', index);
console.log('more info: ' + index);
},
},
};
</script>
17 changes: 17 additions & 0 deletions src/components/icons/CloseIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg> -->

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</template>

<script>
export default {
name: "CloseIcon",
};
</script>
21 changes: 21 additions & 0 deletions src/helper/tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,25 @@ export default {
const res = await fetch("/data_user.json");
return await res.json();
},
async getContentReadme(source) {
if (source != null && typeof source.type != "undefined" && source.type != null && typeof source.url == "string") {
let readmeUrl = '';

switch (source.type.toLowerCase()) {
case 'github':
readmeUrl = ("" + source.url).replace("github.com", "raw.githubusercontent.com") + "/main/README.md";
break;
case 'local':
readmeUrl = window.location.origin + source.url;
break;
}
console.log(readmeUrl);

const res = await fetch(readmeUrl);
const resText = await res.text();
return resText;
}

return '';
}
};
Loading

0 comments on commit fa9952f

Please sign in to comment.