michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

sticky title

Browse source
This commit is contained in:
vishnuraghavb 2021-04-21 16:01:49 +05:30
parent 6b032c8306
commit 20ad475761
1 changed files with 161 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

243
app/components/ViewRecipe.vue
View file

@ -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);
let ab = this.appbar.translateY; this.fixTitle(args, swipeUp);
if (!scrollUp && ab == 0) if (!this.toast) {
this.appbar.animate({ let ab = this.appbar.translateY;
translate: { x: 0, y: 64 }, if (swipeUp && ab == 0)
duration: 250, this.appbar.animate({
curve: CoreTypes.AnimationCurve.ease, translate: { x: 0, y: 64 },
}); duration: 250,
else if (scrollUp && ab == 64) curve: CoreTypes.AnimationCurve.ease,
this.appbar.animate({ });
translate: { x: 0, y: 0 }, else if (!swipeUp && ab == 64)
duration: 250, this.appbar.animate({
curve: CoreTypes.AnimationCurve.ease, translate: { x: 0, y: 0 },
}); duration: 250,
// this.stickyTitle(args); curve: CoreTypes.AnimationCurve.ease,
});
}
} }
}, },
// 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({