vipassana-design-standards 0.0.8 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/vipassana/logo_helper.rb +11 -4
- data/lib/vipassana/logos_inline_svg.rb +1 -2
- data/lib/vipassana-design-standards.rb +0 -1
- metadata +2 -194
- data/.htaccess +0 -3
- data/README.md +0 -4
- data/app/assets/fonts/FootlightMTProBold.woff +0 -0
- data/app/assets/fonts/FootlightMTProBoldItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProExtraBold.woff +0 -0
- data/app/assets/fonts/FootlightMTProExtraBoldIt.woff +0 -0
- data/app/assets/fonts/FootlightMTProItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProLight.base64.js +0 -1
- data/app/assets/fonts/FootlightMTProLight.woff +0 -0
- data/app/assets/fonts/FootlightMTProLightItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProRegular.woff +0 -0
- data/app/assets/fonts/Lato-Black.woff +0 -0
- data/app/assets/fonts/Lato-BlackItalic.woff +0 -0
- data/app/assets/fonts/Lato-Bold.woff +0 -0
- data/app/assets/fonts/Lato-BoldItalic.woff +0 -0
- data/app/assets/fonts/Lato-Italic.woff +0 -0
- data/app/assets/fonts/Lato-Light.base64.js +0 -1
- data/app/assets/fonts/Lato-Light.woff +0 -0
- data/app/assets/fonts/Lato-LightItalic.woff +0 -0
- data/app/assets/fonts/Lato-Regular.woff +0 -0
- data/app/assets/fonts/Lato-Thin.woff +0 -0
- data/app/assets/fonts/Lato-ThinItalic.woff +0 -0
- data/app/assets/fonts/OFL.txt +0 -93
- data/app/assets/images/wheels/favicon.png +0 -0
- data/app/assets/images/wheels/favicon.svg +0 -1483
- data/app/assets/images/wheels/old versions/2.5D-wheel.png +0 -0
- data/app/assets/images/wheels/old versions/2.5D-wheel.svg +0 -109
- data/app/assets/images/wheels/old versions/2D-wheel.svg +0 -472
- data/app/assets/images/wheels/old versions/3D-wheel.svg +0 -1
- data/app/assets/images/wheels/old versions/dhamma wheel 3D.png +0 -0
- data/app/assets/images/wheels/old versions/wheel-3d.ai +5 -3727
- data/app/assets/images/wheels/old versions/wheel-3d.png +0 -0
- data/app/assets/images/wheels/tests/2.5D-wheel-1.svg +0 -414
- data/app/assets/images/wheels/tests/2.5D-wheel-2.svg +0 -409
- data/app/assets/images/wheels/tests/2.5D-wheel-3.svg +0 -449
- data/app/assets/images/wheels/tests/2.5D-wheel-4.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-5.svg +0 -452
- data/app/assets/images/wheels/tests/2.5D-wheel-6.svg +0 -457
- data/app/assets/images/wheels/tests/2.5D-wheel-7.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-8.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-sebastian.svg +0 -3
- data/app/assets/images/wheels/tests/3D-wheel-2.svg +0 -1352
- data/app/assets/images/wheels/tests/3D-wheel-sebastian.svg +0 -1
- data/app/assets/images/wheels/tests/3D-wheel.svg +0 -1
- data/app/assets/images/wheels/wheel-2023-duotone.png +0 -0
- data/app/assets/images/wheels/wheel-2023-duotone.svg +0 -1
- data/app/assets/images/wheels/wheel-2023-duotone.svg.js +0 -1
- data/app/assets/images/wheels/wheel-2023-working-document-with-all-layers.svg +0 -1608
- data/app/assets/images/wheels/wheel-2023.png +0 -0
- data/app/assets/images/wheels/wheel-2023.svg +0 -1
- data/app/assets/images/wheels/wheel-2023.svg.js +0 -1
- data/app/assets/javascripts/i18n.js +0 -302
- data/app/assets/javascripts/index.js +0 -400
- data/app/assets/stylesheets/fonts.css +0 -5176
- data/app/assets/stylesheets/index.css +0 -179
- data/app/assets/stylesheets/logo.css +0 -123
- data/dist/Dhamma-Wheel.svg +0 -1
- data/dist/design-standards-v0.3.pdf +0 -0
- data/dist/favicon.png +0 -0
- data/dist/favicon.svg +0 -1490
- data/dist/fonts.zip +0 -0
- data/dist/logos/logo-bg-large.png +0 -0
- data/dist/logos/logo-bg-small.png +0 -0
- data/dist/logos/logo-bg.png +0 -0
- data/dist/logos/logo-cs-large.png +0 -0
- data/dist/logos/logo-cs-small.png +0 -0
- data/dist/logos/logo-cs.png +0 -0
- data/dist/logos/logo-de-large.png +0 -0
- data/dist/logos/logo-de-small.png +0 -0
- data/dist/logos/logo-de.png +0 -0
- data/dist/logos/logo-el-large.png +0 -0
- data/dist/logos/logo-el-small.png +0 -0
- data/dist/logos/logo-el.png +0 -0
- data/dist/logos/logo-en-large.png +0 -0
- data/dist/logos/logo-en-small.png +0 -0
- data/dist/logos/logo-en.png +0 -0
- data/dist/logos/logo-es-large.png +0 -0
- data/dist/logos/logo-es-small.png +0 -0
- data/dist/logos/logo-es.png +0 -0
- data/dist/logos/logo-fa-large.png +0 -0
- data/dist/logos/logo-fa-small.png +0 -0
- data/dist/logos/logo-fa.png +0 -0
- data/dist/logos/logo-fi-large.png +0 -0
- data/dist/logos/logo-fi-small.png +0 -0
- data/dist/logos/logo-fi.png +0 -0
- data/dist/logos/logo-fr-large.png +0 -0
- data/dist/logos/logo-fr-small.png +0 -0
- data/dist/logos/logo-fr.png +0 -0
- data/dist/logos/logo-gu-large.png +0 -0
- data/dist/logos/logo-gu-small.png +0 -0
- data/dist/logos/logo-gu.png +0 -0
- data/dist/logos/logo-he-large.png +0 -0
- data/dist/logos/logo-he-small.png +0 -0
- data/dist/logos/logo-he.png +0 -0
- data/dist/logos/logo-hi-large.png +0 -0
- data/dist/logos/logo-hi-small.png +0 -0
- data/dist/logos/logo-hi.png +0 -0
- data/dist/logos/logo-hu-large.png +0 -0
- data/dist/logos/logo-hu-small.png +0 -0
- data/dist/logos/logo-hu.png +0 -0
- data/dist/logos/logo-id-large.png +0 -0
- data/dist/logos/logo-id-small.png +0 -0
- data/dist/logos/logo-id.png +0 -0
- data/dist/logos/logo-it-large.png +0 -0
- data/dist/logos/logo-it-small.png +0 -0
- data/dist/logos/logo-it.png +0 -0
- data/dist/logos/logo-ja-large.png +0 -0
- data/dist/logos/logo-ja-small.png +0 -0
- data/dist/logos/logo-ja.png +0 -0
- data/dist/logos/logo-km-large.png +0 -0
- data/dist/logos/logo-km-small.png +0 -0
- data/dist/logos/logo-km.png +0 -0
- data/dist/logos/logo-ko-large.png +0 -0
- data/dist/logos/logo-ko-small.png +0 -0
- data/dist/logos/logo-ko.png +0 -0
- data/dist/logos/logo-lt-large.png +0 -0
- data/dist/logos/logo-lt-small.png +0 -0
- data/dist/logos/logo-lt.png +0 -0
- data/dist/logos/logo-lv-large.png +0 -0
- data/dist/logos/logo-lv-small.png +0 -0
- data/dist/logos/logo-lv.png +0 -0
- data/dist/logos/logo-mk-large.png +0 -0
- data/dist/logos/logo-mk-small.png +0 -0
- data/dist/logos/logo-mk.png +0 -0
- data/dist/logos/logo-mr-large.png +0 -0
- data/dist/logos/logo-mr-small.png +0 -0
- data/dist/logos/logo-mr.png +0 -0
- data/dist/logos/logo-nl-large.png +0 -0
- data/dist/logos/logo-nl-small.png +0 -0
- data/dist/logos/logo-nl.png +0 -0
- data/dist/logos/logo-or-large.png +0 -0
- data/dist/logos/logo-or-small.png +0 -0
- data/dist/logos/logo-or.png +0 -0
- data/dist/logos/logo-pl-large.png +0 -0
- data/dist/logos/logo-pl-small.png +0 -0
- data/dist/logos/logo-pl.png +0 -0
- data/dist/logos/logo-pt-large.png +0 -0
- data/dist/logos/logo-pt-small.png +0 -0
- data/dist/logos/logo-pt.png +0 -0
- data/dist/logos/logo-ro-large.png +0 -0
- data/dist/logos/logo-ro-small.png +0 -0
- data/dist/logos/logo-ro.png +0 -0
- data/dist/logos/logo-ru-large.png +0 -0
- data/dist/logos/logo-ru-small.png +0 -0
- data/dist/logos/logo-ru.png +0 -0
- data/dist/logos/logo-si-large.png +0 -0
- data/dist/logos/logo-si-small.png +0 -0
- data/dist/logos/logo-si.png +0 -0
- data/dist/logos/logo-sl-large.png +0 -0
- data/dist/logos/logo-sl-small.png +0 -0
- data/dist/logos/logo-sl.png +0 -0
- data/dist/logos/logo-sr-large.png +0 -0
- data/dist/logos/logo-sr-small.png +0 -0
- data/dist/logos/logo-sr.png +0 -0
- data/dist/logos/logo-sv-large.png +0 -0
- data/dist/logos/logo-sv-small.png +0 -0
- data/dist/logos/logo-sv.png +0 -0
- data/dist/logos/logo-ta-large.png +0 -0
- data/dist/logos/logo-ta-small.png +0 -0
- data/dist/logos/logo-ta.png +0 -0
- data/dist/logos/logo-te-large.png +0 -0
- data/dist/logos/logo-te-small.png +0 -0
- data/dist/logos/logo-te.png +0 -0
- data/dist/logos/logo-th-large.png +0 -0
- data/dist/logos/logo-th-small.png +0 -0
- data/dist/logos/logo-th.png +0 -0
- data/dist/logos/logo-tr-large.png +0 -0
- data/dist/logos/logo-tr-small.png +0 -0
- data/dist/logos/logo-tr.png +0 -0
- data/dist/logos/logo-vi-large.png +0 -0
- data/dist/logos/logo-vi-small.png +0 -0
- data/dist/logos/logo-vi.png +0 -0
- data/dist/logos/logo-zh-HANS-large.png +0 -0
- data/dist/logos/logo-zh-HANS-small.png +0 -0
- data/dist/logos/logo-zh-HANS.png +0 -0
- data/dist/logos/logo-zh-HANT-HK-large.png +0 -0
- data/dist/logos/logo-zh-HANT-HK-small.png +0 -0
- data/dist/logos/logo-zh-HANT-HK.png +0 -0
- data/dist/logos/logo-zh-HANT-large.png +0 -0
- data/dist/logos/logo-zh-HANT-small.png +0 -0
- data/dist/logos/logo-zh-HANT.png +0 -0
- data/dist/logos-inline-svg.json +0 -1
- data/dist/logos.zip +0 -0
- data/dist/resolutions/logo-en.svg +0 -1
- data/dist/resolutions/logo-en@128px.png +0 -0
- data/dist/resolutions/logo-en@640px.png +0 -0
- data/dist/resolutions/logo-en@64px.png +0 -0
- data/index.html +0 -231
- data/lib/vipassana/engine.rb +0 -4
- data/package.json +0 -7
- data/resolution.html +0 -22
- data/vipassana-design-standards.gemspec +0 -15
@@ -1,400 +0,0 @@
|
|
1
|
-
// i18n JSON
|
2
|
-
import i18nJson from './i18n.js?ver=0.10'
|
3
|
-
|
4
|
-
// Dependencies
|
5
|
-
import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
|
6
|
-
import fileSaver from 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/+esm'
|
7
|
-
import jszip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'
|
8
|
-
|
9
|
-
// Graphicals element as JS
|
10
|
-
import wheel from '../images/wheels/wheel-2023.svg.js'
|
11
|
-
import wheelDuotone from '../images/wheels/wheel-2023-duotone.svg.js'
|
12
|
-
import footlight from '../fonts/FootlightMTProLight.base64.js'
|
13
|
-
import lato from '../fonts/Lato-Light.base64.js'
|
14
|
-
|
15
|
-
export default {
|
16
|
-
data() {
|
17
|
-
return {
|
18
|
-
ready: false,
|
19
|
-
locale: 'en',
|
20
|
-
width: 1200,
|
21
|
-
height: 100,
|
22
|
-
scale100: 100,
|
23
|
-
wheel: 'wheel1',
|
24
|
-
disposition: 'left-one-line',
|
25
|
-
displayTagline: true,
|
26
|
-
night: false,
|
27
|
-
embedSVG: false,
|
28
|
-
generating: false,
|
29
|
-
customImageName: null,
|
30
|
-
customSizeName: null,
|
31
|
-
colorPalette: [
|
32
|
-
{ color: "#9C6B14", text: "Header text", name: "Dark Gold" },
|
33
|
-
{ color: "#B78730", text: "Buttons and graphical elements", name: "Light Gold" },
|
34
|
-
{ color: "#1E3461", text: "Header text, buttons and graphical elements", name: "Blue" },
|
35
|
-
{ color: "#4F4D47", text: "Paragraph Text", name: "Grey" },
|
36
|
-
]
|
37
|
-
}
|
38
|
-
},
|
39
|
-
computed: {
|
40
|
-
fullTitle() {
|
41
|
-
return this.t('vipassana_as_taught') || `${this.t('vipassana_meditation')} ${this.t('as_taught')}`
|
42
|
-
},
|
43
|
-
i18n() {
|
44
|
-
return i18nJson
|
45
|
-
},
|
46
|
-
isRtl() {
|
47
|
-
return this.i18n[this.locale].rtl
|
48
|
-
},
|
49
|
-
fontPath() {
|
50
|
-
return 'assets/fonts/'
|
51
|
-
},
|
52
|
-
titleFontUrl() {
|
53
|
-
return this.embedSVG ? footlight : `${this.fontPath}FootlightMTProLight.woff`
|
54
|
-
},
|
55
|
-
taglineFontUrl() {
|
56
|
-
return this.embedSVG ? lato : `${this.fontPath}Lato-Light.woff`
|
57
|
-
},
|
58
|
-
wheels() {
|
59
|
-
return {
|
60
|
-
wheel1: wheel,
|
61
|
-
wheel2: wheelDuotone,
|
62
|
-
}
|
63
|
-
},
|
64
|
-
wheelSVGCode() {
|
65
|
-
return this.wheels[this.wheel]
|
66
|
-
},
|
67
|
-
wheelPath() {
|
68
|
-
const paths = {
|
69
|
-
wheel1: 'https://design-standards.dhamma.org/dist/Dhamma-Wheel.svg',
|
70
|
-
wheel2: 'https://design-standards.dhamma.org/assets/images/wheels/wheel-2023-duotone.svg',
|
71
|
-
}
|
72
|
-
return paths[this.wheel]
|
73
|
-
},
|
74
|
-
scale() {
|
75
|
-
return this.scale100 / 100
|
76
|
-
},
|
77
|
-
dispositions() {
|
78
|
-
return ['left-one-line', 'left-two-lines', 'centered']
|
79
|
-
},
|
80
|
-
titleFontSize() {
|
81
|
-
switch (this.locale) {
|
82
|
-
case "si": return 27;
|
83
|
-
default: return 32
|
84
|
-
}
|
85
|
-
},
|
86
|
-
taglineFontSize() {
|
87
|
-
switch (this.locale) {
|
88
|
-
case "si": return 16;
|
89
|
-
default: return 18
|
90
|
-
}
|
91
|
-
},
|
92
|
-
titleFontFamily() {
|
93
|
-
return this.getTitleFontFamily(this.locale)
|
94
|
-
},
|
95
|
-
taglineFontFamily() {
|
96
|
-
return this.getTaglineFontFamily(this.locale)
|
97
|
-
},
|
98
|
-
reverse() {
|
99
|
-
return this.i18n[this.locale].reverse
|
100
|
-
},
|
101
|
-
positions() {
|
102
|
-
if (this.reverse) {
|
103
|
-
return {
|
104
|
-
'left-one-line': {
|
105
|
-
firstTitleTop: 60,
|
106
|
-
vTitleWithdraw: 6
|
107
|
-
},
|
108
|
-
'left-one-line_tagline': {
|
109
|
-
taglineTop: 38,
|
110
|
-
firstTitleTop: 73
|
111
|
-
},
|
112
|
-
'left-two-lines': {
|
113
|
-
secondTitleTop: 40,
|
114
|
-
firstTitleTop: 78
|
115
|
-
},
|
116
|
-
'left-two-lines_tagline': {
|
117
|
-
taglineTop: 19,
|
118
|
-
secondTitleTop: 56,
|
119
|
-
firstTitleTop: 92
|
120
|
-
},
|
121
|
-
'centered': {
|
122
|
-
secondTitleTop: 132,
|
123
|
-
firstTitleTop: 167,
|
124
|
-
},
|
125
|
-
'centered_tagline': {
|
126
|
-
taglineTop: 124,
|
127
|
-
secondTitleTop: 159,
|
128
|
-
firstTitleTop: 193,
|
129
|
-
|
130
|
-
},
|
131
|
-
}
|
132
|
-
}
|
133
|
-
return {
|
134
|
-
'left-one-line': {
|
135
|
-
firstTitleTop: 60,
|
136
|
-
vTitleWithdraw: 6
|
137
|
-
},
|
138
|
-
'left-one-line_tagline': {
|
139
|
-
firstTitleTop: 48,
|
140
|
-
taglineTop: 78,
|
141
|
-
vTitleWithdraw: 6
|
142
|
-
},
|
143
|
-
'left-two-lines': {
|
144
|
-
firstTitleTop: 43,
|
145
|
-
secondTitleTop: 81,
|
146
|
-
vTitleWithdraw: 3
|
147
|
-
},
|
148
|
-
'left-two-lines_tagline': {
|
149
|
-
firstTitleTop: 32,
|
150
|
-
secondTitleTop: 65,
|
151
|
-
taglineTop: 92,
|
152
|
-
vTitleWithdraw: 3
|
153
|
-
},
|
154
|
-
'centered': {
|
155
|
-
firstTitleTop: 132,
|
156
|
-
secondTitleTop: 167,
|
157
|
-
},
|
158
|
-
'centered_tagline': {
|
159
|
-
firstTitleTop: 132,
|
160
|
-
secondTitleTop: 167,
|
161
|
-
taglineTop: 195,
|
162
|
-
},
|
163
|
-
}
|
164
|
-
},
|
165
|
-
pos() {
|
166
|
-
return this.positions[this.disposition + (this.displayTagline ? '_tagline' : '')]
|
167
|
-
},
|
168
|
-
wheelTranslate() {
|
169
|
-
const wheelWidth = 70
|
170
|
-
if (this.disposition == 'centered') return (this.width / 2) - (wheelWidth / 2)
|
171
|
-
else return this.isRtl ? this.width - 70 : 0
|
172
|
-
},
|
173
|
-
textTranslate() {
|
174
|
-
return this.isRtl && this.disposition != 'centered' ? this.width : 0
|
175
|
-
},
|
176
|
-
imageName() {
|
177
|
-
if (this.customImageName) return this.customImageName
|
178
|
-
|
179
|
-
const wheel = this.wheel == 'wheel1' ? '' : `-${this.wheel}`
|
180
|
-
return `logo-${this.locale}-${this.disposition}${this.displayTagline ? '' : '-no-tagline'}${wheel}`
|
181
|
-
},
|
182
|
-
sizeName() {
|
183
|
-
if (this.customSizeName !== null) return this.customSizeName
|
184
|
-
|
185
|
-
return this.scale100 == 100 ? '' : `@${this.scale100}px`
|
186
|
-
},
|
187
|
-
titleColor() {
|
188
|
-
return this.night ? "#fff" : "#9C6B14"
|
189
|
-
},
|
190
|
-
taglineColor() {
|
191
|
-
return this.night ? "#ffffff90" : "#4F4D47"
|
192
|
-
},
|
193
|
-
logoCode() {
|
194
|
-
return `<img height="64" src="https://design-standards.dhamma.org/dist/logos/logo-${this.locale}.png" alt="${this.fullTitle}"/>`
|
195
|
-
}
|
196
|
-
},
|
197
|
-
mounted() {
|
198
|
-
this.ready = true
|
199
|
-
this.$watch(
|
200
|
-
(vm) => [vm.locale, vm.disposition, vm.displayTagline],
|
201
|
-
() => { if (!this.generating) this.updateImageSize() },
|
202
|
-
{ immediate: true, deep: true, }
|
203
|
-
)
|
204
|
-
},
|
205
|
-
methods: {
|
206
|
-
t(key) {
|
207
|
-
return this.i18n[this.locale][key]
|
208
|
-
},
|
209
|
-
copyCode() {
|
210
|
-
navigator.clipboard.writeText(this.logoCode);
|
211
|
-
},
|
212
|
-
inlineSvg() {
|
213
|
-
return document.querySelector('#logo-svg').outerHTML
|
214
|
-
},
|
215
|
-
textLeft(text) {
|
216
|
-
if (this.disposition == 'centered') return this.width / 2
|
217
|
-
|
218
|
-
let result = 86
|
219
|
-
// improve alignement when text start with v, like Vipassana
|
220
|
-
if (!this.isRtl && text && text.length > 1 && text[0].toLowerCase() == 'v')
|
221
|
-
result -= (this.pos.vTitleWithdraw || 0)
|
222
|
-
return this.isRtl ? -1 * result : result
|
223
|
-
},
|
224
|
-
getTitleFontFamily(locale) {
|
225
|
-
return this.universalFont(locale) || "FootLight"
|
226
|
-
},
|
227
|
-
getTaglineFontFamily(locale) {
|
228
|
-
switch (locale) {
|
229
|
-
case "tr": return 'Noto Sans';
|
230
|
-
case "bg": return 'Noto Sans';
|
231
|
-
case "el": return 'Noto Sans';
|
232
|
-
case "mk": return 'Noto Sans';
|
233
|
-
case "mr": return 'Noto Sans';
|
234
|
-
case "or": return 'Noto Sans';
|
235
|
-
case "ro": return 'Noto Sans';
|
236
|
-
case "ru": return 'Noto Sans';
|
237
|
-
case "vi": return 'Noto Sans';
|
238
|
-
default: return this.universalFont(locale) || "Lato"
|
239
|
-
}
|
240
|
-
},
|
241
|
-
universalFont(locale) {
|
242
|
-
switch (locale) {
|
243
|
-
case "gu": return 'Noto Sans Gujarati';
|
244
|
-
case "ja": return 'Noto Sans JP';
|
245
|
-
case "ko": return 'Noto Sans KR';
|
246
|
-
case "si": return 'Noto Sans Sinhala';
|
247
|
-
case "km": return 'Noto Sans Khmer';
|
248
|
-
case "fa": return 'Noto Sans Arabic';
|
249
|
-
case "ar": return 'Noto Sans Arabic';
|
250
|
-
default: return null
|
251
|
-
}
|
252
|
-
},
|
253
|
-
downloadSVG() {
|
254
|
-
const [filename, content] = this.getSVGData()
|
255
|
-
fileSaver.saveAs(content, filename);
|
256
|
-
},
|
257
|
-
getSVGData() {
|
258
|
-
const blob = new Blob([this.inlineSvg()], {type: 'image/svg'})
|
259
|
-
return [`${this.imageName}.svg`, blob]
|
260
|
-
},
|
261
|
-
downloadPNG() {
|
262
|
-
const [filename, canvas] = this.getPNGData()
|
263
|
-
setTimeout(() => {
|
264
|
-
fileSaver.saveAs(canvas.toDataURL(), filename);
|
265
|
-
}, 100)
|
266
|
-
},
|
267
|
-
getPNGData() {
|
268
|
-
// SVG -> canvas -> PNG
|
269
|
-
const canvas = document.querySelector('canvas')
|
270
|
-
Canvg.fromString(canvas.getContext('2d'), this.inlineSvg()).render()
|
271
|
-
return [`${this.imageName}${this.sizeName}.png`, canvas]
|
272
|
-
},
|
273
|
-
async updateImageSize() {
|
274
|
-
await this.$nextTick()
|
275
|
-
// Update the logo size based on the real width of wheel + text
|
276
|
-
this.width = document.getElementById("logo").getBBox().width + 3
|
277
|
-
this.height = document.getElementById("logo").getBBox().height + 1
|
278
|
-
},
|
279
|
-
async generateAllInlineSVG() {
|
280
|
-
this.generating = true
|
281
|
-
this.embedSVG = false
|
282
|
-
let svgs = {}
|
283
|
-
|
284
|
-
for (let locale in this.i18n) {
|
285
|
-
this.locale = locale
|
286
|
-
svgs[locale] = {}
|
287
|
-
|
288
|
-
// Left 2 line no tag line for Mobile
|
289
|
-
this.disposition = 'left-two-lines'
|
290
|
-
this.displayTagline = false
|
291
|
-
svgs[locale].mobile = await this.generateSvgCode()
|
292
|
-
|
293
|
-
// Auto disposition
|
294
|
-
this.disposition = 'left-one-line'
|
295
|
-
this.displayTagline = true
|
296
|
-
await this.updateImageSize()
|
297
|
-
if ((this.width / this.height) > 8.5) {
|
298
|
-
this.disposition = 'left-two-lines'
|
299
|
-
}
|
300
|
-
svgs[locale].normal = await this.generateSvgCode()
|
301
|
-
|
302
|
-
// All dispositions
|
303
|
-
for (let disposition of this.dispositions) {
|
304
|
-
this.disposition = disposition
|
305
|
-
for (let tagline of [true, false]) {
|
306
|
-
this.displayTagline = tagline
|
307
|
-
const name = `${this.disposition}${this.displayTagline ? '' : '-no-tagline'}`
|
308
|
-
svgs[locale][name] = await this.generateSvgCode()
|
309
|
-
}
|
310
|
-
}
|
311
|
-
}
|
312
|
-
|
313
|
-
// Create ruby file
|
314
|
-
const result = `
|
315
|
-
# This file has been generated by design-standards.dhamma.org wesbite
|
316
|
-
# index.js#generateAllInlineSVG
|
317
|
-
|
318
|
-
VIPASSANA_SVGS = ${JSON.stringify(svgs)}
|
319
|
-
`
|
320
|
-
var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
|
321
|
-
fileSaver.saveAs(blob, "logos_inline_svg.rb")
|
322
|
-
|
323
|
-
var blob = new Blob([JSON.stringify(svgs)], {type: "text/plain;charset=utf-8"})
|
324
|
-
fileSaver.saveAs(blob, "logos-inline-svg.json")
|
325
|
-
|
326
|
-
this.generating = false
|
327
|
-
},
|
328
|
-
async generateSvgCode() {
|
329
|
-
await this.updateImageSize()
|
330
|
-
await this.$nextTick()
|
331
|
-
let svgNode = document.getElementById("logo-svg").cloneNode(true)
|
332
|
-
svgNode.removeAttribute('id')
|
333
|
-
svgNode.removeAttribute('width')
|
334
|
-
svgNode.removeAttribute('height')
|
335
|
-
svgNode.getElementById('logo').removeAttribute('transform')
|
336
|
-
let result = svgNode.outerHTML
|
337
|
-
return result.replace(/<\!--.*?-->/g, "") // remove comments
|
338
|
-
},
|
339
|
-
async generateAllLogos() {
|
340
|
-
this.generating = true
|
341
|
-
const zip = new jszip();
|
342
|
-
|
343
|
-
for (let locale in this.i18n) {
|
344
|
-
this.locale = locale
|
345
|
-
|
346
|
-
// Left 2 line no tag line for Mobile
|
347
|
-
this.disposition = 'left-two-lines'
|
348
|
-
this.displayTagline = false
|
349
|
-
this.customImageName = `logo-${this.locale}`
|
350
|
-
this.customSizeName = '-small'
|
351
|
-
await this.generateImages(zip, [80])
|
352
|
-
|
353
|
-
// Auto disposition
|
354
|
-
this.disposition = 'left-one-line'
|
355
|
-
this.displayTagline = true
|
356
|
-
await this.updateImageSize()
|
357
|
-
if ((this.width / this.height) > 8.5) {
|
358
|
-
this.disposition = 'left-two-lines'
|
359
|
-
}
|
360
|
-
this.customImageName = `logo-${this.locale}`
|
361
|
-
this.customSizeName = ''
|
362
|
-
await this.generateImages(zip, [64])
|
363
|
-
this.customSizeName = '-large'
|
364
|
-
await this.generateImages(zip, [80])
|
365
|
-
}
|
366
|
-
|
367
|
-
zip.generateAsync({type:"blob"}).then((content) => {
|
368
|
-
fileSaver.saveAs(content, "logos.zip");
|
369
|
-
this.generating = false
|
370
|
-
this.customImageName = null
|
371
|
-
this.customSizeName = null
|
372
|
-
this.scale100 = 100
|
373
|
-
this.locale = "en"
|
374
|
-
this.wheel = "wheel1"
|
375
|
-
this.disposition = "left-one-line"
|
376
|
-
});
|
377
|
-
},
|
378
|
-
async generateImages(zip, sizes) {
|
379
|
-
await this.updateImageSize()
|
380
|
-
await this.$nextTick()
|
381
|
-
// const [filename, content] = this.getSVGData()
|
382
|
-
// zip.file(filename, content);
|
383
|
-
for(let scale of sizes) {
|
384
|
-
this.scale100 = scale
|
385
|
-
await this.$nextTick()
|
386
|
-
await this.$nextTick()
|
387
|
-
await this.addPNGImage(zip)
|
388
|
-
}
|
389
|
-
},
|
390
|
-
addPNGImage(zip) {
|
391
|
-
return new Promise(resolve => {
|
392
|
-
const [filename, canvas] = this.getPNGData()
|
393
|
-
canvas.toBlob(function(blob) {
|
394
|
-
zip.file(filename, blob)
|
395
|
-
resolve()
|
396
|
-
})
|
397
|
-
})
|
398
|
-
}
|
399
|
-
},
|
400
|
-
}
|