fix(calendar): Make calendar directive IDs unique

Prefix all calendar id attributes with the directive scope $id. This makes it possible to include multiple calendar instances on the same page.
angular · Aug 13, 2015 · cde67d6 · cde67d6
1 parent 8a8824a
commit cde67d6
Showing 1 changed file with 28 additions and 17 deletions.
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -9,7 +9,6 @@
   angular.module('material.components.calendar', ['material.core'])
       .directive('mdCalendar', calendarDirective);
 
-  // TODO(jelbourn): Date cell IDs need to be unique per-calendar.
   // TODO(jelbourn): internationalize a11y announcements.
 
   // TODO(jelbourn): Update the selected date on [click, tap, enter]
@@ -30,6 +29,9 @@
   // TODO(jelbourn): read-only state.
 
   function calendarDirective() {
+    // Generate a unique ID for each instance of the directive.
+    var directiveId = 0;
+
     return {
       template:
         '<div>' +
@@ -48,6 +50,7 @@
       link: function(scope, element, attrs, controllers) {
         var ngModelCtrl = controllers[0];
         var mdCalendarCtrl = controllers[1];
+        mdCalendarCtrl.directiveId = directiveId++;
         mdCalendarCtrl.configureNgModel(ngModelCtrl);
       }
     };
@@ -71,16 +74,6 @@
   /** Class applied to the cell for today. */
   var TODAY_CLASS = 'md-calendar-date-today';
 
-
-  /**
-   * Gets a unique identifier for a date for internal purposes. Not to be displayed.
-   * @param {Date} date
-   * @returns {string}
-   */
-  function getDateId(date) {
-    return 'md-' + date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate();
-  }
-
   /**
    * Controller for the mdCalendar component.
    * @ngInject @constructor
@@ -255,7 +248,7 @@
       self.changeDisplayDate(date).then(function() {
         self.focusDateElement(date);
       });
-    })
+    });
   };
 
   /**
@@ -295,7 +288,7 @@
    * @param {Date} date
    */
   CalendarCtrl.prototype.focusDateElement = function(date) {
-    var cellId = getDateId(date);
+    var cellId = this.getDateId_(date);
     var cell = this.calendarElement.querySelector('#' + cellId);
     cell.focus();
   };
@@ -481,15 +474,15 @@
 
       // Remove the selected class from the previously selected date, if any.
       if (self.selectedDate) {
-        var prevDateCell = self.calendarElement.querySelector('#' + getDateId(self.selectedDate));
+        var prevDateCell = self.calendarElement.querySelector('#' + self.getDateId_(self.selectedDate));
         if (prevDateCell) {
           prevDateCell.classList.remove(SELECTED_DATE_CLASS);
         }
       }
 
       // Apply the select class to the new selected date if it is set.
       if (date) {
-        var dateCell = self.calendarElement.querySelector('#' + getDateId(date));
+        var dateCell = self.calendarElement.querySelector('#' + self.getDateId_(date));
         if (dateCell) {
           dateCell.classList.add(SELECTED_DATE_CLASS);
         }
@@ -544,7 +537,7 @@
    * Highlight the cell corresponding to today if it is on the screen.
    */
   CalendarCtrl.prototype.highlightToday = function() {
-    var todayCell = this.calendarElement.querySelector('#' + getDateId(this.today));
+    var todayCell = this.calendarElement.querySelector('#' + this.getDateId_(this.today));
     if (todayCell) {
       todayCell.classList.add(TODAY_CLASS);
     }
@@ -618,7 +611,7 @@
       //selectionIndicator.setAttribute('aria-label', '');
 
       cell.setAttribute('tabindex', '-1');
-      cell.id = getDateId(opt_date);
+      cell.id = this.getDateId_(opt_date);
       cell.dataset.timestamp = opt_date.getTime();
       cell.addEventListener('click', this.cellClickHandler);
     }
@@ -696,4 +689,22 @@
 
     return monthBody;
   };
+
+
+  /**
+   * Gets an identifier for a date unique to the calendar instance for internal
+   * purposes. Not to be displayed.
+   * @param {Date} date
+   * @returns {string}
+   * @private
+   */
+  CalendarCtrl.prototype.getDateId_ = function (date) {
+    return [
+      'md',
+      this.directiveId,
+      date.getFullYear(), 
+      date.getMonth(), 
+      date.getDate()
+    ].join('-');
+  };
 })();