Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ng-browser-update with all npm packages installed. Try it out:

ng-browser-update lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("ng-browser-update/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-browser-update v1.1.0

AngularJS directive for Browser-Update.org (http://browser-update.org): out-dated browsers notifier

ng-browser-update Build StatusdevDependency Status

AngularJS directive for Browser-Update.org: out-dated browsers notifier.

Demo: http://tinesoft.github.io/ng-browser-update

Installation

Using bower:

bower install ng-browser-update

Using npm:

npm install ng-browser-update

How to use it

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>

Implemented features so far:

  • versions : browser versions to notify
  • language : set a language for the message, e.g. "en", overrides the default detection
  • reminder : atfer how many hours should the message reappear: 0 = show all the time
  • new-window: open link in new window/tab
  • always-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 appeared
  • on-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>

Easy i18n support for custom notification message

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.

Features to be implemented:

  • onNotificationClosed : callback when user closes the notification bar

Build

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

License

Copyright (c) 2015 Tine Kondo. Licensed under the MIT License (MIT)

Thanks To

Credits and thanks go to the team behind Browser-Update.org for this awesome initiative!

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free