vipassana-design-standards 0.0.8 → 0.0.14

data/app/assets/javascripts/index.js

@@ -1,400 +0,0 @@
-// 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
-
-      VIPASSANA_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()
-        })
-      })
-    }
-  },
-}