Menu component: change scroll

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

@@ -143,7 +143,8 @@ define([
                 menuAlign   : 'tl-bl',
                 menuAlignEl : null,
                 offset      : [0, 0],
-                cyclic      : true
+                cyclic      : true,
+                scrollAlwaysVisible: true
             },
 
             template: _.template([
@@ -162,6 +163,7 @@ define([
                 this.offset         = [0, 0];
                 this.menuAlign      = this.options.menuAlign;
                 this.menuAlignEl    = this.options.menuAlignEl;
+                this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
 
                 if (!this.options.cyclic) this.options.cls += ' no-cyclic';
 
@@ -243,7 +245,6 @@ define([
                     this.parentEl.on('hide.bs.dropdown',    _.bind(me.onBeforeHideMenu, me));
                     this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
                     this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
-                    menuRoot.on('scroll', _.bind(me.onScroll, me));
 
                     menuRoot.hover(
                         function(e) { me.isOver = true;},
@@ -313,64 +314,6 @@ define([
                 }
             },
 
-            doLayout: function() {
-                if (this.options.maxHeight > 0) {
-                    if (!this.rendered) {
-                        this.mustLayout = true;
-                        return;
-                    }
-
-                    var me = this,
-                        el = this.cmpEl;
-
-                    var menuRoot = (el.attr('role') === 'menu') ? el : el.find('[role=menu]');
-
-                    if (!menuRoot.is(':visible')) {
-                        var pos = [menuRoot.css('left'), menuRoot.css('top')];
-                        menuRoot.css({
-                            left    : '-1000px',
-                            top     : '-1000px',
-                            display : 'block'
-                        });
-                    }
-
-                    var $items = menuRoot.find('li');
-
-                    if ($items.height() * $items.length > this.options.maxHeight) {
-                        var scroll = '<div class="menu-scroll top"></div>';
-                        menuRoot.prepend(scroll);
-
-                        scroll = '<div class="menu-scroll bottom"></div>';
-                        menuRoot.append(scroll);
-
-                        menuRoot.css({
-                            'box-shadow'        : 'none',
-                            'overflow-y'        : 'hidden',
-                            'padding-top'       : '18px'
-//                            'padding-bottom'    : '18px'
-                        });
-
-                        menuRoot.find('> li:last-of-type').css('margin-bottom',18);
-
-                        var addEvent = function( elem, type, fn ) {
-                            elem.addEventListener ? elem.addEventListener( type, fn, false ) : elem.attachEvent( "on" + type, fn );
-                        };
-
-                        var eventname=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
-                        addEvent(menuRoot[0], eventname, _.bind(this.onMouseWheel,this));
-                        menuRoot.find('.menu-scroll').on('click', _.bind(this.onScrollClick, this));
-                    }
-
-                    if (pos) {
-                        menuRoot.css({
-                            display : '',
-                            left    : pos[0],
-                            top     : pos[1]
-                        });
-                    }
-                }
-            },
-
             addItem: function(item) {
                 this.insertItem(-1, item);
             },
@@ -405,7 +348,6 @@ define([
                     item.off('click').off('toggle');
                     item.remove();
                 });
-                this.rendered && this.cmpEl.find('.menu-scroll').off('click').remove();
 
                 me.items = [];
             },
@@ -413,12 +355,17 @@ define([
             onBeforeShowMenu: function(e) {
                 Common.NotificationCenter.trigger('menu:show');
 
-                if (this.mustLayout) {
+                this.trigger('show:before', this, e);
-                    delete this.mustLayout;
+
-                    this.doLayout.call(this);
+                if (this.options.maxHeight && !this.scroller) {
+                    this.scroller = new Common.UI.Scroller({
+                        el: $(this.el).find('.dropdown-menu '),
+                        minScrollbarLength: 30,
+                        suppressScrollX: true,
+                        alwaysVisibleY: this.scrollAlwaysVisible
+                    });
                 }
 
-                this.trigger('show:before', this, e);
                 this.alignPosition();
             },
 
@@ -439,14 +386,6 @@ define([
                         }
                     }
                 }
-
-                if (this.$el.find('> ul > .menu-scroll').length) {
-                    var el = this.$el.find('li .checked')[0];
-                    if (el) {
-                        var offset = el.offsetTop - this.options.maxHeight / 2;
-                        this.scrollMenu(offset < 0 ? 0 : offset);
-                    }
-                }
             },
 
             onBeforeHideMenu: function(e) {
@@ -480,23 +419,6 @@ define([
                 }
             },
 
-            onScroll: function(item, e) {
-                if (this.scroller) return;
-
-                var menuRoot = (this.cmpEl.attr('role') === 'menu')
-                    ? this.cmpEl
-                    : this.cmpEl.find('[role=menu]'),
-                    scrollTop = menuRoot.scrollTop(),
-                    top = menuRoot.find('.menu-scroll.top'),
-                    bottom = menuRoot.find('.menu-scroll.bottom');
-                if (this.fromKeyDown) {
-                    top.css('top', scrollTop + 'px');
-                    bottom.css('bottom', (-scrollTop) + 'px');
-                }
-                top.toggleClass('disabled', scrollTop<1);
-                bottom.toggleClass('disabled', scrollTop + this.options.maxHeight > menuRoot[0].scrollHeight-1);
-            },
-
             onItemClick: function(item, e) {
                 if (!item.menu) this.isOver = false;
                 if (item.options.stopPropagation) {
@@ -514,32 +436,6 @@ define([
                 this.trigger('item:toggle', this, item, state, e);
             },
 
-            onScrollClick: function(e) {
-                if (/disabled/.test(e.currentTarget.className)) return false;
-
-                this.scrollMenu(/top/.test(e.currentTarget.className));
-                return false;
-            },
-
-            onMouseWheel: function(e) {
-                this.scrollMenu(((e.detail && -e.detail) || e.wheelDelta) > 0);
-            },
-
-            scrollMenu: function(up) {
-                this.fromKeyDown = false;
-                var menuRoot = (this.cmpEl.attr('role') === 'menu')
-                        ? this.cmpEl
-                        : this.cmpEl.find('[role=menu]'),
-                    value = typeof(up)==='boolean'
-                        ? menuRoot.scrollTop() + (up ? -20 : 20)
-                        : up;
-
-                menuRoot.scrollTop(value);
-
-                menuRoot.find('.menu-scroll.top').css('top', menuRoot.scrollTop() + 'px');
-                menuRoot.find('.menu-scroll.bottom').css('bottom', (-menuRoot.scrollTop()) + 'px');
-            },
-
             setOffset: function(offsetX, offsetY) {
                 this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
                 this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;

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

@@ -2711,6 +2711,7 @@ define([
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
+                    maxHeight: 300,
                     items   : [
                     ]
                 })
@@ -2723,17 +2724,7 @@ define([
                     menuAlign: 'tl-tr',
                     maxHeight: 300,
                     restoreHeight: 300,
-                    items   : [
+                    items   : []
-                    ]
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 })
             });
 
@@ -3345,9 +3336,8 @@ define([
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
-                    style   : 'max-height: 300px;',
+                    maxHeight: 300,
-                    items: [
+                    items: []
-                    ]
                 })
             });
 
@@ -3358,17 +3348,7 @@ define([
                     menuAlign: 'tl-tr',
                     maxHeight: 300,
                     restoreHeight: 300,
-                    items   : [
+                    items   : []
-                    ]
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 })
             });
 

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

@@ -101,13 +101,6 @@ define([
                     style: 'min-width: 190px;max-width: 400px;',
                     maxHeight: 200,
                     items: []
-                }).on('render:after', function(mnu) {
-                        this.scroller = new Common.UI.Scroller({
-                        el: this.$el.find('.dropdown-menu'),
-                        useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                        suppressScrollX: true,
-                        minScrollbarLength  : 40
-                    });
                 })
             });
             this.btnInsField.render( $('#mmerge-btn-ins-field',me.$el)) ;

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

@@ -240,15 +240,6 @@ define([
                         '</a>'
                     ].join('')),
                     menuAlign: 'bl-tl'
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 });
 
                 this.zoomMenu = new Common.UI.Menu({

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

@@ -827,6 +827,8 @@ define([
                         iconCls: 'btn-pagesize',
                         caption: me.capBtnPageSize,
                         menu: new Common.UI.Menu({
+                            maxHeight: 571,
+                            restoreHeight: 571,
                             items: [
                                 {
                                     caption: 'US Letter',
@@ -963,15 +965,6 @@ define([
                             items: [],
                             maxHeight: 560,
                             restoreHeight: 560
-                        }).on('show:before', function (mnu) {
-                            if (!this.scroller) {
-                                this.scroller = new Common.UI.Scroller({
-                                    el: $(this.el).find('.dropdown-menu '),
-                                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                                    minScrollbarLength: 40,
-                                    alwaysVisibleY: true
-                                });
-                            }
                         })
                     });
                     this.toolbarControls.push(this.btnColorSchemas);
@@ -2080,12 +2073,6 @@ define([
                     this.mnuColorSchema = new Common.UI.Menu({
                         maxHeight: 560,
                         restoreHeight: 560
-                    }).on('show:before', function (mnu) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 40
-                        });
                     });
                 }
                 this.mnuColorSchema.items = [];

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

@@ -2147,6 +2147,7 @@ define([
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
+                    maxHeight: 300,
                     items   : [
                     ]
                 })
@@ -2161,15 +2162,6 @@ define([
                     restoreHeight: 300,
                     items   : [
                     ]
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 })
             });
 
@@ -2224,7 +2216,7 @@ define([
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
-                    style   : 'max-height: 300px;',
+                    maxHeight: 300,
                     items: [
                     ]
                 })
@@ -2239,15 +2231,6 @@ define([
                     restoreHeight: 300,
                     items   : [
                     ]
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 })
             });
 

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

@@ -274,15 +274,6 @@ define([
                         '</a>'
                     ].join('')),
                     menuAlign: 'bl-tl'
-                }).on('show:before', function (mnu) {
-                    if (!this.scroller) {
-                        this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
-                            useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                            minScrollbarLength: 30,
-                            alwaysVisibleY: true
-                        });
-                    }
                 });
 
                 this.btnLanguage = new Common.UI.Button({

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

@@ -580,13 +580,6 @@ define([
                             items: [],
                             maxHeight: 560,
                             restoreHeight: 560
-                        }).on('show:before', function (mnu) {
-                            this.scroller = new Common.UI.Scroller({
-                                el: $(this.el).find('.dropdown-menu '),
-                                useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                                minScrollbarLength: 40,
-                                alwaysVisibleY: true
-                            });
                         })
                     });
                     me.slideOnlyControls.push(me.btnColorSchemas);
@@ -1277,12 +1270,6 @@ define([
                         mnuColorSchema = new Common.UI.Menu({
                             maxHeight: 560,
                             restoreHeight: 560
-                        }).on('render:after', function (mnu) {
-                            this.scroller = new Common.UI.Scroller({
-                                el: $(this.el).find('.dropdown-menu '),
-                                useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                                minScrollbarLength: 40
-                            });
                         });
                     }
                     mnuColorSchema.items = [];

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

@@ -62,12 +62,6 @@ define([
                         { caption: this.textManager, value: 'manager' },
                         { caption: '--' }
                     ]
-                }).on('render:after', function(mnu) {
-                        this.scroller = new Common.UI.Scroller({
-                        el: $(this.el).find('.dropdown-menu '),
-                        useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                        minScrollbarLength  : 40
-                    });
                 }).on('show:after', function () {
                     this.scroller.update({alwaysVisibleY: true});
                 })

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

@@ -926,13 +926,6 @@ define([
                 maxHeight: 200,
                 cyclic: false,
                 items: []
-            }).on('render:after', function(mnu) {
-                this.scroller = new Common.UI.Scroller({
-                    el: $(this.el).find('.dropdown-menu '),
-                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                    minScrollbarLength  : 40,
-                    alwaysVisibleY: true
-                });
             }).on('show:after', function () {
                 this.scroller.update({alwaysVisibleY: true});
             });
@@ -943,12 +936,6 @@ define([
                 items: []
             }).on('render:after', function(mnu) {
                 mnu.cmpEl.removeAttr('oo_editor_input').attr('oo_editor_keyboard', true);
-                this.scroller = new Common.UI.Scroller({
-                    el: $(this.el).find('.dropdown-menu '),
-                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                    minScrollbarLength  : 40,
-                    alwaysVisibleY: true
-                });
             });
 
             me.fireEvent('createdelayedelements', [me]);

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

@@ -201,13 +201,6 @@ define([
                 var menuHiddenItems = new Common.UI.Menu({
                     maxHeight: 260,
                     menuAlign: 'tl-tr'
-                }).on('render:after', function(mnu) {
-                    this.scroller = new Common.UI.Scroller({
-                        el: $(this.el).find('.dropdown-menu '),
-                        useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                        minScrollbarLength  : 40,
-                        alwaysVisibleY: true
-                    });
                 }).on('show:after', function () {
                     this.scroller.update({alwaysVisibleY: true});
                 });

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

@@ -1007,15 +1007,6 @@ define([
                         items: [],
                         maxHeight   : 560,
                         restoreHeight: 560
-                    }).on('show:before', function(mnu) {
-                        if ( !this.scroller ) {
-                            this.scroller = new Common.UI.Scroller({
-                                el: $(this.el).find('.dropdown-menu '),
-                                useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                                minScrollbarLength  : 40,
-                                alwaysVisibleY: true
-                            });
-                        }
                     })
                 });
 
@@ -1925,12 +1916,6 @@ define([
             if (this.mnuColorSchema == null) {
                 this.mnuColorSchema = new Common.UI.Menu({maxHeight   : 560,
                     restoreHeight: 560
-                }).on('show:before', function(mnu) {
-                        this.scroller = new Common.UI.Scroller({
-                        el: $(this.el).find('.dropdown-menu '),
-                        useKeyboard: this.enableKeyEvents && !this.handleSelect,
-                        minScrollbarLength  : 40
-                    });
                 });
             }