From 2db8a58b49207fdb5810b41ba63e119926386b11 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Sat, 10 Dec 2022 23:36:26 +0300
Subject: [PATCH] [rtl] Make display/hide more button in toolbar

---
 apps/common/main/lib/component/Mixtbar.js    | 279 ++++++++++++++++++-
 apps/common/main/resources/less/toolbar.less |  30 ++
 2 files changed, 297 insertions(+), 12 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 0361f6c1d..5d8527755 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -403,7 +403,7 @@ define([
                             me.setMoreButton($active.attr('data-tab'), $active);
                         }
                         if ( !_rightedge ) {
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                         }
                         if ( !_btns ) {
                             _btns = [];
@@ -421,12 +421,12 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( (_rightedge > _maxright)) {
+                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
                             if (!more_section.is(':visible') ) {
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                         if (item.outerWidth() > parseInt(item.css('min-width'))) {
                                             data.rightedge = _rightedge;
                                             return;
@@ -438,8 +438,8 @@ define([
                                     var btn = _btns[i];
                                     if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
                                         btn.addClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        if (_rightedge <= _maxright)
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        if ((Common.UI.isRTL() && _rightedge >= 0) || (_rightedge <= _maxright))
                                             break;
                                     }
                                 }
@@ -453,10 +453,10 @@ define([
                                     var btn = _btns[i];
                                     if ( btn.hasClass('compactwidth') ) {
                                         btn.removeClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        if ( _rightedge > _maxright) {
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
                                             btn.addClass('compactwidth');
-                                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                             break;
                                         }
                                     }
@@ -466,7 +466,7 @@ define([
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i];
                                         item.el.css('width', item.width);
-                                        data.rightedge = $active.get(0).getBoundingClientRect().right;
+                                        data.rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                     }
                                 }
                             }
@@ -506,7 +506,7 @@ define([
                 var me = this;
                 if (!btnsMore[tab]) {
                     var top = panel.position().top;
-                    var box = $('<div class="more-box" style="position: absolute;right: 0; top:'+ top +'px; padding-left: 12px;padding-right: 6px;display: none;">' +
+                    var box = $('<div class="more-box" style="top:'+ top +'px;">' +
                         '<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>');
@@ -545,6 +545,10 @@ define([
             },
 
             resizeToolbar: function(reset) {
+                if (Common.UI.isRTL()) {
+                    this.resizeToolbarRTL(reset);
+                    return;
+                }
                 var $active = this.$panels.filter('.active'),
                     more_section = $active.find('.more-box');
 
@@ -567,7 +571,7 @@ define([
 
                 if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
                     if (!more_section.is(':visible') ) {
-                        more_section.css('display', "");
+                        more_section.css('display', "block");
                         _maxright -= parseInt(more_section.css('width'));
                     }
                     var last_separator = null,
@@ -790,6 +794,256 @@ define([
                 hideAllMenus && Common.UI.Menu.Manager.hideAll();
             },
 
+            resizeToolbarRTL: function(reset) {
+                var $active = this.$panels.filter('.active'),
+                    more_section = $active.find('.more-box');
+
+                if (more_section.length===0) {
+                    this.setMoreButton($active.attr('data-tab'), $active);
+                }
+
+                var more_section_width = parseInt(more_section.css('width')) || 0,
+                    box_controls_width = $active.parents('.box-controls').width(),
+                    _maxright = box_controls_width,
+                    _minLeft = 0,
+                    _leftedge = $active.get(0).getBoundingClientRect().left,
+                    delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
+                    hideAllMenus = false;
+                this._prevBoxWidth = _maxright;
+                if (more_section.is(':visible')) {
+                    _maxright -= more_section_width;
+                    _minLeft +=  more_section_width;
+                }
+
+                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
+                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
+                }
+
+                if ( (reset || delta<0) && (_leftedge < _minLeft)) { // from toolbar to more section
+                    if (!more_section.is(':visible') ) {
+                        more_section.css('display', 'block');
+                        _minLeft += parseInt(more_section.css('width'));
+                    }
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
+                    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 = $active.find('> div:not(.more-box)');
+                    var need_break = false;
+                    for (var i=items.length-1; i>=0; i--) {
+                        var item = $(items[i]);
+                        if (!item.is(':visible') && !item.attr('hidden-on-resize')) { // move invisible items as is and set special attr
+                            item.attr('data-hidden-tb-item', true);
+                            this.$moreBar.prepend(item);
+                            hideAllMenus = true;
+                        } else if (item.hasClass('group')) {
+                            _leftedge = $active.get(0).getBoundingClientRect().left;
+                            if (_leftedge >= _minLeft) // stop moving items
+                                break;
+
+                            var offset = item.offset(),
+                                item_width = item.outerWidth(),
+                                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.outerWidth());
+                                }
+                            }
+                            if ((offset.left < _minLeft || children.length==1) && item.attr('group-state') != 'open') {
+                                // move group
+                                this.$moreBar.prepend(item);
+                                if (last_separator) {
+                                    last_separator.css('display', '');
+                                    last_separator.removeAttr('hidden-on-resize');
+                                }
+                                hideAllMenus = true;
+                            } else if ( offset.left < _minLeft ) {
+                                // 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', '');
+                                            last_separator.removeAttr('hidden-on-resize');
+                                        }
+                                        hideAllMenus = true;
+                                        break;
+                                    } else {
+                                        var child_offset = child.offset(),
+                                            child_width = child.outerWidth();
+                                        if (child_offset.left < _minLeft) {
+                                            if (!last_group) {
+                                                last_group = $('<div></div>');
+                                                last_group.addClass(items[i].className);
+                                                var attrs = items[i].attributes;
+                                                for (var k = 0; k < attrs.length; k++) {
+                                                    last_group.attr(attrs[k].name, attrs[k].value);
+                                                }
+                                                this.$moreBar.prepend(last_group);
+                                                if (last_separator) {
+                                                    last_separator.css('display', '');
+                                                    last_separator.removeAttr('hidden-on-resize');
+                                                }
+                                            }
+                                            last_group.prepend(child);
+                                            hideAllMenus = true;
+                                        } 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');
+                            item.attr('hidden-on-resize', true);
+                            last_separator = item;
+                            hideAllMenus = true;
+                        }
+                    }
+                } else if ((reset || delta>0) && more_section.is(':visible')) {
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = $active.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 = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                        }
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = this.$moreBar.children();
+                    if (items.length>0) {
+                        // from more panel to toolbar
+                        for (var i=0; i<items.length; i++) {
+                            var item = $(items[i]);
+                            _leftedge = $active.get(0).getBoundingClientRect().left;
+                            if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
+                                item.removeAttr('data-hidden-tb-item');
+                                more_section.before(item);
+                                if (this.$moreBar.children().filter('.group').length == 0) {
+                                    this.hideMoreBtns();
+                                    more_section.css('display', "none");
+                                }
+                            } else if (item.hasClass('group')) {
+                                var islast = false;
+                                if (this.$moreBar.children().filter('.group').length == 1) {
+                                    _maxright = box_controls_width; // try to move last group
+                                    islast = true;
+                                }
+
+                                var item_width = parseInt(item.attr('inner-width') || 0);
+                                if (_leftedge > _minLeft && item.attr('group-state') != 'open') {
+                                    // move group
+                                    more_section.before(item);
+                                    if (last_separator) {
+                                        last_separator.css('display', '');
+                                        last_separator.removeAttr('hidden-on-resize');
+                                    }
+                                    if (this.$moreBar.children().filter('.group').length == 0) {
+                                        this.hideMoreBtns();
+                                        more_section.css('display', "none");
+                                    }
+                                    hideAllMenus = true;
+                                } else if ( _leftedge < _minLeft) {
+                                    // move buttons from group
+                                    var children = item.children();
+                                    _maxright = box_controls_width - more_section_width;
+                                    for (var j=0; j<children.length; j++) {
+                                        if (islast && j==children.length-1)
+                                            _maxright = box_controls_width; // try to move last item from last group
+                                        _leftedge = $active.get(0).getBoundingClientRect().left;
+                                        var child = $(children[j]);
+                                        if (child.hasClass('elset')) { // don't add group - no enough space
+                                            need_break = true;
+                                            break;
+                                        } else {
+                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
+                                            if (_leftedge < _minLeft) {
+                                                if (!last_group) {
+                                                    last_group = $('<div></div>');
+                                                    last_group.addClass(items[i].className);
+                                                    var attrs = items[i].attributes;
+                                                    for (var k = 0; k < attrs.length; k++) {
+                                                        last_group.attr(attrs[k].name, attrs[k].value);
+                                                    }
+                                                    if (last_group.hasClass('flex')) { // need to update flex groups list
+                                                        $active.data().flex = null;
+                                                    }
+                                                    more_section.before(last_group);
+                                                    if (last_separator) {
+                                                        last_separator.css('display', '');
+                                                        last_separator.removeAttr('hidden-on-resize');
+                                                    }
+                                                }
+                                                last_group.append(child);
+                                                hideAllMenus = true;
+                                            } 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');
+                                item.attr('hidden-on-resize', true);
+                                last_separator = item;
+                                last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                                hideAllMenus = true;
+                            }
+                        }
+                    } else {
+                        this.hideMoreBtns();
+                        more_section.css('display', "none");
+                    }
+                }
+                hideAllMenus && Common.UI.Menu.Manager.hideAll();
+            },
+
             onMoreHide: function(btn, e) {
                 var moreContainer = btn.panel.parent();
                 if (btn.pressed) {
@@ -809,7 +1063,8 @@ define([
                     right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
                     top = showxy.top - parentxy.top + target.height() + 10;
 
-                moreContainer.css({right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'});
+                var styles = Common.UI.isRTL() ? {left: '6px', right: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'} : {right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'}
+                moreContainer.css(styles);
                 moreContainer.show();
             },
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index fba1fd987..b86a58eb6 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -250,6 +250,9 @@
         padding: 12px 10px 7px 0;
         border-radius: 0;
         z-index:999;
+        .rtl & {
+            padding: 12px 0 7px 10px;
+        }
         .compactwidth {
             .btn-group, .btn-toolbar {
                 &.x-huge {
@@ -285,6 +288,18 @@
     .more-box {
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+        position: absolute;
+        right: 0;
+        padding-left: 12px;
+        padding-right: 6px;
+        display: none;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            padding-left: 6px;
+            padding-right: 12px;
+        }
     }
 
     background-color: @background-toolbar-ie;
@@ -301,11 +316,26 @@
         padding-left: 6px;
         font-size: 0;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 6px;
+        }
+
         &.small {
             padding-left: 10px;
 
+            .rtl & {
+                padding-left: 0;
+                padding-right: 10px;
+            }
+
             + .separator:not(.invisible) {
                 margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
             }
         }