[DE] Added hyperlink button to the Links tab.

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

@@ -42,7 +42,8 @@
 define([
     'core',
     'documenteditor/main/app/view/Links',
-    'documenteditor/main/app/view/NoteSettingsDialog'
+    'documenteditor/main/app/view/NoteSettingsDialog',
+    'documenteditor/main/app/view/HyperlinkSettingsDialog'
 ], function () {
     'use strict';
 
@@ -61,19 +62,22 @@ define([
                 'Links': {
                     'links:contents': this.onTableContents,
                     'links:update': this.onTableContentsUpdate,
-                    'links:notes': this.onNotesClick
+                    'links:notes': this.onNotesClick,
+                    'links:hyperlink': this.onHyperlinkClick
                 }
             });
         },
         onLaunch: function () {
-            this._state = {};
+            this._state = {
-            this.editMode = true;
+                prcontrolsdisable:undefined
+            };
         },
 
         setApi: function (api) {
             if (api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onFocusObject', this.onApiFocusObject.bind(this));
+                this.api.asc_registerCallback('asc_onCanAddHyperlink',      _.bind(this.onApiCanAddHyperlink, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
             }
@@ -83,7 +87,7 @@ define([
         setConfig: function(config) {
             this.toolbar = config.toolbar;
             this.view = this.createView('Links', {
-                toolbar: this.toolbar
+                toolbar: this.toolbar.toolbar
             });
         },
 
@@ -97,12 +101,11 @@ define([
         },
 
         onCoAuthoringDisconnect: function() {
-            this.editMode = false;
             this.SetDisabled(true);
         },
 
         onApiFocusObject: function(selectedObjects) {
-            if (!this.editMode) return;
+            if (!this.toolbar.editMode) return;
 
             var pr, i = -1, type,
                 paragraph_locked = false,
@@ -127,15 +130,74 @@ define([
                 }
             }
 
+            this._state.prcontrolsdisable = paragraph_locked || header_locked;
+
             var need_disable = paragraph_locked || in_equation || in_image || in_header;
             _.each (this.view.btnsNotes, function(item){
                 item.setDisabled(need_disable);
             }, this);
+        },
 
-            // var need_disable = paragraph_locked || header_locked;
+        onApiCanAddHyperlink: function(value) {
-            // _.each (this.view.btnsContents, function(item){
+            var need_disable = !value || this._state.prcontrolsdisable;
-            //     item.setDisabled(need_disable);
+
-            // }, this);
+            if ( this.toolbar.editMode ) {
+                _.each (this.view.btnsHyperlink, function(item){
+                    item.setDisabled(need_disable);
+                }, this);
+            }
+        },
+
+        onHyperlinkClick: function(btn) {
+            var me = this,
+                win, props, text;
+
+            if (me.api){
+
+                var handlerDlg = function(dlg, result) {
+                    if (result == 'ok') {
+                        props = dlg.getSettings();
+                        (text!==false)
+                            ? me.api.add_Hyperlink(props)
+                            : me.api.change_Hyperlink(props);
+                    }
+
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                };
+
+                text = me.api.can_AddHyperlink();
+
+                if (text !== false) {
+                    win = new DE.Views.HyperlinkSettingsDialog({
+                        api: me.api,
+                        handler: handlerDlg
+                    });
+
+                    props = new Asc.CHyperlinkProperty();
+                    props.put_Text(text);
+
+                    win.show();
+                    win.setSettings(props);
+                } else {
+                    var selectedElements = me.api.getSelectedElements();
+                    if (selectedElements && _.isArray(selectedElements)){
+                        _.each(selectedElements, function(el, i) {
+                            if (selectedElements[i].get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink)
+                                props = selectedElements[i].get_ObjectValue();
+                        });
+                    }
+                    if (props) {
+                        win = new DE.Views.HyperlinkSettingsDialog({
+                            api: me.api,
+                            handler: handlerDlg
+                        });
+                        win.show();
+                        win.setSettings(props);
+                    }
+                }
+            }
+
+            Common.component.Analytics.trackEvent('ToolBar', 'Add Hyperlink');
         },
 
         onTableContents: function(type){

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

@@ -48,7 +48,6 @@ define([
     'common/main/lib/view/InsertTableDialog',
     'common/main/lib/util/define',
     'documenteditor/main/app/view/Toolbar',
-    'documenteditor/main/app/view/HyperlinkSettingsDialog',
     'documenteditor/main/app/view/DropcapSettingsAdvanced',
     'documenteditor/main/app/view/MailMergeRecepients',
     'documenteditor/main/app/view/StyleTitleDialog',
@@ -275,7 +274,6 @@ define([
             toolbar.mnuLineSpace.on('item:toggle',                      _.bind(this.onLineSpaceToggle, this));
             toolbar.mnuNonPrinting.on('item:toggle',                    _.bind(this.onMenuNonPrintingToggle, this));
             toolbar.btnShowHidenChars.on('toggle',                      _.bind(this.onNonPrintingToggle, this));
-            toolbar.btnInsertHyperlink.on('click',                      _.bind(this.onHyperlinkClick, this));
             toolbar.mnuTablePicker.on('select',                         _.bind(this.onTablePickerSelect, this));
             toolbar.mnuInsertTable.on('item:click',                     _.bind(this.onInsertTableClick, this));
             toolbar.mnuInsertImage.on('item:click',                     _.bind(this.onInsertImageClick, this));
@@ -331,7 +329,6 @@ define([
             this.api.asc_registerCallback('asc_onPrAlign',              _.bind(this.onApiParagraphAlign, this));
             this.api.asc_registerCallback('asc_onTextColor',            _.bind(this.onApiTextColor, this));
             this.api.asc_registerCallback('asc_onParaSpacingLine',      _.bind(this.onApiLineSpacing, this));
-            this.api.asc_registerCallback('asc_onCanAddHyperlink',      _.bind(this.onApiCanAddHyperlink, this));
             this.api.asc_registerCallback('asc_onFocusObject',          _.bind(this.onApiFocusObject, this));
             this.api.asc_registerCallback('asc_onDocSize',              _.bind(this.onApiPageSize, this));
             this.api.asc_registerCallback('asc_onPaintFormatChanged',   _.bind(this.onApiStyleChange, this));
@@ -567,14 +564,6 @@ define([
             }
         },
 
-        onApiCanAddHyperlink: function(value) {
-            var need_disable = !value || this._state.prcontrolsdisable;
-
-            if ( this.editMode ) {
-                this.toolbar.btnInsertHyperlink.setDisabled(need_disable);
-            }
-        },
-
         onApiPageSize: function(w, h) {
             var width = this._state.pgorient ? w : h,
                 height = this._state.pgorient ? h : w;
@@ -1290,58 +1279,6 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onHyperlinkClick: function(btn) {
-            var me = this,
-                win, props, text;
-
-            if (me.api){
-
-                var handlerDlg = function(dlg, result) {
-                    if (result == 'ok') {
-                        props = dlg.getSettings();
-                        (text!==false)
-                            ? me.api.add_Hyperlink(props)
-                            : me.api.change_Hyperlink(props);
-                    }
-
-                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
-                };
-
-                text = me.api.can_AddHyperlink();
-
-                if (text !== false) {
-                    win = new DE.Views.HyperlinkSettingsDialog({
-                        api: me.api,
-                        handler: handlerDlg
-                    });
-
-                    props = new Asc.CHyperlinkProperty();
-                    props.put_Text(text);
-
-                    win.show();
-                    win.setSettings(props);
-                } else {
-                    var selectedElements = me.api.getSelectedElements();
-                    if (selectedElements && _.isArray(selectedElements)){
-                        _.each(selectedElements, function(el, i) {
-                            if (selectedElements[i].get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink)
-                                props = selectedElements[i].get_ObjectValue();
-                        });
-                    }
-                    if (props) {
-                        win = new DE.Views.HyperlinkSettingsDialog({
-                            api: me.api,
-                            handler: handlerDlg
-                        });
-                        win.show();
-                        win.setSettings(props);
-                    }
-                }
-            }
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Add Hyperlink');
-        },
-
         onTablePickerSelect: function(picker, columns, rows, e) {
             if (this.api) {
                 this.toolbar.fireEvent('inserttable', this.toolbar);
@@ -2787,7 +2724,7 @@ define([
                 }
 
                 var links = me.getApplication().getController('Links');
-                links.setApi(me.api).setConfig({toolbar: me.toolbar});
+                links.setApi(me.api).setConfig({toolbar: me});
                 Array.prototype.push.apply(me.toolbar.toolbarControls, links.getView('Links').getButtons());
             }
         },

apps/documenteditor/main/app/template/Toolbar.template

@@ -122,7 +122,7 @@
                 </div>
                 <div class="separator long"></div>
                 <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-inshyperlink"></span>
+                    <span class="btn-slot text x-huge slot-inshyperlink"></span>
                     <span class="btn-slot text x-huge slot-notes"></span>
                     <span class="btn-slot text x-huge slot-comment"></span>
                 </div>
@@ -166,6 +166,10 @@
                 <div class="group">
                     <span class="btn-slot text x-huge slot-notes"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge slot-inshyperlink"></span>
+                </div>
             </section>
         </section>
     </section>

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

@@ -85,6 +85,12 @@ define([
                     me.fireEvent('links:notes', ['next']);
                 });
             });
+
+            this.btnsHyperlink.forEach(function(button) {
+                button.on('click', function (b, e) {
+                    me.fireEvent('links:hyperlink');
+                });
+            });
         }
 
         return {
@@ -99,6 +105,8 @@ define([
                 this.btnsNotes = [];
                 this.btnsPrevNote = [];
                 this.btnsNextNote = [];
+                this.btnsHyperlink = [];
+                this.paragraphControls = [];
 
                 var me = this,
                     $host = me.toolbar.$el;
@@ -108,22 +116,28 @@ define([
                         cmp.rendered ? $slot.append(cmp.$el) : cmp.render($slot);
                 };
 
-                var $slots = $host.find('.btn-slot.btn-contents');
+                var _injectComponents = function ($slots, iconCls, split, menu, caption, btnsArr) {
-                $slots.each(function(index, el) {
+                    $slots.each(function(index, el) {
-                    var _cls = 'btn-toolbar';
+                        var _cls = 'btn-toolbar';
-                    /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
+                        /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
 
-                    var button = new Common.UI.Button({
+                        var button = new Common.UI.Button({
-                        cls: _cls,
+                            cls: _cls,
-                        iconCls: 'btn-contents',
+                            iconCls: iconCls,
-                        caption: me.capBtnInsContents,
+                            caption: caption,
-                        split: true,
+                            split: split,
-                        menu: true,
+                            menu: menu,
-                        disabled: true
+                            disabled: true
-                    }).render( $slots.eq(index) );
+                        }).render( $slots.eq(index) );
 
-                    me.btnsContents.push(button);
+                        btnsArr.push(button);
-                });
+                        me.paragraphControls.push(button);
+                    });
+                };
+
+                _injectComponents($host.find('.btn-slot.btn-contents'), 'btn-contents', true, true, me.capBtnInsContents, me.btnsContents);
+                _injectComponents($host.find('.btn-slot.slot-notes'), 'btn-notes', true, true, me.capBtnInsFootnote, me.btnsNotes);
+                _injectComponents($host.find('.btn-slot.slot-inshyperlink'), 'btn-inserthyperlink', false, false, me.capBtnInsLink, me.btnsHyperlink);
 
                 this.btnContentsUpdate = new Common.UI.Button({
                     cls: 'btn-toolbar x-huge icon-top',
@@ -134,23 +148,7 @@ define([
                     disabled: true
                 });
                 _injectComponent('#slot-btn-contents-update', this.btnContentsUpdate);
-
+                this.paragraphControls.push(this.btnContentsUpdate);
-                $slots = $host.find('.btn-slot.slot-notes');
-                $slots.each(function(index, el) {
-                    var _cls = 'btn-toolbar';
-                    /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
-
-                    var button = new Common.UI.Button({
-                        cls: _cls,
-                        iconCls: 'btn-notes',
-                        caption: me.capBtnInsFootnote,
-                        split: true,
-                        menu: true,
-                        disabled: true
-                    }).render( $slots.eq(index) );
-
-                    me.btnsNotes.push(button);
-                });
 
                 this._state = {disabled: false};
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
@@ -182,13 +180,12 @@ define([
                     });
 
                     me.btnContentsUpdate.updateHint(me.tipContentsUpdate);
-                    var _menu = new Common.UI.Menu({
+                    me.btnContentsUpdate.setMenu(new Common.UI.Menu({
                         items: [
                             {caption: me.textUpdateAll, value: 'all'},
                             {caption: me.textUpdatePages, value: 'pages'}
                         ]
-                    });
+                    }));
-                    me.btnContentsUpdate.setMenu(_menu);
 
                     me.btnsNotes.forEach( function(btn, index) {
                         btn.updateHint( me.tipNotes );
@@ -225,7 +222,10 @@ define([
                             el: $('#id-menu-goto-footnote-next-'+index),
                             cls: 'btn-toolbar'
                         }));
+                    });
 
+                    me.btnsHyperlink.forEach( function(btn) {
+                        btn.updateHint(me.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                     });
 
                     setEvents.call(me);
@@ -238,17 +238,16 @@ define([
             },
 
             getButtons: function() {
-                return this.btnsContents.concat(this.btnContentsUpdate).concat(this.btnsNotes);
+                return this.paragraphControls;
             },
 
             SetDisabled: function (state) {
                 this._state.disabled = state;
-                this.btnsContents.concat(this.btnsNotes).forEach(function(button) {
+                this.paragraphControls.forEach(function(button) {
                     if ( button ) {
                         button.setDisabled(state);
                     }
                 }, this);
-                this.btnContentsUpdate.setDisabled(state);
             },
 
             capBtnInsContents: 'Table of Contents',
@@ -265,7 +264,9 @@ define([
             mniNoteSettings: 'Notes Settings',
             textGotoFootnote: 'Go to Footnotes',
             capBtnInsFootnote: 'Footnotes',
-            confirmDeleteFootnotes: 'Do you want to delete all footnotes?'
+            confirmDeleteFootnotes: 'Do you want to delete all footnotes?',
+            capBtnInsLink: 'Hyperlink',
+            tipInsertHyperlink: 'Add Hyperlink'
         }
     }()), DE.Views.Links || {}));
 });

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

@@ -521,14 +521,6 @@ define([
                 });
                 this.paragraphControls.push(this.btnInsertTextArt);
 
-                this.btnInsertHyperlink = new Common.UI.Button({
-                    id: 'tlbtn-insertlink',
-                    cls: 'btn-toolbar x-huge icon-top',
-                    caption: me.capBtnInsLink,
-                    iconCls: 'btn-inserthyperlink'
-                });
-                this.paragraphControls.push(this.btnInsertHyperlink);
-
                 this.btnEditHeader = new Common.UI.Button({
                     id: 'id-toolbar-btn-editheader',
                     cls: 'btn-toolbar x-huge icon-top',
@@ -1249,7 +1241,6 @@ define([
                 _injectComponent('#slot-btn-instextart', this.btnInsertTextArt);
                 _injectComponent('#slot-btn-dropcap', this.btnDropCap);
                 _injectComponent('#slot-btn-columns', this.btnColumns);
-                _injectComponent('#slot-btn-inshyperlink', this.btnInsertHyperlink);
                 _injectComponent('#slot-btn-editheader', this.btnEditHeader);
                 _injectComponent('#slot-btn-insshape', this.btnInsertShape);
                 _injectComponent('#slot-btn-insequation', this.btnInsertEquation);
@@ -1499,7 +1490,6 @@ define([
                 this.btnInsertChart.updateHint(this.tipInsertChart);
                 this.btnInsertText.updateHint(this.tipInsertText);
                 this.btnInsertTextArt.updateHint(this.tipInsertTextArt);
-                this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                 this.btnEditHeader.updateHint(this.tipEditHeader);
                 this.btnInsertShape.updateHint(this.tipInsertShape);
                 this.btnInsertEquation.updateHint(this.tipInsertEquation);
@@ -2281,7 +2271,6 @@ define([
             tipEditHeader: 'Edit Document Header or Footer',
             mniEditHeader: 'Edit Document Header',
             mniEditFooter: 'Edit Document Footer',
-            tipInsertHyperlink: 'Add Hyperlink',
             mniHiddenChars: 'Nonprinting Characters',
             mniHiddenBorders: 'Hidden Table Borders',
             tipSynchronize: 'The document has been changed by another user. Please click to save your changes and reload the updates.',
@@ -2377,7 +2366,6 @@ define([
             capBtnInsImage: 'Picture',
             capBtnInsTable: 'Table',
             capBtnInsChart: 'Chart',
-            capBtnInsLink: 'Hyperlink',
             textTabFile: 'File',
             textTabHome: 'Home',
             textTabInsert: 'Insert',

apps/documenteditor/main/locale/en.json

@@ -1236,6 +1236,7 @@
   "DE.Views.Links.capBtnContentsUpdate": "Update",
   "DE.Views.Links.capBtnInsContents": "Table of Contents",
   "DE.Views.Links.capBtnInsFootnote": "Footnote",
+  "DE.Views.Links.capBtnInsLink": "Hyperlink",
   "DE.Views.Links.confirmDeleteFootnotes": "Do you want to delete all footnotes?",
   "DE.Views.Links.mniDelFootnote": "Delete All Footnotes",
   "DE.Views.Links.mniInsFootnote": "Insert Footnote",
@@ -1247,6 +1248,7 @@
   "DE.Views.Links.textUpdatePages": "Update page numbers only",
   "DE.Views.Links.tipContents": "Insert table of contents",
   "DE.Views.Links.tipContentsUpdate": "Update table of contents",
+  "DE.Views.Links.tipInsertHyperlink": "Add hyperlink",
   "DE.Views.Links.tipNotes": "Insert or edit footnotes",
   "DE.Views.MailMergeEmailDlg.cancelButtonText": "Cancel",
   "DE.Views.MailMergeEmailDlg.filePlaceholder": "PDF",
@@ -1640,7 +1642,7 @@
   "del_DE.Views.Toolbar.capBtnInsFootnote": "Footnote",
   "DE.Views.Toolbar.capBtnInsHeader": "Header/Footer",
   "DE.Views.Toolbar.capBtnInsImage": "Picture",
-  "DE.Views.Toolbar.capBtnInsLink": "Hyperlink",
+  "del_DE.Views.Toolbar.capBtnInsLink": "Hyperlink",
   "DE.Views.Toolbar.capBtnInsPagebreak": "Breaks",
   "DE.Views.Toolbar.capBtnInsShape": "Shape",
   "DE.Views.Toolbar.capBtnInsTable": "Table",
@@ -1766,7 +1768,7 @@
   "DE.Views.Toolbar.tipIncPrLeft": "Increase indent",
   "DE.Views.Toolbar.tipInsertChart": "Insert chart",
   "DE.Views.Toolbar.tipInsertEquation": "Insert equation",
-  "DE.Views.Toolbar.tipInsertHyperlink": "Add hyperlink",
+  "del_DE.Views.Toolbar.tipInsertHyperlink": "Add hyperlink",
   "DE.Views.Toolbar.tipInsertImage": "Insert picture",
   "DE.Views.Toolbar.tipInsertNum": "Insert Page Number",
   "DE.Views.Toolbar.tipInsertShape": "Insert autoshape",