feat(md-dropdown): allow for "ref" initialization, #164

aurelia-ui-toolkits · Nov 15, 2016 · 9713cca · 9713cca
1 parent 69565d9
commit 9713cca
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/sample/src/samples/dropdown/basic-use.html b/sample/src/samples/dropdown/basic-use.html
@@ -1,5 +1,6 @@
 <template>
   <require from="./dropdown.css"></require>
+  <h5>By id</h5>
   <div class="dropdown-sample">
     <a md-button md-dropdown="activates: dropdown1;">drop me!</a>
     <ul id="dropdown1">
@@ -9,4 +10,14 @@
       <li><a click.trigger="showToast($event)">three</a></li>
     </ul>
   </div>
+  <h5>By reference</h5>
+  <div class="dropdown-sample">
+    <a md-button md-dropdown="ref.bind: dropdown2;">drop me!</a>
+    <ul ref="dropdown2">
+      <li><a click.trigger="showToast($event)">one</a></li>
+      <li><a click.trigger="showToast($event)">two</a></li>
+      <li class="divider"></li>
+      <li><a click.trigger="showToast($event)">three</a></li>
+    </ul>
+  </div>
 </template>
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -7,9 +7,14 @@ import { getBooleanFromAttributeValue } from '../common/attributes';
 @customAttribute('md-dropdown')
 @inject(Element)
 export class MdDropdown {
+  static elementId = 0;
+
   @bindable({
     defaultBindingMode: bindingMode.oneTime
   }) activates = '';
+  @bindable({
+    defaultBindingMode: bindingMode.oneTime
+  }) ref = null;
   @bindable({
     defaultBindingMode: bindingMode.oneTime
   }) alignment = 'left';
@@ -41,11 +46,13 @@ export class MdDropdown {
   }
 
   attached() {
+    this.handleActivateElement();
     this.contentAttributeManager = new AttributeManager(document.getElementById(this.activates));
 
     this.attributeManager.addClasses('dropdown-button');
     this.contentAttributeManager.addClasses('dropdown-content');
-    this.attributeManager.addAttributes({ 'data-activates': this.activates });
+    // this.attributeManager.addAttributes({ 'data-activates': this.activates });
+
     $(this.element).dropdown({
       alignment: this.alignment,
       belowOrigin: getBooleanFromAttributeValue(this.belowOrigin),
@@ -62,4 +69,17 @@ export class MdDropdown {
     this.attributeManager.removeClasses('dropdown-button');
     this.contentAttributeManager.removeClasses('dropdown-content');
   }
+
+  handleActivateElement() {
+    if (this.ref) {
+      let id = this.ref.getAttribute('id');
+      if (!id) {
+        id = `md-dropdown-${MdDropdown.elementId++}`;
+        this.ref.setAttribute('id', id);
+        this.activates = id;
+      }
+      this.id = MdDropdown.elementId++;
+    }
+    this.attributeManager.addAttributes({ 'data-activates': this.activates });
+  }
 }