MDL-54682 message: update js to use data values in selectors

lib/templates/popover_region.mustache

@@ -33,8 +33,11 @@
     }
 
 }}
-<div class="popover-region popover-region-{{uniqid}} collapsed {{$classes}}{{/classes}}" {{$attributes}}{{/attributes}}>
+<div class="popover-region popover-region-{{uniqid}} collapsed {{$classes}}{{/classes}}"
+    {{$attributes}}{{/attributes}}
+    data-region="popover-region">
     <div class="popover-region-toggle"
+        data-region="popover-region-toggle"
         aria-role="button"
         aria-controls="popover-region-container-{{uniqid}}"
         aria-haspopup="true"
@@ -45,16 +48,17 @@
     <div {{$containerattributes}}{{/containerattributes}}
         id="popover-region-container-{{uniqid}}"
         class="popover-region-container"
+        data-region="popover-region-container"
         aria-expanded="false"
         aria-hidden="true"
         aria-label="{{$containerlabel}}{{/containerlabel}}"
         role="region">
         <div class="popover-region-header-container">
-            <h3 class="popover-region-header-text">{{$headertext}}{{/headertext}}</h3>
-            <div class="popover-region-header-actions">{{$headeractions}}{{/headeractions}}</div>
+            <h3 class="popover-region-header-text" data-region="popover-region-header-text">{{$headertext}}{{/headertext}}</h3>
+            <div class="popover-region-header-actions" data-region="popover-region-header-actions">{{$headeractions}}{{/headeractions}}</div>
         </div>
-        <div class="popover-region-content-container">
-            <div class="popover-region-content">
+        <div class="popover-region-content-container" data-region="popover-region-content-container">
+            <div class="popover-region-content" data-region="popover-region-content">
                 {{$content}}{{/content}}
             </div>
             {{> core/loading }}

message/amd/src/message_popover_controller.js

@@ -32,12 +32,11 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
             PopoverController, MessageRepo, URL) {
 
     var SELECTORS = {
-        MARK_ALL_READ_BUTTON: '.mark-all-read-button',
-        USER_ID: 'data-userid',
-        MODE_TOGGLE: '.popover-region-header-actions .fancy-toggle',
-        CONTENT: '.messages',
-        CONTENT_ITEM_CONTAINER: '.content-item-container',
-        EMPTY_MESSAGE: '.empty-message',
+        MARK_ALL_READ_BUTTON: '[data-action="mark-all-read"]',
+        CONTENT: '[data-region="messages"]',
+        CONTENT_ITEM_CONTAINER: '[data-region="message-content-item-container"]',
+        EMPTY_MESSAGE: '[data-region="empty-message"]',
+        COUNT_CONTAINER: '[data-region="count-container"]',
     };
 
     /**
@@ -54,7 +53,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
         this.markAllReadButton = this.root.find(SELECTORS.MARK_ALL_READ_BUTTON);
         this.blockNonContactsButton = this.root.find(SELECTORS.BLOCK_NON_CONTACTS_BUTTON);
         this.content = this.root.find(SELECTORS.CONTENT);
-        this.userId = this.root.attr(SELECTORS.USER_ID);
+        this.userId = this.root.attr('data-userid');
         this.limit = 20;
         this.offset = 0;
         this.loadedAll = false;
@@ -125,7 +124,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
      * @method renderUnreadCount
      */
     MessagePopoverController.prototype.renderUnreadCount = function() {
-        var element = this.root.find('.count-container');
+        var element = this.root.find(SELECTORS.COUNT_CONTAINER);
 
         if (this.unreadCount) {
             element.text(this.unreadCount);
@@ -141,7 +140,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
      * @method hideUnreadCount
      */
     MessagePopoverController.prototype.hideUnreadCount = function() {
-        this.root.find('.count-container').addClass('hidden');
+        this.root.find(SELECTORS.COUNT_CONTAINER).addClass('hidden');
     };
 
     /**

message/amd/src/message_preferences.js

@@ -28,9 +28,9 @@ define(['jquery', 'core/ajax', 'core/notification',
         function($, Ajax, Notification, ListController, CustomEvents) {
 
     var SELECTORS = {
-        PREFERENCES_CONTAINER: '.preferences-container',
-        BLOCK_NON_CONTACTS: '.block-non-contacts-container [data-block-non-contacts]',
-        BLOCK_NON_CONTACTS_CONTAINER: '.block-non-contacts-container',
+        PREFERENCES_CONTAINER: '[data-region="preferences-container"]',
+        BLOCK_NON_CONTACTS: '[data-region="block-non-contacts-container"] [data-block-non-contacts]',
+        BLOCK_NON_CONTACTS_CONTAINER: '[data-region="block-non-contacts-container"]',
     };
 
     /**

message/amd/src/notification_popover_controller.js

@@ -32,19 +32,19 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
             PopoverController, NotificationRepo) {
 
     var SELECTORS = {
-        MARK_ALL_READ_BUTTON: '.mark-all-read-button',
-        USER_ID: 'data-userid',
-        MODE_TOGGLE: '.popover-region-header-actions .fancy-toggle',
-        UNREAD_NOTIFICATIONS_CONTAINER: '.unread-notifications',
-        ALL_NOTIFICATIONS_CONTAINER: '.all-notifications',
-        BLOCK_BUTTON: '.block-button',
-        SHOW_BUTTON: '.show-button',
-        HIDE_BUTTON: '.hide-button',
-        CONTENT_ITEM_CONTAINER: '.content-item-container',
-        EMPTY_MESSAGE: '.empty-message',
-        CONTENT_BODY_SHORT: '.content-body-short',
-        CONTENT_BODY_FULL: '.content-body-full',
+        MARK_ALL_READ_BUTTON: '[data-action="mark-all-read"]',
+        MODE_TOGGLE: '[data-region="popover-region-header-actions"] [data-region="fancy-toggle"]',
+        UNREAD_NOTIFICATIONS_CONTAINER: '[data-region="unread-notifications"]',
+        ALL_NOTIFICATIONS_CONTAINER: '[data-region="all-notifications"]',
+        BLOCK_BUTTON: '[data-action="block-button"]',
+        SHOW_BUTTON: '[data-action="show-button"]',
+        HIDE_BUTTON: '[data-action="hide-button"]',
+        CONTENT_ITEM_CONTAINER: '[data-region="notification-content-item-container"]',
+        EMPTY_MESSAGE: '[data-region="empty-message"]',
+        CONTENT_BODY_SHORT: '[data-region="content-body-short"]',
+        CONTENT_BODY_FULL: '[data-region="content-body-full"]',
         LINK_URL: '[data-link-url]',
+        COUNT_CONTAINER: '[data-region="count-container"]',
     };
 
     var PROCESSOR_NAME = 'popup';
@@ -62,7 +62,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
 
         this.markAllReadButton = this.root.find(SELECTORS.MARK_ALL_READ_BUTTON);
         this.unreadCount = 0;
-        this.userId = this.root.attr(SELECTORS.USER_ID);
+        this.userId = this.root.attr('data-userid');
         this.modeToggle = this.root.find(SELECTORS.MODE_TOGGLE);
         this.state = {
             unread: {
@@ -248,7 +248,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
      * @method renderUnreadCount
      */
     NotificationPopoverController.prototype.renderUnreadCount = function() {
-        var element = this.root.find('.count-container');
+        var element = this.root.find(SELECTORS.COUNT_CONTAINER);
 
         if (this.unreadCount) {
             element.text(this.unreadCount);
@@ -264,7 +264,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
      * @method hideUnreadCount
      */
     NotificationPopoverController.prototype.hideUnreadCount = function() {
-        this.root.find('.count-container').addClass('hidden');
+        this.root.find(SELECTORS.COUNT_CONTAINER).addClass('hidden');
     };
 
     /**

message/amd/src/notification_processor_settings.js

@@ -28,7 +28,7 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/fragment', 'core/templ
 
     var SELECTORS = {
         PROCESSOR: '[data-processor-name]',
-        PREFERENCE_ROW: '.preference-row',
+        PREFERENCE_ROW: '[data-region="preference-row"]',
     };
 
     /**

message/amd/src/preferences_notifications_list_controller.js

@@ -29,10 +29,10 @@ define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_eve
         function($, Ajax, Notification, CustomEvents, NotificationPreference, NotificationProcessorSettings) {
 
     var SELECTORS = {
-        DISABLE_NOTIFICATIONS: '.disable-notification-container [data-disable-notifications]',
-        DISABLE_NOTIFICATIONS_CONTAINER: '.disable-notification-container',
+        DISABLE_NOTIFICATIONS: '[data-region="disable-notification-container"] [data-disable-notifications]',
+        DISABLE_NOTIFICATIONS_CONTAINER: '[data-region="disable-notification-container"]',
         PREFERENCE: '[data-state]',
-        PREFERENCE_ROW: '.preference-row',
+        PREFERENCE_ROW: '[data-region="preference-row"]',
         PREFERENCE_INPUT: '[data-state] input',
         PROCESSOR_SETTING: '[data-processor-setting]',
     };

message/templates/message_content_item.mustache

@@ -35,6 +35,7 @@
 
 }}
 <div class="content-item-container {{^isread}}unread{{/isread}}"
+    data-region="message-content-item-container"
     role="listitem"
     tabindex="0">
 

message/templates/message_popover.mustache

@@ -40,7 +40,7 @@
     {{$togglelabel}}{{#str}} showmessagewindownonew, message {{/str}}{{/togglelabel}}
     {{$togglecontent}}
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
-        <div class="count-container hidden"></div>
+        <div class="count-container hidden" data-region="count-container"></div>
     {{/togglecontent}}
 
     {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
@@ -50,6 +50,7 @@
         <a class="mark-all-read-button"
             href="#"
             role="button"
+            data-action="mark-all-read"
             data-toggle="tooltip"
             data-placement="top"
             data-original-title="{{#str}} markallread {{/str}}">
@@ -65,8 +66,8 @@
     {{/headeractions}}
 
     {{$content}}
-        <div class="messages" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
-        <div class="empty-message" tabindex="0">{{#str}} nomessagesfound, message {{/str}}</div>
+        <div class="messages" data-region="messages" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
+        <div class="empty-message" data-region="empty-message" tabindex="0">{{#str}} nomessagesfound, message {{/str}}</div>
     {{/content}}
 {{/ core/popover_region }}
 {{#js}}

message/templates/message_preferences.mustache

@@ -77,7 +77,7 @@
 }}
 <div class="preferences-page-container">
     <h2>{{#str}} messagepreferences, message {{/str}}</h2>
-    <div class="block-non-contacts-container checkbox-container">
+    <div class="checkbox-container" data-region="block-non-contacts-container">
         <input id="block-non-contacts"
                 type="checkbox"
                 data-user-id="{{userid}}"
@@ -87,7 +87,9 @@
         <label for="block-non-contacts">{{#str}} blocknoncontacts, message {{/str}}</label>
         {{> core/loading }}
     </div>
-    <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
+    <div class="preferences-container {{#disableall}}disabled{{/disableall}}"
+        data-user-id="{{userid}}"
+        data-region="preferences-container">
         <table class="table table-hover preference-table">
             <tbody>
                 {{#components}}
@@ -104,7 +106,7 @@
                     </tr>
                     {{#notifications}}
                         {{#processors}}
-                            <tr class="preference-row" data-preference-key="{{preferencekey}}">
+                            <tr class="preference-row" data-region="preference-row" data-preference-key="{{preferencekey}}">
                                 <td class="preference-name">{{displayname}}</td>
                                 <td {{^userconfigured}}class="disabled"{{/userconfigured}} data-processor-name="{{name}}">
                                     {{#locked}}

message/templates/notification_content_item.mustache

@@ -35,6 +35,7 @@
 
 }}
 <div class="content-item-container"
+    data-region="notification-content-item-container"
     role="listitem"
     aria-expanded="false"
     aria-label="{{subject}}"
@@ -48,13 +49,13 @@
             <h3 {{#userfromprofileurl}}data-link-url="{{{.}}}" role="link"{{/userfromprofileurl}}>{{userfromfullname}}</h3>
         </div>
         <div class="content-item-body">
-            <div class="content-body-short">
+            <div class="content-body-short" data-region="content-body-short">
                 <div class="notification-image">
                     <img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
                 </div>
                 <p class="notification-message">{{subject}}</p>
             </div>
-            <div class="content-body-full" aria-hidden="true">
+            <div class="content-body-full" aria-hidden="true" data-region="content-body-full">
                 <pre>{{fullmessage}}</pre>
             </div>
         </div>
@@ -66,6 +67,7 @@
         {{#preferenceenabled}}
             {{#preference}}
                 <span class="block-button"
+                    data-action="block-button"
                     data-preference-key="{{key}}"
                     data-preference-loggedin="{{loggedin}}"
                     data-preference-loggedoff="{{loggedoff}}">
@@ -76,12 +78,14 @@
         {{/preferenceenabled}}
         <div class="expand-buttons">
             <span class="show-button"
+                data-action="show-button"
                 tabindex="0"
                 role="button"
                 aria-label="{{#str}} expandnotification, message {{/str}}">
                 {{#pix}} t/sort_desc {{/pix}}
             </span>
             <span class="hide-button"
+                data-action="hide-button"
                 tabindex="0"
                 role="button"
                 aria-hidden="true"

message/templates/notification_popover.mustache

@@ -40,20 +40,24 @@
     {{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
     {{$togglecontent}}
         {{#pix}} i/notifications, core, {{#str}} togglenotificationmenu, message {{/str}} {{/pix}}
-        <div class="count-container hidden"></div>
+        <div class="count-container hidden" data-region="count-container"></div>
     {{/togglecontent}}
 
     {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
 
     {{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
     {{$headeractions}}
-        <div class="fancy-toggle on" tabindex="0" aria-label="{{#str}} showallnotifications, message {{/str}}">
+        <div class="fancy-toggle on"
+            data-region="fancy-toggle"
+            tabindex="0"
+            aria-label="{{#str}} showallnotifications, message {{/str}}">
             <div class="slider-container"><div class="slider"></div></div>
             <div class="off-text">{{#str}} all {{/str}}</div>
             <div class="on-text">{{#str}} new {{/str}}</div>
         </div>
         <a class="mark-all-read-button"
             href="#"
+            data-action="mark-all-read"
             data-toggle="tooltip"
             data-placement="top"
             data-original-title="{{#str}} markallread {{/str}}"
@@ -70,10 +74,20 @@
     {{/headeractions}}
 
     {{$content}}
-        <div class="all-notifications" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
-        <div class="empty-message" tabindex="0">{{#str}} nonotifications, message {{/str}}</div>
-        <div class="unread-notifications" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
-        <div class="empty-message" tabindex="0">{{#str}} nonewnotifications, message {{/str}}</div>
+        <div class="all-notifications"
+            data-region="all-notifications"
+            role="log"
+            aria-busy="false"
+            aria-atomic="false"
+            aria-relevant="additions"></div>
+        <div class="empty-message" tabindex="0" data-region="empty-message">{{#str}} nonotifications, message {{/str}}</div>
+        <div class="unread-notifications"
+            data-region="unread-notifications"
+            role="log"
+            aria-busy="false"
+            aria-atomic="false"
+            aria-relevant="additions"></div>
+        <div class="empty-message" tabindex="0" data-region="empty-message">{{#str}} nonewnotifications, message {{/str}}</div>
     {{/content}}
 {{/ core/popover_region }}
 {{#js}}

message/templates/preferences_notifications_list.mustache

@@ -77,7 +77,7 @@
 }}
 <div class="preferences-page-container">
     <h2>{{#str}} notificationpreferences, message {{/str}}</h2>
-    <div class="disable-notification-container checkbox-container">
+    <div class="checkbox-container" data-region="disable-notification-container">
         <input id="disable-notifications"
            type="checkbox"
            data-disable-notifications
@@ -133,7 +133,7 @@
                         {{/processors}}
                     </tr>
                     {{#notifications}}
-                        <tr class="preference-row" data-preference-key="{{preferencekey}}">
+                        <tr class="preference-row" data-region="preference-row" data-preference-key="{{preferencekey}}">
                             <td class="preference-name">
                                 {{displayname}}
                             </td>