publishing patch version 2.0.11

base-apps · Sep 4, 2017 · fa34d5a · fa34d5a
1 parent ead507e
commit fa34d5a
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 35 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-base-apps",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "main": [
     "scss/base.scss",
     "dist/js/base-apps.js"

diff --git a/dist/docs/assets/js/app.js b/dist/docs/assets/js/app.js
diff --git a/dist/docs/assets/js/templates.js b/dist/docs/assets/js/templates.js
diff --git a/dist/docs/partials/global-nav.html b/dist/docs/partials/global-nav.html
@@ -1,7 +1,7 @@
 <nav class="global-nav">
   <ul class="title-area">
     <li class="name">
-      <h1><a><strong>Angular Base Apps 2.0.10</strong></a></h1>
+      <h1><a><strong>Angular Base Apps 2.0.11</strong></a></h1>
     </li>
   </ul>
   <ul class="right">

diff --git a/dist/docs/templates/changelog.html b/dist/docs/templates/changelog.html
@@ -53,6 +53,20 @@ <h4>Docs</h4>
 
 <hr>
 -->
+<h3>Version 2.0.11</h3>
+
+<h4>Bug Fixes</h4>
+
+<ul>
+  <li><a href="https://github.com/base-apps/angular-base-apps/issues/95">#95</a>: Allow using HTML as notification content</li>
+</ul>
+
+<h4>Docs</h4>
+
+<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>
+
+<hr>
+
 <h3>Version 2.0.10</h3>
 
 <h4>General</h4>

diff --git a/dist/docs/templates/installation.html b/dist/docs/templates/installation.html
@@ -52,12 +52,12 @@ <h3>CDN</h3>
 
 <hljs language="html">
 <!-- CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.min.css">
 
 <!-- JavaScript -->
-<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.js"></script>
-<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.10/base-apps.min.js"></script>
+<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.js"></script>
+<script src="https://cdn.jsdelivr.net/angular-base-apps/2.0.11/base-apps.min.js"></script>
 </hljs>
 
 </section>
diff --git a/dist/docs/templates/notification.html b/dist/docs/templates/notification.html
@@ -2,7 +2,7 @@
 <h2>Notification</h2>
 <h3 class="subheader">An alert that pins to the corner of the screen when triggered by JavaScript.</h3>
 
-<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>
+<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>
 
 <div class="grid-block">
   <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
   	<a class="button" href="" ba-open="static-example">Static Notification</a>
     <ba-notification-set position="bottom-left" id="test-docs-notifications"></ba-notification-set>
     <ba-notification-static id="static-example" title="My static notification" image="http://www.clipartbest.com/cliparts/acq/X8R/acqX8RdcM.jpeg" position="top left">
-  	  This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!
+  	  <p>This notification is static, it works similarly to a programmatic with some subtle differences. I'll stay here until you close me!</p>
   	</ba-notification-static>
   </div>
 </div>
@@ -35,14 +35,15 @@ <h3>Basic HTML</h3>
 <a class="button" href="" ba-open="my-notify">Static Notification</a>
 <!-- notification content -->
 <ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
-	  <p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
-	</ba-notification-static>
+  <p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
+</ba-notification-static>
 </hljs>
   </div>
   <div class="small-12 medium-6 grid-content">
 		<a class="button" href="" ba-open="my-notify">Static Notification</a>
-		<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.">
-	</ba-notification-static>
+		<ba-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
+      <p>This notification is static, it works similarly to a programmatic with some subtle differences.</p>
+		</ba-notification-static>
   </div>
 </div>
 
@@ -52,16 +53,16 @@ <h3>Advanced HTML</h3>
 <p>You can create a Dynamic Notification with this basic HTML:</p>
 <div class="grid-block">
   <div class="small-12 medium-6 grid-content">
-    <hljs language="html">
-    <!-- notification trigger -->
-    <a class="button" href=""
-    	title="My notification"
-    	content="Notification example"
-    	color="success"
-      autoclose="3000"
-    	ba-notify="main-notifications">Dynamic Notification</a>
-    <ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
-    </hljs>
+<hljs language="html">
+<!-- notification trigger -->
+<a class="button" href=""
+	title="My notification"
+	content="Notification example"
+	color="success"
+  autoclose="3000"
+	ba-notify="main-notifications">Dynamic Notification</a>
+<ba-notification-set id="main-notifications" position="top-left"></ba-notification-set>
+</hljs>
   </div>
   <div class="small-12 medium-6 grid-content">
     <a class="button" href=""
@@ -98,6 +99,72 @@ <h4>Additional Options</h4>
 
 <hr>
 
+<h3>HTML Content</h3>
+
+<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>
+
+<h4>Static Notifications</h4>
+<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>
+
+<div class="grid-block">
+  <div class="small-12 grid-content">
+<hljs language="html">
+<!-- notification trigger -->
+<a class="button" href="" ba-open="static-example-2">Static Notification</a>
+<!-- notification content -->
+<ba-notification-static id="static-example-2" title="My <b>static</b> notification <i>example</i>" image="http://placehold.it/40x40">
+  This notification is static:
+  <ul>
+    <li>it works similarly to a <b>programmatic</b> notification</li>
+    <li>it has some <i>subtle differences</i></li>
+  </ul>
+</ba-notification-static>
+</hljs>
+  </div>
+  <div class="small-12 grid-content">
+		<a class="button" href="" ba-open="static-example-2">View Notification</a>
+		<ba-notification-static
+      id="static-example-2"
+      title="My <b>notification</b> <i>example</i>"
+      image="http://placehold.it/40x40">
+      This notification is static:
+      <ul>
+        <li>it works similarly to a <b>programmatic</b> notification</li>
+        <li>it has some <i>subtle differences</i></li>
+      </ul>
+	  </ba-notification-static>
+  </div>
+</div>
+
+<h4>Dynamic Notifications</h4>
+<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>
+
+<div class="grid-block">
+  <div class="small-12 grid-content">
+<hljs language="html">
+<!-- notification trigger -->
+<a class="button" href=""
+	title="My <b>dynamic</b> notification <i>example</i>"
+  html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
+	color="success"
+  autoclose="5000"
+	ba-notify="dynamic-example-2">View Notification</a>
+<ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
+</hljs>
+  </div>
+  <div class="small-12 grid-content">
+    <a class="button" href=""
+		title="My <b>dynamic</b> notification <i>example</i>"
+		html="Here is a <b>list</b> in my notification: <ul><li>item 1</li><li>item 2</li></ul>"
+		color="success"
+    autoclose="5000"
+		ba-notify="dynamic-example-2">View Notification</a>
+    <ba-notification-set id="dynamic-example-2" position="top-left"></ba-notification-set>
+  </div>
+</div>
+
+<hr>
+
 <h3>Sass Mixins</h3>
 
 <p>Use our mixins to create custom notification styles.</p>

diff --git a/dist/js/base-apps.js b/dist/js/base-apps.js
@@ -2451,14 +2451,15 @@
     }
   }
 
-  baNotify.$inject = ['BaseAppsApi'];
+  baNotify.$inject = ['BaseAppsApi', '$sce'];
 
-  function baNotify(BaseAppsApi) {
+  function baNotify(BaseAppsApi, $sce) {
     var directive = {
       restrict: 'A',
       scope: {
         title: '@?',
         content: '@?',
+        html: '@?',
         color: '@?',
         image: '@?',
         autoclose: '@?'
@@ -2473,6 +2474,7 @@
         BaseAppsApi.publish(attrs.baNotify, {
           title: scope.title,
           content: scope.content,
+          html: $sce.trustAsHtml(scope.html),
           color: scope.color,
           image: scope.image,
           autoclose: scope.autoclose
@@ -3666,9 +3668,12 @@ angular.module('base').run(['$templateCache', function($templateCache) {
     '    image="notification.image"\n' +
     '    notif-id = "notification.id"\n' +
     '    color="notification.color"\n' +
-    '    autoclose="notification.autoclose"\n' +
-    '    >{{ notification.content }}</ba-notification>\n' +
-    '</div>');
+    '    autoclose="notification.autoclose">\n' +
+    '    <div ng-if="!notification.html">{{ notification.content }}</div>\n' +
+    '    <div ng-if="notification.html" ng-bind-html="notification.html"></div>\n' +
+    '  </ba-notification>\n' +
+    '</div>\n' +
+    '');
 }]);
 
 angular.module('base').run(['$templateCache', function($templateCache) {
@@ -3682,7 +3687,7 @@ angular.module('base').run(['$templateCache', function($templateCache) {
     '  </div>\n' +
     '  <div class="notification-content">\n' +
     '    <h1 ng-bind-html="trustedTitle"></h1>\n' +
-    '    <p ng-transclude></p>\n' +
+    '    <div ng-transclude></div>\n' +
     '  </div>\n' +
     '</div>\n' +
     '');
@@ -3699,7 +3704,7 @@ angular.module('base').run(['$templateCache', function($templateCache) {
     '  </div>\n' +
     '  <div class="notification-content">\n' +
     '    <h1 ng-bind-html="trustedTitle"></h1>\n' +
-    '    <p ng-transclude></p>\n' +
+    '    <div ng-transclude></div>\n' +
     '  </div>\n' +
     '</div>\n' +
     '');

diff --git a/dist/js/base-apps.min.js b/dist/js/base-apps.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-base-apps",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "license": "MIT",
   "description": "A responsive, Angular-powered framework for web apps",
   "scripts": {