[DE] Try to combine different types of toolbar collapse

apps/common/main/lib/component/Mixtbar.js

@@ -52,6 +52,7 @@ define([
         var $scrollL;
         var optsFold = {timeout: 2000};
         var config = {};
+        var btnsMore = [];
 
         var onScrollTabs = function(opts, e) {
             var sv = $boxTabs.scrollLeft();
@@ -126,7 +127,9 @@ define([
 
                 $boxTabs = me.$('.tabs > ul');
                 me.$tabs = $boxTabs.find('> li');
-                me.$panels = me.$('.box-panels > .panel');
+                me.$boxpanels = me.$('.box-panels');
+                me.$panels = me.$boxpanels.find('> .panel');
+
                 optsFold.$bar = me.$('.toolbar');
                 var $scrollR = me.$('.tabs .scroll.right');
                 $scrollL = me.$('.tabs .scroll.left');
@@ -236,6 +239,7 @@ define([
                 }
 
                 this.processPanelVisible();
+                // this.resizeToolbar();
             },
 
             onTabClick: function (e) {
@@ -286,11 +290,13 @@ define([
                 if ( tab ) {
                     me.$tabs.removeClass('active');
                     me.$panels.removeClass('active');
+                    me.hideMoreBtns();
 
                     var panel = this.$panels.filter('[data-tab=' + tab + ']');
                     if ( panel.length ) {
                         this.lastPanel = tab;
                         panel.addClass('active');
+                        me.setMoreButton(tab, panel);
                     }
 
                     if ( panel.length ) {
@@ -449,6 +455,7 @@ define([
                             }
                         }
                     }
+                    me.resizeToolbar();
                 };
 
                 if ( now === true ) _fc(); else
@@ -477,6 +484,239 @@ define([
                     this.$tabs.find('> a[data-tab=' + tab + ']').parent().css('display', visible ? '' : 'none');
                     this.onResize();
                 }
+            },
+
+            setMoreButton: function(tab, panel) {
+                if (!btnsMore[tab]) {
+                    var box = $('<div class="more-box" style="position: absolute;right: 0; padding-left: 12px;display: none;">' +
+                        '<div class="separator long" style="position: relative;display: table-cell;"></div>' +
+                        '<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
+                        '</div>');
+                    panel.append(box);
+                    btnsMore[tab] = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top dropdown-manual',
+                        caption: 'More',
+                        iconCls: 'btn-insertchart',
+                        enableToggle: true
+                    });
+                    btnsMore[tab].render(box.find('.slot-btn-more'));
+                    btnsMore[tab].on('toggle', function(btn, state, e) {
+                        Common.NotificationCenter.trigger('more:toggle', btn, state);
+                    });
+                    var moreContainer = $('<div class="dropdown-menu more-container" style="min-width:auto; padding: 5px 10px; background: #f1f1f1; border-radius: 0;z-index:999;"><div style="display: inline;"></div></div>');
+                    optsFold.$bar.append(moreContainer);
+                    btnsMore[tab].panel = moreContainer.find('div');
+                }
+                this.$moreBar = btnsMore[tab].panel;
+                this.resizeToolbar(true);
+            },
+
+            resizeToolbar: function(reset) {
+                var activePanel = this.$panels.filter('.active'),
+                    more_section = activePanel.find('.more-box'),
+                    more_section_width = parseInt(more_section.css('width')) || 0,
+                    boxpanels_offset = this.$boxpanels.offset(),
+                    boxpanels_width = this.$boxpanels.width(),
+                    delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1;
+                this._prevBoxWidth = boxpanels_width;
+                more_section.is(':visible') && (boxpanels_width -= more_section_width);
+
+                var boxpanels_right = boxpanels_offset.left + boxpanels_width;
+
+                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
+                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
+                }
+
+                if ((reset || delta<0) && activePanel.width() > boxpanels_width) {
+                    if (!more_section.is(':visible')) {
+                        more_section.css('display', "");
+                        boxpanels_width = this.$boxpanels.width() - parseInt(more_section.css('width'));
+                        boxpanels_right = boxpanels_offset.left + boxpanels_width;
+                    }
+
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = this.$moreBar.children();
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[0]);
+                        if (prevchild.hasClass('separator'))
+                            last_separator = prevchild;
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = activePanel.find('> div:not(.more-box)');
+                    var need_break = false;
+                    for (var i=items.length-1; i>=0; i--) {
+                        var item = $(items[i]);
+                        if (item.hasClass('group')) {
+                            var offset = item.offset(),
+                                item_width = item.width(),
+                                children = item.children();
+                            if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
+                                item.attr('inner-width', item_width);
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    child.attr('inner-width', child.width());
+                                }
+                            }
+                            if ((offset.left > boxpanels_right || children.length==1) && item.attr('group-state') != 'open') {
+                                // move group
+                                this.$moreBar.prepend(item);
+                                if (last_separator) {
+                                    last_separator.css('display', '');
+                                }
+                            } else if ( offset.left+item_width > boxpanels_right ) {
+                                // move buttons from group
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    if (child.hasClass('.elset')) {
+                                        this.$moreBar.prepend(item);
+                                        if (last_separator) {
+                                            last_separator.css('display', '');
+                                        }
+                                        break;
+                                    } else {
+                                        var child_offset = child.offset(),
+                                            child_width = child.width();
+                                        if (child_offset.left+child_width>boxpanels_right) {
+                                            if (!last_group) {
+                                                last_group = $('<div class="group"></div>');
+                                                this.$moreBar.prepend(last_group);
+                                                if (last_separator) {
+                                                    last_separator.css('display', '');
+                                                }
+                                            }
+                                            last_group.prepend(child);
+                                        } else {
+                                            need_break = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (item.children().length<1) { // all buttons are moved
+                                    item.remove();
+                                    last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                    last_group = null;
+                                } else {
+                                    last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                }
+                                if (need_break)
+                                    break;
+                            } else {
+                                break;
+                            }
+                            last_separator = null;
+                        } else if (item.hasClass('separator')) {
+                            this.$moreBar.prepend(item);
+                            item.css('display', 'none');
+                            last_separator = item;
+                        }
+                    }
+                } else if ((reset || delta>0) && more_section.is(':visible')) {
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = activePanel.find('> div:not(.more-box)');
+                    var last_width = 0;
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[prevchild.length-1]);
+                        if (prevchild.hasClass('separator')) {
+                            last_separator = prevchild;
+                            last_width = 13;
+                        }
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = this.$moreBar.children();
+                    var active_width = activePanel.width();
+
+                    if (items.length>0) {
+                        // from more panel to toolbar
+                        for (var i=0; i<items.length; i++) {
+                            var item = $(items[i]);
+                            active_width = activePanel.width();
+                            if (item.hasClass('group')) {
+                                var islast = false;
+                                if (this.$moreBar.children().filter('.group').length == 1) {
+                                    boxpanels_width = this.$boxpanels.width();
+                                    islast = true;
+                                }
+
+                                var item_width = parseInt(item.attr('inner-width') || 0);
+                                if (active_width + last_width + item_width < boxpanels_width && item.attr('group-state') != 'open') {
+                                    // move group
+                                    more_section.before(item);
+                                    if (last_separator) {
+                                        last_separator.css('display', '');
+                                    }
+                                    if (this.$moreBar.children().filter('.group').length == 0) {
+                                        this.hideMoreBtns();
+                                        more_section.css('display', "none");
+                                    }
+                                } else if ( active_width + last_width < boxpanels_width ) {
+                                    // move buttons from group
+                                    var children = item.children();
+                                    boxpanels_width = this.$boxpanels.width() - more_section_width;
+                                    for (var j=0; j<children.length; j++) {
+                                        if (islast && j==children.length-1)
+                                            boxpanels_width = this.$boxpanels.width();
+                                        active_width = activePanel.width();
+                                        var child = $(children[j]);
+                                        if (child.hasClass('.elset')) { // don't add group - no enough space
+                                            break;
+                                        } else {
+                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? 12 : 0);
+                                            if (active_width+last_width+child_width<boxpanels_width) {
+                                                if (!last_group) {
+                                                    last_group = $('<div class="group"></div>');
+                                                    more_section.before(last_group);
+                                                    if (last_separator) {
+                                                        last_separator.css('display', '');
+                                                    }
+                                                }
+                                                last_group.append(child);
+                                            } else {
+                                                need_break = true;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (item.children().length<1) { // all buttons are moved
+                                        item.remove();
+                                        last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                        last_group = null;
+                                        if (this.$moreBar.children().filter('.group').length == 0) {
+                                            this.hideMoreBtns();
+                                            more_section.css('display', "none");
+                                        }
+                                    } else {
+                                        last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                    }
+                                    if (need_break)
+                                        break;
+                                } else {
+                                    break;
+                                }
+                                last_separator = null; last_width = 0;
+                            } else if (item.hasClass('separator')) {
+                                more_section.before(item);
+                                item.css('display', 'none');
+                                last_separator = item;
+                                last_width = 13;
+                            }
+                        }
+                    } else {
+                        this.hideMoreBtns();
+                        more_section.css('display', "none");
+                    }
+                }
+            },
+
+            hideMoreBtns: function() {
+                for (var btn in btnsMore) {
+                    btnsMore[btn] && btnsMore[btn].toggle(false);
+                }
             }
         };
     }()));

apps/documenteditor/main/app/controller/Toolbar.js

@@ -364,6 +364,7 @@ define([
             Common.Gateway.on('setmailmergerecipients',                 _.bind(this.setMailMergeRecipients, this));
             $('#id-toolbar-menu-new-control-color').on('click',         _.bind(this.onNewControlsColor, this));
             toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this));
+            Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
 
             this.onSetupCopyStyleButton();
             this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled());
@@ -3325,6 +3326,32 @@ define([
             })).show();
         },
 
+        onMoreToggle: function(btn, state, e) {
+            (state) ? this.onMoreShow(btn, e) : this.onMoreHide(btn, e);
+        },
+
+        onMoreHide: function(btn, e) {
+            var moreContainer = btn.panel.parent();
+            if (btn.pressed) {
+                btn.toggle(false, true);
+            }
+            if (moreContainer.is(':visible')) {
+                moreContainer.hide();
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn);
+            }
+        },
+
+        onMoreShow: function(btn, e) {
+            var moreContainer = btn.panel.parent();
+            var target = btn.$el,
+                showxy = target.offset(),
+                right = Common.Utils.innerWidth() - showxy.left - target.width(),
+                top = showxy.top + target.height();
+
+            moreContainer.css({right: right, left: 'auto', top : top});
+            moreContainer.show();
+        },
+
         textEmptyImgUrl                            : 'You need to specify image URL.',
         textWarning                                : 'Warning',
         textFontSizeErr                            : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 300',

apps/documenteditor/main/app/template/Toolbar.template

@@ -27,7 +27,7 @@
             </div>
             <div class="separator long"></div>
         </section>
-        <section class="box-panels">
+        <section class="box-panels" style="overflow: hidden;">
             <section class="panel" data-tab="home">
                 <div class="group small">
                     <div class="elset" style="width:208px;">
@@ -218,5 +218,11 @@
                 </div>
             </section>
         </section>
+        <section class="panel static" style="display: none;">
+            <div class="separator long"></div>
+            <div class="group">
+                <span class="btn-slot text x-huge" id="slot-btn-more"></span>
+            </div>
+        </section>
     </section>
 </div>

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

@@ -1311,6 +1311,7 @@ define([
                         cls: 'combo-styles',
                         itemWidth: itemWidth,
                         itemHeight: itemHeight,
+                        style: 'min-width:145px;',
 //                hint        : this.tipParagraphStyle,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
@@ -1404,6 +1405,14 @@ define([
                         });
                     }
 
+                    this.btnMore = new Common.UI.Button({
+                        id: 'tlbtn-more',
+                        cls: 'btn-toolbar x-huge icon-top dropdown-manual',
+                        caption: this.capBtnMore,
+                        iconCls: 'btn-insertchart',
+                        enableToggle: true
+                    });
+
                     this.on('render:after', _.bind(this.onToolbarAfterRender, this));
                 } else {
                     Common.UI.Mixtbar.prototype.initialize.call(this, {
@@ -1556,6 +1565,7 @@ define([
                 _injectComponent('#slot-img-movebkwd', this.btnImgBackward);
                 _injectComponent('#slot-img-wrapping', this.btnImgWrapping);
                 _injectComponent('#slot-btn-watermark', this.btnWatermark);
+                _injectComponent('#slot-btn-more', this.btnMore);
 
                 this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom', 'small');
                 Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);
@@ -2653,7 +2663,8 @@ define([
             tipMarkersCheckmark: 'Checkmark bullets',
             tipMarkersFRhombus: 'Filled rhombus bullets',
             tipMarkersDash: 'Dash bullets',
-            textTabView: 'View'
+            textTabView: 'View',
+            capBtnMore: 'More'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/resources/less/toolbar.less

@@ -165,9 +165,10 @@
     margin-left: 2px;
 }
 
-#slot-field-styles {
+section #slot-field-styles {
     width: 100%;
     min-width: 160px;
+    padding-right: 12px;
 }
 
 #special-paste-container {