surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS Animations

Browse Source
This commit is contained in:
Surya Paolo
2022-11-18 18:54:30 +01:00
parent 495abc33be
commit a56ee80fbb
30 changed files with 1131 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/CMyElem/CMyElem.ts
View File

@@ -6,6 +6,7 @@ import { IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '../CImgTitle/index'
import { CImgPoster } from '@/components/CImgPoster'
import { CTitle } from '@/components/CTitle/index'
import { tools } from '@store/Modules/tools'
import { shared_consts } from '@/common/shared_vuejs'
@@ -31,7 +32,7 @@ export default defineComponent({
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize
CSelectColor, CSelectFontSize, CImgPoster,
},
emits: ['selElemClick'],
props: {
@@ -203,21 +204,6 @@ export default defineComponent({
return mycl
}
function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
if (elem) {
if (elem.type === shared_consts.ELEMTYPE.CARD) {
if (reccard?.imagefile)
return 'upload/pages/' + elem.path + '/' + reccard.imagefile
else
return ''
} else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
return 'upload/pages/' + elem.path + '/' + elem.container
} else {
return 'upload/pages/' + elem.path + '/' + elem.image
}
}
}
function showFit() {
if (props.myelem.type)
return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
@@ -252,7 +238,6 @@ export default defineComponent({
showFit,
getValDb,
dupElem,
getImgFileByElem,
}
},

55
src/components/CMyElem/CMyElem.vue
View File

@@ -10,7 +10,7 @@
<div>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
{{ myel.container }}
@@ -27,7 +27,7 @@
<div v-for="(rec, ind) in myel.listcards" :key="ind" >
<q-card :class="`my-card center_img bordered ` + myel.class3"
:style="rec.style">
<q-img :src="getImgFileByElem(myel, rec)" />
<q-img :class="myel.class_anim" :src="tools.getImgFileByElem(myel, rec)" />
<q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
{{ rec.alt }}
@@ -61,7 +61,7 @@
<!--<q-slide-transition>
<div v-show="expanded">
<q-separator />
<q-card-section class="text-subitle2">
<q-card-section class="text-subtitle2">
</q-card-section>
</div>
@@ -84,7 +84,7 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()+ ` `+ myel.class_anim"
@click="clickOnElem"
>
<CTitle
@@ -100,22 +100,51 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<CImgTitle
v-if="myel.container"
:src="myel.container"
:title="myel.title"
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:title="myel.container"
:legendinside="myel.container2"
>
</CImgTitle>
</div>
</div>
</div> <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:title="myel.container"
:myheight="myel.heightimg"
:colorTitle="myel.color"
:classTitle="myel.class4"
:vertalign="myel.vertalign"
:speed="myel.speed"
:classSubtitle="myel.class3"
:colorSubtitle="myel.colorsub"
:legendinside="myel.container2"
:logo="tools.getImgFileByFilename(myel, myel.container3)"
:logoheight="myel.height"
:logowidth="myel.width"
:fit="myel.fit"
:class_anim="myel.class_anim"
:class_anim2="myel.class_anim2"
>
</CImgPoster>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
v-html="myel.containerHtml"
></div>
@@ -124,11 +153,11 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<q-img
:src="getImgFileByElem(myel.container)"
:src="tools.getImgFileByElem(myel.image)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
@@ -141,11 +170,11 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<q-img
:src="getImgFileByElem(myel)"
:src="tools.getImgFileByElem(myel)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"