Text Flags

by Marc Malignan

HTML

<div ng-app="flags" ng-controller="flagsCtrl">
    <div id="options" class="panel">
        <div>
            <b>Continent : </b>
            <select ng-model="search.continent">
                <option value="">All</option>
                <option value="africa">Africa</option>
                <option value="americas">Americas</option>
                <option value="asia">Asia</option>
                <option value="europe">Europe</option>
                <option value="oceania">Oceania</option>
            </select>
        </div>
        <div><b>Search : </b><input type="text" ng-model="search.name"/></div>
        <div><b>Font size : </b><input type="range" ng-model="font" min="20" max="100"/></div>
        <div><b>Thinness : </b><input type="range" ng-model="thinness" min="5" max="50"/></div>
        <center>
            <i ng-if="filtered.length>1 || filtered.length==0">({{filtered.length}} countries)</i>
            <i ng-if="filtered.length==1">({{filtered.length}} country)</i>
        </center>
    </div>
    <div id="flags" class="panel">
        <flag country="c" font="font" thinness="thinness"
              ng-repeat="c in filtered = (countries | filter:search) | orderBy:'name'">{{c.name}}</flag>
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
    margin: 10px 20px;
    background: #333;
    font-family: Lato;
    text-align: center;
}
.panel {
    padding: 20px;
    border-radius: 4px;
}
#options {
    display: inline-block;
    margin-bottom: 10px;
    background: #fafafa;
    text-align: left;
}
#options b {
    float: left;
    width: 100px;
}
#options select, input {
    float: left;
    width: 200px;
    margin: 0 0 5px;
    box-sizing: border-box;
}
#flags {
    margin: 0 auto;
    background: #ddd;
    overflow: hidden;
}
#flags .flag {
    display: inline-block;
    font-family: 'Pacifico';
    text-decoration: none;
    white-space: nowrap;
}

JavaScript

var app = angular.module('flags', []);

app.directive('flag', function() {
    return {
        restrict: 'E',
        scope: {
            c: '=country',
            f: '=font',
            t: '=thinness'
        },
        link: function(scope, el, attr) {
            scope.shadow = function() {
                
                var nbPx = Math.round(scope.f/scope.t*(3/(scope.c.colors.length-1)));
                
                var prop = '';
                var start = 1;
                
                for(var i=1; i<scope.c.colors.length; i++) {
                    
                    var end = start + nbPx;
                    
                    for(var j=start; j<end; j++) {
                        prop += '0 ' + j + 'px #' + scope.c.colors[i];
                        if(j+1<end) prop += ',';
                    }
                    
                    start += nbPx;
                	if(i+1<scope.c.colors.length) prop += ',';
                }
                return prop;
            }
        },
        template: '<a href="https://en.wikipedia.org/wiki/{{c.name}}" target="_blank" class="flag {{c.code}}" style="font-size:{{f}}px; color:#{{c.colors[0]}}; text-shadow:{{shadow()}}; line-height:{{f*3}}px; margin:0 {{f/2}}px;">{{c.name}}</a>'
    }
});

app.controller('flagsCtrl', function($scope) {
    
    $scope.search = {};
    $scope.font = 40;
    $scope.thinness = 20;
    
    $scope.countries = [
        {continent:'europe', colors:['E41E20','000000','E41E20'], name:'Albania'},
        {continent:'europe', colors:['0018A8','FEDF00','D0103A'], name:'Andorra'},
        {continent:'europe', colors:['D90012','0033A0','F2A800'], name:'Armenia'},
        {continent:'europe', colors:['ED2939','FFFFFF','ED2939'], name:'Austria'},
        {continent:'europe', colors:['C8313E','FFFFFF','4AA657'], name:'Belarus'},
        {continent:'europe', colors:['000000','FFE936','FF0F21'], name:'Belgium'},
        {continent:'europe',...