[DE] Refactoring navigation list: show full name, update tips on updating names

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

@@ -212,19 +212,7 @@ define([
                             this.dataViewItems.push(view);
                         }
 
-                        var name = record.get('name');
+                        this.updateTip(view);
-                        if (name.length > 37 - record.get('level')*2)
-                            record.set('tip', name);
-                        if (record.get('tip')) {
-                            var view_el = $(view.el);
-                            view_el.attr('data-toggle', 'tooltip');
-                            view_el.tooltip({
-                                title       : record.get('tip'),
-                                placement   : 'cursor',
-                                zIndex : this.tipZIndex
-                            });
-                        }
-
                         this.listenTo(view, 'change',      this.onChangeItem);
                         this.listenTo(view, 'remove',      this.onRemoveItem);
                         this.listenTo(view, 'click',       this.onClickItem);
@@ -361,6 +349,51 @@ define([
 
             focus: function() {
                 this.cmpEl && this.cmpEl.find('.treeview').focus();
+            },
+
+            updateTip: function(item) {
+                var record = item.model,
+                    name = record.get('name'),
+                    me = this;
+
+                if (name.length > 37 - record.get('level')*2)
+                    record.set('tip', name);
+                else
+                    record.set('tip', '');
+
+                var el = item.$el || $(item.el);
+                var tip = el.data('bs.tooltip');
+                if (tip) {
+                    if (tip.dontShow===undefined)
+                        tip.dontShow = true;
+                    el.removeData('bs.tooltip');
+                }
+                if (record.get('tip')) {
+                    el.attr('data-toggle', 'tooltip');
+                    el.tooltip({
+                        title       : record.get('tip'),
+                        placement   : 'cursor',
+                        zIndex : this.tipZIndex
+                    });
+                    if (this.delayRenderTips)
+                        el.one('mouseenter', function(){
+                            el.attr('data-toggle', 'tooltip');
+                            el.tooltip({
+                                title       : record.get('tip'),
+                                placement   : 'cursor',
+                                zIndex : me.tipZIndex
+                            });
+                            el.mouseenter();
+                        });
+                    else {
+                        el.attr('data-toggle', 'tooltip');
+                        el.tooltip({
+                            title       : record.get('tip'),
+                            placement   : 'cursor',
+                            zIndex : me.tipZIndex
+                        });
+                    }
+                }
             }
         }
     })());

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

@@ -106,6 +106,7 @@ define([
         onAfterRender: function(panelNavigation) {
             panelNavigation.viewNavigationList.on('item:click', _.bind(this.onSelectItem, this));
             panelNavigation.viewNavigationList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
+            panelNavigation.viewNavigationList.on('item:add', _.bind(this.onItemAdd, this));
             panelNavigation.navigationMenu.on('item:click',           _.bind(this.onMenuItemClick, this));
             panelNavigation.navigationMenu.items[11].menu.on('item:click', _.bind(this.onMenuLevelsItemClick, this));
         },
@@ -157,6 +158,7 @@ define([
             } else {
                 item.set('name', this._navigationObject.get_Text(index));
                 item.set('isEmptyItem', this._navigationObject.isEmptyItem(index));
+                this.panelNavigation.viewNavigationList.updateTip(item.get('dataItem'));
             }
         },
 
@@ -222,6 +224,10 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.panelNavigation);
         },
 
+        onItemAdd: function(picker, item, record, e){
+            record.set('dataItem', item);
+        },
+
         onMenuItemClick: function (menu, item) {
             if (!this._navigationObject && !this._viewerNavigationObject) return;
 

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

@@ -71,7 +71,8 @@ define([
                 enableKeyEvents: false,
                 emptyText: this.txtEmpty,
                 emptyItemText: this.txtEmptyItem,
-                style: 'border: none;'
+                style: 'border: none;',
+                delayRenderTips: true
             });
             this.viewNavigationList.cmpEl.off('click');
             this.navigationMenu = new Common.UI.Menu({

apps/documenteditor/main/resources/less/navigation.less

@@ -35,5 +35,11 @@
         .name.not-header {
             font-style: italic;
         }
+
+        .name {
+            white-space: pre-wrap;
+            word-break: break-all;
+            max-height: 350px;
+        }
     }
 }