Alert : use same data-role value for all collapsible actions

This commit is contained in:
Pierre Goiffon
2020-12-17 09:08:40 +01:00
parent ceb48c2ead
commit dbece17235
2 changed files with 7 additions and 21 deletions

View File

@@ -33,9 +33,7 @@ $(function()
js_selectors:
{
close_button: '[data-role="ibo-alert--close-button"]',
minimize_button: '[data-role="ibo-alert--minimize-button"]',
maximize_button: '[data-role="ibo-alert--maximize-button"]',
title: '[data-role="ibo-alert--title"]',
collapse_toggler: '[data-role="ibo-alert--collapse-toggler"]',
},
// the constructor
@@ -53,26 +51,14 @@ $(function()
this.element.find(this.js_selectors.close_button).on('click', function (oEvent) {
me._onCloseButtonClick(oEvent);
});
this.element.find(this.js_selectors.minimize_button).on('click', function (oEvent) {
me._onMinimizeButtonClick(oEvent);
});
this.element.find(this.js_selectors.maximize_button).on('click', function (oEvent) {
me._onMaximizeButtonClick(oEvent);
});
this.element.find(this.js_selectors.title).on('click', function (oEvent) {
me._onToggleVisibility(oEvent);
this.element.find(this.js_selectors.collapse_toggler).on('click', function (oEvent) {
me._onToggleCollapse(oEvent);
});
},
_onCloseButtonClick: function (oEvent) {
this.element.hide();
},
_onMinimizeButtonClick: function (oEvent) {
this.element.removeClass(this.css_classes.opened);
},
_onMaximizeButtonClick: function (oEvent) {
this.element.addClass(this.css_classes.opened);
},
_onToggleVisibility: function (oEvent) {
_onToggleCollapse: function (oEvent) {
this.element.toggleClass(this.css_classes.opened);
}
})

View File

@@ -1,11 +1,11 @@
<div id="{{ oUIBlock.GetId() }}"
class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}">
<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--maximize-button"><i
<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--collapse-toggler"><i
class="fas fa-caret-down"></i></div>
<div class="ibo-alert--action-button ibo-alert--minimize-button" data-role="ibo-alert--minimize-button"><i
<div class="ibo-alert--action-button ibo-alert--minimize-button" data-role="ibo-alert--collapse-toggler"><i
class="fas fa-caret-up"></i>
</div>
<div class="ibo-alert--action-button ibo-alert--close-button" data-role="ibo-alert--close-button"><i class="fas fa-times"></i></div>
<div class="ibo-alert--title" data-role="ibo-alert--title">{{ oUIBlock.GetTitle() }}</div>
<div class="ibo-alert--title" data-role="ibo-alert--collapse-toggler">{{ oUIBlock.GetTitle() }}</div>
<div class="ibo-alert--body">{{ oUIBlock.GetContent()|raw }}</div>
</div>