@imposium-hub/components 1.56.0 → 1.57.1

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.
Files changed (162) hide show
  1. package/dist/cjs/components/font-picker/FontPicker.d.ts +44 -0
  2. package/dist/cjs/components/font-picker/FontPicker.js +182 -0
  3. package/dist/cjs/components/font-picker/FontPicker.js.map +1 -0
  4. package/dist/cjs/components/font-picker/font-manager/FontManager.d.ts +26 -0
  5. package/dist/cjs/components/font-picker/font-manager/FontManager.js +209 -0
  6. package/dist/cjs/components/font-picker/font-manager/FontManager.js.map +1 -0
  7. package/dist/cjs/components/font-picker/font-manager/constants.d.ts +4 -0
  8. package/dist/cjs/components/font-picker/font-manager/constants.js +8 -0
  9. package/dist/cjs/components/font-picker/font-manager/constants.js.map +1 -0
  10. package/dist/cjs/components/font-picker/font-manager/font-styles/declarations.d.ts +4 -0
  11. package/dist/cjs/components/font-picker/font-manager/font-styles/declarations.js +27 -0
  12. package/dist/cjs/components/font-picker/font-manager/font-styles/declarations.js.map +1 -0
  13. package/dist/cjs/components/font-picker/font-manager/fontStyle.d.ts +1 -0
  14. package/dist/cjs/components/font-picker/font-manager/fontStyle.js +61 -0
  15. package/dist/cjs/components/font-picker/font-manager/fontStyle.js.map +1 -0
  16. package/dist/cjs/components/font-picker/font-manager/google-fonts/fontList.d.ts +5 -0
  17. package/dist/cjs/components/font-picker/font-manager/google-fonts/fontList.js +87 -0
  18. package/dist/cjs/components/font-picker/font-manager/google-fonts/fontList.js.map +1 -0
  19. package/dist/cjs/components/font-picker/font-manager/index.d.ts +3 -0
  20. package/dist/cjs/components/font-picker/font-manager/index.js +26 -0
  21. package/dist/cjs/components/font-picker/font-manager/index.js.map +1 -0
  22. package/dist/cjs/components/font-picker/font-manager/interface.d.ts +0 -0
  23. package/dist/cjs/components/font-picker/font-manager/interface.js +1 -0
  24. package/dist/cjs/components/font-picker/font-manager/interface.js.map +1 -0
  25. package/dist/cjs/components/font-picker/font-manager/loadFonts.d.ts +5 -0
  26. package/dist/cjs/components/font-picker/font-manager/loadFonts.js +20 -0
  27. package/dist/cjs/components/font-picker/font-manager/loadFonts.js.map +1 -0
  28. package/dist/cjs/components/font-picker/font-manager/types.d.ts +25 -0
  29. package/dist/cjs/components/font-picker/font-manager/types.js +12 -0
  30. package/dist/cjs/components/font-picker/font-manager/types.js.map +1 -0
  31. package/dist/cjs/components/font-picker/font-manager/utils/ids.d.ts +4 -0
  32. package/dist/cjs/components/font-picker/font-manager/utils/ids.js +11 -0
  33. package/dist/cjs/components/font-picker/font-manager/utils/ids.js.map +1 -0
  34. package/dist/cjs/components/font-picker/font-manager/utils/request.d.ts +4 -0
  35. package/dist/cjs/components/font-picker/font-manager/utils/request.js +29 -0
  36. package/dist/cjs/components/font-picker/font-manager/utils/request.js.map +1 -0
  37. package/dist/cjs/components/font-picker/font-manager/utils/utils.d.ts +2 -0
  38. package/dist/cjs/components/font-picker/font-manager/utils/utils.js +30 -0
  39. package/dist/cjs/components/font-picker/font-manager/utils/utils.js.map +1 -0
  40. package/dist/cjs/components/font-picker/font-manager/utils.d.ts +3 -0
  41. package/dist/cjs/components/font-picker/font-manager/utils.js +42 -0
  42. package/dist/cjs/components/font-picker/font-manager/utils.js.map +1 -0
  43. package/dist/cjs/index.d.ts +2 -1
  44. package/dist/cjs/index.js +3 -1
  45. package/dist/cjs/index.js.map +1 -1
  46. package/dist/esm/components/font-picker/FontPicker.d.ts +44 -0
  47. package/dist/esm/components/font-picker/FontPicker.js +134 -0
  48. package/dist/esm/components/font-picker/FontPicker.js.map +1 -0
  49. package/dist/esm/components/font-picker/font-manager/FontManager.d.ts +26 -0
  50. package/dist/esm/components/font-picker/font-manager/FontManager.js +105 -0
  51. package/dist/esm/components/font-picker/font-manager/FontManager.js.map +1 -0
  52. package/dist/esm/components/font-picker/font-manager/constants.d.ts +4 -0
  53. package/dist/esm/components/font-picker/font-manager/constants.js +5 -0
  54. package/dist/esm/components/font-picker/font-manager/constants.js.map +1 -0
  55. package/dist/esm/components/font-picker/font-manager/font-styles/declarations.d.ts +4 -0
  56. package/dist/esm/components/font-picker/font-manager/font-styles/declarations.js +27 -0
  57. package/dist/esm/components/font-picker/font-manager/font-styles/declarations.js.map +1 -0
  58. package/dist/esm/components/font-picker/font-manager/fontStyle.d.ts +1 -0
  59. package/dist/esm/components/font-picker/font-manager/fontStyle.js +65 -0
  60. package/dist/esm/components/font-picker/font-manager/fontStyle.js.map +1 -0
  61. package/dist/esm/components/font-picker/font-manager/google-fonts/fontList.d.ts +5 -0
  62. package/dist/esm/components/font-picker/font-manager/google-fonts/fontList.js +22 -0
  63. package/dist/esm/components/font-picker/font-manager/google-fonts/fontList.js.map +1 -0
  64. package/dist/esm/components/font-picker/font-manager/index.d.ts +3 -0
  65. package/dist/esm/components/font-picker/font-manager/index.js +4 -0
  66. package/dist/esm/components/font-picker/font-manager/index.js.map +1 -0
  67. package/dist/esm/components/font-picker/font-manager/interface.d.ts +0 -0
  68. package/dist/esm/components/font-picker/font-manager/interface.js +1 -0
  69. package/dist/esm/components/font-picker/font-manager/interface.js.map +1 -0
  70. package/dist/esm/components/font-picker/font-manager/loadFonts.d.ts +5 -0
  71. package/dist/esm/components/font-picker/font-manager/loadFonts.js +16 -0
  72. package/dist/esm/components/font-picker/font-manager/loadFonts.js.map +1 -0
  73. package/dist/esm/components/font-picker/font-manager/types.d.ts +25 -0
  74. package/dist/esm/components/font-picker/font-manager/types.js +9 -0
  75. package/dist/esm/components/font-picker/font-manager/types.js.map +1 -0
  76. package/dist/esm/components/font-picker/font-manager/utils/ids.d.ts +4 -0
  77. package/dist/esm/components/font-picker/font-manager/utils/ids.js +7 -0
  78. package/dist/esm/components/font-picker/font-manager/utils/ids.js.map +1 -0
  79. package/dist/esm/components/font-picker/font-manager/utils/request.d.ts +4 -0
  80. package/dist/esm/components/font-picker/font-manager/utils/request.js +25 -0
  81. package/dist/esm/components/font-picker/font-manager/utils/request.js.map +1 -0
  82. package/dist/esm/components/font-picker/font-manager/utils/utils.d.ts +2 -0
  83. package/dist/esm/components/font-picker/font-manager/utils/utils.js +25 -0
  84. package/dist/esm/components/font-picker/font-manager/utils/utils.js.map +1 -0
  85. package/dist/esm/components/font-picker/font-manager/utils.d.ts +3 -0
  86. package/dist/esm/components/font-picker/font-manager/utils.js +36 -0
  87. package/dist/esm/components/font-picker/font-manager/utils.js.map +1 -0
  88. package/dist/esm/index.d.ts +2 -1
  89. package/dist/esm/index.js +2 -1
  90. package/dist/esm/index.js.map +1 -1
  91. package/dist/styles.css +107 -0
  92. package/dist/styles.less +132 -0
  93. package/less/components/font-picker.less +131 -0
  94. package/less/entry.less +2 -1
  95. package/package.json +1 -1
  96. package/src/components/font-picker/FontPicker.tsx +222 -0
  97. package/src/components/font-picker/font-manager/FontManager.ts +138 -0
  98. package/src/components/font-picker/font-manager/constants.ts +7 -0
  99. package/src/components/font-picker/font-manager/fontStyle.ts +78 -0
  100. package/src/components/font-picker/font-manager/types.ts +83 -0
  101. package/src/components/font-picker/font-manager/utils.ts +36 -0
  102. package/src/index.ts +3 -1
  103. package/dist/cjs/components/publish-wizard/EmailWorkflow.d.ts +0 -2
  104. package/dist/cjs/components/publish-wizard/EmailWorkflow.js +0 -491
  105. package/dist/cjs/components/publish-wizard/EmailWorkflow.js.map +0 -1
  106. package/dist/cjs/components/publish-wizard/copy.d.ts +0 -186
  107. package/dist/cjs/components/publish-wizard/copy.js +0 -199
  108. package/dist/cjs/components/publish-wizard/copy.js.map +0 -1
  109. package/dist/cjs/components/story-previewer/StoryPreviewer_BACKUP_64741.d.ts +0 -2
  110. package/dist/cjs/components/story-previewer/StoryPreviewer_BACKUP_64741.js +0 -670
  111. package/dist/cjs/components/story-previewer/StoryPreviewer_BACKUP_64741.js.map +0 -1
  112. package/dist/cjs/components/story-previewer/StoryPreviewer_BASE_64741.d.ts +0 -2
  113. package/dist/cjs/components/story-previewer/StoryPreviewer_BASE_64741.js +0 -553
  114. package/dist/cjs/components/story-previewer/StoryPreviewer_BASE_64741.js.map +0 -1
  115. package/dist/cjs/components/story-previewer/StoryPreviewer_LOCAL_64741.d.ts +0 -2
  116. package/dist/cjs/components/story-previewer/StoryPreviewer_LOCAL_64741.js +0 -650
  117. package/dist/cjs/components/story-previewer/StoryPreviewer_LOCAL_64741.js.map +0 -1
  118. package/dist/cjs/components/story-previewer/StoryPreviewer_REMOTE_64741.d.ts +0 -2
  119. package/dist/cjs/components/story-previewer/StoryPreviewer_REMOTE_64741.js +0 -639
  120. package/dist/cjs/components/story-previewer/StoryPreviewer_REMOTE_64741.js.map +0 -1
  121. package/dist/cjs/constants/assets_BACKUP_14924.d.ts +0 -20
  122. package/dist/cjs/constants/assets_BACKUP_14924.js +0 -30
  123. package/dist/cjs/constants/assets_BACKUP_14924.js.map +0 -1
  124. package/dist/cjs/constants/assets_BASE_14924.d.ts +0 -21
  125. package/dist/cjs/constants/assets_BASE_14924.js +0 -32
  126. package/dist/cjs/constants/assets_BASE_14924.js.map +0 -1
  127. package/dist/cjs/constants/assets_LOCAL_14924.d.ts +0 -20
  128. package/dist/cjs/constants/assets_LOCAL_14924.js +0 -30
  129. package/dist/cjs/constants/assets_LOCAL_14924.js.map +0 -1
  130. package/dist/cjs/constants/assets_REMOTE_14924.d.ts +0 -21
  131. package/dist/cjs/constants/assets_REMOTE_14924.js +0 -32
  132. package/dist/cjs/constants/assets_REMOTE_14924.js.map +0 -1
  133. package/dist/esm/components/publish-wizard/EmailWorkflow.d.ts +0 -2
  134. package/dist/esm/components/publish-wizard/EmailWorkflow.js +0 -398
  135. package/dist/esm/components/publish-wizard/EmailWorkflow.js.map +0 -1
  136. package/dist/esm/components/publish-wizard/copy.d.ts +0 -186
  137. package/dist/esm/components/publish-wizard/copy.js +0 -196
  138. package/dist/esm/components/publish-wizard/copy.js.map +0 -1
  139. package/dist/esm/components/story-previewer/StoryPreviewer_BACKUP_64741.d.ts +0 -2
  140. package/dist/esm/components/story-previewer/StoryPreviewer_BACKUP_64741.js +0 -554
  141. package/dist/esm/components/story-previewer/StoryPreviewer_BACKUP_64741.js.map +0 -1
  142. package/dist/esm/components/story-previewer/StoryPreviewer_BASE_64741.d.ts +0 -2
  143. package/dist/esm/components/story-previewer/StoryPreviewer_BASE_64741.js +0 -489
  144. package/dist/esm/components/story-previewer/StoryPreviewer_BASE_64741.js.map +0 -1
  145. package/dist/esm/components/story-previewer/StoryPreviewer_LOCAL_64741.d.ts +0 -2
  146. package/dist/esm/components/story-previewer/StoryPreviewer_LOCAL_64741.js +0 -537
  147. package/dist/esm/components/story-previewer/StoryPreviewer_LOCAL_64741.js.map +0 -1
  148. package/dist/esm/components/story-previewer/StoryPreviewer_REMOTE_64741.d.ts +0 -2
  149. package/dist/esm/components/story-previewer/StoryPreviewer_REMOTE_64741.js +0 -526
  150. package/dist/esm/components/story-previewer/StoryPreviewer_REMOTE_64741.js.map +0 -1
  151. package/dist/esm/constants/assets_BACKUP_14924.d.ts +0 -20
  152. package/dist/esm/constants/assets_BACKUP_14924.js +0 -26
  153. package/dist/esm/constants/assets_BACKUP_14924.js.map +0 -1
  154. package/dist/esm/constants/assets_BASE_14924.d.ts +0 -21
  155. package/dist/esm/constants/assets_BASE_14924.js +0 -28
  156. package/dist/esm/constants/assets_BASE_14924.js.map +0 -1
  157. package/dist/esm/constants/assets_LOCAL_14924.d.ts +0 -20
  158. package/dist/esm/constants/assets_LOCAL_14924.js +0 -26
  159. package/dist/esm/constants/assets_LOCAL_14924.js.map +0 -1
  160. package/dist/esm/constants/assets_REMOTE_14924.d.ts +0 -21
  161. package/dist/esm/constants/assets_REMOTE_14924.js +0 -28
  162. package/dist/esm/constants/assets_REMOTE_14924.js.map +0 -1
@@ -0,0 +1,134 @@
1
+ import * as React from 'react';
2
+ import FontManager from './font-manager/FontManager';
3
+ import { OPTIONS_DEFAULTS } from './font-manager/types';
4
+ import { FONT_FAMILY_DEFAULT } from './font-manager/constants';
5
+ import { createFontStyleSheets } from './font-manager/fontStyle';
6
+ export default class FontPicker extends React.PureComponent {
7
+ fontManager;
8
+ static defaultProps = {
9
+ activeFontFamily: FONT_FAMILY_DEFAULT,
10
+ families: OPTIONS_DEFAULTS.families,
11
+ categories: OPTIONS_DEFAULTS.categories,
12
+ scripts: OPTIONS_DEFAULTS.scripts,
13
+ variants: OPTIONS_DEFAULTS.variants,
14
+ filter: OPTIONS_DEFAULTS.filter,
15
+ limit: OPTIONS_DEFAULTS.limit
16
+ };
17
+ clickOutsideHandler;
18
+ constructor(props) {
19
+ super(props);
20
+ const { apiKey, activeFontFamily, families, categories, scripts, variants, filter, limit, onChange } = this.props;
21
+ this.state = {
22
+ expanded: false,
23
+ fonts: null
24
+ };
25
+ const options = {
26
+ families,
27
+ categories,
28
+ scripts,
29
+ variants,
30
+ filter,
31
+ limit
32
+ };
33
+ this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
34
+ }
35
+ componentDidMount() {
36
+ this.clickOutsideHandler = (e) => this.onClose(e);
37
+ }
38
+ componentWillUnmount() {
39
+ this.clickOutsideHandler = (e) => {
40
+ return;
41
+ };
42
+ }
43
+ componentDidUpdate = (prevProps) => {
44
+ const { activeFontFamily, onChange, customFonts, defaultFonts } = this.props;
45
+ if (prevProps.customFonts !== customFonts) {
46
+ this.fontManager
47
+ .init()
48
+ .then((fontMap) => {
49
+ const googleFonts = Array.from(fontMap.values()).filter((f) => f.files);
50
+ const updateDefaultFonts = defaultFonts.map((f) => googleFonts.find((o) => o.family === f.family) || f);
51
+ const uniqueFontFamilies = new Set();
52
+ const uniqueFonts = updateDefaultFonts.filter((e) => {
53
+ const isDup = uniqueFontFamilies.has(e.family);
54
+ uniqueFontFamilies.add(e.family);
55
+ if (!isDup) {
56
+ return true;
57
+ }
58
+ return false;
59
+ });
60
+ this.setState({ fonts: uniqueFonts }, () => createFontStyleSheets(defaultFonts, uniqueFonts, customFonts));
61
+ })
62
+ .catch((err) => {
63
+ console.error('Error trying to fetch the list of available fonts');
64
+ console.error(err);
65
+ });
66
+ }
67
+ if (activeFontFamily !== prevProps.activeFontFamily) {
68
+ this.setActiveFontFamily(activeFontFamily);
69
+ }
70
+ if (onChange !== prevProps.onChange) {
71
+ this.fontManager.setOnChange(onChange);
72
+ }
73
+ };
74
+ onClose = (e) => {
75
+ let targetEl = e.target;
76
+ const fontPickerEl = document.getElementById(`font-picker`);
77
+ while (true) {
78
+ if (targetEl === fontPickerEl) {
79
+ return;
80
+ }
81
+ if (targetEl.parentNode) {
82
+ targetEl = targetEl.parentNode;
83
+ }
84
+ else {
85
+ this.toggleExpanded();
86
+ return;
87
+ }
88
+ }
89
+ };
90
+ onSelection = (e) => {
91
+ const activeFontFamily = e.target.textContent;
92
+ if (!activeFontFamily) {
93
+ throw Error(`Missing font family in clicked font button`);
94
+ }
95
+ this.setActiveFontFamily(activeFontFamily);
96
+ this.toggleExpanded();
97
+ };
98
+ setActiveFontFamily = (activeFontFamily) => {
99
+ this.fontManager.setActiveFont(activeFontFamily);
100
+ };
101
+ generateFontList = () => {
102
+ const { activeFontFamily, families } = this.props;
103
+ return (React.createElement("ul", { className: 'font-list' }, families.map((font) => {
104
+ const isActive = font === activeFontFamily;
105
+ return (React.createElement("li", { key: font, className: 'font-list-item' },
106
+ React.createElement("button", { type: 'button', id: `font-button-${font}`, className: `font-button ${isActive ? 'active-font' : ''}`, onClick: this.onSelection, onKeyDown: this.onSelection, style: { fontFamily: font } }, font)));
107
+ })));
108
+ };
109
+ toggleExpanded = () => {
110
+ const { expanded } = this.state;
111
+ if (expanded) {
112
+ this.setState({
113
+ expanded: false
114
+ });
115
+ document.removeEventListener('click', this.clickOutsideHandler);
116
+ }
117
+ else {
118
+ this.setState({
119
+ expanded: true
120
+ });
121
+ document.addEventListener('click', this.clickOutsideHandler);
122
+ }
123
+ };
124
+ render = () => {
125
+ const { activeFontFamily } = this.props;
126
+ const { expanded } = this.state;
127
+ return (React.createElement("div", { id: `font-picker`, className: expanded ? 'expanded' : '' },
128
+ React.createElement("button", { type: 'button', className: 'dropdown-button', onClick: this.toggleExpanded, onKeyDown: this.toggleExpanded },
129
+ React.createElement("p", { className: 'dropdown-font-family' }, activeFontFamily),
130
+ React.createElement("p", { className: 'dropdown-icon finished' })),
131
+ this.generateFontList()));
132
+ };
133
+ }
134
+ //# sourceMappingURL=FontPicker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FontPicker.js","sourceRoot":"","sources":["../../../../src/components/font-picker/FontPicker.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,26 @@
1
+ import { FontList, Options } from './types';
2
+ export default class FontManager {
3
+ private readonly apiKey;
4
+ private readonly options;
5
+ private onChange;
6
+ private fonts;
7
+ constructor(apiKey: string, defaultFamily: string, { families, categories, scripts, variants, filter, limit }: Options, onChange: (font: string) => void);
8
+ /**
9
+ * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
10
+ * save them to the font map
11
+ */
12
+ init(): Promise<FontList>;
13
+ private getFontList;
14
+ /**
15
+ * Add a new font to the font map and download its preview characters
16
+ */
17
+ private addFont;
18
+ /**
19
+ * Set the specified font as the active font and download it
20
+ */
21
+ setActiveFont(fontFamily: string): void;
22
+ /**
23
+ * Update the onChange function (executed when changing the active font)
24
+ */
25
+ setOnChange(onChange: (font: string) => void): void;
26
+ }
@@ -0,0 +1,105 @@
1
+ import { OPTIONS_DEFAULTS } from './types';
2
+ import { FONT_FAMILY_DEFAULT, LIST_BASE_URL } from './constants';
3
+ import { getFontId, get } from './utils';
4
+ export default class FontManager {
5
+ apiKey;
6
+ options;
7
+ onChange;
8
+ fonts = new Map();
9
+ constructor(apiKey, defaultFamily = FONT_FAMILY_DEFAULT, { families = OPTIONS_DEFAULTS.families, categories = OPTIONS_DEFAULTS.categories, scripts = OPTIONS_DEFAULTS.scripts, variants = OPTIONS_DEFAULTS.variants, filter = OPTIONS_DEFAULTS.filter, limit = OPTIONS_DEFAULTS.limit }, onChange) {
10
+ // Save parameters as class variables
11
+ this.apiKey = apiKey;
12
+ this.options = {
13
+ families,
14
+ categories,
15
+ scripts,
16
+ variants,
17
+ filter,
18
+ limit
19
+ };
20
+ this.onChange = onChange;
21
+ // Download default font and add it to the empty font list
22
+ this.addFont(defaultFamily);
23
+ this.setActiveFont(defaultFamily);
24
+ }
25
+ /**
26
+ * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
27
+ * save them to the font map
28
+ */
29
+ async init() {
30
+ // Get list of all fonts
31
+ const fonts = await this.getFontList(this.apiKey);
32
+ // Save desired fonts in the font map
33
+ for (const font of fonts) {
34
+ // const font = fonts[i];
35
+ // Exit once specified limit of number of fonts is reached
36
+ if (this.fonts.size >= this.options.limit) {
37
+ break;
38
+ }
39
+ if (
40
+ // Skip default font if it is also contained in the list
41
+ !this.fonts.has(font.family) &&
42
+ // `families` parameter: Only keep fonts whose names are included in the provided array
43
+ (this.options.families.length === 0 ||
44
+ this.options.families.includes(font.family)) &&
45
+ // `categories` parameter: only keep fonts in categories from the provided array
46
+ (this.options.categories.length === 0 ||
47
+ this.options.categories.includes(font.category)) &&
48
+ // `scripts` parameter: Only keep fonts which are available in all specified scripts
49
+ this.options.scripts.every((script) => font.scripts.includes(script)) &&
50
+ // `variants` parameter: Only keep fonts which contain all specified variants
51
+ this.options.variants.every((variant) => font.variants.includes(variant)) &&
52
+ // `filter` parameter: Only keep fonts for which the `filter` function evaluates to `true`
53
+ this.options.filter(font) === true) {
54
+ // Font fulfils all requirements: Add it to font map
55
+ this.fonts.set(font.family, font);
56
+ }
57
+ }
58
+ return this.fonts;
59
+ }
60
+ async getFontList(apiKey) {
61
+ const url = new URL(LIST_BASE_URL);
62
+ url.searchParams.append('sort', 'popularity');
63
+ url.searchParams.append('key', apiKey);
64
+ const response = await get(url.href);
65
+ const fontsOriginal = JSON.parse(response).items;
66
+ return fontsOriginal.map((fontOriginal) => {
67
+ const { family, subsets, ...others } = fontOriginal;
68
+ return {
69
+ ...others,
70
+ family,
71
+ id: getFontId(family),
72
+ scripts: subsets
73
+ };
74
+ });
75
+ }
76
+ /**
77
+ * Add a new font to the font map and download its preview characters
78
+ */
79
+ addFont(fontFamily) {
80
+ const font = {
81
+ family: fontFamily,
82
+ id: getFontId(fontFamily),
83
+ variants: [],
84
+ category: 'display',
85
+ scripts: []
86
+ };
87
+ this.fonts.set(fontFamily, font);
88
+ }
89
+ /**
90
+ * Set the specified font as the active font and download it
91
+ */
92
+ setActiveFont(fontFamily) {
93
+ const runOnChange = fontFamily !== 'Font not found';
94
+ if (runOnChange) {
95
+ this.onChange(fontFamily);
96
+ }
97
+ }
98
+ /**
99
+ * Update the onChange function (executed when changing the active font)
100
+ */
101
+ setOnChange(onChange) {
102
+ this.onChange = onChange;
103
+ }
104
+ }
105
+ //# sourceMappingURL=FontManager.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FontManager.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/FontManager.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ export declare const FONT_BASE_URL = "https://fonts.googleapis.com/css2";
2
+ export declare const LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts";
3
+ export declare const FONT_FACE_REGEX: RegExp;
4
+ export declare const FONT_FAMILY_DEFAULT = "Open Sans";
@@ -0,0 +1,5 @@
1
+ export const FONT_BASE_URL = 'https://fonts.googleapis.com/css2';
2
+ export const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
3
+ export const FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
4
+ export const FONT_FAMILY_DEFAULT = 'Open Sans';
5
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,mCAAmC,CAAC;AAEjE,MAAM,CAAC,MAAM,aAAa,GAAG,iDAAiD,CAAC;AAE/E,MAAM,CAAC,MAAM,eAAe,GAAG,2BAA2B,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC"}
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Add/update declaration for applying the current active font
3
+ */
4
+ export declare const applyActiveFont: (activeFont: string, previousFontFamily: string) => void;
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Create/find and return the apply-font stylesheet for the provided selectorSuffix
3
+ */
4
+ const getActiveFontStylesheet = () => {
5
+ const stylesheetId = `active-font`;
6
+ let activeFontStylesheet = document.getElementById(stylesheetId);
7
+ if (!activeFontStylesheet) {
8
+ activeFontStylesheet = document.createElement('style');
9
+ activeFontStylesheet.id = stylesheetId;
10
+ document.head.appendChild(activeFontStylesheet);
11
+ }
12
+ return activeFontStylesheet;
13
+ };
14
+ /**
15
+ * Add/update declaration for applying the current active font
16
+ */
17
+ export const applyActiveFont = (activeFont, previousFontFamily) => {
18
+ const style = `
19
+ .apply-font {
20
+ font-family: "${activeFont}"${previousFontFamily ? `, "${previousFontFamily}"` : ''};
21
+ }
22
+ `;
23
+ const activeFontStylesheet = getActiveFontStylesheet();
24
+ console.log(activeFontStylesheet);
25
+ activeFontStylesheet.innerHTML = style;
26
+ };
27
+ //# sourceMappingURL=declarations.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"declarations.js","sourceRoot":"","sources":["../../../../../../src/components/font-picker/font-manager/font-styles/declarations.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,uBAAuB,GAAG,GAAqB,EAAE;IACnD,MAAM,YAAY,GAAG,aAAa,CAAC;IACnC,IAAI,oBAAoB,GAAG,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAqB,CAAC;IACrF,IAAI,CAAC,oBAAoB,EAAE;QACvB,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvD,oBAAoB,CAAC,EAAE,GAAG,YAAY,CAAC;QACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;KACnD;IACD,OAAO,oBAAoB,CAAC;AAChC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,kBAA0B,EAAQ,EAAE;IACpF,MAAM,KAAK,GAAG;;mBAEC,UAAU,IAAI,kBAAkB,CAAC,CAAC,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC,CAAC,EAAE;;EAEpF,CAAC;IACC,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;IACvD,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;IACjC,oBAAoB,CAAC,SAAS,GAAG,KAAK,CAAC;AAC3C,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export declare const createFontStyleSheets: (defaultFonts: any, uniqueFonts: any, availableFonts?: any) => void;
@@ -0,0 +1,65 @@
1
+ import { FONT_BASE_URL, FONT_FACE_REGEX } from './constants';
2
+ import { get, getMatches } from './utils';
3
+ export const createFontStyleSheets = (defaultFonts, uniqueFonts, availableFonts) => {
4
+ defaultFonts.map((font) => {
5
+ const fonts = uniqueFonts.find((f) => f.family === font.family);
6
+ const fontId = font.name.toLowerCase().split(' ').join('-');
7
+ // non Google Font style
8
+ if (fonts?.file) {
9
+ fillFontStyleSheets(fontId, font);
10
+ }
11
+ // google font style
12
+ if (fonts?.files) {
13
+ const fontURL = new URL(FONT_BASE_URL);
14
+ fontURL.searchParams.append('family', `${font.family}:wght@${font.weight}`);
15
+ fontURL.searchParams.append('text', font.name);
16
+ fontURL.searchParams.append('font-display', 'swap');
17
+ get(fontURL.href)
18
+ .then((res) => {
19
+ const rule = getMatches(FONT_FACE_REGEX, res);
20
+ const updateFont = rule[rule.length - 1].replace(font.family, font.name);
21
+ fillFontStyleSheets(fontId, updateFont, font.name);
22
+ })
23
+ .catch((e) => console.error(e));
24
+ }
25
+ });
26
+ // custom font style
27
+ if (availableFonts) {
28
+ availableFonts.map((font) => {
29
+ const fontId = font.name.toLowerCase();
30
+ fillFontStyleSheets(fontId, font);
31
+ });
32
+ }
33
+ };
34
+ const fillFontStyleSheets = (fontId, font, fontName) => {
35
+ let stylesheetNode = document.getElementById(`font-${fontId}`);
36
+ const { weight, file, url, name, family } = font;
37
+ const fontFamily = name !== family ? name : family;
38
+ const fontWeight = weight ? `font-weight: ${weight};` : '';
39
+ const fontUrl = file ? `fonts/${file}` : `${url}`;
40
+ if (stylesheetNode === null) {
41
+ stylesheetNode = stylesheetNode;
42
+ stylesheetNode = document.createElement('style');
43
+ if (stylesheetNode !== null) {
44
+ stylesheetNode.id = `font-${fontId}`;
45
+ stylesheetNode.setAttribute('data-is-preview', 'true');
46
+ // non-google and custom fonts style
47
+ if (fontFamily && fontFamily && fontUrl) {
48
+ stylesheetNode.textContent = `
49
+ @font-face {
50
+ font-family: ${fontFamily};
51
+ ${fontWeight}
52
+ src: url(${fontUrl});
53
+ }`;
54
+ }
55
+ if (fontName) {
56
+ stylesheetNode.textContent = `
57
+ @font-face {
58
+ ${font.replace(`'${fontName}'`, fontName)}
59
+ }`;
60
+ }
61
+ document.head.appendChild(stylesheetNode);
62
+ }
63
+ }
64
+ };
65
+ //# sourceMappingURL=fontStyle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/fontStyle.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ import { Font } from '../types';
2
+ /**
3
+ * Fetch the list of all available fonts from the Google Fonts API
4
+ */
5
+ export declare const getFontList: (apiKey: string) => Promise<Font[]>;
@@ -0,0 +1,22 @@
1
+ import { getFontId, get } from '../utils';
2
+ const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
3
+ /**
4
+ * Fetch the list of all available fonts from the Google Fonts API
5
+ */
6
+ export const getFontList = async (apiKey) => {
7
+ const url = new URL(LIST_BASE_URL);
8
+ url.searchParams.append('sort', 'popularity');
9
+ url.searchParams.append('key', apiKey);
10
+ const response = await get(url.href);
11
+ const fontsOriginal = JSON.parse(response).items;
12
+ return fontsOriginal.map((fontOriginal) => {
13
+ const { family, subsets, ...others } = fontOriginal;
14
+ return {
15
+ ...others,
16
+ family,
17
+ id: getFontId(family),
18
+ scripts: subsets
19
+ };
20
+ });
21
+ };
22
+ //# sourceMappingURL=fontList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fontList.js","sourceRoot":"","sources":["../../../../../../src/components/font-picker/font-manager/google-fonts/fontList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,aAAa,GAAG,iDAAiD,CAAC;AAUxE;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,MAAc,EAAmB,EAAE;IACjE,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC;IACnC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAC9C,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IACjD,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,YAA0B,EAAQ,EAAE;QAC1D,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,YAAY,CAAC;QACpD,OAAO;YACH,GAAG,MAAM;YACT,MAAM;YACN,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC;YACrB,OAAO,EAAE,OAAO;SACnB,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as FontManager } from './FontManager';
2
+ export * from './types';
3
+ export { getFontId } from './utils/ids';
@@ -0,0 +1,4 @@
1
+ export { default as FontManager } from './FontManager';
2
+ export * from './types';
3
+ export { getFontId } from './utils/ids';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=interface.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/interface.ts"],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Get the Google Fonts stylesheet for the specified font (in the specified scripts and variants),
3
+ * add the necessary CSS declarations to apply it and add the font's stylesheet to the document head
4
+ */
5
+ export declare const loadActiveFont: (font: string, previousFontFamily: string) => any;
@@ -0,0 +1,16 @@
1
+ import { applyActiveFont } from './font-styles/declarations';
2
+ /**
3
+ * Get the Google Fonts stylesheet for the specified font (in the specified scripts and variants),
4
+ * add the necessary CSS declarations to apply it and add the font's stylesheet to the document head
5
+ */
6
+ export const loadActiveFont = (font, previousFontFamily) => {
7
+ console.log('loadActiveFont');
8
+ return () => {
9
+ return new Promise((reject) => {
10
+ applyActiveFont(font, previousFontFamily);
11
+ }).catch((e) => {
12
+ console.error(e);
13
+ });
14
+ };
15
+ };
16
+ //# sourceMappingURL=loadFonts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loadFonts.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/loadFonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,kBAA0B,EAAO,EAAE;IAC5E,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAC7B,OAAO,GAAG,EAAE;QACR,OAAO,IAAI,OAAO,CAAO,CAAC,MAAM,EAAE,EAAE;YAChC,eAAe,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAQ,EAAE,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;AACN,CAAC,CAAC"}
@@ -0,0 +1,25 @@
1
+ export declare type Category = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
2
+ export declare type Script = 'arabic' | 'bengali' | 'chinese-simplified' | 'chinese-traditional' | 'cyrillic' | 'cyrillic-ext' | 'devanagari' | 'greek' | 'greek-ext' | 'gujarati' | 'gurmukhi' | 'hebrew' | 'japanese' | 'kannada' | 'khmer' | 'korean' | 'latin' | 'latin-ext' | 'malayalam' | 'myanmar' | 'oriya' | 'sinhala' | 'tamil' | '​telugu' | 'thai' | 'vietnamese';
3
+ export declare type SortOption = 'alphabet' | 'popularity';
4
+ export declare type Variant = '100' | '100italic' | '200' | '200italic' | '300' | '300italic' | 'regular' | 'italic' | '500' | '500italic' | '600' | '600italic' | '700' | '700italic' | '800' | '800italic' | '900' | '900italic';
5
+ export interface Font {
6
+ family: string;
7
+ id: string;
8
+ category: Category;
9
+ scripts: Script[];
10
+ variants: Variant[];
11
+ kind?: string;
12
+ version?: string;
13
+ lastModified?: string;
14
+ files?: Record<Variant, string>;
15
+ }
16
+ export declare type FontList = Map<string, Font>;
17
+ export interface Options {
18
+ families: string[];
19
+ categories: Category[];
20
+ scripts: Script[];
21
+ variants: Variant[];
22
+ filter: (font: Font) => boolean;
23
+ limit: number;
24
+ }
25
+ export declare const OPTIONS_DEFAULTS: Options;
@@ -0,0 +1,9 @@
1
+ export const OPTIONS_DEFAULTS = {
2
+ families: [],
3
+ categories: [],
4
+ scripts: ['latin'],
5
+ variants: ['regular'],
6
+ filter: () => true,
7
+ limit: 50
8
+ };
9
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/types.ts"],"names":[],"mappings":"AA2EA,MAAM,CAAC,MAAM,gBAAgB,GAAY;IACrC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;IAClB,KAAK,EAAE,EAAE;CACZ,CAAC"}
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Return the fontId based on the provided font family
3
+ */
4
+ export declare const getFontId: (fontFamily: string) => string;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Return the fontId based on the provided font family
3
+ */
4
+ export const getFontId = (fontFamily) => {
5
+ return fontFamily.replace(/\s+/g, '-').toLowerCase();
6
+ };
7
+ //# sourceMappingURL=ids.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ids.js","sourceRoot":"","sources":["../../../../../../src/components/font-picker/font-manager/utils/ids.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,UAAkB,EAAU,EAAE;IACpD,OAAO,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;AACzD,CAAC,CAAC"}
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Execute a GET XMLHttpRequest and return the result
3
+ */
4
+ export declare const get: (url: string) => Promise<string>;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Execute a GET XMLHttpRequest and return the result
3
+ */
4
+ export const get = (url) => {
5
+ return new Promise((resolve, reject) => {
6
+ const request = new XMLHttpRequest();
7
+ request.overrideMimeType('application/json');
8
+ request.open('GET', url, true);
9
+ request.onreadystatechange = () => {
10
+ // Request has completed
11
+ if (request.readyState === 4) {
12
+ if (request.status !== 200) {
13
+ // On error
14
+ reject(new Error(`Response has status code ${request.status}`));
15
+ }
16
+ else {
17
+ // On success
18
+ resolve(request.responseText);
19
+ }
20
+ }
21
+ };
22
+ request.send();
23
+ });
24
+ };
25
+ //# sourceMappingURL=request.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../src/components/font-picker/font-manager/utils/request.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,GAAW,EAAmB,EAAE;IAChD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAQ,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;QACrC,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAC7C,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAC/B,OAAO,CAAC,kBAAkB,GAAG,GAAS,EAAE;YACpC,wBAAwB;YACxB,IAAI,OAAO,CAAC,UAAU,KAAK,CAAC,EAAE;gBAC1B,IAAI,OAAO,CAAC,MAAM,KAAK,GAAG,EAAE;oBACxB,WAAW;oBACX,MAAM,CAAC,IAAI,KAAK,CAAC,4BAA4B,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;iBACnE;qBAAM;oBACH,aAAa;oBACb,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;iBACjC;aACJ;QACL,CAAC,CAAC;QACF,OAAO,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const getFontId: (fontFamily: string) => string;
2
+ export declare const get: (url: string) => Promise<string>;
@@ -0,0 +1,25 @@
1
+ export const getFontId = (fontFamily) => {
2
+ return fontFamily.replace(/\s+/g, '-').toLowerCase();
3
+ };
4
+ export const get = (url) => {
5
+ return new Promise((resolve, reject) => {
6
+ const request = new XMLHttpRequest();
7
+ request.overrideMimeType('application/json');
8
+ request.open('GET', url, true);
9
+ request.onreadystatechange = () => {
10
+ // Request has completed
11
+ if (request.readyState === 4) {
12
+ if (request.status !== 200) {
13
+ // On error
14
+ reject(new Error(`Response has status code ${request.status}`));
15
+ }
16
+ else {
17
+ // On success
18
+ resolve(request.responseText);
19
+ }
20
+ }
21
+ };
22
+ request.send();
23
+ });
24
+ };
25
+ //# sourceMappingURL=utils.js.map