5stars
:star::star::star::star::star:
Last updated 6 months ago by zhansingsong .
Original npm · Tarball · package.json
$ cnpm install 5stars 
SYNC missed versions from official npm registry.

5star

:star::star::star::star::star:

A quickly generating 5 stars for rating based on SVG technique utility tool.

CHINESE DOC

Features

  • supports display and click modes.
  • optimizes SVG files by sogo.
  • supports remote url file and local file.
  • generates fast.
  • supports configuration and cli usages.

Warn :warning:

  • normal svg file and active svg file must be the same size, the both files are required as well.
  • normal svg file and active svg file need to be filled,in order to ensure 'click' mode work.

Try it out

  • display mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji.svg -s 20

output-emoji.svg

  • click mode
npx 5stars -a https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-a.svg -b https://raw.githubusercontent.com/zhansingsong/5stars/master/svgs/emoji-b.svg -o output-emoji-click.svg -m click -s 20

output-emoji-click.svg

Getting started

  • If there is the following directory structure: examples

    examples
    ├── config.json
    ├── star-active.svg
    └── star-normal.svg
    
  • config.json

    {
      "normal": "star-normal.svg",
      "active": "star-active.svg",
      "space": 0,
      "width": "auto",
      "height": "auto",
      "computeSpace": true,
      "mode": "display",
      "output": "output.svg"
    }
    
  • run the following command in current directory examples

    ➜  examples git:(master) ✗ npx 5stars
    5stars  start generating ...
            complete reading star-active.svg
            complete reading star-normal.svg
            complete creating new symbol element star-a
            complete creating new symbol element star-b
            start to output output.svg
            done!
    
  • output.svg

    output

Usage

npx 5stars # use default config.json
npx 5stars -c yourConfigFile
npx 5stars --a star-normal.svg --b star-active.svg
  • display mode

    <!-- output.svg -->
    <svg class="5stars-svg" data-width="0.5" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
    viewBox="0 0 309.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>
    

    manipulate output.svg how to display by data-width="0.5" attribute of the output svg.

    The following output is data-width="0.7":

  • click mode

    <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
    viewBox="0 0 309.335 53.867">
      <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
      <!-- content -->
    </svg>
    

    If you want to control when the click operation ends, You can override window._5stars_click_cb_(n):

    window._5stars_click_cb_ = function (n) {
      // end click operation when returning true
      return n == 5;
    }
    

    Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>5stars click mode</title>
    </head>
    <body>
      <script>
      window._5stars_click_cb_ = function (n) {
        // end click operation when returning true
        return n == 5;
      }
      </script>
    
      <svg class="5stars-svg" id="5stars-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%"
      viewBox="0 0 269.335 53.867">
        <!-- Generator: 5stars. https://github.com/zhansingsong/5stars -->
        <!-- content -->
      </svg>
    </body>
    </html>
    

config options

// defaults
const config = {
  // normal svg file
  normal: undefined,
  // active svg file
  active: undefined,
  // space between stars
  space: 0,
  // width of normal and active svg files
  width: 'auto',
  // height of normal and active svg files
  height: 'auto',
  // output path
  output: './output.svg',
  // if space isn't included on computing svg width.
  computeSpace: false,
  // generation mode: display | click
  mode: 'display'
};
  • normal: normal svg file, required.
  • active: active svg file, required.
  • space: space between stars.
  • width: width of normal and active svg files.
  • height: height of normal and active svg files.
  • output: output path relative to current directory.
  • computeSpace: if space isn't included on computing svg width.
  • mode: generation mode
    • display
    • click

CLI

Usage: 5stars [options]

Options:
  -v, --version           output the version number
  -c, --config [config]   config file
  -a, --normal [normal]   normal svg file
  -b, --active [active]   active svg file
  -s, --space [space]     space between stars
  --width [width]         width of normal and active svg files
  --height [height]       height of normal and active svg files
  -o, --output [output]   output path
  -m, --mode [mode]       generation mode
  -M, --no-compute-space  if space is not included on computing svg width.
  -h, --help              output usage information

Examples:

  $ 5stars # use default config.json
  $ 5stars -c yourConfig.json
  $ 5stars -a star-normal.svg -b star-active.svg

License

MIT.

Current Tags

  • 1.0.0                                ...           latest (6 months ago)

1 Versions

  • 1.0.0                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 3
Dependencies (10)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |