Skip to content

Commit fa34d5a

Browse files
soumak77soumak77
committed
publishing patch version 2.0.11
1 parent ead507e commit fa34d5a

File tree

10 files changed

+121
-35
lines changed

10 files changed

+121
-35
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-base-apps",
3-
"version": "2.0.10",
3+
"version": "2.0.11",
44
"main": [
55
"scss/base.scss",
66
"dist/js/base-apps.js"

‎dist/docs/assets/js/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/docs/assets/js/templates.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/docs/partials/global-nav.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<nav class="global-nav">
22
<ul class="title-area">
33
<li class="name">
4-
<h1><a><strong>Angular Base Apps 2.0.10</strong></a></h1>
4+
<h1><a><strong>Angular Base Apps 2.0.11</strong></a></h1>
55
</li>
66
</ul>
77
<ul class="right">

‎dist/docs/templates/changelog.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,20 @@ <h4>Docs</h4>
5353
5454
<hr>
5555
-->
56+
<h3>Version 2.0.11</h3>
57+
58+
<h4>Bug Fixes</h4>
59+
60+
<ul>
61+
<li><a href="https://github.com/base-apps/angular-base-apps/issues/95">#95</a>: Allow using HTML as notification content</li>
62+
</ul>
63+
64+
<h4>Docs</h4>
65+
66+
<a href="https://base-apps.github.io/angular-base-apps/v2.0.11">https://base-apps.github.io/angular-base-apps/v2.0.11</a>
67+
68+
<hr>
69+
5670
<h3>Version 2.0.10</h3>
5771

5872
<h4>General</h4>

‎dist/docs/templates/installation.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ <h3>CDN</h3>
5252

5353
<hljs language="html">
5454
<!-- CSS -->
55-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.css">
56-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.min.css">
55+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.css">
56+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.min.css">
5757

5858
<!-- JavaScript -->
59-
<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.js"></script>
60-
<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.min.js"></script>
59+
<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.js"></script>
60+
<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.min.js"></script>
6161
</hljs>
6262

6363
</section>

‎dist/docs/templates/notification.html‎

Lines changed: 83 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<h2>Notification</h2>
33
<h3 class="subheader">An alert that pins to the corner of the screen when triggered by JavaScript.</h3>
44

5-
<p>A custom action can be assigned to a notification as well. By default, all notifications can be swiped to close them. You can also set an `autoclose` attribute equal to a number (measured in milliseconds) to have the notification disappear after the specified amount of time. Please note that due to dynamic DOM insertion and animations, we recommend an autoclose value of at least 1000ms.</p>
5+
<p>A custom action can be assigned to a notification as well. By default, all notifications can be swiped to close them. You can also set an <code>autoclose</code> attribute equal to a number (measured in milliseconds) to have the notification disappear after the specified amount of time. Please note that due to dynamic DOM insertion and animations, we recommend an autoclose value of at least 1000ms.</p>
66

77
<div class="grid-block">
88
<div class="small-12 grid-content">
@@ -15,7 +15,7 @@ <h3 class="subheader">An alert that pins to the corner of the screen when trigge
1515
<a class="button" href="" ba-open="static-example">Static Notification</a>
1616
<ba-notification-set position="bottom-left" id="test-docs-notifications"></ba-notification-set>
1717
<ba-notification-static id="static-example" title="My static notification" image="http://www.clipartbest.com/cliparts/acq/X8R/acqX8RdcM.jpeg" position="top left">
18-
This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!
18+
<p>This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!</p>
1919
</ba-notification-static>
2020
</div>
2121
</div>
@@ -35,14 +35,15 @@ <h3>Basic HTML</h3>
3535
<a class="button" href="" ba-open="my-notify">Static Notification</a>
3636
<!-- notification content -->
3737
<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
38-
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
39-
</ba-notification-static>
38+
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
39+
</ba-notification-static>
4040
</hljs>
4141
</div>
4242
<div class="small-12 medium-6 grid-content">
4343
<a class="button" href="" ba-open="my-notify">Static Notification</a>
44-
<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40" content="This notification is static, it works similarly to a programmatic with some subtle differences.">
45-
</ba-notification-static>
44+
<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
45+
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
46+
</ba-notification-static>
4647
</div>
4748
</div>
4849

@@ -52,16 +53,16 @@ <h3>Advanced HTML</h3>
5253
<p>You can create a Dynamic Notification with this basic HTML:</p>
5354
<div class="grid-block">
5455
<div class="small-12 medium-6 grid-content">
55-
<hljs language="html">
56-
<!-- notification trigger -->
57-
<a class="button" href=""
58-
title="My notification"
59-
content="Notification example"
60-
color="success"
61-
autoclose="3000"
62-
ba-notify="main-notifications">Dynamic Notification</a>
63-
<ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
64-
</hljs>
56+
<hljs language="html">
57+
<!-- notification trigger -->
58+
<a class="button" href=""
59+
title="My notification"
60+
content="Notification example"
61+
color="success"
62+
autoclose="3000"
63+
ba-notify="main-notifications">Dynamic Notification</a>
64+
<ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
65+
</hljs>
6566
</div>
6667
<div class="small-12 medium-6 grid-content">
6768
<a class="button" href=""
@@ -98,6 +99,72 @@ <h4>Additional Options</h4>
9899

99100
<hr>
100101

102+
<h3>HTML Content</h3>
103+
104+
<p>Notifications support using HTML inside the title and content. Both static and dynamic notifications allow passing HTML via the <code>title</code> attribute, however, they differ in how they allow passing HTML content.</p>
105+
106+
<h4>Static Notifications</h4>
107+
<p>Static notifications use <code>ng-transclude</code> to inject the content. Therefore you can simply pass the HTML as the body of the notification.</p>
108+
109+
<div class="grid-block">
110+
<div class="small-12 grid-content">
111+
<hljs language="html">
112+
<!-- notification trigger -->
113+
<a class="button" href="" ba-open="static-example-2">Static Notification</a>
114+
<!-- notification content -->
115+
<ba-notification-static id="static-example-2" title="My <b>static</b> notification <i>example</i>" image="http://placehold.it/40x40">
116+
This notification is static:
117+
<ul>
118+
<li>it works similarly to a <b>programmatic</b> notification</li>
119+
<li>it has some <i>subtle differences</i></li>
120+
</ul>
121+
</ba-notification-static>
122+
</hljs>
123+
</div>
124+
<div class="small-12 grid-content">
125+
<a class="button" href="" ba-open="static-example-2">View Notification</a>
126+
<ba-notification-static
127+
id="static-example-2"
128+
title="My <b>notification</b> <i>example</i>"
129+
image="http://placehold.it/40x40">
130+
This notification is static:
131+
<ul>
132+
<li>it works similarly to a <b>programmatic</b> notification</li>
133+
<li>it has some <i>subtle differences</i></li>
134+
</ul>
135+
</ba-notification-static>
136+
</div>
137+
</div>
138+
139+
<h4>Dynamic Notifications</h4>
140+
<p>Basic dynamic notifications use the <code>content</code> attribute to allow passing plain-text content. If you wish to pass HTML, you must use the <code>html</code> attribute.</p>
141+
142+
<div class="grid-block">
143+
<div class="small-12 grid-content">
144+
<hljs language="html">
145+
<!-- notification trigger -->
146+
<a class="button" href=""
147+
title="My <b>dynamic</b> notification <i>example</i>"
148+
html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
149+
color="success"
150+
autoclose="5000"
151+
ba-notify="dynamic-example-2">View Notification</a>
152+
<ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
153+
</hljs>
154+
</div>
155+
<div class="small-12 grid-content">
156+
<a class="button" href=""
157+
title="My <b>dynamic</b> notification <i>example</i>"
158+
html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
159+
color="success"
160+
autoclose="5000"
161+
ba-notify="dynamic-example-2">View Notification</a>
162+
<ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
163+
</div>
164+
</div>
165+
166+
<hr>
167+
101168
<h3>Sass Mixins</h3>
102169

103170
<p>Use our mixins to create custom notification styles.</p>

‎dist/js/base-apps.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2451,14 +2451,15 @@
24512451
}
24522452
}
24532453

2454-
baNotify.$inject = ['BaseAppsApi'];
2454+
baNotify.$inject = ['BaseAppsApi', '$sce'];
24552455

2456-
function baNotify(BaseAppsApi) {
2456+
function baNotify(BaseAppsApi, $sce) {
24572457
var directive = {
24582458
restrict: 'A',
24592459
scope: {
24602460
title: '@?',
24612461
content: '@?',
2462+
html: '@?',
24622463
color: '@?',
24632464
image: '@?',
24642465
autoclose: '@?'
@@ -2473,6 +2474,7 @@
24732474
BaseAppsApi.publish(attrs.baNotify, {
24742475
title: scope.title,
24752476
content: scope.content,
2477+
html: $sce.trustAsHtml(scope.html),
24762478
color: scope.color,
24772479
image: scope.image,
24782480
autoclose: scope.autoclose
@@ -3666,9 +3668,12 @@ angular.module('base').run(['$templateCache', function($templateCache) {
36663668
' image="notification.image"\n' +
36673669
' notif-id = "notification.id"\n' +
36683670
' color="notification.color"\n' +
3669-
' autoclose="notification.autoclose"\n' +
3670-
' >{{ notification.content }}</ba-notification>\n' +
3671-
'</div>');
3671+
' autoclose="notification.autoclose">\n' +
3672+
' <div ng-if="!notification.html">{{ notification.content }}</div>\n' +
3673+
' <div ng-if="notification.html" ng-bind-html="notification.html"></div>\n' +
3674+
' </ba-notification>\n' +
3675+
'</div>\n' +
3676+
'');
36723677
}]);
36733678

36743679
angular.module('base').run(['$templateCache', function($templateCache) {
@@ -3682,7 +3687,7 @@ angular.module('base').run(['$templateCache', function($templateCache) {
36823687
' </div>\n' +
36833688
' <div class="notification-content">\n' +
36843689
' <h1 ng-bind-html="trustedTitle"></h1>\n' +
3685-
' <p ng-transclude></p>\n' +
3690+
' <div ng-transclude></div>\n' +
36863691
' </div>\n' +
36873692
'</div>\n' +
36883693
'');
@@ -3699,7 +3704,7 @@ angular.module('base').run(['$templateCache', function($templateCache) {
36993704
' </div>\n' +
37003705
' <div class="notification-content">\n' +
37013706
' <h1 ng-bind-html="trustedTitle"></h1>\n' +
3702-
' <p ng-transclude></p>\n' +
3707+
' <div ng-transclude></div>\n' +
37033708
' </div>\n' +
37043709
'</div>\n' +
37053710
'');

‎dist/js/base-apps.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-base-apps",
3-
"version": "2.0.10",
3+
"version": "2.0.11",
44
"license": "MIT",
55
"description": "A responsive, Angular-powered framework for web apps",
66
"scripts": {

0 commit comments

Comments
 (0)