Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

aria support #23

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

aria support #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
546b2d0
added aria live support
jonespen Mar 6, 2014
3ce7c58
need to work on my markdown-fu...
jonespen Mar 6, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Finally, you have to include the directive somewhere in your HTML like this:

````html
<body>
<div growl></div>
<div growl aria-live="polite"></div>
</body>
````

Expand Down Expand Up @@ -190,6 +190,20 @@ app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
}]);
````

###Close text for assisitive technology (AT)

* Default: 'Close'

Label for close button. If angular-translate is present, provide a key for the translate text

````javascript
var app = angular.module('myApp', ['angular-growl']);

app.config(['growlProvider', function(growlProvider) {
growlProvider.closeButtonText('Lukk');
}]);
````

###Animations

Beginning with angularJS 1.2 growl messages can be automatically animated with CSS animations when adding and/or closing
Expand Down
2 changes: 1 addition & 1 deletion demo/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div ng-controller="demoCtrl">
<div class="text-center container"><h1>angular-growl Demo site</h1></div>

<div growl></div>
<div growl aria-live="polite"></div>
<div class="container">
<div class="well row">
<label>
Expand Down
13 changes: 8 additions & 5 deletions src/growlDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ angular.module("angular-growl").directive("growl", ["$rootScope", function ($roo
restrict: 'A',
template: '<div class="growl">' +
' <div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
' <button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
' <div ng-switch="message.enableHtml">' +
' <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
' <div ng-switch-default ng-bind="message.text"></div>' +
' </div>' +
' <button type="button" class="close" ng-click="deleteMessage(message)">' +
' <span aria-hidden="true">&times;</span>' +
' <span class="sr-only hide-text" ng-bind="message.closeButtonText"></span>' +
' </button>' +
' <div ng-switch="message.enableHtml">' +
' <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
' <div ng-switch-default ng-bind="message.text"></div>' +
' </div>' +
' </div>' +
'</div>',
replace: false,
Expand Down
16 changes: 14 additions & 2 deletions src/growlFactory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
angular.module("angular-growl").provider("growl", function() {
"use strict";

var _ttl = null,
_enableHtml = false,
var _closeButtonText = 'close',
_ttl = null,
_enableHtml = false,
_messagesKey = 'messages',
_messageTextKey = 'text',
_messageSeverityKey = 'severity',
_onlyUniqueMessages = true;

/**
* set the text used for the close button for screen readers
*
* @param {string} closeButtonText default: close
*/
this.closeButtonText = function(closeButtonText) {
_closeButtonText = closeButtonText;
};

/**
* set a global timeout (time to live) after which messages will be automatically closed
*
Expand Down Expand Up @@ -97,6 +107,7 @@ angular.module("angular-growl").provider("growl", function() {
function broadcastMessage(message) {
if (translate) {
message.text = translate(message.text);
message.closeButtonText = translate(message.closeButtonText);
}
$rootScope.$broadcast("growlMessage", message);
}
Expand All @@ -105,6 +116,7 @@ angular.module("angular-growl").provider("growl", function() {
var _config = config || {}, message;

message = {
closeButtonText: _config.closeButtonText || _closeButtonText,
text: text,
severity: severity,
ttl: _config.ttl || _ttl,
Expand Down