enrecipes/app/components/ViewRecipe.vue

<template>
  <Page @loaded="onPageLoad" @unloaded="onPageUnload" actionBarHidden="true">
    <GridLayout rows="*, auto" columns="*">
      <DockLayout stretchLastChild="true" rowSpan="2">
        <GridLayout
          dock="top"
          rows="auto,auto"
          columns="*, auto"
          paddingBottom="24"
        >
          <StackLayout>
            <Label class="pageTitle" paddingBottom="8" :text="recipe.title" />
            <StackLayout marginLeft="12" orientation="horizontal">
              <Button
                class="ico rate"
                :class="{ rated: recipe.rating >= n }"
                v-for="n in 5"
                :key="n"
                :text="recipe.rating < n ? icon.star : icon.starred"
                @tap="
                  recipe.rating == 1 && n == 1 ? setRating(0) : setRating(n)
                "
                @longPress="setRating(n)"
              />
            </StackLayout>
          </StackLayout>
          <Image
            col="1"
            v-if="recipe.imageSrc"
            :src="recipe.imageSrc"
            stretch="aspectFit"
            class="photo"
            decodeWidth="96"
            decodeHeight="96"
            @tap="viewPhoto"
          />
        </GridLayout>
        <AbsoluteLayout dock="bottom">
          <ScrollView
            width="100%"
            height="100%"
            @loaded="onScrollLoad"
            @scroll="!toast && onScroll($event)"
          >
            <StackLayout>
              <GridLayout rows="auto" columns="*, *">
                <StackLayout class="attribute">
                  <Label class="title sub" :text="'cui' | L" />
                  <Label class="value" :text="recipe.cuisine | L" />
                </StackLayout>
                <StackLayout class="attribute" col="1">
                  <Label class="title sub" :text="'cat' | L" />
                  <Label class="value" :text="recipe.category | L" />
                </StackLayout>
              </GridLayout>
              <StackLayout :hidden="!recipe.tags.length" class="attribute">
                <Label class="title sub" :text="'ts' | L" />
                <Label class="value" :text="getTags(recipe.tags)" />
              </StackLayout>
              <GridLayout rows="auto" columns="*, *">
                <StackLayout
                  class="attribute"
                  :hidden="!hasTime(recipe.prepTime)"
                >
                  <Label class="title sub" :text="'prepT' | L" />
                  <Label class="value" :text="formattedTime(recipe.prepTime)" />
                </StackLayout>
                <StackLayout
                  :col="hasTime(recipe.prepTime) ? 1 : 0"
                  class="attribute"
                  :hidden="!hasTime(recipe.cookTime)"
                >
                  <Label class="title sub" :text="'cookT' | L" />
                  <Label class="value" :text="formattedTime(recipe.cookTime)" />
                </StackLayout>
              </GridLayout>
              <GridLayout rows="auto" columns="*, *">
                <StackLayout class="attribute">
                  <Label class="title sub" :text="'yld' | L" />
                  <Label
                    @touch="touchYield"
                    class="value clickable"
                    :text="`${tempYieldQuantity} ${$options.filters.L(
                      recipe.yield.unit
                    )}`"
                  />
                </StackLayout>
                <StackLayout class="attribute" col="1">
                  <Label class="title sub" :text="'Difficulty level' | L" />
                  <Label class="value" :text="recipe.difficulty | L" />
                </StackLayout>
              </GridLayout>
              <StackLayout @loaded="onIngsLoad">
                <Label
                  padding="0 16"
                  class="sectionTitle"
                  :hidden="!recipe.ingredients.length"
                  :text="getTitleCount('ings', 'ingredients')"
                />
                <StackLayout
                  orientation="horizontal"
                  v-for="(item, index) in recipe.ingredients"
                  :key="index + 'ing'"
                  class="ingredient"
                  @touch="touchIngredient($event, index)"
                >
                  <Button class="ico min" :text="icon.uncheck" />
                  <Label
                    class="value tw"
                    :text="`${
                      roundedQuantity(item.quantity)
                        ? roundedQuantity(item.quantity) + ' '
                        : ''
                    }${
                      roundedQuantity(item.quantity)
                        ? $options.filters.L(item.unit) + ' '
                        : ''
                    }${item.item}`"
                  />
                </StackLayout>
              </StackLayout>
              <StackLayout @loaded="onInsLoad">
                <Label
                  padding="0 16"
                  :hidden="!recipe.instructions.length"
                  class="sectionTitle"
                  :text="getTitleCount('inss', 'instructions')"
                />
                <StackLayout
                  orientation="horizontal"
                  @touch="touchInstruction"
                  v-for="(instruction, index) in recipe.instructions"
                  :key="index + 'ins'"
                  class="instruction"
                >
                  <Button class="count ico min" :text="index + 1" />
                  <Label class="value tw" :text="instruction" />
                </StackLayout>
              </StackLayout>
              <Label
                @loaded="onCmbLoad"
                padding="0 16"
                :hidden="!recipe.combinations.length"
                class="sectionTitle"
                :text="getTitleCount('cmbs', 'combinations')"
              />
              <Button
                v-for="(combination, index) in recipe.combinations"
                :key="index + 'comb'"
                class="combination"
                :text="getCombinationTitle(combination)"
                @tap="viewCombination(combination)"
              />
              <Label
                @loaded="onNosTLoad"
                padding="0 16"
                :hidden="!recipe.notes.length"
                class="sectionTitle"
                :text="getTitleCount('nos', 'notes')"
              />
              <StackLayout @loaded="onNosLoad" padding="0 16"> </StackLayout>
              <Label
                class="dateInfo sub tw"
                :text="`${$options.filters.L('Last updated')}: ${formattedDate(
                  recipe.lastModified
                )}\n${$options.filters.L('Created')}: ${formattedDate(
                  recipe.created
                )}`"
              />
            </StackLayout>
          </ScrollView>
          <Label
            class="sectionTitle sticky"
            :hidden="!showTitleArr[0]"
            :text="getTitleCount('ings', 'ingredients')"
          />
          <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>
      </DockLayout>
      <GridLayout
        row="1"
        @loaded="onAppBarLoad"
        class="appbar"
        v-show="!toast"
        columns="auto, *, auto, auto, auto, auto"
      >
        <Button
          class="ico"
          :text="photoOpen ? icon.x : icon.back"
          @tap="navigateBack"
        />
        <Button
          col="2"
          v-if="!filterTrylater"
          class="ico"
          :text="recipe.tried ? icon.try : icon.tried"
          @tap="toggle('tried')"
        />
        <Button
          col="2"
          v-else
          class="ico"
          :text="icon.done"
          @tap="recipeTried"
        />
        <Button
          col="3"
          class="ico"
          :text="recipe.isFavorite ? icon.faved : icon.fav"
          @tap="toggle('isFavorite')"
        />
        <Button
          col="4"
          v-if="!busy"
          class="ico"
          :text="icon.edit"
          @tap="editRecipe"
        />
        <ActivityIndicator col="4" v-else :busy="busy" />
        <Button
          class="ico fab"
          :text="icon.share"
          col="5"
          @tap="shareHandler"
        />
      </GridLayout>
      <GridLayout
        v-show="toast"
        row="1"
        class="appbar snackBar"
        columns="*"
        @tap="toast = null"
      >
        <FlexboxLayout minHeight="48" alignItems="center">
          <Label class="title msg" :text="toast" />
        </FlexboxLayout>
      </GridLayout>
      <AbsoluteLayout rowSpan="2">
        <ImageZoom
          @loaded="onImgZoomLoad"
          :src="recipe.imageSrc"
          class="photoviewer"
        ></ImageZoom>
      </AbsoluteLayout>
    </GridLayout>
  </Page>
</template>

<script>
import {
  Application,
  AndroidApplication,
  ImageSource,
  Utils,
  Span,
  FormattedString,
  Label,
  Observable,
  Screen,
  CoreTypes,
} from "@nativescript/core";
import { localize } from "@nativescript/localize";
const intl = require("nativescript-intl");
import { mapActions, mapState } from "vuex";
import EditRecipe from "./EditRecipe.vue";
import ActionDialog from "./modal/ActionDialog.vue";
import PromptDialog from "./modal/PromptDialog.vue";
import * as utils from "~/shared/utils";
export default {
  props: ["filterTrylater", "recipeID"],
  data() {
    return {
      busy: false,
      yieldMultiplier: 1,
      recipe: null,
      currentRecipeID: this.recipeID,
      scrollview: null,
      appbar: null,
      ingcon: null,
      inscon: null,
      cmbcon: null,
      notescon: null,
      notesT: null,
      imgZoom: null,
      checks: [],
      checked: 0,
      stepsDid: 0,
      toast: null,
      photoOpen: false,
      showTitleArr: [false, false, false, false],
    };
  },
  computed: {
    ...mapState(["icon", "recipes"]),
    tempYieldQuantity() {
      return Math.abs(this.yieldMultiplier) > 0
        ? Math.abs(parseFloat(this.yieldMultiplier))
        : 1;
    },
  },
  methods: {
    ...mapActions([
      "toggleStateAction",
      "setComponent",
      "overwriteRecipeAction",
      "setRecipeAsTriedAction",
      "setRatingAction",
      "toggleCartAction",
    ]),
    onPageLoad(args) {
      const page = args.object;
      page.bindingContext = new Observable();
      this.busy = false;
      this.setComponent("ViewRecipe");
      if (this.yieldMultiplier == this.recipe.yield.quantity)
        this.yieldMultiplier = this.recipe.yield.quantity;
      this.keepScreenOn(true);
      this.syncCombinations();
    },
    onPageUnload() {
      this.keepScreenOn(false);
    },
    onAppBarLoad({ object }) {
      this.appbar = object;
    },
    onIngsLoad({ object }) {
      this.ingcon = object;
    },
    onInsLoad({ object }) {
      this.inscon = object;
    },
    onCmbLoad({ object }) {
      this.cmbcon = object;
    },
    onNosTLoad({ object }) {
      this.notesT = object;
    },
    onNosLoad({ object }) {
      this.notescon = object;
      this.createNotes();
    },
    onScrollLoad(args) {
      this.scrollview = args.object;
    },
    onImgZoomLoad({ object }) {
      this.imgZoom = object;
      this.imgZoom.visibility = "collapsed";
      this.imgZoom.top = 24;
      this.imgZoom.left = Screen.mainScreen.widthDIPs - 112;
    },
    // FIX: scroll not smooth
    stickyTitle({ object }) {
      // let vm = this;
      // function isTop(label) {
      //   let pos = label.getLocationRelativeTo(object).y;
      //   return label === vm.cmbcon || label === vm.notesT
      //     ? pos < 0
      //     : pos + 32 < 0;
      // }
      // const isAllFalse = (e) => e == false;
      // if (this.recipe.notes.length && isTop(this.notesT)) {
      //   this.showTitleArr = [false, false, false, true];
      // } else if (this.recipe.combinations.length && isTop(this.cmbcon)) {
      //   this.showTitleArr = [false, false, true, false];
      // } else if (this.recipe.instructions.length && isTop(this.inscon)) {
      //   this.showTitleArr = [false, true, false, false];
      // } else if (this.recipe.ingredients.length && isTop(this.ingcon)) {
      //   this.showTitleArr = [true, false, false, false];
      // } else {
      //   this.showTitleArr = [false, false, false, false];
      // }
      // if (
      //   this.recipe.ingredients.length &&
      //   !this.showTitleArr[0] &&
      //   isTop(this.ingcon)
      // ) {
      //   this.showTitleArr = [true, false, false, false];
      // } else if (!this.showTitleArr.every(isAllFalse) && !isTop(this.ingcon)) {
      //   this.showTitleArr = [false, false, false, false];
      // }
    },
    onScroll(args) {
      let scrollUp;
      let y = args.scrollY;
      if (y) {
        scrollUp = y < this.scrollPos;
        this.scrollPos = Math.abs(y);
        let ab = this.appbar.translateY;
        if (!scrollUp && ab == 0)
          this.appbar.animate({
            translate: { x: 0, y: 64 },
            duration: 250,
            curve: CoreTypes.AnimationCurve.ease,
          });
        else if (scrollUp && ab == 64)
          this.appbar.animate({
            translate: { x: 0, y: 0 },
            duration: 250,
            curve: CoreTypes.AnimationCurve.ease,
          });
        // this.stickyTitle(args);
      }
    },
    // HELPERS
    getTitleCount(title, type) {
      let count = this.recipe[type].length;
      let selected = null;
      switch (title) {
        case "ings":
          selected = this.checked;
          break;
        case "inss":
          selected = this.stepsDid;
          break;
      }
      let text = selected ? ` (${selected}/${count})` : ` (${count})`;
      return localize(title) + text;
    },
    changeYield() {
      this.$showModal(PromptDialog, {
        props: {
          title: `${localize("req", localize(this.recipe.yield.unit))}`,
          placeholder: Math.abs(parseFloat(this.yieldMultiplier)),
          action: "SET",
        },
      }).then((item) => {
        if (item) this.yieldMultiplier = item;
      });
    },
    hasTime(time) {
      return time != "00:00";
    },
    niceDate(time) {
      let lastTried = new Date(time).getTime();
      let now = new Date().getTime();
      let midnight = new Date().setHours(0, 0, 0, 0);
      let diff = (now - lastTried) / 1000;
      let dayDiff = Math.ceil(diff / 86400);
      if (isNaN(dayDiff) || dayDiff < 0) return "";

      function duration(value, number) {
        return number ? localize(value, number) : localize(value);
      }
      return (
        (diff < 86400 && lastTried > midnight && duration("today")) ||
        (dayDiff == 1 && "yesterday") ||
        (dayDiff < 7 && duration("dAgo", dayDiff)) ||
        (dayDiff < 31 && duration("wAgo", Math.round(dayDiff / 7))) ||
        (dayDiff < 366 && duration("mAgo", Math.round(dayDiff / 30))) ||
        (dayDiff > 365 && duration("ltAgo"))
      );
    },
    showLastTried() {
      this.toast = localize("triedInfo", this.niceDate(this.recipe.lastTried));
      utils.timer(10, (val) => {
        if (!val) this.toast = val;
      });
    },
    roundedQuantity(quantity) {
      return Math.abs(
        Math.round(
          (quantity / this.recipe.yield.quantity) * this.tempYieldQuantity * 100
        ) / 100
      );
    },
    keepScreenOn(boolean) {
      let activity =
        Application.android.foregroundActivity ||
        Application.android.startActivity;
      let window = activity.getWindow();
      let flag = android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON;
      boolean ? window.addFlags(flag) : window.clearFlags(flag);
    },
    formattedTime(time) {
      let t = time.split(":");
      let h = parseInt(t[0]);
      let m = parseInt(t[1]);
      let hr = localize("hr");
      let min = localize("min");
      return h ? (m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}`) : `${m} ${min}`;
    },
    formattedDate(date) {
      let d = new Date(date);
      var dateFormat = new intl.DateTimeFormat(null, {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
      }).format(d);
      return `${dateFormat}`;
    },
    isValidURL(string) {
      let pattern = new RegExp("^https?|^www", "ig");
      return pattern.test(string);
    },
    getCombinationTitle(id) {
      return this.recipes.filter((e) => e.id === id)[0].title;
    },
    syncCombinations() {
      let combinationForOtherRecipes = this.recipes
        .filter(
          (e) =>
            e.combinations.indexOf(this.currentRecipeID) >= 0 ||
            this.recipe.combinations.includes(e.id)
        )
        .map((e) => e.id);
      this.recipe.combinations = combinationForOtherRecipes;
      this.overwriteRecipeAction({
        id: this.currentRecipeID,
        recipe: this.recipe,
      });
    },
    touchIngredient({ object, action }, index) {
      object.className = action.match(/down|move/)
        ? "ingredient fade"
        : "ingredient";
      if (action == "up") this.checkChange(object, index);
    },
    checkChange(obj, index) {
      this.checks[index] = !this.checks[index];
      if (this.checks[index]) {
        this.checked++;
        obj.getChildAt(0).text = this.icon.check;
      } else {
        this.checked--;
        obj.getChildAt(0).text = this.icon.uncheck;
      }
    },
    clearChecks() {
      this.checked = 0;
      this.checks = [];
      for (let i = 1; i < this.ingcon.getChildrenCount(); i++) {
        this.ingcon.getChildAt(i).getChildAt(0).text = this.icon.uncheck;
      }
    },
    touchInstruction({ object, action }) {
      let hasDone = object.className.includes("done");
      object.className = action.match(/down|move/)
        ? `instruction ${hasDone ? "done" : "fade"}`
        : `instruction ${hasDone ? "done" : ""}`;
      if (action == "up") this.stepDone(object);
    },
    stepDone(object) {
      let a = object;
      if (a.className.includes("done")) {
        a.className = "instruction";
        this.stepsDid--;
      } else {
        a.className = "instruction done";
        this.stepsDid++;
      }
    },
    clearSteps() {
      this.stepsDid = 0;
      for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
        this.inscon.getChildAt(i).className = "instruction";
      }
    },

    // NAVIGATION HANDLERS
    editRecipe() {
      this.busy = true;
      this.$navigateTo(EditRecipe, {
        props: {
          navigationFromView: true,
          filterTrylater: this.filterTrylater,
          recipeID: this.currentRecipeID,
        },
        // backstackVisible: false,
      });
    },
    viewCombination(combination) {
      this.scrollview.scrollToVerticalOffset(0, true);
      this.recipe = this.recipes.filter((e) => e.id === combination)[0];
      this.clearChecks();
      this.clearSteps();
      this.recipe.ingredients.forEach(() => this.checks.push(false));
      this.currentRecipeID = combination;
      this.syncCombinations();
      this.createNotes();
      this.yieldMultiplier = this.recipe.yield.quantity;
      this.recipe.tried && this.recipe.lastTried && this.showLastTried();
    },

    // SHARE ACTION
    shareHandler() {
      if (this.recipe.imageSrc) {
        this.$showModal(ActionDialog, {
          props: {
            title: "shr",
            list: ["rec", "pht"],
          },
        }).then((result) => {
          switch (result) {
            case "rec":
              this.shareRecipe();
              break;
            case "pht":
              ImageSource.fromFile(this.recipe.imageSrc).then((res) =>
                utils.shareImage(res, localize("srpu"))
              );
              break;
          }
        });
      } else {
        this.shareRecipe();
      }
    },
    shareRecipe() {
      let overview = `${this.recipe.title}\n\n${localize("stars")}: ${
        this.recipe.rating
      }\n${localize("cui")}: ${localize(this.recipe.cuisine)}\n${localize(
        "cat"
      )}: ${localize(this.recipe.category)}\n${localize(
        "ts"
      )}: ${this.recipe.tags.join(", ")}\n${localize(
        "prepT"
      )}: ${this.formattedTime(this.recipe.prepTime)}\n${localize(
        "cookT"
      )}: ${this.formattedTime(this.recipe.cookTime)}\n${localize("yld")}: ${
        this.tempYieldQuantity
      } ${localize(this.recipe.yield.unit)}\n${localize(
        "Difficulty level"
      )}: ${localize(this.recipe.difficulty)}\n`;
      let shareContent = overview;
      if (this.recipe.ingredients.length) {
        let ingredients = `\n\n${localize("ings")}:\n\n`;
        this.recipe.ingredients.forEach((e) => {
          ingredients += `- ${
            e.quantity
              ? this.roundedQuantity(e.quantity) +
                " " +
                this.$options.filters.L(e.unit) +
                " "
              : ""
          }${e.item}\n`;
        });
        shareContent += ingredients;
      }
      if (this.recipe.instructions.length) {
        let instructions = `\n\n${localize("inss")}:\n\n`;
        this.recipe.instructions.forEach((e, i) => {
          instructions += `${i + 1}. ${e}\n\n`;
        });
        shareContent += instructions;
      }
      if (this.recipe.combinations.length) {
        let combinations = `\n${localize("cmbs")}:\n\n`;
        this.recipe.combinations.forEach((e, i) => {
          combinations += `${i + 1}. ${this.getCombinationTitle(e)}\n\n`;
        });
        shareContent += combinations;
      }
      if (this.recipe.notes.length) {
        let notes = `\n${localize("nos")}:\n\n`;
        this.recipe.notes.forEach((e, i) => {
          notes += `${i + 1}. ${e}\n\n`;
        });
        shareContent += notes;
      }
      let sharenote = "\n" + localize("appCrd");
      shareContent += sharenote;
      utils.shareText(shareContent, localize("sru"));
    },

    // DATA HANDLERS
    toggle(key, setDate) {
      this.toggleStateAction({
        id: this.currentRecipeID,
        recipe: this.recipe,
        key,
        setDate,
      });
    },
    recipeTried() {
      this.setRecipeAsTriedAction({
        id: this.currentRecipeID,
        recipe: this.recipe,
      });
      this.$navigateBack();
    },
    setRating(rating) {
      if (rating !== this.recipe.rating || rating === 1) {
        this.setRatingAction({
          id: this.currentRecipeID,
          recipe: this.recipe,
          rating,
        });
      }
    },

    // SHOPPINGLIST
    toggleCart() {
      if (!this.recipe.inBag) {
      } else {
      }
      this.toggleCartAction({
        id: this.currentRecipeID,
        recipe: this.recipe,
      });
    },

    // NOTES
    createNote(note) {
      let regex = /(https?:\/\/[^\s]+)/g;
      const lbl = new Label();
      lbl.class = "note";
      lbl.textWrap = true;
      let fString = new FormattedString();
      let arr = note.split(regex);

      function createSpan(text, isUrl) {
        let span = new Span();
        span.text = text;
        span.fontSize = 14;
        if (isUrl) {
          span.textDecoration = "underline";
          span.on("linkTap", () => Utils.openUrl(text));
        }
        fString.spans.push(span);
      }
      arr.forEach((text) => {
        createSpan(text, regex.test(text));
      });
      lbl.formattedText = fString;
      return lbl;
    },
    createNotes() {
      const stack = this.notescon;
      stack.removeChildren();
      this.recipe.notes.forEach((note) =>
        stack.addChild(this.createNote(note))
      );
    },
    getTags(tags) {
      return tags.join(" · ");
    },
    hijackBackEvent() {
      AndroidApplication.on(
        AndroidApplication.activityBackPressedEvent,
        this.backEvent
      );
    },
    releaseBackEvent() {
      AndroidApplication.off(
        AndroidApplication.activityBackPressedEvent,
        this.backEvent
      );
    },
    backEvent(args) {
      if (this.photoOpen) {
        args.cancel = true;
        this.closePhoto();
      } else this.$navigateBack();
    },
    viewPhoto() {
      this.imgZoom.initNativeView();
      this.photoOpen = true;
      this.hijackBackEvent();
      let pv = this.imgZoom;
      pv.visibility = "visible";
      let sw = Screen.mainScreen.widthDIPs;
      let sh = Screen.mainScreen.heightDIPs;
      pv.animate({
        opacity: 1,
        duration: 50,
      })
        .then(() =>
          pv.animate({
            width: sw,
            height: sw,
            translate: { x: 112 - sw, y: (sh - sw) / 3 },
            duration: 250,
            curve: CoreTypes.AnimationCurve.ease,
          })
        )
        .then(() =>
          pv.animate({
            height: sh,
            translate: { x: -sw + 112, y: -((sh - sw) / 6) },
            duration: 250,
            curve: CoreTypes.AnimationCurve.ease,
          })
        );
    },
    closePhoto() {
      let pv = this.imgZoom;
      let sw = Screen.mainScreen.widthDIPs;
      let sh = Screen.mainScreen.heightDIPs;
      pv.animate({
        width: sw,
        height: sw,
        translate: { x: 112 - sw, y: (sh - sw) / 3 },
        duration: 250,
        curve: CoreTypes.AnimationCurve.ease,
      })
        .then(() =>
          pv.animate({
            width: 96,
            height: 96,
            translate: { x: 0, y: 0 },
            duration: 250,
            curve: CoreTypes.AnimationCurve.ease,
          })
        )
        .then(() =>
          pv.animate({
            opacity: 0,
            duration: 50,
          })
        )
        .then(() => {
          pv.visibility = "collapsed";
          this.photoOpen = false;
          this.releaseBackEvent();
        });
    },
    navigateBack() {
      this.photoOpen ? this.closePhoto() : this.$navigateBack();
    },

    //HELPERS
    touchYield({ object, action }) {
      object.className = action.match(/down|move/)
        ? "value clickable fade"
        : "value clickable";
      if (action == "up") this.changeYield();
    },
  },
  created() {
    this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0];
    this.recipe.ingredients.forEach((e) => this.checks.push(false));
  },
  mounted() {
    this.yieldMultiplier = this.recipe.yield.quantity;
    this.recipe.tried && this.recipe.lastTried && this.showLastTried();
  },
};
</script>