https://github.com/plotdb/choosefont.js

font chooser frontend widget
https://github.com/plotdb/choosefont.js

Last synced: about 2 months ago
JSON representation

font chooser frontend widget

• Host: GitHub
• URL: https://github.com/plotdb/choosefont.js
• Owner: plotdb
• License: mit
• Created: 2018-06-20T07:04:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T23:28:36.000Z (about 2 years ago)
• Last Synced: 2024-10-13T14:42:51.772Z (2 months ago)
• Language: Pug
• Size: 29.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Choosefont.js

Resource packer and widget for super fast in-browser font picking experience.

## Build Resource

1. prepare your font files under ```tool/fonts``` directory.

    1. choosefont will traverse and find all ttf files automatically.

    2. font named after its filename.

    3. use METADATA.pb in the same folder for category. ( check google-fonts for example.

    4. use meta.json in root directory for additional font information ( check meta.json in this repo for example)

    5. for any font in the xl-fontset format, you can put a symlink to it as ```fontset``` directory under tool/.

2. execute following:

    lsc main

3. following files are generated under ```assets``` directory:

    1. a font meta json ( ```meta.json``` ),

    2. a minimized png sprite ( ```sprite.min.png``` )

    3. non-minimzed png and svg file

## Use Choosefont.js

xfl.js is required. include it at first.

then make a font chooser with following:

```

    var chooser = new ChooseFont(config);

    chooser.init();

```

Configurations:

 * root: root element for ChooseFont.

 * meta-url: URL for your meta.json.

 * base: URL for where to find all your fonts.

 * disable-filter(font, idx): filter function to decide whether to disable specific font. return true or false.

 * default-filter(font, idx): filter functino to decide whether to show specific font at all. return true or false.

 * type: type of chooser. either 'grid' or 'list'. default 'grid'.

 * itemClass: add additional classes to font list item. should be space separated string.

 * cols: how many item per line ( for grid view ). default 4.

 * disable-filter(f, idx) - if you want to disable some font, return true when f / idx matches the font.

   - f object:

     category: [ ... ] # e.g., HANDWRITING

     family: [...] # e.g., Regular

     name: "fontName"

 * default-filter(f, idx) - if you want to disable some font, return true when f / idx matches the font.

   - same f object as disable-filter.

Once created, you can interact with chooser programmatically with following methods:

 * filter: filter list by name or category. input: object, such as {name: "Abel", category: "Display"}.

   - example:

     ```

     chooser.filter({

       name: ""

       category: ""

     })

     ```

   - clear filter by passing nothing:

     ```

     chooser.filter();

     ```

For reading user's feedback, you can watching for specific events with ```choose.on('event-name', handler)```. Following are available events:

 * choose: fire when user choose an event. return font object.

   - example:

     ```

     chooser.on("choose", function(font) {

       /* font is loaded. just use font object */

     });

     ```

   - font object contains following members:

     * name - font name.

     * isSet - is a subsetted font.

     * category - list of category for this font

     * family - possible variant of this font.

   - Following is an example of using xl-fontload+ Choosefont.js:

     ```

     chooser.on("choose", function(font) {

       xfl.load("path-to-my-fontdir/", font, function(font) {

         document.body.style.fontFamily = font.name;

       });

     })

     ```

## DOM Structure

```

  .choosefont

    .choosefont-head     ( only if provided manually )

    .choosefont-content  ( will be added automatically if none )

```

## LICENSE

MIT License.