├── .eslintignore
├── .github
    └── demo.gif
├── .babelrc
├── .storybook
    ├── addons.js
    ├── config.js
    └── webpack.config.js
├── .gitignore
├── .editorconfig
├── stories
    ├── style.css
    ├── index.stories.js
    └── picker-wrappers
    │   ├── OnePicker.vue
    │   └── TwoPickers.vue
├── rollup.config.js
├── .eslintrc.yaml
├── LICENSE
├── package.json
├── README.md
└── src
    └── FontPicker.vue


/.eslintignore:
--------------------------------------------------------------------------------
1 | lib/
2 | 


--------------------------------------------------------------------------------
/.github/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rodrigobendia/font-picker-vue/HEAD/.github/demo.gif


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": [
3 | 		["env", {
4 | 			"modules": false
5 | 		}],
6 | 		"vue"
7 | 	]
8 | }
9 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OS
 2 | .DS_Store
 3 | Thumbs.db
 4 | 
 5 | # WebStorm (IDE)
 6 | .idea/
 7 | 
 8 | # Node
 9 | node_modules/
10 | 
11 | # build output
12 | lib/


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/vue';
2 | 
3 | function loadStories() {
4 |   require('../stories/index.stories')
5 | }
6 | 
7 | configure(loadStories, module);
8 | 


--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
2 | 
3 | module.exports = (baseConfig, env, defaultConfig) => {
4 | 
5 |     defaultConfig.plugins.push(new VueLoaderPlugin())
6 | 
7 |     return defaultConfig;
8 | };
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | indent_size = 2
 7 | indent_style = tab
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.{md,yaml,yml}]
12 | indent_style = space
13 | 


--------------------------------------------------------------------------------
/stories/style.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 | 	display: flex;
 3 | 	align-items: center;
 4 | 	padding: 100px;
 5 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 6 | }
 7 | 
 8 | [class^="apply-font"] {
 9 | 	margin-left: 50px;
10 | }
11 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import VuePlugin from 'rollup-plugin-vue';
 2 | import VueLoaderPlugin from 'vue-loader';
 3 | 
 4 | export default {
 5 | 	input: 'src/FontPicker.vue',
 6 | 	output: {
 7 | 		file: 'lib/FontPicker.js',
 8 | 		format: 'cjs'
 9 | 	},
10 | 	external: ['vue', 'font-picker'],
11 |     plugins: [VuePlugin(/* VuePluginOptions */), VueLoaderPlugin]
12 | };
13 | 


--------------------------------------------------------------------------------
/.eslintrc.yaml:
--------------------------------------------------------------------------------
 1 | extends: airbnb
 2 | 
 3 | env:
 4 |   browser: true
 5 |   node: true
 6 | 
 7 | rules:
 8 |   # Default rules
 9 |   comma-dangle:
10 |     - 2
11 |     - never
12 |   indent:
13 |     - 2
14 |     - tab
15 |   no-tabs: 0
16 |   object-curly-newline: 0
17 |   object-curly-spacing:
18 |     - 2
19 |     - always
20 |     - objectsInObjects: false
21 | 
22 |   # Project-specific rules
23 |   no-console: 0
24 |   import/no-extraneous-dependencies:
25 |     - 2
26 |     - devDependencies: true  # ignore storybook-react
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Samuel Meuli
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/stories/index.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/vue';
 2 | import OnePicker from './picker-wrappers/OnePicker.vue';
 3 | import TwoPickers from './picker-wrappers/TwoPickers.vue';
 4 | 
 5 | import './style.css';
 6 | 
 7 | storiesOf('FontPicker', module)
 8 | 	.add('GitHub demo', () => ({
 9 | 		components: { OnePicker },
10 | 		template: '<one-picker default-font="Open Sans"></one-picker>'
11 | 	}))
12 | 	.add('Local default font', () => ({
13 |         components: { OnePicker },
14 |         template: '<one-picker default-font="Arial" :options="{ name: \'2\', limit: 50 }"></one-picker>'
15 | 	}))
16 | 	.add('Non-existent default font', () => ({
17 |         components: { OnePicker },
18 |         template: '<one-picker default-font="asdf" :options="{ name: \'3\', limit: 50 }"></one-picker>'
19 | 	}))
20 | 	.add('Custom font variants', () => ({
21 |         components: { OnePicker },
22 |         template: '<one-picker default-font="Barlow" :options="{ name: \'4\', variants: [\'900italic\'] }"></one-picker>'
23 | 	}))
24 | 	.add('Two font pickers', () => ({
25 |         components: { TwoPickers },
26 |         template: '<two-pickers></two-pickers>'
27 | 	}));
28 | 


--------------------------------------------------------------------------------
/stories/picker-wrappers/OnePicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="wrapper">
 3 | 		<font-picker :api-key="apiKey"
 4 | 				:active-font="activeFont"
 5 | 				:options="options"
 6 | 				@change="onChange"></font-picker>
 7 | 
 8 | 		<p :class="`apply-font${this.pickerSuffix}`">
 9 | 			The font will be applied to this text.
10 | 		</p>
11 | 	</div>
12 | </template>
13 | 
14 | <script>
15 |     import FontPicker from '../../lib/FontPicker';
16 | 
17 |     export default {
18 |         props: ['defaultFont', 'options'],
19 | 
20 | 		components: {
21 |             'font-picker': FontPicker,
22 | 		},
23 | 
24 |         mounted() {
25 |             if (this.options && this.options.name) {
26 |                 this.pickerSuffix = `-${this.options.name}`;
27 |             } else {
28 |                 this.pickerSuffix = '';
29 |             }
30 |         },
31 | 
32 | 		data() {
33 |             return {
34 |                 apiKey: 'AIzaSyAOkdDlx49HCSBdu86oe8AD1Q7piIxlR6k',
35 |                 pickerSuffix: '',
36 | 				activeFont: this.defaultFont,
37 | 			};
38 | 		},
39 | 
40 | 		methods: {
41 |             onChange(nextFont) {
42 | 				this.activeFont = nextFont.family;
43 | 			},
44 | 		},
45 |     }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/stories/picker-wrappers/TwoPickers.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<div class="wrapper">
 4 | 			<font-picker
 5 | 					:api-key="apiKey"
 6 | 					:active-font="activeFont1"
 7 | 					:options="{ name: '5' }"
 8 | 					@change="nextFont => this.activeFont1 = nextFont.family"></font-picker>
 9 | 			<p class="apply-font-5">
10 | 				The first font will be applied to this text.
11 | 			</p>
12 | 		</div>
13 | 		<div class="wrapper">
14 | 			<font-picker
15 | 					:api-key="apiKey"
16 | 					:active-font="activeFont2"
17 | 					:options="{ name: '6' }"
18 | 					@change="nextFont => this.activeFont2 = nextFont.family"></font-picker>
19 | 			<p class="apply-font-6">
20 | 				The second font will be applied to this text.
21 | 			</p>
22 | 		</div>
23 | 	</div>
24 | </template>
25 | 
26 | <script>
27 |     import FontPicker from '../../lib/FontPicker';
28 | 
29 |     export default {
30 |         components: {
31 |             'font-picker': FontPicker,
32 |         },
33 | 
34 |         data() {
35 |             return {
36 |                 apiKey: 'AIzaSyAOkdDlx49HCSBdu86oe8AD1Q7piIxlR6k',
37 |                 activeFont1: 'Open Sans',
38 |                 activeFont2: 'Barlow',
39 |             };
40 |         },
41 |     }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "font-picker-vue",
 3 | 	"version": "1.0.3",
 4 | 	"description": "Font selector component for Google Fonts",
 5 | 	"keywords": [
 6 | 		"fonts",
 7 | 		"google fonts",
 8 | 		"selector",
 9 | 		"picker",
10 | 		"component",
11 | 		"preview",
12 | 		"download",
13 | 		"vue",
14 | 		"vue-component"
15 | 	],
16 | 	"main": "lib/FontPicker.js",
17 | 	"author": "Rodrigo Bendia <rodrigobendia@gmail.com>",
18 | 	"repository": "github:rodrigobendia/font-picker-vue",
19 | 	"homepage": "https://samuelmeuli.github.io/font-picker",
20 | 	"license": "MIT",
21 | 	"scripts": {
22 | 		"start": "npm-run-all build --parallel start:*",
23 | 		"start:rollup": "rollup --config --sourcemap --watch",
24 | 		"start:storybook": "start-storybook --port 3001",
25 | 		"build": "rollup --config",
26 | 		"lint": "eslint .",
27 | 		"precommit": "npm run lint",
28 | 		"prepush": "npm run lint"
29 | 	},
30 | 	"dependencies": {
31 | 		"font-picker": "^2.0.6"
32 | 	},
33 | 	"peerDependencies": {
34 | 		"vue": "^2.0.0"
35 | 	},
36 | 	"devDependencies": {
37 | 		"@storybook/addon-actions": "^3.4.11",
38 | 		"@storybook/addon-links": "^3.4.11",
39 | 		"@storybook/addons": "^3.4.11",
40 | 		"@storybook/vue": "^3.4.11",
41 | 		"babel-core": "^6.26.3",
42 | 		"babel-plugin-external-helpers": "^6.22.0",
43 | 		"babel-preset-env": "^1.7.0",
44 | 		"babel-preset-vue": "^2.0.2",
45 | 		"eslint": "^4.19.1",
46 | 		"eslint-config-airbnb": "^16.1.0",
47 | 		"eslint-plugin-import": "^2.14.0",
48 | 		"eslint-plugin-jsx-a11y": "^6.1.2",
49 | 		"eslint-plugin-react": "^7.11.1",
50 | 		"eslint-plugin-vue": "^4.7.1",
51 | 		"husky": "^0.14.3",
52 | 		"node-sass": "^4.9.3",
53 | 		"npm-run-all": "^4.1.3",
54 | 		"rollup": "^0.64.1",
55 | 		"rollup-plugin-babel": "^3.0.7",
56 | 		"rollup-plugin-vue": "^4.3.2",
57 | 		"vue": "^2.0.0",
58 | 		"vue-loader": "^15.4.2",
59 | 		"vue-template-compiler": "^2.5.17"
60 | 	},
61 | 	"files": [
62 | 		"lib/"
63 | 	]
64 | }
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Font Picker for Vue
 2 | 
 3 | **A simple, customizable font picker allowing users to preview, select, and use Google Fonts on your website.**
 4 | 
 5 | * Automatic font download and generation of the required CSS styles
 6 | * Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
 7 | 
 8 | → **[Demo](https://samuelmeuli.github.io/font-picker)**
 9 | 
10 | _This is the Vue component for the [**Font Picker**](https://github.com/samuelmeuli/font-picker) package._
11 | 
12 | <p align="center">
13 |   <img src=".github/demo.gif" width=700 alt="Demo">
14 | </p>
15 | 
16 | 
17 | ## Getting started
18 | 
19 | ### 1. Setup
20 | 
21 | Install the package using **NPM**:
22 | 
23 | ```sh
24 | npm install font-picker-vue
25 | ```
26 | 
27 | 
28 | ### 2. Displaying the font picker
29 | 
30 | Import the **`<font-picker>` component** to your Vue code:
31 | 
32 | ```javascript
33 | 
34 | import Vue from 'vue';
35 | import FontPicker from 'font-picker-vue';
36 | 
37 | Vue.use(FontPicker);
38 | ```
39 | 
40 | Use the component:
41 | 
42 | ```html
43 | <font-picker :api-key="'YOUR-KEY-HERE'" :options="options" :active-font="fontFamily" @change="myFunc"></font-picker
44 | ```
45 | 
46 | ### 3. Applying the selected font
47 | 
48 | **Add `class="apply-font"` to all elements you want to apply the selected font to.**
49 | 
50 | When the user selects a font, it will automatically be downloaded and applied to all HTML elements of the `"apply-font"` class.
51 | 
52 | 
53 | ## Customization
54 | 
55 | The following **props** can be passed to the `FontPicker` component:
56 | 
57 | * **`apiKey` (required)**: Google API key (can be generated [here](https://developers.google.com/fonts/docs/developer_api#APIKey))
58 | * **`activeFont`**: Font that should be selected in the font picker and applied to the text (default: `'Open Sans'`). Must be stored in component state, and be updated using an `onChange` listener
59 | * **`options`**: Object with additional (optional) parameters:
60 |   * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name; e.g. if `{ name: 'main' }`, use `#font-picker-main` and `.apply-font-main`
61 |   * **`families`**: If only specific fonts shall appear in the list, specify their names in an array (default: all font families)
62 |   * **`categories`**: Array of font categories – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
63 |   * **`variants`**: Array of variants which the fonts must include and which will be downloaded; the first variant in the array will become the default variant (and will be used in the font picker and the `.apply-font` class); e.g. `['regular', 'italic', '700', '700italic']` (default: `['regular']`)
64 |   * **`limit`**: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: `100`)
65 |   * **`sort`**: Sorting attribute for the font list – possible values: `'alphabetical'` (default), `'popularity'`
66 | * **`onChange`**: Function which is executed whenever the user changes the active font and its stylesheet finishes downloading
67 | 
68 | 
69 | ## Contributing
70 | 
71 | To build the project locally, do the following:
72 | 
73 | * `git clone`
74 | * `npm install`
75 | * `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)
76 | 


--------------------------------------------------------------------------------
/src/FontPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div :id="`font-picker${pickerSuffix}`" class="font-picker" :title="state.errorText">
  3 | 		<button class="dropdown-button" type="button"
  4 | 				:class="{expanded: state.expanded}"
  5 | 				@click="toggleExpanded"
  6 | 				@keypress="toggleExpanded">
  7 | 			<p class="dropdown-font-name">{{state.activeFont}}</p>
  8 | 			<p class="dropdown-icon" :class="state.loadingStatus"></p>
  9 | 		</button>
 10 | 		<ul v-if="state.loadingStatus === 'finished' && fontManager.fonts"
 11 | 			:class="{expanded: state.expanded}"
 12 | 			@scroll="onScroll">
 13 | 			<li v-for="font in fontManager.fonts" :key="font.family">
 14 | 				<button type="button"
 15 | 						:class="`font-${snakeCase(font.family)}${pickerSuffix} ${font.family === state.activeFont ? 'active-font' : ''}`"
 16 | 						@click="itemClick(font)"
 17 | 						@keypress="itemClick(font)">{{font.family}}</button>
 18 | 			</li>
 19 | 		</ul>
 20 | 	</div>
 21 | </template>
 22 | 
 23 | <script>
 24 |     import { FontManager } from 'font-picker';
 25 | 
 26 |     /**
 27 |      * Vue interface for the font picker
 28 |      * @prop {string} apiKey (required) - Google API key
 29 |      * @prop {string} activeFont - Font that should be selected in the font picker and applied to the
 30 |      * text (default: 'Open Sans'). Must be stored in component state, and be updated using an onChange
 31 |      * listener. See README.md for an example.
 32 |      * @prop {Object} options - Object with additional (optional) parameters:
 33 |      *   @prop {string} name - If you have multiple font pickers on your site, you need to give them
 34 |      *   unique names (which may only consist of letters and digits). These names must also be appended
 35 |      *   to the font picker's ID and the .apply-font class name.
 36 |      *   Example: If { name: 'main' }, use #font-picker-main and .apply-font-main
 37 |      *   @prop {string[]} families - If only specific fonts shall appear in the list, specify their
 38 |      *   names in an array
 39 |      *   @prop {string[]} categories - Array of font categories
 40 |      *   Possible values: 'sans-serif', 'serif', 'display', 'handwriting', 'monospace' (default: all
 41 |      *   categories)
 42 |      *   @prop {string[]} variants - Array of variants which the fonts must include and which will be
 43 |      *   downloaded; the first variant in the array will become the default variant (and will be used
 44 |      *   in the font picker and the .apply-font class)
 45 |      *   Example: ['regular', 'italic', '700', '700italic'] (default: ['regular'])
 46 |      *   @prop {number} limit - Maximum number of fonts to be displayed in the list (the least popular
 47 |      *   fonts will be omitted; default: 100)
 48 |      *   @prop {string} sort - Sorting attribute for the font list
 49 |      *   Possible values: 'alphabetical' (default), 'popularity'
 50 |      * @prop {function} onChange - Function which is executed whenever the user changes the active font
 51 |      * and its stylesheet finishes downloading
 52 |      */
 53 |     export default {
 54 |         props: ['activeFont', 'apiKey', 'options'],
 55 | 
 56 |         data() {
 57 |             return {
 58 |                 state: {
 59 |                     activeFont: this.activeFont,
 60 |                     errorText: '',
 61 |                     expanded: false,
 62 |                     loadingStatus: 'loading' // possible values: 'loading', 'finished', 'error'
 63 |                 },
 64 |                 pickerSuffix: '',
 65 |                 fontManager: null,
 66 |             };
 67 |         },
 68 | 
 69 |         mounted() {
 70 |             // Determine selector suffix from font picker's name
 71 |             if (this.options && this.options.name) {
 72 |                 this.pickerSuffix = `-${this.options.name}`;
 73 |             } else {
 74 |                 this.pickerSuffix = '';
 75 |             }
 76 | 
 77 |             // Initialize FontManager object and generate the font list
 78 |             this.fontManager = new FontManager(
 79 |                 this.apiKey,
 80 |                 this.activeFont,
 81 |                 this.options
 82 |             );
 83 | 
 84 |             this.fontManager.init()
 85 |                 .then(() => {
 86 |                     // font list has finished loading
 87 |                     this.setState({
 88 |                         errorText: '',
 89 |                         loadingStatus: 'finished'
 90 |                     });
 91 |                 })
 92 |                 .catch((err) => {
 93 |                     // error while loading font list
 94 |                     this.setState({
 95 |                         errorText: 'Error trying to fetch the list of available fonts',
 96 |                         loadingStatus: 'error'
 97 |                     });
 98 |                     console.error(this.state.errorText);
 99 |                     console.error(err);
100 |                 });
101 |         },
102 | 
103 |         watch: {
104 |             activeFont() {
105 |                 if (this.state.activeFont !== this.activeFont) {
106 |                     this.setActiveFont(this.activeFont);
107 |                 }
108 |             },
109 |         },
110 | 
111 |         methods: {
112 |             /**
113 |              * Set state object
114 |              */
115 |             setState(state) {
116 |                 this.state = Object.assign(this.state, state);
117 |             },
118 | 
119 |             /**
120 |              * EventListener for closing the font picker when clicking anywhere outside it
121 |              */
122 |             onClose(e) {
123 |                 let targetElement = e.target; // clicked element
124 | 
125 |                 do {
126 |                     if (targetElement === document.getElementById('font-picker')) {
127 |                         // click inside font picker
128 |                         return;
129 |                     }
130 |                     // move up the DOM
131 |                     targetElement = targetElement.parentNode;
132 |                 } while (targetElement);
133 | 
134 |                 // click outside font picker
135 |                 this.toggleExpanded();
136 |             },
137 | 
138 |             /**
139 |              * Download the font previews for all visible font entries and the five after them
140 |              */
141 |             onScroll(e) {
142 |                 const elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
143 |                 const downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
144 |                 this.fontManager.downloadPreviews(downloadIndex + 5);
145 |             },
146 | 
147 |             /**
148 |              * Set the font with the given font list index as the active one
149 |              */
150 |             setActiveFont(fontFamily) {
151 |                 const activeFontIndex = this.fontManager.setActiveFont(fontFamily);
152 |                 if (activeFontIndex === -1) {
153 |                     // error trying to change font
154 |                     this.setState({
155 |                         activeFont: fontFamily,
156 |                         errorText: `Cannot update activeFont: The font "${fontFamily}" is not in the font list`,
157 |                         loadingStatus: 'error'
158 |                     });
159 |                     console.error(this.state.errorText);
160 |                 } else {
161 |                     // font change successful
162 |                     this.setState({
163 |                         activeFont: fontFamily,
164 |                         errorText: '',
165 |                         loadingStatus: 'finished'
166 |                     });
167 |                 }
168 |             },
169 | 
170 |             /**
171 |              * Expand/collapse the picker's font list
172 |              */
173 |             toggleExpanded() {
174 |                 this.setState({
175 |                     expanded: !this.state.expanded
176 |                 });
177 |             },
178 | 
179 | 			snakeCase(text) {
180 |                 return text.replace(/\s+/g, '-').toLowerCase();
181 | 			},
182 | 
183 |             itemClick(font) {
184 |                 this.toggleExpanded();
185 |                 this.$emit('change', font);
186 |             }
187 |         },
188 |     }
189 | </script>
190 | 
191 | <style lang="scss">
192 | 	.font-picker {
193 | 		position: relative;
194 | 		display: inline-block;
195 | 		width: 200px;
196 | 		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
197 | 
198 | 		* {
199 | 			box-sizing: border-box;
200 | 		}
201 | 
202 | 		p {
203 | 			margin: 0;
204 | 			padding: 0;
205 | 		}
206 | 
207 | 		button {
208 | 			background: none;
209 | 			border: 0;
210 | 			color: inherit;
211 | 			cursor: pointer;
212 | 			font-size: inherit;
213 | 			outline: none;
214 | 		}
215 | 
216 | 		.dropdown-button {
217 | 			height: 35px;
218 | 			width: 100%;
219 | 			display: flex;
220 | 			align-items: center;
221 | 			justify-content: space-between;
222 | 			padding: 0 10px;
223 | 			background: #CBCBCB;
224 | 
225 | 			&:hover, &.expanded, &:focus {
226 | 				background: #bebebe;
227 | 			}
228 | 
229 | 			.dropdown-font-name {
230 | 				overflow: hidden;
231 | 				white-space: nowrap;
232 | 			}
233 | 
234 | 			&.expanded .dropdown-icon.finished:before {
235 | 				-webkit-transform: rotate(-180deg);
236 | 				transform: rotate(-180deg);
237 | 			}
238 | 		}
239 | 
240 | 		.dropdown-icon {
241 | 			margin-left: 10px;
242 | 
243 | 			&.loading:before {
244 | 				content: '';
245 | 				display: block;
246 | 				height: 10px;
247 | 				width: 10px;
248 | 				border-radius: 50%;
249 | 				border: 2px solid #b2b2b2;
250 | 				border-top-color: black;
251 | 				-webkit-animation: spinner 0.6s linear infinite;
252 | 				animation: spinner 0.6s linear infinite;
253 | 			}
254 | 
255 | 			&.finished:before {
256 | 				content: '';
257 | 				display: block;
258 | 				height: 0;
259 | 				width: 0;
260 | 				border-left: 5px solid transparent;
261 | 				border-right: 5px solid transparent;
262 | 				border-top: 6px solid black;
263 | 				transition: -webkit-transform 0.3s;
264 | 				transition: transform 0.3s, -webkit-transform 0.3s;
265 | 				margin: 0 2px;
266 | 			}
267 | 
268 | 			&.error:before {
269 | 				content: '⚠';
270 | 			}
271 | 		}
272 | 
273 | 		ul {
274 | 			position: absolute;
275 | 			z-index: 1;
276 | 			max-height: 0;
277 | 			width: 100%;
278 | 			overflow-x: hidden;
279 | 			overflow-y: auto;
280 | 			-webkit-overflow-scrolling: touch;
281 | 			margin: 0;
282 | 			padding: 0;
283 | 			background: #EAEAEA;
284 | 			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
285 | 			transition: 0.3s;
286 | 
287 | 			&.expanded {
288 | 				max-height: 200px;
289 | 			}
290 | 
291 | 			li {
292 | 				height: 35px;
293 | 				list-style: none;
294 | 
295 | 				button {
296 | 					height: 100%;
297 | 					width: 100%;
298 | 					display: flex;
299 | 					align-items: center;
300 | 					padding: 0 10px;
301 | 					white-space: nowrap;
302 | 
303 | 					&:hover, &:focus {
304 | 						background: #dddddd;
305 | 					}
306 | 
307 | 					&.active-font {
308 | 						background: #d1d1d1;
309 | 					}
310 | 				}
311 | 			}
312 | 		}
313 | 	}
314 | 
315 | 	@-webkit-keyframes spinner {
316 | 		to {
317 | 			-webkit-transform: rotate(360deg);
318 | 			transform: rotate(360deg);
319 | 		}
320 | 	}
321 | 
322 | 	@keyframes spinner {
323 | 		to {
324 | 			-webkit-transform: rotate(360deg);
325 | 			transform: rotate(360deg);
326 | 		}
327 | 	}
328 | 
329 | </style>
330 | 


--------------------------------------------------------------------------------