Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: samuelmeuli/font-picker
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v3.4.0
Choose a base ref
...
head repository: samuelmeuli/font-picker
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 13 commits
  • 7 files changed
  • 2 contributors

Commits on Oct 5, 2019

  1. Update dependencies

    samuelmeuli committed Oct 5, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    46610ce View commit details
  2. v3.4.1

    samuelmeuli committed Oct 5, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    cdfbc88 View commit details

Commits on Dec 5, 2019

  1. Update dependencies

    samuelmeuli committed Dec 5, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    53d4abd View commit details
  2. Add filter option

    samuelmeuli committed Dec 5, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    033d899 View commit details
  3. v3.5.0

    samuelmeuli committed Dec 5, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    38845fc View commit details

Commits on Mar 14, 2020

  1. Bump acorn from 7.1.0 to 7.1.1 (#22)

    Bumps [acorn](https://github.com/acornjs/acorn) from 7.1.0 to 7.1.1.
    - [Release notes](https://github.com/acornjs/acorn/releases)
    - [Commits](acornjs/acorn@7.1.0...7.1.1)
    
    Signed-off-by: dependabot[bot] <support@github.com>
    
    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
    dependabot[bot] authored Mar 14, 2020

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    d3bd22a View commit details

Commits on Mar 28, 2020

  1. Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    05619b1 View commit details

Commits on Apr 23, 2020

  1. Update dependencies

    samuelmeuli committed Apr 23, 2020

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    099bcad View commit details
  2. Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    e1b694c View commit details

Commits on May 16, 2020

  1. Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    91b1347 View commit details
  2. Fix option keys not being optional

    Fixes #25
    samuelmeuli committed May 16, 2020

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    7ccd8d9 View commit details
  3. Update dependencies

    samuelmeuli committed May 16, 2020

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    d9df156 View commit details
  4. v3.5.1

    samuelmeuli committed May 16, 2020

    Verified

    This commit was signed with the committer’s verified signature.
    samuelmeuli Samuel Meuli
    Copy the full SHA
    9b25a45 View commit details
Showing with 1,317 additions and 976 deletions.
  1. +28 −0 .github/workflows/lint.yml
  2. +29 −0 .github/workflows/test.yml
  3. +12 −11 README.md
  4. +32 −65 package.json
  5. +1 −5 rollup.config.js
  6. +6 −3 src/FontPicker.ts
  7. +1,209 −892 yarn.lock
28 changes: 28 additions & 0 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
name: Lint

on:
- push
- pull_request

jobs:
lint:
name: Lint
runs-on: ubuntu-latest

steps:
- name: Check out Git repository
uses: actions/checkout@v2

- name: Set up Node.js
uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: yarn install

- name: Lint
run: |
yarn lint:css
yarn lint:ts
yarn format
29 changes: 29 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
- push
- pull_request

jobs:
test:
name: Test
runs-on: ${{ matrix.os }}

strategy:
matrix:
os: [macos-latest, ubuntu-latest, windows-latest]

steps:
- name: Check out Git repository
uses: actions/checkout@v2

- name: Set up Node.js
uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: yarn install

- name: Run tests
run: yarn test
23 changes: 12 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -28,11 +28,11 @@ You have the following options for installing/using the package:
```html
<script src="path/to/FontPicker.js"></script>
<script>
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
</script>
```

@@ -46,9 +46,9 @@ npm install font-picker
import FontPicker from "font-picker";

const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
```

@@ -83,11 +83,12 @@ const fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange);
- **`apiKey` (required)**: Google API key
- **`defaultFamily`**: Font that is selected on initialization. Default: `"Open Sans"`
- **`options`**: Object with additional optional parameters:
- **`pickerId`**: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' `id` attributes and the `.apply-font` class names. Example: If `options = { pickerId: "main" }`, use `#font-picker-main` and `.apply-font-main`
- **`pickerId`**: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' `id` attributes and the `.apply-font` class names. Example: If the options object is `{ pickerId: "main" }`, use `#font-picker-main` and `.apply-font-main`
- **`families`**: If only specific fonts shall appear in the list, specify their names in an array. Default: All font families
- **`categories`**: Array of font categories to include in the list. Possible values: `"sans-serif", "serif", "display", "handwriting", "monospace"`. Default: All categories
- **`scripts`**: Array of scripts which the fonts must include and which will be downloaded on font selection. Example: `["latin", "greek", "hebrew"]` (see [all possible values](./src/shared/types.ts)). Default: `["latin"]`
- **`variants`**: Array of variants which the fonts must include and which will be downloaded on font selection. Example: `["regular", "italic", "700", "700italic"]` (see [all possible values](./src/shared/types.ts)). Default: `["regular"]`
- **`scripts`**: Array of scripts which the fonts must include and which will be downloaded on font selection. Default: `["latin"]`. Example: `["latin", "greek", "hebrew"]` (see [all possible values](./src/shared/types.ts))
- **`variants`**: Array of variants which the fonts must include and which will be downloaded on font selection. Default: `["regular"]`. Example: `["regular", "italic", "700", "700italic"]` (see [all possible values](./src/shared/types.ts))
- **`filter`**: Function which must evaluate to `true` for a font to be included in the list. Default: `font => true`. Example: If `font => font.family.toLowerCase().startsWith("m")`, only fonts whose names begin with "M" will be in the list
- **`limit`**: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: `50`
- **`sort`**: Sorting attribute for the font list. Possible values: `"alphabet", "popularity"`. Default: `"alphabet"`
- **`onChange`**: Function to execute whenever the active font is changed
97 changes: 32 additions & 65 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "font-picker",
"version": "3.4.0",
"version": "3.5.1",
"description": "Font selector component for Google Fonts",
"author": {
"name": "Samuel Meuli",
@@ -33,84 +33,51 @@
"build:clean": "rm -rf ./dist/ ./dist-browser/ ./demo/dist/",
"build:ts": "rollup --config",
"test": "tsc --noEmit",
"format": "prettier --write",
"lint:css": "stylelint --fix --max-warnings 0",
"lint:scss": "stylelint --fix --max-warnings 0 --syntax scss",
"lint:js": "eslint --ext .js,.jsx --fix --max-warnings 0",
"lint:ts": "eslint --ext .ts,.tsx --fix --max-warnings 0",
"lint:css": "stylelint --ignore-path ./.gitignore --max-warnings 0 \"**/*.{css,sass,scss}\"",
"lint:css:fix": "yarn lint:css --fix",
"lint:ts": "eslint --ext .ts,.tsx --ignore-path ./.gitignore --max-warnings 0 \"**/*.{ts,tsx}\"",
"lint:ts:fix": "yarn lint:ts --fix",
"format": "prettier --ignore-path ./.gitignore --list-different \"**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}\"",
"format:fix": "yarn format --write",
"version": "yarn build",
"release": "np"
},
"dependencies": {
"@samuelmeuli/font-manager": "^1.2.0"
"@samuelmeuli/font-manager": "^1.4.0"
},
"devDependencies": {
"@samuelmeuli/eslint-config": "^3.0.1",
"@samuelmeuli/stylelint-config": "^1.0.2",
"@samuelmeuli/tsconfig": "^0.1.1",
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"eslint": "6.1.0",
"eslint-config-airbnb-base": "14.0.0",
"eslint-config-prettier": "^6.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-simple-import-sort": "^4.0.0",
"husky": "^3.0.4",
"lint-staged": "^9.2.3",
"np": "^5.0.2",
"@samuelmeuli/eslint-config": "^6.0.0",
"@samuelmeuli/prettier-config": "^2.0.1",
"@samuelmeuli/stylelint-config": "^3.0.0",
"@samuelmeuli/tsconfig": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"eslint": "6.8.0",
"eslint-config-airbnb-base": "14.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"np": "^6.2.3",
"npm-run-all": "^4.1.3",
"prettier": "^1.16.4",
"rollup": "^1.19.4",
"prettier": "^2.0.5",
"rollup": "^1.32.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.22.1",
"serve": "^11.0.0",
"stylelint": "^10.1.0",
"typescript": "^3.5.3"
"rollup-plugin-typescript2": "^0.27.1",
"serve": "^11.3.0",
"stylelint": "^12.0.1",
"typescript": "^3.9.2"
},
"browserslist": [
"defaults"
],
"eslintConfig": {
"root": true,
"extends": [
"@samuelmeuli/eslint-config/base-typescript",
"prettier",
"prettier/@typescript-eslint"
],
"extends": "@samuelmeuli/eslint-config/typescript",
"env": {
"browser": true
}
},
"prettier": {
"printWidth": 100,
"trailingComma": "all"
},
"lint-staged": {
"*.{js,jsx}": [
"yarn lint:js",
"yarn format",
"git add"
],
"*.{ts,tsx}": [
"yarn lint:ts",
"yarn format",
"git add"
],
"*.css": [
"yarn lint:css",
"yarn format",
"git add"
],
"*.scss": [
"yarn lint:scss",
"yarn format",
"git add"
],
"*.{json,md,yml}": [
"yarn format",
"git add"
]
"stylelint": {
"extends": "@samuelmeuli/stylelint-config"
},
"husky": {
"hooks": {
"pre-commit": "yarn test && lint-staged"
}
}
"prettier": "@samuelmeuli/prettier-config"
}
6 changes: 1 addition & 5 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@ const GLOBALS = {
};
const INPUT_FILE = "./src/FontPicker.ts";
const OUTPUT_NAME = "FontPicker";
const TS_CACHE_ROOT = "./node_modules/.cache/rollup-plugin-typescript2/";

export default [
// Browser configuration
@@ -32,9 +31,7 @@ export default [
plugins: [
// Bundle `font-manager` into the package (to make it usable with a <script> tag)
resolve(),
typescript({
cacheRoot: TS_CACHE_ROOT,
}),
typescript(),
],
},

@@ -59,7 +56,6 @@ export default [
external: EXTERNALS,
plugins: [
typescript({
cacheRoot: TS_CACHE_ROOT,
tsconfigOverride: {
compilerOptions: {
declaration: true,
9 changes: 6 additions & 3 deletions src/FontPicker.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {
Font,
FONT_FAMILY_DEFAULT,
FontList,
FontManager,
FONT_FAMILY_DEFAULT,
getFontId,
Options,
OPTIONS_DEFAULTS,
@@ -20,7 +20,7 @@ export default class FontPicker {
private dropdownFamily: HTMLParagraphElement;

// State of the font picker (expanded or collapsed)
private expanded: boolean = false;
private expanded = false;

// Instance of the FontManager class used for managing, downloading and applying fonts
private fontManager: FontManager;
@@ -43,9 +43,11 @@ export default class FontPicker {
categories = OPTIONS_DEFAULTS.categories,
scripts = OPTIONS_DEFAULTS.scripts,
variants = OPTIONS_DEFAULTS.variants,
filter = OPTIONS_DEFAULTS.filter,
limit = OPTIONS_DEFAULTS.limit,
sort = OPTIONS_DEFAULTS.sort,
}: Options,
}: Partial<Options>,
// eslint-disable-next-line @typescript-eslint/no-empty-function
onChange: (font: Font) => void = (): void => {},
) {
// Function bindings
@@ -59,6 +61,7 @@ export default class FontPicker {
categories,
scripts,
variants,
filter,
limit,
sort,
};
Loading