Optimization for mouse click to document: replace heavy bootstrap function...

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

apps/common/main/lib/extend/Bootstrap.js

@@ -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) {

apps/documenteditor/main/app/template/StatusBar.template

 
 <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>

apps/documenteditor/main/app/view/Statusbar.js

@@ -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));
             },
 

apps/presentationeditor/main/app/template/StatusBar.template

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

apps/presentationeditor/main/app/view/DocumentPreview.js

@@ -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>',

apps/presentationeditor/main/app/view/Statusbar.js

@@ -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));
             },
 

apps/spreadsheeteditor/main/app/view/Statusbar.js

@@ -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));
             },