AngularJS directive for Browser-Update.org: out-dated browsers notifier.
Demo: http://tinesoft.github.io/ng-browser-update
Using bower:
bower install ng-browser-update
Using npm:
npm install ng-browser-update
You should already angular script referenced. If not, add it:
<script type="text/javascript" src="angular.min.js"></script>
Then add the library:
<script type="text/javascript" src="ng-browser-update.min.js"></script>
Next, inject ngBrowserUpdate
in your application module:
angular.module('myApp', ['ngBrowserUpdate']);
and then just add an browser-update
tag in your main file (index.html for example):
<browser-update></browser-update>
versions
: browser versions to notifylanguage
: set a language for the message, e.g. "en", overrides the default detectionreminder
: atfer how many hours should the message reappear: 0 = show all the timenew-window
: open link in new window/tabalways-show-bar
: always show the bar (for testing)notification-text
: custom notification html text (takes precedence over the 'language' option)on-notification-bar-shown
: callback function after the bar has appearedon-notificationBar-clicked
: callback function if bar was clicked
Example with some above features:
<browser-update
versions="{i:8,f:8,o:9.63,s:2,c:8}" reminder="1"
always-show-bar="false" new-window="false"
notification-text="This is my custom notification message">
</browser-update>
Version v1.1 of ng-browser-update makes it possible to use angular's expressions as value for the notification-text
attribute.
This allows you to use, for example, angular-translate's translate
filter, to easily translate the custom message that appears in the notification bar.
Here is an example:
<browser-update
versions="{i:8,f:8,o:9.63,s:2,c:8}" reminder="1"
always-show-bar="false" new-window="false"
notification-text="{{ 'CUSTOM_NOTIFICATION_MESSAGE_ID' | translate }}">
</browser-update>
where CUSTOM_NOTIFICATION_MESSAGE_ID is the key of the message.
More information on how to use angular-translate's translate
filter can be found here.
onNotificationClosed
: callback when user closes the notification bar
You can run the tests by cloning the repo and then (inside the project folder) running
npm install
bower install
grunt watch
assuming you already have grunt
installed, otherwise you also need to do:
npm install -g grunt-cli
Copyright (c) 2015 Tine Kondo. Licensed under the MIT License (MIT)
Credits and thanks go to the team behind Browser-Update.org for this awesome initiative!