sticky title
This commit is contained in:
parent
6b032c8306
commit
20ad475761
1 changed files with 161 additions and 82 deletions
|
@ -37,10 +37,11 @@
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
<AbsoluteLayout dock="bottom">
|
<AbsoluteLayout dock="bottom">
|
||||||
<ScrollView
|
<ScrollView
|
||||||
|
dock="bottom"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
@loaded="onScrollLoad"
|
@loaded="onScrollLoad"
|
||||||
@scroll="!toast && onScroll($event)"
|
@scroll="onScroll($event)"
|
||||||
>
|
>
|
||||||
<StackLayout>
|
<StackLayout>
|
||||||
<GridLayout rows="auto" columns="*, *">
|
<GridLayout rows="auto" columns="*, *">
|
||||||
|
@ -170,24 +171,10 @@
|
||||||
</StackLayout>
|
</StackLayout>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<Label
|
<Label
|
||||||
|
@loaded="onStickyLoad"
|
||||||
class="sectionTitle sticky"
|
class="sectionTitle sticky"
|
||||||
:hidden="!showTitleArr[0]"
|
:hidden="!stickyTitle"
|
||||||
:text="getTitleCount('ings', 'ingredients')"
|
:text="stickyTitle"
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
class="sectionTitle sticky"
|
|
||||||
:hidden="!showTitleArr[1]"
|
|
||||||
:text="getTitleCount('inss', 'instructions')"
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
class="sectionTitle sticky"
|
|
||||||
:hidden="!showTitleArr[2]"
|
|
||||||
:text="getTitleCount('cmbs', 'combinations')"
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
class="sectionTitle sticky"
|
|
||||||
:hidden="!showTitleArr[3]"
|
|
||||||
:text="getTitleCount('nos', 'notes')"
|
|
||||||
/>
|
/>
|
||||||
</AbsoluteLayout>
|
</AbsoluteLayout>
|
||||||
</DockLayout>
|
</DockLayout>
|
||||||
|
@ -250,17 +237,20 @@
|
||||||
</FlexboxLayout>
|
</FlexboxLayout>
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
<AbsoluteLayout rowSpan="2">
|
<AbsoluteLayout rowSpan="2">
|
||||||
<ImageZoom
|
<Image
|
||||||
@loaded="onImgZoomLoad"
|
@tap="({ object }) => (object.cancel = true)"
|
||||||
|
backgroundColor="black"
|
||||||
|
stretch="aspectFit"
|
||||||
|
@loaded="onImgViewLoad"
|
||||||
:src="recipe.imageSrc"
|
:src="recipe.imageSrc"
|
||||||
class="photoviewer"
|
class="photoviewer"
|
||||||
></ImageZoom>
|
/>
|
||||||
</AbsoluteLayout>
|
</AbsoluteLayout>
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
Application,
|
Application,
|
||||||
AndroidApplication,
|
AndroidApplication,
|
||||||
|
@ -295,13 +285,14 @@ export default {
|
||||||
cmbcon: null,
|
cmbcon: null,
|
||||||
notescon: null,
|
notescon: null,
|
||||||
notesT: null,
|
notesT: null,
|
||||||
imgZoom: null,
|
imgView: null,
|
||||||
checks: [],
|
checks: [],
|
||||||
checked: 0,
|
checked: 0,
|
||||||
stepsDid: 0,
|
stepsDid: 0,
|
||||||
toast: null,
|
toast: null,
|
||||||
photoOpen: false,
|
photoOpen: false,
|
||||||
showTitleArr: [false, false, false, false],
|
showTitleArr: [false, false, false, false],
|
||||||
|
sticky: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -311,6 +302,24 @@ export default {
|
||||||
? Math.abs(parseFloat(this.yieldMultiplier))
|
? Math.abs(parseFloat(this.yieldMultiplier))
|
||||||
: 1;
|
: 1;
|
||||||
},
|
},
|
||||||
|
stickyTitle() {
|
||||||
|
let val = null;
|
||||||
|
switch (this.showTitleArr.lastIndexOf(true)) {
|
||||||
|
case 0:
|
||||||
|
val = this.getTitleCount("ings", "ingredients");
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
val = this.getTitleCount("inss", "instructions");
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
val = this.getTitleCount("cmbs", "combinations");
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
val = this.getTitleCount("nos", "notes");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions([
|
...mapActions([
|
||||||
|
@ -356,63 +365,90 @@ export default {
|
||||||
onScrollLoad(args) {
|
onScrollLoad(args) {
|
||||||
this.scrollview = args.object;
|
this.scrollview = args.object;
|
||||||
},
|
},
|
||||||
onImgZoomLoad({ object }) {
|
onImgViewLoad({ object }) {
|
||||||
this.imgZoom = object;
|
this.imgView = object;
|
||||||
this.imgZoom.visibility = "collapsed";
|
this.imgView.visibility = "collapsed";
|
||||||
this.imgZoom.top = 24;
|
this.imgView.top = 24;
|
||||||
this.imgZoom.left = Screen.mainScreen.widthDIPs - 112;
|
this.imgView.left = Screen.mainScreen.widthDIPs - 112;
|
||||||
|
},
|
||||||
|
onStickyLoad({ object }) {
|
||||||
|
this.sticky = object;
|
||||||
},
|
},
|
||||||
// FIX: scroll not smooth
|
// FIX: scroll not smooth
|
||||||
stickyTitle({ object }) {
|
fixTitle({ object }, swipeUp: boolean): void {
|
||||||
// let vm = this;
|
let ingL = this.recipe.ingredients.length;
|
||||||
// function isTop(label) {
|
let insL = this.recipe.instructions.length;
|
||||||
// let pos = label.getLocationRelativeTo(object).y;
|
let cmbL = this.recipe.combinations.length;
|
||||||
// return label === vm.cmbcon || label === vm.notesT
|
let notL = this.recipe.notes.length;
|
||||||
// ? pos < 0
|
|
||||||
// : pos + 32 < 0;
|
const isTop = (label): boolean => {
|
||||||
// }
|
let pos = label.getLocationRelativeTo(object).y;
|
||||||
// const isAllFalse = (e) => e == false;
|
return label === this.cmbcon || label === this.notesT
|
||||||
// if (this.recipe.notes.length && isTop(this.notesT)) {
|
? pos < 0
|
||||||
// this.showTitleArr = [false, false, false, true];
|
: pos + 32 < 0;
|
||||||
// } else if (this.recipe.combinations.length && isTop(this.cmbcon)) {
|
};
|
||||||
// this.showTitleArr = [false, false, true, false];
|
|
||||||
// } else if (this.recipe.instructions.length && isTop(this.inscon)) {
|
const setVisibleTitle = (n: number): void => {
|
||||||
// this.showTitleArr = [false, true, false, false];
|
let arr = [ingL, insL, cmbL, notL];
|
||||||
// } else if (this.recipe.ingredients.length && isTop(this.ingcon)) {
|
this.showTitleArr = Array.from(
|
||||||
// this.showTitleArr = [true, false, false, false];
|
{ length: 4 },
|
||||||
// } else {
|
(v, i) => (v = arr[i] ? i < n : false)
|
||||||
// this.showTitleArr = [false, false, false, false];
|
);
|
||||||
// }
|
this.sticky
|
||||||
// if (
|
.animate({
|
||||||
// this.recipe.ingredients.length &&
|
opacity: 0.5,
|
||||||
// !this.showTitleArr[0] &&
|
duration: 0,
|
||||||
// isTop(this.ingcon)
|
})
|
||||||
// ) {
|
.then(() => {
|
||||||
// this.showTitleArr = [true, false, false, false];
|
this.sticky.animate({
|
||||||
// } else if (!this.showTitleArr.every(isAllFalse) && !isTop(this.ingcon)) {
|
opacity: 1,
|
||||||
// this.showTitleArr = [false, false, false, false];
|
duration: 250,
|
||||||
// }
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (swipeUp) {
|
||||||
|
if (ingL && !this.showTitleArr[0] && isTop(this.ingcon))
|
||||||
|
setVisibleTitle(1);
|
||||||
|
else if (insL && !this.showTitleArr[1] && isTop(this.inscon))
|
||||||
|
setVisibleTitle(2);
|
||||||
|
else if (cmbL && !this.showTitleArr[2] && isTop(this.cmbcon))
|
||||||
|
setVisibleTitle(3);
|
||||||
|
else if (notL && !this.showTitleArr[3] && isTop(this.notesT))
|
||||||
|
setVisibleTitle(4);
|
||||||
|
} else {
|
||||||
|
if (notL && this.showTitleArr[3] && !isTop(this.notesT))
|
||||||
|
setVisibleTitle(3);
|
||||||
|
else if (cmbL && this.showTitleArr[2] && !isTop(this.cmbcon))
|
||||||
|
setVisibleTitle(2);
|
||||||
|
else if (insL && this.showTitleArr[1] && !isTop(this.inscon))
|
||||||
|
setVisibleTitle(1);
|
||||||
|
else if (ingL && this.showTitleArr[0] && !isTop(this.ingcon))
|
||||||
|
setVisibleTitle(0);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onScroll(args) {
|
onScroll(args) {
|
||||||
let scrollUp;
|
let swipeUp: boolean;
|
||||||
let y = args.scrollY;
|
let y = args.scrollY;
|
||||||
if (y) {
|
if (y) {
|
||||||
scrollUp = y < this.scrollPos;
|
swipeUp = y > this.scrollPos;
|
||||||
this.scrollPos = Math.abs(y);
|
this.scrollPos = Math.abs(y);
|
||||||
|
this.fixTitle(args, swipeUp);
|
||||||
|
if (!this.toast) {
|
||||||
let ab = this.appbar.translateY;
|
let ab = this.appbar.translateY;
|
||||||
if (!scrollUp && ab == 0)
|
if (swipeUp && ab == 0)
|
||||||
this.appbar.animate({
|
this.appbar.animate({
|
||||||
translate: { x: 0, y: 64 },
|
translate: { x: 0, y: 64 },
|
||||||
duration: 250,
|
duration: 250,
|
||||||
curve: CoreTypes.AnimationCurve.ease,
|
curve: CoreTypes.AnimationCurve.ease,
|
||||||
});
|
});
|
||||||
else if (scrollUp && ab == 64)
|
else if (!swipeUp && ab == 64)
|
||||||
this.appbar.animate({
|
this.appbar.animate({
|
||||||
translate: { x: 0, y: 0 },
|
translate: { x: 0, y: 0 },
|
||||||
duration: 250,
|
duration: 250,
|
||||||
curve: CoreTypes.AnimationCurve.ease,
|
curve: CoreTypes.AnimationCurve.ease,
|
||||||
});
|
});
|
||||||
// this.stickyTitle(args);
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// HELPERS
|
// HELPERS
|
||||||
|
@ -452,7 +488,7 @@ export default {
|
||||||
let dayDiff = Math.ceil(diff / 86400);
|
let dayDiff = Math.ceil(diff / 86400);
|
||||||
if (isNaN(dayDiff) || dayDiff < 0) return "";
|
if (isNaN(dayDiff) || dayDiff < 0) return "";
|
||||||
|
|
||||||
function duration(value, number) {
|
function duration(value, number?) {
|
||||||
return number ? localize(value, number) : localize(value);
|
return number ? localize(value, number) : localize(value);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
@ -470,7 +506,49 @@ export default {
|
||||||
if (!val) this.toast = val;
|
if (!val) this.toast = val;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
roundedQuantity(quantity) {
|
// getMeasure(value: number, unit: string) {
|
||||||
|
// let vm = this;
|
||||||
|
// function roundedQ(val: number) {
|
||||||
|
// return Math.abs(
|
||||||
|
// Math.round(
|
||||||
|
// (val / vm.recipe.yield.quantity) * vm.tempYieldQuantity * 100
|
||||||
|
// ) / 100
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// if (value) {
|
||||||
|
// let rounded = Math.abs(
|
||||||
|
// Math.round(
|
||||||
|
// (value / this.recipe.yield.quantity) * this.tempYieldQuantity * 100
|
||||||
|
// ) / 100
|
||||||
|
// );
|
||||||
|
// let lUnit = localize(unit);
|
||||||
|
|
||||||
|
// switch (unit) {
|
||||||
|
// //IMPERIAL
|
||||||
|
// case "g":
|
||||||
|
// return rounded < 1000
|
||||||
|
// ? `${rounded} ${lUnit} `
|
||||||
|
// : `${roundedQ(rounded / 1000)} ${localize("kg")} `;
|
||||||
|
// case "ml":
|
||||||
|
// return rounded < 1000
|
||||||
|
// ? `${rounded} ${lUnit} `
|
||||||
|
// : `${roundedQ(rounded / 1000)} ${localize("l")} `;
|
||||||
|
|
||||||
|
// //METRIC
|
||||||
|
// case "tsp":
|
||||||
|
// return rounded < 3
|
||||||
|
// ? `${rounded} ${lUnit} `
|
||||||
|
// : `${roundedQ(rounded / 3)} ${localize("tbsp")} `;
|
||||||
|
// case "in":
|
||||||
|
// return rounded < 12
|
||||||
|
// ? `${rounded} ${lUnit} `
|
||||||
|
// : `${roundedQ(rounded / 12)} ${localize("ft")} `;
|
||||||
|
// default:
|
||||||
|
// return `${rounded} ${lUnit} `;
|
||||||
|
// }
|
||||||
|
// } else return "";
|
||||||
|
// },
|
||||||
|
roundedQuantity(quantity: number) {
|
||||||
return Math.abs(
|
return Math.abs(
|
||||||
Math.round(
|
Math.round(
|
||||||
(quantity / this.recipe.yield.quantity) * this.tempYieldQuantity * 100
|
(quantity / this.recipe.yield.quantity) * this.tempYieldQuantity * 100
|
||||||
|
@ -587,6 +665,7 @@ export default {
|
||||||
viewCombination(combination) {
|
viewCombination(combination) {
|
||||||
this.scrollview.scrollToVerticalOffset(0, true);
|
this.scrollview.scrollToVerticalOffset(0, true);
|
||||||
this.recipe = this.recipes.filter((e) => e.id === combination)[0];
|
this.recipe = this.recipes.filter((e) => e.id === combination)[0];
|
||||||
|
this.showTitleArr = new Array(4).fill(false);
|
||||||
this.clearChecks();
|
this.clearChecks();
|
||||||
this.clearSteps();
|
this.clearSteps();
|
||||||
this.recipe.ingredients.forEach(() => this.checks.push(false));
|
this.recipe.ingredients.forEach(() => this.checks.push(false));
|
||||||
|
@ -726,7 +805,7 @@ export default {
|
||||||
createNote(note) {
|
createNote(note) {
|
||||||
let regex = /(https?:\/\/[^\s]+)/g;
|
let regex = /(https?:\/\/[^\s]+)/g;
|
||||||
const lbl = new Label();
|
const lbl = new Label();
|
||||||
lbl.class = "note";
|
lbl.className = "note";
|
||||||
lbl.textWrap = true;
|
lbl.textWrap = true;
|
||||||
let fString = new FormattedString();
|
let fString = new FormattedString();
|
||||||
let arr = note.split(regex);
|
let arr = note.split(regex);
|
||||||
|
@ -758,13 +837,13 @@ export default {
|
||||||
return tags.join(" · ");
|
return tags.join(" · ");
|
||||||
},
|
},
|
||||||
hijackBackEvent() {
|
hijackBackEvent() {
|
||||||
AndroidApplication.on(
|
Application.android.on(
|
||||||
AndroidApplication.activityBackPressedEvent,
|
AndroidApplication.activityBackPressedEvent,
|
||||||
this.backEvent
|
this.backEvent
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
releaseBackEvent() {
|
releaseBackEvent() {
|
||||||
AndroidApplication.off(
|
Application.android.off(
|
||||||
AndroidApplication.activityBackPressedEvent,
|
AndroidApplication.activityBackPressedEvent,
|
||||||
this.backEvent
|
this.backEvent
|
||||||
);
|
);
|
||||||
|
@ -776,10 +855,10 @@ export default {
|
||||||
} else this.$navigateBack();
|
} else this.$navigateBack();
|
||||||
},
|
},
|
||||||
viewPhoto() {
|
viewPhoto() {
|
||||||
this.imgZoom.initNativeView();
|
// this.imgView.initNativeView();
|
||||||
this.photoOpen = true;
|
this.photoOpen = true;
|
||||||
this.hijackBackEvent();
|
this.hijackBackEvent();
|
||||||
let pv = this.imgZoom;
|
let pv = this.imgView;
|
||||||
pv.visibility = "visible";
|
pv.visibility = "visible";
|
||||||
let sw = Screen.mainScreen.widthDIPs;
|
let sw = Screen.mainScreen.widthDIPs;
|
||||||
let sh = Screen.mainScreen.heightDIPs;
|
let sh = Screen.mainScreen.heightDIPs;
|
||||||
|
@ -798,7 +877,7 @@ export default {
|
||||||
)
|
)
|
||||||
.then(() =>
|
.then(() =>
|
||||||
pv.animate({
|
pv.animate({
|
||||||
height: sh + 8,
|
height: sh,
|
||||||
translate: { x: -sw + 112, y: -((sh - sw) / 6) },
|
translate: { x: -sw + 112, y: -((sh - sw) / 6) },
|
||||||
duration: 250,
|
duration: 250,
|
||||||
curve: CoreTypes.AnimationCurve.ease,
|
curve: CoreTypes.AnimationCurve.ease,
|
||||||
|
@ -806,7 +885,7 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
closePhoto() {
|
closePhoto() {
|
||||||
let pv = this.imgZoom;
|
let pv = this.imgView;
|
||||||
let sw = Screen.mainScreen.widthDIPs;
|
let sw = Screen.mainScreen.widthDIPs;
|
||||||
let sh = Screen.mainScreen.heightDIPs;
|
let sh = Screen.mainScreen.heightDIPs;
|
||||||
pv.animate({
|
pv.animate({
|
||||||
|
|
Loading…
Reference in a new issue