Bug 24317: search in language list

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

@@ -149,6 +149,7 @@ define([
                 menuAlignEl : null,
                 offset      : [0, 0],
                 cyclic      : true,
+                search      : false,
                 scrollAlwaysVisible: true
             },
 
@@ -169,6 +170,7 @@ define([
                 this.menuAlign      = this.options.menuAlign;
                 this.menuAlignEl    = this.options.menuAlignEl;
                 this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
+                this.search = this.options.search;
 
                 if (this.options.restoreHeight) {
                     this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
@@ -229,6 +231,7 @@ define([
 
                 var rootEl = this.cmpEl.parent(),
                     menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]');
+                this.menuRoot = menuRoot;
 
                 if (menuRoot) {
                     if (!me.rendered) {
@@ -314,10 +317,7 @@ define([
                     me.items.splice(index, 0, item);
 
                 if (this.rendered) {
-                    var menuRoot = (el.attr('role') === 'menu')
+                    var menuRoot = this.menuRoot;
-                        ? el
-                        : el.find('[role=menu]');
-
                     if (menuRoot) {
                         if (index < 0) {
                             menuRoot.append(item.render().el);
@@ -381,7 +381,7 @@ define([
                 this.trigger('show:after', this, e);
                 if (this.scroller) {
                     this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
-                    var menuRoot = (this.cmpEl.attr('role') === 'menu') ? this.cmpEl : this.cmpEl.find('[role=menu]'),
+                    var menuRoot = this.menuRoot,
                         $selected = menuRoot.find('> li .checked');
                     if ($selected.length) {
                         var itemTop = $selected.position().top,
@@ -390,8 +390,10 @@ define([
                         if (itemTop < 0 || itemTop + itemHeight > listHeight) {
                             menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
                         }
+                        setTimeout(function(){$selected.focus();}, 1);
                     }
                 }
+                this._search = {};
             },
 
             onBeforeHideMenu: function(e) {
@@ -422,6 +424,56 @@ define([
                 } else if (e.keyCode == Common.UI.Keys.ESC)  {
 //                    Common.NotificationCenter.trigger('menu:afterkeydown', e);
 //                    return false;
+                } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){
+                    var me = this;
+                    clearTimeout(this._search.timer);
+                    this._search.timer = setTimeout(function () { me._search = {}; }, 1000);
+
+                    (!this._search.text) && (this._search.text = '');
+                    (!this._search.char) && (this._search.char = e.key);
+                    (this._search.char !== e.key) && (this._search.full = true);
+                    this._search.text += e.key;
+                    if (this._search.index===undefined) {
+                        var $items = this.menuRoot.find('> li').find('> a');
+                        this._search.index = $items.index($items.filter(':focus'));
+                    }
+                    this.selectCandidate();
+                }
+            },
+
+            selectCandidate: function() {
+                var index = this._search.index || 0,
+                    re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),
+                    itemCandidate, idxCandidate;
+
+                for (var i=0; i<this.items.length; i++) {
+                    var item = this.items[i];
+                    if (re.test(item.caption)) {
+                        if (!itemCandidate) {
+                            itemCandidate = item;
+                            idxCandidate = i;
+                        }
+                        if (this._search.full && i==index || i>index) {
+                            itemCandidate = item;
+                            idxCandidate = i;
+                            break;
+                        }
+                    }
+                }
+
+                if (itemCandidate) {
+                    this._search.index = idxCandidate;
+                    var item = itemCandidate.cmpEl.find('a');
+                    if (this.scroller) {
+                        this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                        var itemTop = item.position().top,
+                            itemHeight = item.height(),
+                            listHeight = this.menuRoot.height();
+                        if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                            this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                        }
+                    }
+                    item.focus();
                 }
             },
 
@@ -453,9 +505,7 @@ define([
             },
 
             alignPosition: function() {
-                var menuRoot    = (this.cmpEl.attr('role') === 'menu')
+                var menuRoot = this.menuRoot,
-                        ? this.cmpEl
-                        : this.cmpEl.find('[role=menu]'),
                     menuParent  = this.menuAlignEl || menuRoot.parent(),
                     m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
                     offset      = menuParent.offset(),

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

@@ -110,18 +110,9 @@ function patchDropDownKeyDown(e) {
              _.delay(function() {
                  var mnu = $('> [role=menu]', li),
                     $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
-                    $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
+                    $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview');
-                    focusIdx = 0;
-                 if (mnu.find('> .menu-scroll').length>0) {
-                    var offset = mnu.scrollTop();
-                    for (var i=0; i<$subitems.length; i++) {
-                        if ($subitems[i].offsetTop > offset) {
-                            focusIdx = i; break;
-                        }
-                    }
-                }
                 if ($subitems.length>0 && $dataviews.length<1)
-                    $subitems.eq(focusIdx).focus();
+                    ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
             }, 250);
         }
     } else if (e.keyCode == 37) {     // left

apps/common/main/resources/less/dropdown-menu.less

@@ -60,47 +60,4 @@
             background-repeat: no-repeat;
         }
     }
-
-    .menu-scroll {
-        position: absolute;
-        background-color: @dropdown-bg;
-        height: 16px;
-        width: 100%;
-        cursor: pointer;
-
-        &.top {
-            top: 0;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 48%;
-                top: 7px;
-                border-top: none;
-                border-bottom: 3px solid;
-                border-right: 3px solid transparent;
-                border-left: 3px solid transparent;
-            }
-        }
-
-        &.bottom {
-            bottom: 0;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 48%;
-                top: 7px;
-                border-bottom: none;
-                border-top: 3px solid;
-                border-right: 3px solid transparent;
-                border-left: 3px solid transparent;
-            }
-        }
-
-        &.disabled {
-            opacity: 0.3;
-            cursor: default;
-        }
-    }
 }

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

@@ -780,7 +780,7 @@ define([
             };
 
             this.addWordVariants = function(isParagraph) {
-                if (!me.textMenu) return;
+                if (!me.textMenu || !me.textMenu.isVisible() && !me.tableMenu.isVisible()) return;
 
                 if (_.isUndefined(isParagraph)) {
                     isParagraph = me.textMenu.isVisible();
@@ -2723,7 +2723,8 @@ define([
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 300,
-                    items   : []
+                    items   : [],
+                    search: true
                 })
             });
 
@@ -3346,7 +3347,8 @@ define([
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 300,
-                    items   : []
+                    items   : [],
+                    search: true
                 })
             });
 

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

@@ -238,7 +238,8 @@ define([
                             '<%= caption %>',
                         '</a>'
                     ].join('')),
-                    menuAlign: 'bl-tl'
+                    menuAlign: 'bl-tl',
+                    search: true
                 });
 
                 this.zoomMenu = new Common.UI.Menu({

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

@@ -731,7 +731,7 @@ define([
             };
 
             this.addWordVariants = function(isParagraph) {
-                if (!me.textMenu) return;
+                if (!me.textMenu || !me.textMenu.isVisible() && !me.tableMenu.isVisible()) return;
 
                 if (_.isUndefined(isParagraph)) {
                     isParagraph = me.textMenu.isVisible();
@@ -2148,8 +2148,7 @@ define([
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
-                    items   : [
+                    items   : []
-                    ]
                 })
             });
 
@@ -2159,8 +2158,8 @@ define([
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 300,
-                    items   : [
+                    items   : [],
-                    ]
+                    search: true
                 })
             });
 
@@ -2216,8 +2215,7 @@ define([
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
-                    items: [
+                    items: []
-                    ]
                 })
             });
 
@@ -2227,8 +2225,8 @@ define([
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 300,
-                    items   : [
+                    items   : [],
-                    ]
+                    search: true
                 })
             });
 

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

@@ -272,7 +272,8 @@ define([
                             '<%= caption %>',
                         '</a>'
                     ].join('')),
-                    menuAlign: 'bl-tl'
+                    menuAlign: 'bl-tl',
+                    search: true
                 });
 
                 this.btnLanguage = new Common.UI.Button({