Skip to content

Commit 0c71b41

Browse files
rstoenescurstoenescu
committed
refactor(morph util / Morph): Improve performance; simplify usage
1 parent 1207f10 commit 0c71b41

29 files changed

+807
-731
lines changed

‎docs/src/examples/Morph/BasicGroup.vue‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,71 @@
33
<div
44
class="absolute-top-left bg-red text-white q-ma-md q-pa-lg"
55
style="border-radius: 10px; font-size: 32px"
6-
v-morph:test:800="triggers[0]"
6+
v-morph:topleft:boxes:800="morphGroupModel"
77
>
88
Top left
99
</div>
1010

1111
<div
1212
class="absolute-top-right bg-blue text-white q-ma-lg q-pa-xl"
1313
style="border-radius: 20px; font-size: 18px"
14-
v-morph:test:600.tween="triggers[1]"
14+
v-morph:topright:boxes:600.tween="morphGroupModel"
1515
>
1616
Top right
1717
</div>
1818

1919
<div
2020
class="absolute-bottom-right bg-orange text-white q-ma-lg q-pa-lg"
2121
style="border-radius: 0"
22-
v-morph:test:400="triggers[2]"
22+
v-morph:bottomright:boxes:400="morphGroupModel"
2323
>
2424
Bottom right
2525
</div>
2626

2727
<div
2828
class="absolute-bottom-left bg-green text-white q-ma-xl q-pa-md"
2929
style="border-radius: 40px; font-size: 24px"
30-
v-morph:test:600.resize="triggers[3]"
30+
v-morph:bottomleft:boxes:600.resize="morphGroupModel"
3131
>
3232
Bottom left
3333
</div>
3434

3535
<q-btn
3636
class="absolute-center"
37-
size="lg"
38-
color="orange"
39-
:label="`Trigger [ ${current} ]`"
40-
@click="activateTrigger()"
37+
color="purple"
38+
label="Next morph"
39+
no-caps
40+
@click="nextMorph"
4141
/>
4242
</div>
4343
</template>
4444

4545
<script>
46+
const boxValues = [
47+
'topleft',
48+
'topright',
49+
'bottomleft',
50+
'bottomright'
51+
]
52+
4653
export default {
4754
data () {
4855
return {
49-
current: 1,
50-
triggers: Array(4).fill(null).map((_, i) => i === 1 ? i : void 0)
56+
morphGroupModel: 'topleft'
5157
}
5258
},
5359
5460
methods: {
55-
activateTrigger () {
56-
const i = Math.floor(Math.random() * this.triggers.length)
61+
nextMorph () {
62+
let value = this.morphGroupModel
5763
58-
if (i === this.current) {
59-
this.activateTrigger()
60-
}
61-
else {
62-
this.current = i
63-
this.$set(this.triggers, i, (this.triggers[i] || 0) + 1)
64+
// pick random box, other than current one
65+
while (value === this.morphGroupModel) {
66+
const i = Math.floor(Math.random() * boxValues.length)
67+
value = boxValues[i]
6468
}
69+
70+
this.morphGroupModel = value
6571
}
6672
}
6773
}

‎docs/src/examples/Morph/Card.vue‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,70 @@
11
<template>
2-
<div class="q-pa-md relative-position" style="height: 400px; max-height: 80vh">
2+
<div class="q-pa-md relative-position" style="height: 280px; max-height: 80vh">
33
<q-btn
4-
v-morph:dialog:300.resize="btnTrigger"
4+
v-morph:btn:mygroup:300.resize="morphGroupModel"
55
class="absolute-bottom-left q-ma-md"
66
fab
77
color="primary"
88
size="lg"
99
icon="add"
10-
@click="cardTrigger = showCardStep1"
10+
@click="nextMorph"
1111
/>
1212

1313
<q-card
14-
v-morph:dialog:500.resize="cardTrigger"
14+
v-morph:card1:mygroup:500.resize="morphGroupModel"
1515
class="absolute-bottom-left q-ma-md bg-primary text-white"
1616
style="width: 300px; border-bottom-left-radius: 2em"
1717
>
18-
<template v-if="cardStep === 1">
19-
<q-card-section>
20-
<div class="text-h6">
21-
New user
22-
</div>
23-
</q-card-section>
18+
<q-card-section class="text-h6">
19+
New user
20+
</q-card-section>
2421

25-
<q-card-section>
26-
Please fill the details for a new user.
27-
</q-card-section>
22+
<q-card-section class="text-subtitle1">
23+
Please fill the details for a new user.
24+
</q-card-section>
2825

29-
<q-card-actions align="right">
30-
<q-btn flat label="Next" @click="cardTrigger = showCardStep2" />
31-
</q-card-actions>
32-
</template>
26+
<q-card-actions align="right">
27+
<q-btn flat label="Next" @click="nextMorph" />
28+
</q-card-actions>
29+
</q-card>
3330

34-
<template v-else>
35-
<q-card-section>
36-
<div class="text-h6">
37-
Finalize registration
38-
</div>
39-
</q-card-section>
31+
<q-card
32+
v-morph:card2:mygroup:500.tween="morphGroupModel"
33+
class="absolute-bottom-left q-ma-md bg-primary text-white"
34+
style="width: 300px; border-bottom-left-radius: 2em"
35+
>
36+
<q-card-section class="text-h6">
37+
Finalize registration
38+
</q-card-section>
4039

41-
<q-card-section class="q-py-xl text-center">
42-
<div class="text-h6">
43-
Thank you for registering.
44-
</div>
45-
</q-card-section>
40+
<q-card-section class="q-py-xl text-center text-subtitle2">
41+
Thank you for registering.
42+
</q-card-section>
4643

47-
<q-card-actions align="right">
48-
<q-btn flat label="Close" @click="btnTrigger += 1" />
49-
</q-card-actions>
50-
</template>
44+
<q-card-actions align="right">
45+
<q-btn flat label="Close" @click="nextMorph" />
46+
</q-card-actions>
5147
</q-card>
5248
</div>
5349
</template>
5450

5551
<script>
52+
const nextMorphStep = {
53+
btn: 'card1',
54+
card1: 'card2',
55+
card2: 'btn'
56+
}
57+
5658
export default {
5759
data () {
5860
return {
59-
btnTrigger: 1,
60-
cardTrigger: 0,
61-
cardStep: 0
61+
morphGroupModel: 'btn'
6262
}
6363
},
6464
6565
methods: {
66-
showCardStep1 () {
67-
this.cardStep = 1
68-
},
69-
70-
showCardStep2 () {
71-
this.cardStep = 2
66+
nextMorph () {
67+
this.morphGroupModel = nextMorphStep[this.morphGroupModel]
7268
}
7369
}
7470
}

‎docs/src/examples/MorphUtils/FabCard.vue‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export default {
3838
data () {
3939
return {
4040
toggle: false,
41-
4241
lorem: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
4342
}
4443
},
@@ -49,16 +48,14 @@ export default {
4948
const getFab = () => this.$refs.refFab
5049
const getCard = () => this.$refs.refCard ? this.$refs.refCard.$el : void 0
5150
52-
morph(
53-
{
54-
from: this.toggle === true ? getCard : getFab,
55-
to: this.toggle === true ? getFab : getCard
56-
},
57-
() => {
51+
morph({
52+
from: this.toggle === true ? getCard : getFab,
53+
to: this.toggle === true ? getFab : getCard,
54+
onToggle: () => {
5855
this.toggle = state
5956
},
60-
500
61-
)
57+
duration: 500
58+
})
6259
}
6360
}
6461
}

‎docs/src/examples/MorphUtils/ImageGallery.vue‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -110,48 +110,40 @@ export default {
110110
}
111111
})
112112
113-
this.cancel = morph(
114-
{
115-
from: this.$refs.refThumb[index].$el,
116-
to: this.$refs.refFull.$el
117-
},
118-
() => {
113+
this.cancel = morph({
114+
from: this.$refs.refThumb[index].$el,
115+
to: this.$refs.refFull.$el,
116+
onToggle: () => {
119117
this.indexZoomed = index
120118
},
121-
{
122-
waitFor: this.imgLoaded.promise,
123-
duration: 400,
124-
hideFromClone: true,
125-
style: 'z-index: 2002',
126-
onReady: end => {
127-
if (end === 'from' && this.indexZoomed === index) {
128-
this.indexZoomed = void 0
129-
}
119+
waitFor: this.imgLoaded.promise,
120+
duration: 400,
121+
hideFromClone: true,
122+
style: 'z-index: 2002',
123+
onReady: end => {
124+
if (end === 'from' && this.indexZoomed === index) {
125+
this.indexZoomed = void 0
130126
}
131127
}
132-
)
128+
})
133129
}
134130
}
135131
136132
if (
137133
indexZoomed !== void 0 &&
138134
(this.cancel === void 0 || this.cancel() === false)
139135
) {
140-
morph(
141-
{
142-
from: this.$refs.refFull.$el,
143-
to: this.$refs.refThumb[indexZoomed].$el
144-
},
145-
() => {
136+
morph({
137+
from: this.$refs.refFull.$el,
138+
to: this.$refs.refThumb[indexZoomed].$el,
139+
onToggle: () => {
146140
this.indexZoomed = void 0
147141
},
148-
{
149-
duration: 200,
150-
keepToClone: true,
151-
style: 'z-index: 2002',
152-
onReady: zoom
153-
}
154-
)
142+
duration: 200,
143+
keepToClone: true,
144+
style: 'z-index: 2002',
145+
onReady: zoom
146+
})
155147
}
156148
else {
157149
zoom()

‎docs/src/examples/MorphUtils/ImageStripHorizontal.vue‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,36 +34,31 @@ export default {
3434
this.indexZoomed = void 0
3535
3636
if (index !== void 0 && index !== indexZoomed) {
37-
this.cancel = morph(
38-
this.$refs.refThumb[index].$el,
39-
() => {
37+
this.cancel = morph({
38+
from: this.$refs.refThumb[index].$el,
39+
onToggle: () => {
4040
this.indexZoomed = index
4141
},
42-
{
43-
duration: 500,
44-
style: 'z-index: 1',
45-
onReady: end => {
46-
if (end === 'from' && this.indexZoomed === index) {
47-
this.indexZoomed = void 0
48-
}
42+
duration: 500,
43+
style: 'z-index: 1',
44+
onReady: end => {
45+
if (end === 'from' && this.indexZoomed === index) {
46+
this.indexZoomed = void 0
4947
}
5048
}
51-
)
49+
})
5250
}
5351
5452
if (
5553
indexZoomed !== void 0 &&
5654
(this.cancel === void 0 || this.cancel() === false)
5755
) {
58-
morph(
59-
this.$refs.refThumb[indexZoomed].$el,
60-
void 0,
61-
{
62-
waitFor: 100,
63-
duration: 300,
64-
style: 'z-index: 1'
65-
}
66-
)
56+
morph({
57+
from: this.$refs.refThumb[indexZoomed].$el,
58+
waitFor: 100,
59+
duration: 300,
60+
style: 'z-index: 1'
61+
})
6762
}
6863
}
6964
}

0 commit comments

Comments
 (0)