angular-tinycon

TinyCon module for AngularJS.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-tinycon
702.1.07 years ago7 years agoMinified + gzip package size for angular-tinycon in KB

Readme

Tinycon Angularjs
An Angular service wrapper for tommoor's TinyCon library.
From the TinyCon README:
>A small library for manipulating the favicon, in particular adding alert bubbles and changing images. Tinycon gracefully falls back to a number in title approach for browers that don't support canvas or dynamic favicons.

Documentation

Install angular-tinycon via Bower.
bower install tinycon-angularjs --save-dev

Include angular-tinycon.min.js in your application. The minified version already includes a version of Tincon so there is no need to include that file too.
<script src="components/tinycon-angularjs/dist/angular-tinycon.min.js"></script>

Add the module ``angularTinycon`` as a dependency to your application module.
var app = angular.module('app', ['angularTinycon']);

You can set Tinycon's options in the app config.
app.config(function(anTinyconProvider){
    anTinyconProvider.setOptions({
        width: 7,
        height: 9,
        font: "10px arial",
        colour: "#ffffff",
        background: "#549A2F",
        fallback: true
    });
});
Take a look at Tinycon's README for all options
To use the API methods you have to call the ``anTinycon`` service in (for example) your controller.

API Documentation

setBubble

Change the value of the bubble
Usage: ``anTinycon.setBubble(number)``
app.controller('MainCtrl', function($scope, anTinycon) {
  anTinycon.setBubble(number);
});

reset

Reset the favicon to its original state.
Usage: ``anTinycon.reset()``
app.controller('MainCtrl', function($scope, anTinycon) {
  anTinycon.reset();
});

bind

Bind a $scope key to the bubble.
Usage: ``anTinycon.bind(scope, key)``
app.controller('MainCtrl', function($scope, anTinycon) {
    // Define
    $scope.number = 10;

    // Bind
    anTinycon.bind($scope, 'number');
});

Tinycon will automatically update the bubble's value when your key's value changes.

Credits

All credits for Tinycon go to tommoor.