angular-ui-flag

Angular directive to draw SVG flags.

Demo available on GitHub.io

Installation

• Install via npm

npm install angular-ui-flag

• Include the <script/> tag somewhere in your header:

<script src="/node_modules/angular-ui-flag/angular-ui-flag.js"></script>

• Add the module to your Angular app module list:

var app = angular.module('app', [
	'angular-ui-flag',
]);

• Add the <ui-flag/> directive somewhere in your views:

<ui-flag style="flagStyle"></ui-flag>

See the demo app for more usage examples.

Configuration

The <ui-flag/> HTML element takes a single property: style which is a nested object of the properties in the below table.

| Property Path | Type | Description | |---------------------|--------|----------------------------------------------------------| | frame | Object | The main SVG element properties | | frame.height | Number | The height of the SVG element | | frame.width | Number | The width of the SVG element | | background | Object | Background layer properties | | background.svg | String | URL path to the SVG element to use for the background | | background.color1 | String | CSS color code (alpha is ok) to use for the first color | | background.color2 | String | CSS color code (alpha is ok) to use for the second color | | background.color3 | String | CSS color code (alpha is ok) to use for the third color | | foreground.svg | String | URL path to the SVG element to use for the foreground | | foreground.color1 | String | CSS color code (alpha is ok) to use for the first color | | foreground.color2 | String | CSS color code (alpha is ok) to use for the second color | | foreground.color3 | String | CSS color code (alpha is ok) to use for the third color | | feature.svg | String | URL path to the SVG element to use for the feature | | feature.color1 | String | CSS color code (alpha is ok) to use for the first color | | feature.color2 | String | CSS color code (alpha is ok) to use for the second color | | feature.color3 | String | CSS color code (alpha is ok) to use for the third color |

Flag concepts

This module splits a flag into three different layers, each of which can contain up to 3 colors:

1. Background - The primary flag background. This should also contain an element with the feature ID to dictate where the feature will be placed
2. Foreground - An overlay over the background layer
3. Feature - A sprite style image placed in the absolute foreground. The location of this is determined by the background layer

Making new flag components

If you have an idea for any of the above three aspects of a flag please submit a pull request.

NOTES:

• All component should have a corresponding entry in the /svg/{bg,fg,ft}/index.json file indicating its title and how many colors its supports
• Any component can have 0 - 3 colors. These must be set to #FF0000, #00FF00 and #0000FF for the first to third color respectively
• Every background component (anything in /svg/bg) needs to have at least one <rect/> or <path/> element which has the ID feature
• Transparency is ok for the foreground and feature components