feat(md-badge): add custom caption support

aurelia-ui-toolkits · Jan 23, 2017 · d0a69c2 · d0a69c2
1 parent 19da074
commit d0a69c2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/sample/src/shared/components.json b/sample/src/shared/components.json
@@ -19,7 +19,8 @@
           "default": true,
           "gist": "1de36c8c3739a233656def9fb66b3ab0"
         },
-        "badges-in-dropdown": "3199e3e3cf436ccadca30fcc4f0b45a2"
+        "badges-in-dropdown": "3199e3e3cf436ccadca30fcc4f0b45a2",
+        "badge-with-custom-caption": "7d087a011cf7a0c3341eae48eb1f4ed6"
       }
     },
     "Button": {

diff --git a/src/badge/badge.js b/src/badge/badge.js
@@ -7,6 +7,7 @@ import { getBooleanFromAttributeValue } from '../common/attributes';
 @inject(Element)
 export class MdBadge {
   @bindable() isNew = false;
+  @bindable() caption = null;
 
   constructor(element) {
     this.element = element;
@@ -17,13 +18,36 @@ export class MdBadge {
     let classes = [
       'badge'
     ];
+
     if (getBooleanFromAttributeValue(this.isNew)) {
       classes.push('new');
     }
+
+    if (this.caption !== null) {
+      this.attributeManager.addAttributes({ 'data-badge-caption': this.caption });
+    }
+
     this.attributeManager.addClasses(classes);
   }
 
   detached() {
     this.attributeManager.removeClasses(['badge', 'new']);
+    this.attributeManager.removeAttributes(['data-badge-caption']);
+  }
+
+  newChanged(newValue) {
+    if (getBooleanFromAttributeValue(newValue)) {
+      this.attributeManager.addClasses('new');
+    } else {
+      this.attributeManager.removeClasses('new');
+    }
+  }
+
+  captionChanged(newValue) {
+    if (newValue !== null) {
+      this.attributeManager.addAttributes({ 'data-badge-caption': newValue });
+    } else {
+      this.attributeManager.removeAttributes(['data-badge-caption']);
+    }
   }
 }