Skip to content

Commit c02e712

Browse files
soumak77soumak77
committed
allow passing HTML as notification content
resolves #95
1 parent b1cf8c6 commit c02e712

File tree

5 files changed

+94
-23
lines changed

5 files changed

+94
-23
lines changed

‎docs/templates/notification.html‎

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

10-
<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>
10+
<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>
1111

1212
<div class="grid-block">
1313
<div class="small-12 grid-content">
@@ -20,7 +20,7 @@ <h3 class="subheader">An alert that pins to the corner of the screen when trigge
2020
<a class="button" href="" ba-open="static-example">Static Notification</a>
2121
<ba-notification-set position="bottom-left" id="test-docs-notifications"></ba-notification-set>
2222
<ba-notification-static id="static-example" title="My static notification" image="http://www.clipartbest.com/cliparts/acq/X8R/acqX8RdcM.jpeg" position="top left">
23-
This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!
23+
<p>This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!</p>
2424
</ba-notification-static>
2525
</div>
2626
</div>
@@ -40,14 +40,15 @@ <h3>Basic HTML</h3>
4040
<a class="button" href="" ba-open="my-notify">Static Notification</a>
4141
<!-- notification content -->
4242
<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
43-
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
44-
</ba-notification-static>
43+
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
44+
</ba-notification-static>
4545
</hljs>
4646
</div>
4747
<div class="small-12 medium-6 grid-content">
4848
<a class="button" href="" ba-open="my-notify">Static Notification</a>
49-
<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.">
50-
</ba-notification-static>
49+
<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
50+
<p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
51+
</ba-notification-static>
5152
</div>
5253
</div>
5354

@@ -57,16 +58,16 @@ <h3>Advanced HTML</h3>
5758
<p>You can create a Dynamic Notification with this basic HTML:</p>
5859
<div class="grid-block">
5960
<div class="small-12 medium-6 grid-content">
60-
<hljs language="html">
61-
<!-- notification trigger -->
62-
<a class="button" href=""
63-
title="My notification"
64-
content="Notification example"
65-
color="success"
66-
autoclose="3000"
67-
ba-notify="main-notifications">Dynamic Notification</a>
68-
<ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
69-
</hljs>
61+
<hljs language="html">
62+
<!-- notification trigger -->
63+
<a class="button" href=""
64+
title="My notification"
65+
content="Notification example"
66+
color="success"
67+
autoclose="3000"
68+
ba-notify="main-notifications">Dynamic Notification</a>
69+
<ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
70+
</hljs>
7071
</div>
7172
<div class="small-12 medium-6 grid-content">
7273
<a class="button" href=""
@@ -103,6 +104,72 @@ <h4>Additional Options</h4>
103104

104105
<hr>
105106

107+
<h3>HTML Content</h3>
108+
109+
<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>
110+
111+
<h4>Static Notifications</h4>
112+
<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>
113+
114+
<div class="grid-block">
115+
<div class="small-12 grid-content">
116+
<hljs language="html">
117+
<!-- notification trigger -->
118+
<a class="button" href="" ba-open="static-example-2">Static Notification</a>
119+
<!-- notification content -->
120+
<ba-notification-static id="static-example-2" title="My <b>static</b> notification <i>example</i>" image="http://placehold.it/40x40">
121+
This notification is static:
122+
<ul>
123+
<li>it works similarly to a <b>programmatic</b> notification</li>
124+
<li>it has some <i>subtle differences</i></li>
125+
</ul>
126+
</ba-notification-static>
127+
</hljs>
128+
</div>
129+
<div class="small-12 grid-content">
130+
<a class="button" href="" ba-open="static-example-2">View Notification</a>
131+
<ba-notification-static
132+
id="static-example-2"
133+
title="My <b>notification</b> <i>example</i>"
134+
image="http://placehold.it/40x40">
135+
This notification is static:
136+
<ul>
137+
<li>it works similarly to a <b>programmatic</b> notification</li>
138+
<li>it has some <i>subtle differences</i></li>
139+
</ul>
140+
</ba-notification-static>
141+
</div>
142+
</div>
143+
144+
<h4>Dynamic Notifications</h4>
145+
<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>
146+
147+
<div class="grid-block">
148+
<div class="small-12 grid-content">
149+
<hljs language="html">
150+
<!-- notification trigger -->
151+
<a class="button" href=""
152+
title="My <b>dynamic</b> notification <i>example</i>"
153+
html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
154+
color="success"
155+
autoclose="5000"
156+
ba-notify="dynamic-example-2">View Notification</a>
157+
<ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
158+
</hljs>
159+
</div>
160+
<div class="small-12 grid-content">
161+
<a class="button" href=""
162+
title="My <b>dynamic</b> notification <i>example</i>"
163+
html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
164+
color="success"
165+
autoclose="5000"
166+
ba-notify="dynamic-example-2">View Notification</a>
167+
<ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
168+
</div>
169+
</div>
170+
171+
<hr>
172+
106173
<h3>Sass Mixins</h3>
107174

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

‎js/angular/components/notification/notification-set.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
image="notification.image"
55
notif-id = "notification.id"
66
color="notification.color"
7-
autoclose="notification.autoclose"
8-
>{{ notification.content }}</ba-notification>
9-
</div>
7+
autoclose="notification.autoclose">
8+
<div ng-if="!notification.html">{{ notification.content }}</div>
9+
<div ng-if="notification.html" ng-bind-html="notification.html"></div>
10+
</ba-notification>
11+
</div>

‎js/angular/components/notification/notification-static.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</div>
88
<div class="notification-content">
99
<h1 ng-bind-html="trustedTitle"></h1>
10-
<p ng-transclude></p>
10+
<div ng-transclude></div>
1111
</div>
1212
</div>

‎js/angular/components/notification/notification.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</div>
88
<div class="notification-content">
99
<h1 ng-bind-html="trustedTitle"></h1>
10-
<p ng-transclude></p>
10+
<div ng-transclude></div>
1111
</div>
1212
</div>

‎js/angular/components/notification/notification.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -314,14 +314,15 @@
314314
}
315315
}
316316

317-
baNotify.$inject = ['BaseAppsApi'];
317+
baNotify.$inject = ['BaseAppsApi', '$sce'];
318318

319-
function baNotify(BaseAppsApi) {
319+
function baNotify(BaseAppsApi, $sce) {
320320
var directive = {
321321
restrict: 'A',
322322
scope: {
323323
title: '@?',
324324
content: '@?',
325+
html: '@?',
325326
color: '@?',
326327
image: '@?',
327328
autoclose: '@?'
@@ -336,6 +337,7 @@
336337
BaseAppsApi.publish(attrs.baNotify, {
337338
title: scope.title,
338339
content: scope.content,
340+
html: $sce.trustAsHtml(scope.html),
339341
color: scope.color,
340342
image: scope.image,
341343
autoclose: scope.autoclose

0 commit comments

Comments
 (0)