dwd-projects
/
teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

master
Suvodip Ghosh 2023-02-09 22:01:11 +05:30
parent 82b9847737
commit 0f3ef215c3
1 changed files with 34 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/Readmore.vue
View File

@ -1,85 +1,37 @@
<template> <template>
<div class="block-content">
<transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@before-leave="onBeforeLeave"
@leave="onLeave"
mode="out-in"
>
<p v-if="!isExpanded" class="block-content__preview" >The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet</p>
<p
v-else
:class="{
'block-content__paragraph': true,
'block-content__paragraph--is-expanded': isExpanded,
}"
>also provides practical knowledge of daily life to preschoolers.</p>
</transition>
<button
type="button"
class="block-content__button"
aria-label="Toggle button"
@click="isExpanded = !isExpanded"
>
{{ toggleCtaLabel }}
</button>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, toRefs } from "vue"; <div id="app" class="container">
export default defineComponent({ <p>A simple Read More, Read Less pen in Vue.js</p>
name: "ExpandableBlockContent",
props: { <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
content: { type: String }, fringilla urna. Etiam tempor orci eu lobortis. Integer quis auctor elit sed vulputate mi sit. Lacinia
visibleLines: { type: Number, default: 4 }, at quis risus sed vulputate odio ut enim blandit. Nibh praesent tristique magna sit amet purus. Eleifend donec pretium vulputate sapien nec
}, sagittis. Facilisi morbi tempus iaculis urna id volutpat. Ultrices neque ornare aenean euismod.<span v-if="readMore"></span>
setup(props) { <span v-else>...</span>
const { visibleLines } = toRefs(props); </p>
// Collapsed state
// Assuming that default line-height is 24px <p v-show="readMore">Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
const LINE_HEIGHT = 24; placerat. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Sed cras ornare arcu dui. Aliquam vestibulum
const maxHeightCollapsed = computed(() => LINE_HEIGHT * visibleLines.value); morbi blandit cursus. Adipiscing elit ut aliquam purus sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Ut etiam sit amet
// Animation hooks nisl purus in mollis. Eu mi bibendum neque egestas congue quisque egestas diam in. Pellentesque adipiscing
const onBeforeEnter = (el: Element) => { commodo elit at imperdiet dui accumsan sit.
const htmlEl = el as HTMLElement; </p>
htmlEl.style.height = maxHeightCollapsed.value + "px"; <button class="btn btn-success" @click="readMore =! readMore">
}; <span v-if="readMore">Read Less</span>
const onEnter = (el: Element) => { <span v-else>Read More</span>
const htmlEl = el as HTMLElement; </button>
htmlEl.style.height = el.scrollHeight + "px"; </div>
}; </template>
const onAfterEnter = (el: Element) => { <script>
const htmlEl = el as HTMLElement;
htmlEl.style.overflow = "hidden";
}; // new Vue({
const onBeforeLeave = (el: Element) => { // el: '#app',
const htmlEl = el as HTMLElement; // data:{
htmlEl.style.height = `${el.scrollHeight}px`; // readMore: false
htmlEl.style.overflow = "hidden"; // }
}; // });
const onLeave = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.height = maxHeightCollapsed.value + "px";
htmlEl.style.overflow = "hidden";
};
// Expanded state
const isExpanded = ref(false);
const toggleCtaLabel = computed(() =>
isExpanded.value ? "Read less" : "Read more"
);
return {
isExpanded,
toggleCtaLabel,
onBeforeEnter,
onEnter,
onAfterEnter,
onBeforeLeave,
onLeave,
};
},
});
</script> </script>