Skip to content
Permalink
Browse files

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

  • Loading branch information...
ryanwyllie authored and markn86 committed Aug 17, 2016
1 parent b7e68d1 commit 6af2bd09858490bd92188e5f165f56d76aa72db6
@@ -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 }}
@@ -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');
};

/**
@@ -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"]',
};

/**
@@ -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');
};

/**
@@ -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"]',
};

/**
@@ -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]',
};
@@ -35,6 +35,7 @@

}}
<div class="content-item-container {{^isread}}unread{{/isread}}"
data-region="message-content-item-container"
role="listitem"
tabindex="0">

@@ -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}}
@@ -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}}
@@ -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"
@@ -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}}
@@ -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>

0 comments on commit 6af2bd0

Please sign in to comment.
You can’t perform that action at this time.