[Common] added 'document rename'

apps/common/main/lib/view/Header.js

@@ -70,7 +70,7 @@ define([
                 '</ul>');
 
         var templateRightBox = '<section>' +
-                            '<label id="rib-doc-name" class="status-label"></label>' +
+                            '<section id="box-doc-name"><input type="text" id="rib-doc-name" spellcheck="false"></input></section>' +
                             '<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
                             '<div class="hedset">' +
                                 '<div class="btn-slot" id="slot-hbtn-edit"></div>' +
@@ -278,6 +278,42 @@ define([
             }
         }
 
+        function onDocNameKeyDown(e) {
+            var me = this;
+
+            var name = me.labelDocName.val();
+            if ( e.keyCode == Common.UI.Keys.RETURN ) {
+                name = name.trim();
+                if ( !_.isEmpty(name) && me.documentCaption !== name ) {
+                    if ( /[\t*\+:\"<>?|\\\\/]/gim.test(name) ) {
+                        _.defer(function() {
+                            Common.UI.error({
+                                msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/"
+                                , callback: function() {
+                                    _.delay(function() {
+                                        me.labelDocName.focus();
+                                    }, 50);
+                                }
+                            });
+
+                            me.labelDocName.blur();
+                        })
+                    } else {
+                        Common.Gateway.requestRename(name);
+                        Common.NotificationCenter.trigger('edit:complete', me);
+                    }
+                }
+            } else
+            if ( e.keyCode == Common.UI.Keys.ESC ) {
+                me.labelDocName.val(me.documentCaption);
+                Common.NotificationCenter.trigger('edit:complete', this);
+            } else {
+                me.labelDocName.attr('size', name.length > 10 ? name.length : 10);
+            }
+
+            console.log('input keydown');
+        }
+
         return {
             options: {
                 branding: {},
@@ -344,7 +380,12 @@ define([
                         textSaveEnd: this.textSaveEnd
                     }));
 
+                    if ( this.labelDocName ) this.labelDocName.off();
                     this.labelDocName = $html.find('#rib-doc-name');
+                    this.labelDocName.on({
+                        'keydown': onDocNameKeyDown.bind(this)
+                    });
+
                     $saveStatus = $html.find('#rib-save-status');
                     $saveStatus.hide();
 
@@ -440,8 +481,13 @@ define([
 
                 this.documentCaption = value;
                 this.isModified && (value += '*');
-                if ( this.labelDocName )
+                if ( this.labelDocName ) {
-                    this.labelDocName.html(Common.Utils.String.htmlEncode(value));
+                    var encoded = Common.Utils.String.htmlEncode(value);
+                    this.labelDocName.val( encoded );
+                    this.labelDocName.attr('size', encoded.length);
+
+                    this.setCanRename(true);
+                }
 
                 return value;
             },
@@ -470,31 +516,23 @@ define([
             },
 
             setCanRename: function (rename) {
-                // var dc = $('#header-documentcaption div');
+                rename = false;
-                // if (rename) {
+
-                //     var me = this;
+                var me = this,
-                //     dc.tooltip({title: me.txtRename, placement: 'cursor'});
+                    label = me.labelDocName;
-                //     dc.on('click', function (e) {
+                if ( rename ) {
-                //         (new Common.Views.RenameDialog({
+                    label.removeAttr('disabled').tooltip({
-                //             filename: me.documentCaption,
+                        title: me.txtRename,
-                //             handler: function (result, value) {
+                        placement: 'cursor'}
-                //                 if (result == 'ok' && !_.isEmpty(value.trim()) && me.documentCaption !== value.trim()) {
+                    );
-                //                     Common.Gateway.requestRename(value);
+                } else {
-                //                 }
+                    label.attr('disabled', true);
-                //                 Common.NotificationCenter.trigger('edit:complete', me);
+                    var tip = label.data('bs.tooltip');
-                //             }
+                    if ( tip ) {
-                //         })).show(dc.position().left - 1, 20);
+                        tip.options.title = '';
-                //     });
+                        tip.setContent();
-                // } else {
+                    }
-                //     var tip = dc.data('bs.tooltip');
+                }
-                //     if (tip) {
-                //         tip.options.title = '';
-                //         tip.setContent();
-                //     }
-                //     dc.off('click');
-                // }
-                // dc.css('cursor', rename ? 'pointer' : 'default');
-                // dc.toggleClass('renamed', rename);
             },
 
             setSaveStatus: function (status) {

apps/common/main/resources/less/header.less

@@ -83,13 +83,26 @@
         }
     }
 
-    #rib-doc-name {
+    #box-doc-name {
         flex-grow: 1;
+        text-align: center;
+    }
+
+    #rib-doc-name {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         min-width: 50px;
         text-align: center;
+
+        color: #fff;
+        background-color: transparent;
+        border: 0 none;
+        cursor: default;
+
+        &:focus {
+            cursor: text;
+        }
     }
 
     #rib-save-status {