PageMixin.vue 2.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
<script>
import Vue from "vue";
import locales from "./locales";

let autodetected = false

export default {
  props: ["locale"],
  created() {
    if (!autodetected) {
      this.autodetectLanguage();
    }
  },

  head: {
    title() {
      return {
        inner: this.getInnerTitle()
      };
    },
    meta: function() {
      return [
        {
          name: "description",
          content: this.$pgettext(
            "Content/Home/Header",
            "Funkwhale contribution guides"
          )
        },
        {
          "http-equiv": "content-language",
          content: this.$language.current.replace("_", "-")
        }
      ];
    },
    link: function() {
      let self = this;
      let links = locales.locales.map(l => {
        let params = {
          ...self.$route.params,
          locale: l.code
        };
        let resolved = self.$router.resolve({
          name: self.$route.name,
          params
        });
        return {
          rel: "alternate",
          hreflang: l.code.replace("_", "-"),
          href: `${resolved.href}`
        };
      });
      return links;
    }
  },
  methods: {
    getInnerTitle() {
      return this.$pgettext(
        "HTML/Meta/Title",
        "Contribute to Funkwhale development"
      );
    },
    autodetectLanguage() {
      autodetected = true
      let userLanguage =
        this.locale || navigator.language || navigator.userLanguage;
      let available = locales.locales.map(e => {
        return e.code;
      });
      let candidate;
      let matching = available.filter(a => {
        return userLanguage.replace("-", "_") === a;
      });
      let almostMatching = available.filter(a => {
        return userLanguage.replace("-", "_").split("_")[0] === a.split("_")[0];
      });
      if (matching.length > 0) {
        candidate = matching[0];
      } else if (almostMatching.length > 0) {
        candidate = almostMatching[0];
      } else {
        return;
      }
      this.switchLanguage(candidate);
    },
    switchLanguage(newValue) {
      let self = this;
      import(`./translations/${newValue}.json`)
        .then(response => {
          Vue.$translations[newValue] = response.default[newValue];
        })
        .finally(() => {
          // set current language twice, otherwise we seem to have a cache somewhere
          // and rendering does not happen
          self.$language.current = "noop";
          self.$language.current = newValue;
          if (
            self.$route.params.locale &&
            self.$route.params.locale !== newValue
          ) {
            self.$router.push({ params: { locale: newValue } });
          }
          self.$emit("updateHead");
        });
    }
  },
  watch: {
    "$route.params.locale"(newValue) {
      if (newValue) {
        this.switchLanguage(newValue);
      }
    }
  }
};
</script>