Optimization for mouse click to document: replace heavy bootstrap function clearMenus. Elements with data-toggle=dropdown must have class dropdown-toggle.

This commit is contained in:
Julia Radzhabova 2016-10-19 14:16:46 +03:00
parent a7e603ca5f
commit 4048b849f8
7 changed files with 19 additions and 7 deletions

View file

@ -186,6 +186,16 @@ function getParent($this) {
return $parent && $parent.length ? $parent : $this.parent();
}
function clearMenus() {
$('.dropdown-toggle').each(function (e) {
var $parent = ($(this)).parent();
if (!$parent.hasClass('open')) return;
$parent.trigger(e = $.Event('hide.bs.dropdown'));
if (e.isDefaultPrevented()) return;
$parent.removeClass('open').trigger('hidden.bs.dropdown');
})
}
$(document)
.off('keydown.bs.dropdown.data-api')
.on('keydown.bs.dropdown.data-api', '[data-toggle=dropdown], [role=menu]' , onDropDownKeyDown);
@ -206,9 +216,8 @@ $(document)
}
function onDropDownClick(e) {
if ((e.which == 1 || e.which == undefined) && !!clickDefHandler) {
clickDefHandler(e);
}
if (e.which == 1 || e.which == undefined)
clearMenus();
}
if (!!clickDefHandler) {

View file

@ -1,7 +1,7 @@
<div class="statusbar" style="display:table;">
<div class="status-group dropup">
<label id="label-pages" class="status-label" style="margin-left: 40px;" data-toggle="dropdown"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="label-pages" class="status-label dropdown-toggle" style="margin-left: 40px;" data-toggle="dropdown"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div>

View file

@ -417,6 +417,7 @@ define([
usertip.setContent();
}
(length > 1) ? this.panelUsersBlock.attr('data-toggle', 'dropdown') : this.panelUsersBlock.removeAttr('data-toggle');
this.panelUsersBlock.toggleClass('dropdown-toggle', length > 1);
(length > 1) ? this.panelUsersBlock.off('click') : this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
},

View file

@ -2,7 +2,7 @@
<div class="statusbar" style="display:table;">
<div class="status-group dropup">
<button id="status-btn-preview" type="button" class="btn small btn-toolbar" style="margin-left: 9px;"><span class="btn-icon">&nbsp;</span></button>
<label id="status-label-pages" class="status-label" style="margin-left: 7px;" data-toggle="dropdown"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="status-label-pages" class="status-label dropdown-toggle" style="margin-left: 7px;" data-toggle="dropdown"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div>

View file

@ -78,7 +78,7 @@ define([
'<div class="separator"/>',
'</div>',
'<div class="preview-group dropup">',
'<label id="preview-label-slides" class="status-label" data-toggle="dropdown">Slide 1 of 1</label>',
'<label id="preview-label-slides" class="status-label dropdown-toggle" data-toggle="dropdown">Slide 1 of 1</label>',
'<div id="preview-goto-box" class="dropdown-menu">',
'<label style="float:left;line-height:22px;">' + this.goToSlideText + '</label>',
'<div id="preview-goto-page" style="display:inline-block;"></div>',

View file

@ -321,6 +321,7 @@ define([
usertip.setContent();
}
(length > 1) ? this.panelUsersBlock.attr('data-toggle', 'dropdown') : this.panelUsersBlock.removeAttr('data-toggle');
this.panelUsersBlock.toggleClass('dropdown-toggle', length > 1);
(length > 1) ? this.panelUsersBlock.off('click') : this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
},

View file

@ -300,7 +300,7 @@ define([
});
});
this.tabbar.$el.append('<div class="menu-backdrop" data-toggle="dropdown" style="width:0; height:0;"/>');
this.tabbar.$el.append('<div class="menu-backdrop dropdown-toggle" data-toggle="dropdown" style="width:0; height:0;"/>');
this.tabMenu.render(this.tabbar.$el);
this.tabMenu.on('show:after', _.bind(this.onTabMenuAfterShow, this));
this.tabMenu.on('hide:after', _.bind(this.onTabMenuAfterHide, this));
@ -445,6 +445,7 @@ define([
usertip.setContent();
}
(length > 1) ? this.panelUsersBlock.attr('data-toggle', 'dropdown') : this.panelUsersBlock.removeAttr('data-toggle');
this.panelUsersBlock.toggleClass('dropdown-toggle', length > 1);
(length > 1) ? this.panelUsersBlock.off('click') : this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
},