vipassana-design-standards 0.0.6

package/app/assets/javascripts/index.js

@@ -0,0 +1,400 @@
+// i18n JSON
+import i18nJson from './i18n.js?ver=0.10'
+
+// Dependencies
+import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
+import fileSaver from 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/+esm'
+import jszip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'
+
+// Graphicals element as JS
+import wheel from '../images/wheels/wheel-2023.svg.js'
+import wheelDuotone from '../images/wheels/wheel-2023-duotone.svg.js'
+import footlight from '../fonts/FootlightMTProLight.base64.js'
+import lato from '../fonts/Lato-Light.base64.js'
+
+export default {
+  data() {
+    return {
+      ready: false,
+      locale: 'en',
+      width: 1200,
+      height: 100,
+      scale100: 100,
+      wheel: 'wheel1',
+      disposition: 'left-one-line',
+      displayTagline: true,
+      night: false,
+      embedSVG: false,
+      generating: false,
+      customImageName: null,
+      customSizeName: null,
+      colorPalette: [
+        { color: "#9C6B14", text: "Header text", name: "Dark Gold" },
+        { color: "#B78730", text: "Buttons and graphical elements", name: "Light Gold" },
+        { color: "#1E3461", text: "Header text, buttons and graphical elements", name: "Blue" },
+        { color: "#4F4D47", text: "Paragraph Text", name: "Grey" },
+      ]
+    }
+  },
+  computed: {
+    fullTitle() {
+      return this.t('vipassana_as_taught') || `${this.t('vipassana_meditation')} ${this.t('as_taught')}`
+    },
+    i18n() {
+      return i18nJson
+    },
+    isRtl() {
+      return this.i18n[this.locale].rtl
+    },
+    fontPath() {
+      return 'assets/fonts/'
+    },
+    titleFontUrl() {
+      return this.embedSVG ? footlight : `${this.fontPath}FootlightMTProLight.woff`
+    },
+    taglineFontUrl() {
+      return this.embedSVG ? lato : `${this.fontPath}Lato-Light.woff`
+    },
+    wheels() {
+      return {
+        wheel1: wheel,
+        wheel2: wheelDuotone,
+      }
+    },
+    wheelSVGCode() {
+      return this.wheels[this.wheel]
+    },
+    wheelPath() {
+      const paths = {
+        wheel1: 'https://design-standards.dhamma.org/dist/Dhamma-Wheel.svg',
+        wheel2: 'https://design-standards.dhamma.org/assets/images/wheels/wheel-2023-duotone.svg',
+      }
+      return paths[this.wheel]
+    },
+    scale() {
+      return this.scale100 / 100
+    },
+    dispositions() {
+      return ['left-one-line', 'left-two-lines', 'centered']
+    },
+    titleFontSize() {
+      switch (this.locale) {
+        case "si": return 27;
+        default: return 32
+      }
+    },
+    taglineFontSize() {
+      switch (this.locale) {
+        case "si": return 16;
+        default: return 18
+      }
+    },
+    titleFontFamily() {
+      return this.getTitleFontFamily(this.locale)
+    },
+    taglineFontFamily() {
+      return this.getTaglineFontFamily(this.locale)
+    },
+    reverse() {
+      return this.i18n[this.locale].reverse
+    },
+    positions() {
+      if (this.reverse) {
+        return {
+          'left-one-line': {
+            firstTitleTop: 60,
+            vTitleWithdraw: 6
+          },
+          'left-one-line_tagline': {
+            taglineTop: 38,
+            firstTitleTop: 73
+          },
+          'left-two-lines': {
+            secondTitleTop: 40,
+            firstTitleTop: 78
+          },
+          'left-two-lines_tagline': {
+            taglineTop: 19,
+            secondTitleTop: 56,
+            firstTitleTop: 92
+          },
+          'centered': {
+            secondTitleTop: 132,
+            firstTitleTop: 167,
+          },
+          'centered_tagline': {
+            taglineTop: 124,
+            secondTitleTop: 159,
+            firstTitleTop: 193,
+
+          },
+        }
+      }
+      return {
+        'left-one-line': {
+          firstTitleTop: 60,
+          vTitleWithdraw: 6
+        },
+        'left-one-line_tagline': {
+          firstTitleTop: 48,
+          taglineTop: 78,
+          vTitleWithdraw: 6
+        },
+        'left-two-lines': {
+          firstTitleTop: 43,
+          secondTitleTop: 81,
+          vTitleWithdraw: 3
+        },
+        'left-two-lines_tagline': {
+          firstTitleTop: 32,
+          secondTitleTop: 65,
+          taglineTop: 92,
+          vTitleWithdraw: 3
+        },
+        'centered': {
+          firstTitleTop: 132,
+          secondTitleTop: 167,
+        },
+        'centered_tagline': {
+          firstTitleTop: 132,
+          secondTitleTop: 167,
+          taglineTop: 195,
+        },
+      }
+    },
+    pos() {
+      return this.positions[this.disposition + (this.displayTagline ? '_tagline' : '')]
+    },
+    wheelTranslate() {
+      const wheelWidth = 70
+      if (this.disposition == 'centered') return (this.width / 2) - (wheelWidth / 2)
+      else return this.isRtl ? this.width - 70 : 0
+    },
+    textTranslate() {
+      return this.isRtl && this.disposition != 'centered' ? this.width : 0
+    },
+    imageName() {
+      if (this.customImageName) return this.customImageName
+
+      const wheel = this.wheel == 'wheel1' ? '' : `-${this.wheel}`
+      return `logo-${this.locale}-${this.disposition}${this.displayTagline ? '' : '-no-tagline'}${wheel}`
+    },
+    sizeName() {
+      if (this.customSizeName !== null) return this.customSizeName
+
+      return this.scale100 == 100 ? '' : `@${this.scale100}px`
+    },
+    titleColor() {
+      return this.night ? "#fff" : "#9C6B14"
+    },
+    taglineColor() {
+      return this.night ? "#ffffff90" : "#4F4D47"
+    },
+    logoCode() {
+      return `<img height="64" src="https://design-standards.dhamma.org/dist/logos/logo-${this.locale}.png" alt="${this.fullTitle}"/>`
+    }
+  },
+  mounted() {
+    this.ready = true
+    this.$watch(
+      (vm) => [vm.locale, vm.disposition, vm.displayTagline],
+      () => { if (!this.generating) this.updateImageSize() },
+      { immediate: true, deep: true, }
+    )
+  },
+  methods: {
+    t(key) {
+      return this.i18n[this.locale][key]
+    },
+    copyCode() {
+      navigator.clipboard.writeText(this.logoCode);
+    },
+    inlineSvg() {
+      return document.querySelector('#logo-svg').outerHTML
+    },
+    textLeft(text) {
+      if (this.disposition == 'centered') return this.width / 2
+
+      let result = 86
+      // improve alignement when text start with v, like Vipassana
+      if (!this.isRtl && text && text.length > 1 && text[0].toLowerCase() == 'v')
+        result -= (this.pos.vTitleWithdraw || 0)
+      return this.isRtl ? -1 * result : result
+    },
+    getTitleFontFamily(locale) {
+      return this.universalFont(locale) || "FootLight"
+    },
+    getTaglineFontFamily(locale) {
+      switch (locale) {
+        case "tr": return 'Noto Sans';
+        case "bg": return 'Noto Sans';
+        case "el": return 'Noto Sans';
+        case "mk": return 'Noto Sans';
+        case "mr": return 'Noto Sans';
+        case "or": return 'Noto Sans';
+        case "ro": return 'Noto Sans';
+        case "ru": return 'Noto Sans';
+        case "vi": return 'Noto Sans';
+        default: return this.universalFont(locale) || "Lato"
+      }
+    },
+    universalFont(locale) {
+      switch (locale) {
+        case "gu": return 'Noto Sans Gujarati';
+        case "ja": return 'Noto Sans JP';
+        case "ko": return 'Noto Sans KR';
+        case "si": return 'Noto Sans Sinhala';
+        case "km": return 'Noto Sans Khmer';
+        case "fa": return 'Noto Sans Arabic';
+        case "ar": return 'Noto Sans Arabic';
+        default: return null
+      }
+    },
+    downloadSVG() {
+      const [filename, content] = this.getSVGData()
+      fileSaver.saveAs(content, filename);
+    },
+    getSVGData() {
+      const blob = new Blob([this.inlineSvg()], {type: 'image/svg'})
+      return [`${this.imageName}.svg`, blob]
+    },
+    downloadPNG() {
+      const [filename, canvas] = this.getPNGData()
+      setTimeout(() => {
+        fileSaver.saveAs(canvas.toDataURL(), filename);
+      }, 100)
+    },
+    getPNGData() {
+      // SVG -> canvas -> PNG
+      const canvas = document.querySelector('canvas')
+      Canvg.fromString(canvas.getContext('2d'), this.inlineSvg()).render()
+      return [`${this.imageName}${this.sizeName}.png`, canvas]
+    },
+    async updateImageSize() {
+      await this.$nextTick()
+      // Update the logo size based on the real width of wheel + text
+      this.width = document.getElementById("logo").getBBox().width + 3
+      this.height = document.getElementById("logo").getBBox().height + 1
+    },
+    async generateAllInlineSVG() {
+      this.generating = true
+      this.embedSVG = false
+      let svgs = {}
+
+      for (let locale in this.i18n) {
+        this.locale = locale
+        svgs[locale] = {}
+
+        // Left 2 line no tag line for Mobile
+        this.disposition = 'left-two-lines'
+        this.displayTagline = false
+        svgs[locale].mobile = await this.generateSvgCode()
+
+        // Auto disposition
+        this.disposition = 'left-one-line'
+        this.displayTagline = true
+        await this.updateImageSize()
+        if ((this.width / this.height) > 8.5) {
+          this.disposition = 'left-two-lines'
+        }
+        svgs[locale].normal = await this.generateSvgCode()
+
+        // All dispositions
+        for (let disposition of this.dispositions) {
+          this.disposition = disposition
+          for (let tagline of [true, false]) {
+            this.displayTagline = tagline
+            const name = `${this.disposition}${this.displayTagline ? '' : '-no-tagline'}`
+            svgs[locale][name] = await this.generateSvgCode()
+          }
+        }
+      }
+
+      // Create ruby file
+      const result = `
+      # This file has been generated by design-standards.dhamma.org wesbite
+      # index.js#generateAllInlineSVG
+
+      SVGS = ${JSON.stringify(svgs)}
+      `
+      var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
+      fileSaver.saveAs(blob, "logos_inline_svg.rb")
+
+      var blob = new Blob([JSON.stringify(svgs)], {type: "text/plain;charset=utf-8"})
+      fileSaver.saveAs(blob, "logos-inline-svg.json")
+
+      this.generating = false
+    },
+    async generateSvgCode() {
+      await this.updateImageSize()
+      await this.$nextTick()
+      let svgNode = document.getElementById("logo-svg").cloneNode(true)
+      svgNode.removeAttribute('id')
+      svgNode.removeAttribute('width')
+      svgNode.removeAttribute('height')
+      svgNode.getElementById('logo').removeAttribute('transform')
+      let result = svgNode.outerHTML
+      return result.replace(/<\!--.*?-->/g, "") // remove comments
+    },
+    async generateAllLogos() {
+      this.generating = true
+      const zip = new jszip();
+
+      for (let locale in this.i18n) {
+        this.locale = locale
+
+        // Left 2 line no tag line for Mobile
+        this.disposition = 'left-two-lines'
+        this.displayTagline = false
+        this.customImageName = `logo-${this.locale}`
+        this.customSizeName = '-small'
+        await this.generateImages(zip, [80])
+
+        // Auto disposition
+        this.disposition = 'left-one-line'
+        this.displayTagline = true
+        await this.updateImageSize()
+        if ((this.width / this.height) > 8.5) {
+          this.disposition = 'left-two-lines'
+        }
+        this.customImageName = `logo-${this.locale}`
+        this.customSizeName = ''
+        await this.generateImages(zip, [64])
+        this.customSizeName = '-large'
+        await this.generateImages(zip, [80])
+      }
+
+      zip.generateAsync({type:"blob"}).then((content) => {
+        fileSaver.saveAs(content, "logos.zip");
+        this.generating = false
+        this.customImageName = null
+        this.customSizeName = null
+        this.scale100 = 100
+        this.locale = "en"
+        this.wheel = "wheel1"
+        this.disposition = "left-one-line"
+      });
+    },
+    async generateImages(zip, sizes) {
+      await this.updateImageSize()
+      await this.$nextTick()
+      // const [filename, content] = this.getSVGData()
+      // zip.file(filename, content);
+      for(let scale of sizes) {
+        this.scale100 = scale
+        await this.$nextTick()
+        await this.$nextTick()
+        await this.addPNGImage(zip)
+      }
+    },
+    addPNGImage(zip) {
+      return new Promise(resolve => {
+        const [filename, canvas] = this.getPNGData()
+        canvas.toBlob(function(blob) {
+          zip.file(filename, blob)
+          resolve()
+        })
+      })
+    }
+  },
+}