Merge pull request #364 from ONLYOFFICE/feature/internal-link

Feature/internal link

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

@@ -264,6 +264,22 @@ define([
             expandToLevel: function(expandLevel) {
                 this.store.expandToLevel(expandLevel);
                 this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+            },
+
+            expandRecord: function(record) {
+                if (record) {
+                    record.set('isExpanded', true);
+                    this.store.expandSubItems(record);
+                    this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                }
+            },
+
+            collapseRecord: function(record) {
+                if (record) {
+                    record.set('isExpanded', false);
+                    this.store.collapseSubItems(record);
+                    this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: this.scrollAlwaysVisible});
+                }
             }
         }
     })());

apps/common/main/resources/less/asc-mixins.less

@@ -98,7 +98,7 @@
 .button-otherstates-icon(@icon-class, @icon-size) {
     .btn {
         &:active, &.active {
-            &:not(:disabled):not(.disabed) {
+            &:not(:disabled):not(.disabled) {
                 > .@{icon-class} {
                     @iconsize: -1*@icon-size;
 

apps/common/main/resources/less/input.less

@@ -47,20 +47,20 @@
         position: relative;
     }
 
-    &.error {
-        input {
-            border-color: @brand-danger;
-        }
-
-        .input-error {
-            display: block;
-        }
-    }
-
     &.form-control:focus,
     .form-control:focus {
         border-color: @gray-darker;
     }
+
+    &.error {
+        input:not([disabled]) {
+            border-color: @brand-danger;
+        }
+
+        input:not([disabled]) + .input-error {
+            display: block;
+        }
+    }
 }
 
 input:required:focus:invalid,

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

@@ -67,19 +67,22 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box" style="height: 260px;">',
+                '<div class="box" style="height: 263px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternal,'</button>',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternal,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
-                            '<label>' + this.textUrl + ' *</label>',
+                            '<label>' + this.textUrl + '</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
                     '<div id="id-internal-link">',
-                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 130px;border: 1px solid #cfcfcf;"></div>',
+                        '<div class="input-row">',
+                            '<label>' + this.textUrl + '</label>',
+                        '</div>',
+                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 115px;border: 1px solid #cfcfcf;"></div>',
                     '</div>',
                     '<div class="input-row">',
                         '<label>' + this.textDisplay + '</label>',
@@ -134,6 +137,16 @@ define([
                     return (urltype>0) ? true : me.txtNotUrl;
                 }
             });
+            me.inputUrl._input.on('input', function (e) {
+                me.isInputFirstChange && me.inputUrl.showError();
+                me.isInputFirstChange = false;
+                var val = $(e.target).val();
+                if (me.isAutoUpdate) {
+                    me.inputDisplay.setValue(val);
+                    me.isTextChanged = true;
+                }
+                me.btnOk.setDisabled($.trim(val)=='');
+            });
 
             me.inputDisplay = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-display'),
@@ -143,6 +156,9 @@ define([
             }).on('changed:after', function() {
                 me.isTextChanged = true;
             });
+            me.inputDisplay._input.on('input', function (e) {
+                me.isAutoUpdate = ($(e.target).val()=='');
+            });
 
             me.inputTip = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-tip'),
@@ -194,6 +210,7 @@ define([
                         hasParent: false,
                         isEmptyItem: false,
                         isNotHeader: false,
+                        type: Asc.c_oAscHyperlinkAnchor.Heading,
                         hasSubItems: false
                     }));
 
@@ -226,6 +243,7 @@ define([
                         hasParent: false,
                         isEmptyItem: false,
                         isNotHeader: false,
+                        type: Asc.c_oAscHyperlinkAnchor.Bookmark,
                         hasSubItems: false
                     }));
 
@@ -247,20 +265,33 @@ define([
                         }
                     }
                     store.reset(arr);
+                    this.internalList.collapseAll();
                 }
                 var rec = this.internalList.getSelectedRec();
                 this.btnOk.setDisabled(!rec || rec.get('level')==0 && rec.get('index')>0);
-
             } else
-                this.btnOk.setDisabled(false);
+                this.btnOk.setDisabled($.trim(this.inputUrl.getValue())=='');
         },
 
         onLinkTypeClick: function(type, btn, event) {
             this.ShowHideElem(type);
+            if (this.isAutoUpdate) {
+                if (type==c_oHyperlinkType.InternalLink) {
+                    var rec = this.internalList.getSelectedRec();
+                    this.inputDisplay.setValue(rec && (rec.get('level') || rec.get('index')==0)? rec.get('name') : '');
+                } else {
+                    this.inputDisplay.setValue(this.inputUrl.getValue());
+                }
+                this.isTextChanged = true;
+            }
         },
 
         onSelectItem: function(picker, item, record, e){
             this.btnOk.setDisabled(record.get('level')==0 && record.get('index')>0);
+            if (this.isAutoUpdate) {
+                this.inputDisplay.setValue((record.get('level') || record.get('index')==0) ? record.get('name') : '');
+                this.isTextChanged = true;
+            }
         },
 
         show: function() {
@@ -288,24 +319,31 @@ define([
                     } else {
                         me.inputUrl.setValue('');
                     }
+                    this.btnOk.setDisabled($.trim(this.inputUrl.getValue())=='');
                 } else {
                     if (props.is_TopOfDocument())
                         this.internalList.selectByIndex(0);
                     else if (props.is_Heading()) {
-                        var heading = props.get_Heading(),
+                        var rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Heading, headingParagraph: props.get_Heading() });
-                            rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Heading, headingParagraph: heading });
+                        if (rec) {
-                        if (rec)
+                            this.internalList.expandRecord(this.internalList.store.at(1));
                             this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                        }
                     } else {
                         var rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Bookmark, name: bookmark});
-                        if (rec)
+                        if (rec) {
+                            this.internalList.expandRecord(this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Bookmark, level: 0}));
                             this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                        }
                     }
+                    var rec = this.internalList.getSelectedRec();
+                    this.btnOk.setDisabled(!rec || rec.get('level')==0 && rec.get('index')>0);
                 }
 
                 if (props.get_Text() !== null) {
                     me.inputDisplay.setValue(props.get_Text());
                     me.inputDisplay.setDisabled(false);
+                    me.isAutoUpdate = (me.inputDisplay.getValue()=='' || type == c_oHyperlinkType.WebLink && me.inputUrl.getValue()==me.inputDisplay.getValue());
                 } else {
                     me.inputDisplay.setValue(this.textDefault);
                     me.inputDisplay.setDisabled(true);
@@ -321,9 +359,10 @@ define([
         getSettings: function () {
             var me      = this,
                 props   = new Asc.CHyperlinkProperty(),
-                display = '';
+                display = '',
+                type = this.btnExternal.isActive() ? c_oHyperlinkType.WebLink : c_oHyperlinkType.InternalLink;
 
-            if (this.btnExternal.isActive()) {//WebLink
+            if (type==c_oHyperlinkType.WebLink) {//WebLink
                 var url     = $.trim(me.inputUrl.getValue());
 
                 if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
@@ -346,8 +385,8 @@ define([
                 }
             }
 
-            if (!me.inputDisplay.isDisabled() && ( this.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
+            if (!me.inputDisplay.isDisabled() && ( me.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
-                if (_.isEmpty(me.inputDisplay.getValue()))
+                if (_.isEmpty(me.inputDisplay.getValue()) || type==c_oHyperlinkType.WebLink && me.isAutoUpdate)
                     me.inputDisplay.setValue(display);
                 props.put_Text(me.inputDisplay.getValue());
             } else {
@@ -374,6 +413,7 @@ define([
                 if (state == 'ok') {
                     if (this.btnExternal.isActive()) {//WebLink
                         if (this.inputUrl.checkValidate() !== true)  {
+                            this.isInputFirstChange = true;
                             this.inputUrl.cmpEl.find('input').focus();
                             return;
                         }

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

@@ -50,9 +50,8 @@ var c_oHyperlinkType = {
 define([
     'common/main/lib/util/utils',
     'common/main/lib/component/InputField',
-    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/Window',
-    'common/main/lib/component/RadioBox',
+    'common/main/lib/component/TreeView'
-    'common/main/lib/component/Window'
 ], function () { 'use strict';
 
     PE.Views.HyperlinkSettingsDialog = Common.UI.Window.extend(_.extend({
@@ -70,7 +69,7 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box" style="height: 250px;">',
+                '<div class="box" style="height: 263px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
@@ -81,13 +80,11 @@ define([
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-internal-link" class="hidden" style="margin-top: 15px;">',
+                    '<div id="id-internal-link" class="hidden">',
-                        '<div id="id-dlg-hyperlink-radio-next" style="display: block;margin-bottom: 5px;"></div>',
+                        '<div class="input-row">',
-                        '<div id="id-dlg-hyperlink-radio-prev" style="display: block;margin-bottom: 5px;"></div>',
+                            '<label>' + this.strLinkTo + ' *</label>',
-                        '<div id="id-dlg-hyperlink-radio-first" style="display: block;margin-bottom: 5px;"></div>',
+                        '</div>',
-                        '<div id="id-dlg-hyperlink-radio-last"  style="display: block;margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 115px;border: 1px solid #cfcfcf;"></div>',
-                        '<div id="id-dlg-hyperlink-radio-slide" style="display: inline-block;margin-bottom: 5px;margin-right: 10px;"></div>',
-                        '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>',
                     '</div>',
                     '<div class="input-row">',
                         '<label>' + this.strDisplay + '</label>',
@@ -142,6 +139,16 @@ define([
                     return (urltype>0) ? true : me.txtNotUrl;
                 }
             });
+            me.inputUrl._input.on('input', function (e) {
+                me.isInputFirstChange && me.inputUrl.showError();
+                me.isInputFirstChange = false;
+                var val = $(e.target).val();
+                if (me.isAutoUpdate) {
+                    me.inputDisplay.setValue(val);
+                    me.isTextChanged = true;
+                }
+                me.btnOk.setDisabled($.trim(val)=='');
+            });
 
             me.inputDisplay = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-display'),
@@ -151,6 +158,9 @@ define([
             }).on('changed:after', function() {
                 me.isTextChanged = true;
             });
+            me.inputDisplay._input.on('input', function (e) {
+                me.isAutoUpdate = ($(e.target).val()=='');
+            });
 
             me.inputTip = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-tip'),
@@ -158,59 +168,20 @@ define([
                 maxLength   : Asc.c_oAscMaxTooltipLength
             });
 
-            me.radioNext = new Common.UI.RadioBox({
+            me.internalList = new Common.UI.TreeView({
-                el: $('#id-dlg-hyperlink-radio-next'),
+                el: $('#id-dlg-hyperlink-list'),
-                labelText: this.txtNext,
+                store: new Common.UI.TreeViewStore(),
-                name: 'asc-radio-slide',
+                enableKeyEvents: true
-                checked: true
             });
+            me.internalList.on('item:select', _.bind(this.onSelectItem, this));
 
-            me.radioPrev = new Common.UI.RadioBox({
+            me.btnOk = new Common.UI.Button({
-                el: $('#id-dlg-hyperlink-radio-prev'),
+                el: $window.find('.primary'),
-                labelText: this.txtPrev,
+                disabled: true
-                name: 'asc-radio-slide'
             });
 
-            me.radioFirst = new Common.UI.RadioBox({
-                el: $('#id-dlg-hyperlink-radio-first'),
-                labelText: this.txtFirst,
-                name: 'asc-radio-slide'
-            });
-
-            me.radioLast = new Common.UI.RadioBox({
-                el: $('#id-dlg-hyperlink-radio-last'),
-                labelText: this.txtLast,
-                name: 'asc-radio-slide'
-            });
-
-            me.radioSlide = new Common.UI.RadioBox({
-                el: $('#id-dlg-hyperlink-radio-slide'),
-                labelText: this.txtSlide,
-                name: 'asc-radio-slide'
-            });
-
-            me.cmbSlides = new Common.UI.ComboBox({
-                el: $('#id-dlg-hyperlink-slide'),
-                cls: 'input-group-nr',
-                style: 'width: 50px;',
-                menuStyle: 'min-width: 50px; max-height: 200px;',
-                data: this.slides
-            });
-            me.cmbSlides.setValue(0);
-            me.cmbSlides.on('selected', _.bind(function(combo, record) {
-                me.radioSlide.setValue(true);
-            }, me))
-            .on('changed:after', _.bind(function(combo, record) {
-                me.radioSlide.setValue(true);
-                if (record.value>me.slides.length)
-                    combo.setValue(me.slides.length-1);
-                else if (record.value<1)
-                    combo.setValue(0);
-                else
-                    combo.setValue(record.value-1);
-            }, me));
-
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            me.internalList.on('entervalue', _.bind(me.onPrimary, me));
             me.externalPanel = $window.find('#id-external-link');
             me.internalPanel = $window.find('#id-internal-link');
         },
@@ -221,11 +192,12 @@ define([
 
                 var type = me.parseUrl(props.get_Value());
                 (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
-                me.ShowHideElem(type);
+                me.ShowHideElem(type, props.get_Value());
                 
                 if (props.get_Text()!==null) {
                     me.inputDisplay.setValue(props.get_Text());
                     me.inputDisplay.setDisabled(false);
+                    me.isAutoUpdate = (me.inputDisplay.getValue()=='' || type == c_oHyperlinkType.WebLink && me.inputUrl.getValue()==me.inputDisplay.getValue());
                 } else {
                     this.inputDisplay.setValue(this.textDefault);
                     this.inputDisplay.setDisabled(true);
@@ -244,26 +216,16 @@ define([
         getSettings: function () {
             var me      = this,
                 props   = new Asc.CHyperlinkProperty();
-            var def_display = '';
+            var def_display = '',
-            if (this.btnInternal.isActive()) {//InternalLink
+                type = this.btnExternal.isActive() ? c_oHyperlinkType.WebLink : c_oHyperlinkType.InternalLink;
+            if (type==c_oHyperlinkType.InternalLink) {//InternalLink
                 var url = "ppaction://hlink";
                 var tip = '';
                 var txttip = me.inputTip.getValue();
-                if (this.radioSlide.getValue()) {
+                var rec = this.internalList.getSelectedRec();
-                    url = url + "sldjumpslide" + (this.cmbSlides.getValue());
+                if (rec) {
-                    tip = this.txtSlide + ' ' + (this.cmbSlides.getValue()+1);
+                    url = url + rec.get('type');
-                } else if (this.radioFirst.getValue()) {
+                    tip = rec.get('tiptext');
-                    url = url + "showjump?jump=firstslide";
-                    tip = this.txtFirst;
-                } else if (this.radioLast.getValue()) {
-                    url = url + "showjump?jump=lastslide";
-                    tip = this.txtLast;
-                } else if (this.radioNext.getValue()) {
-                    url = url + "showjump?jump=nextslide";
-                    tip = this.txtNext;
-                } else if (this.radioPrev.getValue()) {
-                    url = url + "showjump?jump=previousslide";
-                    tip = this.txtPrev;
                 }
                 props.put_Value( url );
                 props.put_ToolTip(_.isEmpty(txttip) ? tip : txttip);
@@ -279,7 +241,7 @@ define([
             }
 
             if (!me.inputDisplay.isDisabled() && (me.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
-                if (_.isEmpty(me.inputDisplay.getValue()))
+                if (_.isEmpty(me.inputDisplay.getValue()) || type==c_oHyperlinkType.WebLink && me.isAutoUpdate)
                     me.inputDisplay.setValue(def_display);
                 props.put_Text(me.inputDisplay.getValue());
             }
@@ -305,6 +267,7 @@ define([
                     var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
+                        this.isInputFirstChange = true;
                         this.inputUrl.cmpEl.find('input').focus();
                         return;
                     }
@@ -320,13 +283,109 @@ define([
             this.close();
         },
 
-        ShowHideElem: function(value) {
+        ShowHideElem: function(value, url) {
             this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
             this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            if (value==c_oHyperlinkType.InternalLink) {
+                if (url===null || url===undefined || url=='' )
+                    url = "ppaction://hlinkshowjump?jump=firstslide";
+                var store = this.internalList.store;
+                if (store.length<1) {
+                    var arr = [], i = 0;
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtFirst,
+                        level: 0,
+                        index: i++,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false,
+                        type: "showjump?jump=firstslide",
+                        tiptext: this.txtFirst,
+                        selected: url == "ppaction://hlinkshowjump?jump=firstslide"
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtLast,
+                        level: 0,
+                        index: i++,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false,
+                        type: "showjump?jump=lastslide",
+                        tiptext: this.txtLast,
+                        selected: url == "ppaction://hlinkshowjump?jump=lastslide"
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtNext,
+                        level: 0,
+                        index: i++,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false,
+                        type: "showjump?jump=nextslide",
+                        tiptext: this.txtNext,
+                        selected: url == "ppaction://hlinkshowjump?jump=nextslide"
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtPrev,
+                        level: 0,
+                        index: i++,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false,
+                        type: "showjump?jump=previousslide",
+                        tiptext: this.txtPrev,
+                        selected: url == "ppaction://hlinkshowjump?jump=previousslide"
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.textSlides,
+                        level: 0,
+                        index: i++,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: this.api.getCountPages()>0
+                    }));
+                    var mask = "ppaction://hlinksldjumpslide",
+                        indSlide = url.indexOf(mask),
+                        slideNum = (0 == indSlide) ? parseInt(url.substring(mask.length)) : -1;
+                    for (var i=0; i<this.api.getCountPages(); i++) {
+                        arr.push(new Common.UI.TreeViewModel({
+                            name : this.txtSlide + ' ' + (i+1),
+                            level: 1,
+                            index: arr.length,
+                            hasParent: false,
+                            isEmptyItem: false,
+                            isNotHeader: true,
+                            hasSubItems: false,
+                            type: 'sldjumpslide' + i,
+                            tiptext: this.txtSlide + ' ' + (i+1),
+                            selected: i==slideNum
+                        }));
+                    }
+                    store.reset(arr);
+                }
+                var rec = this.internalList.getSelectedRec();
+                rec && this.internalList.scrollToRecord(rec);
+                this.btnOk.setDisabled(!rec || rec.get('index')==4);
+            } else
+                this.btnOk.setDisabled($.trim(this.inputUrl.getValue())=='');
         },
 
         onLinkTypeClick: function(type, btn, event) {
             this.ShowHideElem(type);
+            if (this.isAutoUpdate) {
+                if (type==c_oHyperlinkType.InternalLink) {
+                    var rec = this.internalList.getSelectedRec();
+                    this.inputDisplay.setValue(rec && (rec.get('level') || rec.get('index')<4) ? rec.get('name') : '');
+                } else {
+                    this.inputDisplay.setValue(this.inputUrl.getValue());
+                }
+                this.isTextChanged = true;
+            }
         },
 
         parseUrl: function(url) {
@@ -336,34 +395,6 @@ define([
             var indAction = url.indexOf("ppaction://hlink");
             if (0 == indAction)
             {
-                if (url == "ppaction://hlinkshowjump?jump=firstslide")
-                {
-                    this.radioFirst.setValue(true);
-                }
-                else if (url == "ppaction://hlinkshowjump?jump=lastslide")
-                {
-                    this.radioLast.setValue(true);
-                }
-                else if (url == "ppaction://hlinkshowjump?jump=nextslide")
-                {
-                    this.radioNext.setValue(true);
-                }
-                else if (url == "ppaction://hlinkshowjump?jump=previousslide")
-                {
-                    this.radioPrev.setValue(true);
-                }
-                else
-                {
-                    this.radioSlide.setValue(true);
-                    var mask = "ppaction://hlinksldjumpslide";
-                    var indSlide = url.indexOf(mask);
-                    if (0 == indSlide)
-                    {
-                        var slideNum = parseInt(url.substring(mask.length));
-                        if (slideNum >= 0 && slideNum < this.slides.length)
-                            this.cmbSlides.setValue(slideNum);
-                    }
-                }
                 return c_oHyperlinkType.InternalLink;
             } else  {
                 this.inputUrl.setValue(url ? url.replace(new RegExp(" ",'g'), "%20") : '');
@@ -371,8 +402,16 @@ define([
             }
         },
 
+        onSelectItem: function(picker, item, record, e){
+            this.btnOk.setDisabled(record.get('index')==4);
+            if (this.isAutoUpdate) {
+                this.inputDisplay.setValue((record.get('level') || record.get('index')<4) ? record.get('name') : '');
+                this.isTextChanged = true;
+            }
+        },
+
         textTitle:          'Hyperlink Settings',
-        textInternalLink:   'Slide In This Presentation',
+        textInternalLink:   'Place in Document',
         textExternalLink:   'External Link',
         textEmptyLink:      'Enter link here',
         textEmptyDesc:      'Enter caption here',
@@ -388,6 +427,7 @@ define([
         txtPrev:            'Previous Slide',
         txtFirst:           'First Slide',
         txtLast:            'Last Slide',
-        textDefault:        'Selected text'
+        textDefault:        'Selected text',
+        textSlides: 'Slides'
     }, PE.Views.HyperlinkSettingsDialog || {}))
 });

apps/presentationeditor/main/resources/less/app.less

@@ -88,6 +88,7 @@
 @import "../../../../common/main/resources/less/radiobox.less";
 @import "../../../../common/main/resources/less/dataview.less";
 @import "../../../../common/main/resources/less/listview.less";
+@import "../../../../common/main/resources/less/treeview.less";
 @import "../../../../common/main/resources/less/colorpalette.less";
 @import "../../../../common/main/resources/less/theme-colorpalette.less";
 @import "../../../../common/main/resources/less/dimension-picker.less";

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

@@ -514,7 +514,7 @@ define([
 
                 while (++i < wc) {
                     if (!this.api.asc_isWorksheetHidden(i)) {
-                        items.push({displayValue: me.api.asc_getWorksheetName(i), value: me.api.asc_getWorksheetName(i)});
+                        items.push(me.api.asc_getWorksheetName(i));
                     }
                 }
 
@@ -538,6 +538,7 @@ define([
                 win.show();
                 win.setSettings({
                     sheets  : items,
+                    ranges  : me.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.All),
                     currentSheet: me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex()),
                     props   : props,
                     text    : cell.asc_getText(),

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

@@ -881,7 +881,7 @@ define([
 
                 while (++i < wc) {
                     if (!this.api.asc_isWorksheetHidden(i)) {
-                        items.push({displayValue: me.api.asc_getWorksheetName(i), value: me.api.asc_getWorksheetName(i)});
+                        items.push(me.api.asc_getWorksheetName(i));
                     }
                 }
 
@@ -905,6 +905,7 @@ define([
                 win.show();
                 win.setSettings({
                     sheets  : items,
+                    ranges  : me.api.asc_getDefinedNames(Asc.c_oAscGetDefinedNamesList.All),
                     currentSheet: me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex()),
                     props   : props,
                     text    : cell.asc_getText(),

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

@@ -46,7 +46,8 @@ define([
     'common/main/lib/util/utils',
     'common/main/lib/component/ComboBox',
     'common/main/lib/component/InputField',
-    'common/main/lib/component/Window'
+    'common/main/lib/component/Window',
+    'common/main/lib/component/TreeView'
 ], function () { 'use strict';
 
     SSE.Views.HyperlinkSettingsDialog = Common.UI.Window.extend(_.extend({
@@ -63,26 +64,23 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box">',
+                '<div class="box" style="height: 290px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
-                            '<label>' + this.strLinkTo + ' *</label>',
+                            '<label>' + this.strLinkTo + '</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
                     '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
-                            '<label style="width: 50%;">' + this.strSheet + '</label>',
+                            '<label>' + this.strRange + '</label>',
-                            '<label style="width: 50%;">' + this.strRange + ' *</label>',
-                        '</div>',
-                        '<div class="input-row" style="margin-bottom: 5px;">',
-                            '<div id="id-dlg-hyperlink-sheet" style="display: inline-block; width: 50%; padding-right: 10px; float: left;"></div>',
-                            '<div id="id-dlg-hyperlink-range" style="display: inline-block; width: 50%;"></div>',
                         '</div>',
+                        '<div id="id-dlg-hyperlink-range" class="input-row" style="margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 115px;border: 1px solid #cfcfcf;"></div>',
                     '</div>',
                     '<div class="input-row">',
                         '<label>' + this.strDisplay + '</label>',
@@ -124,13 +122,6 @@ define([
             });
             me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.RangeLink));
 
-            me.cmbSheets = new Common.UI.ComboBox({
-                el      : $('#id-dlg-hyperlink-sheet'),
-                cls     : 'input-group-nr',
-                editable: false,
-                menuStyle: 'min-width: 100%;max-height: 150px;'
-            });
-
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
                 allowBlank  : false,
@@ -143,6 +134,13 @@ define([
                     return (urltype>0) ? true : me.txtNotUrl;
                 }
             });
+            me.inputUrl._input.on('input', function (e) {
+                me.isInputFirstChange_url && me.inputUrl.showError();
+                me.isInputFirstChange_url = false;
+                var val = $(e.target).val();
+                me.isAutoUpdate && me.inputDisplay.setValue(val);
+                me.btnOk.setDisabled($.trim(val)=='');
+            });
 
             me.inputRange = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-range'),
@@ -153,6 +151,8 @@ define([
                 validateOnBlur: false,
                 value: Common.Utils.InternalSettings.get("sse-settings-r1c1") ? 'R1C1' : 'A1',
                 validation  : function(value) {
+                    if (me.inputRange.isDisabled()) // named range
+                        return true;
                     var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, value, false);
                     if (isvalid == Asc.c_oAscError.ID.No) {
                         return true;
@@ -161,6 +161,13 @@ define([
                     }
                 }
             });
+            me.inputRange._input.on('input', function (e) {
+                me.isInputFirstChange_range && me.inputRange.showError();
+                me.isInputFirstChange_range = false;
+                var val = $(e.target).val();
+                me.isAutoUpdate && me.inputDisplay.setValue(me.internalList.getSelectedRec().get('name') + (val!=='' ? '!' + val : ''));
+                me.btnOk.setDisabled($.trim(val)=='');
+            });
 
             me.inputDisplay = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-display'),
@@ -168,6 +175,9 @@ define([
                 validateOnBlur: false,
                 style       : 'width: 100%;'
             });
+            me.inputDisplay._input.on('input', function (e) {
+                me.isAutoUpdate = ($(e.target).val()=='');
+            });
 
             me.inputTip = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-tip'),
@@ -175,8 +185,20 @@ define([
                 maxLength   : Asc.c_oAscMaxTooltipLength
             });
 
-            $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            me.internalList = new Common.UI.TreeView({
+                el: $('#id-dlg-hyperlink-list'),
+                store: new Common.UI.TreeViewStore(),
+                enableKeyEvents: true
+            });
+            me.internalList.on('item:select', _.bind(this.onSelectItem, this));
 
+            me.btnOk = new Common.UI.Button({
+                el: $window.find('.primary'),
+                disabled: true
+            });
+
+            $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            me.internalList.on('entervalue', _.bind(me.onPrimary, me));
             me.externalPanel = $window.find('#id-external-link');
             me.internalPanel = $window.find('#id-internal-link');
         },
@@ -193,45 +215,61 @@ define([
         setSettings: function(settings) {
             if (settings) {
                 var me = this;
+                me.settings = settings;
 
-                this.cmbSheets.setData(settings.sheets);
                 var type = (settings.props) ? settings.props.asc_getType() : Asc.c_oAscHyperlinkType.WebLink;
                 (type == Asc.c_oAscHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
-                me.ShowHideElem(type);
+                me.ShowHideElem(type, settings.props);
                 me.btnInternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.WebLink));
                 me.btnExternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.RangeLink));
 
+                var defrange = '';
                 if (!settings.props) {
                     this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text);
                     this.focusedInput = this.inputUrl.cmpEl.find('input');
-                    this.cmbSheets.setValue(settings.currentSheet);
                 } else {
                     if (type == Asc.c_oAscHyperlinkType.RangeLink) {
-                        this.cmbSheets.setValue(settings.props.asc_getSheet());
+                        if (settings.props.asc_getSheet()) {
-                        this.inputRange.setValue(settings.props.asc_getRange());
+                            this.inputRange.setValue(settings.props.asc_getRange());
-                        this.focusedInput = this.inputRange.cmpEl.find('input');
+                            this.focusedInput = this.inputRange.cmpEl.find('input');
+                            defrange = settings.props.asc_getSheet() + '!' +  settings.props.asc_getRange();
+                        } else {// named range
+                            this.inputRange.setDisabled(true);
+                            defrange = settings.props.asc_getLocation();
+                        }
                     } else {
                         this.inputUrl.setValue(settings.props.asc_getHyperlinkUrl().replace(new RegExp(" ",'g'), "%20"));
                         this.focusedInput = this.inputUrl.cmpEl.find('input');
-                        this.cmbSheets.setValue(settings.currentSheet);
+                        this.btnOk.setDisabled($.trim(this.inputUrl.getValue())=='');
                     }
                     this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.props.asc_getText());
                     this.inputTip.setValue(settings.props.asc_getTooltip());
                 }
-
                 this.inputDisplay.setDisabled(settings.isLock);
+                !settings.isLock && (this.isAutoUpdate = (this.inputDisplay.getValue()=='' || type == Asc.c_oAscHyperlinkType.WebLink && me.inputUrl.getValue()==me.inputDisplay.getValue()) ||
+                                                                                              type == Asc.c_oAscHyperlinkType.RangeLink && defrange==me.inputDisplay.getValue());
             }
         },
 
         getSettings: function() {
             var props = new Asc.asc_CHyperlink(),
-                def_display = "";
+                def_display = "",
-            props.asc_setType(this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink);
+                type = this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink;
+            props.asc_setType(type);
 
-            if (this.btnInternal.isActive()) {
+            if (type==Asc.c_oAscHyperlinkType.RangeLink) {
-                props.asc_setSheet(this.cmbSheets.getValue());
+                var rec = this.internalList.getSelectedRec();
-                props.asc_setRange(this.inputRange.getValue());
+                if (rec && rec.get('level')>0) {
-                def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue();
+                    if (rec.get('type')) {// named range
+                        props.asc_setSheet(null);
+                        props.asc_setLocation(rec.get('name'));
+                        def_display = rec.get('name');
+                    } else {
+                        props.asc_setSheet(rec.get('name'));
+                        props.asc_setRange(this.inputRange.getValue());
+                        def_display = rec.get('name') + '!' + this.inputRange.getValue();
+                    }
+                }
             } else {
                 var url = this.inputUrl.getValue().replace(/^\s+|\s+$/g,'');
                 if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
@@ -244,7 +282,7 @@ define([
             if (this.inputDisplay.isDisabled())
                 props.asc_setText(null);
             else {
-                if (_.isEmpty(this.inputDisplay.getValue()))
+                if (_.isEmpty(this.inputDisplay.getValue()) || type==Asc.c_oAscHyperlinkType.WebLink && this.isAutoUpdate)
                     this.inputDisplay.setValue(def_display);
                 props.asc_setText(this.inputDisplay.getValue());
             }
@@ -271,10 +309,12 @@ define([
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
+                        this.isInputFirstChange_url = true;
                         return;
                     }
                     if (checkrange !== true)  {
                         this.inputRange.cmpEl.find('input').focus();
+                        this.isInputFirstChange_range = true;
                         return;
                     }
                     if (checkdisp !== true) {
@@ -289,17 +329,112 @@ define([
             this.close();
         },
 
-        ShowHideElem: function(value) {
+        ShowHideElem: function(value, props) {
             this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
             this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
+            var store = this.internalList.store;
+            if (value==Asc.c_oAscHyperlinkType.RangeLink) {
+                if (store.length<1 && this.settings) {
+                    var sheets = this.settings.sheets,
+                        count = sheets.length,
+                        arr = [];
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.textSheets,
+                        level: 0,
+                        index: 0,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        isExpanded: false,
+                        hasSubItems: true
+                    }));
+                    for (var i=0; i<count; i++) {
+                        arr.push(new Common.UI.TreeViewModel({
+                            name : sheets[i],
+                            level: 1,
+                            index: i+1,
+                            type: 0, // sheet
+                            isVisible: false,
+                            hasParent: true
+                        }));
+                    }
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.textNames,
+                        level: 0,
+                        index: arr.length,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: false,
+                        isExpanded: false,
+                        hasSubItems: false
+                    }));
+                    var definedNames = arr[arr.length-1];
+                    var ranges = this.settings.ranges,
+                        prev_level = 0;
+                    count = ranges.length;
+                    for (var i=0; i<count; i++) {
+                        var range = ranges[i];
+                        if (prev_level<1)
+                            arr[arr.length-1].set('hasSubItems', true);
+                        arr.push(new Common.UI.TreeViewModel({
+                            name : range.asc_getName(),
+                            level: 1,
+                            index: arr.length,
+                            type: 1, // defined name
+                            isVisible: false,
+                            hasParent: true
+                        }));
+                        prev_level = 1;
+                    }
+                    store.reset(arr);
+                    var sheet = props ? (props.asc_getSheet() || props.asc_getLocation()) : this.settings.currentSheet,
+                        rec = store.findWhere({name: sheet });
+                    if (rec) {
+                        this.internalList.expandRecord(rec.get('type') ? definedNames : store.at(0));
+                        this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                    }
+                }
+                var rec = this.internalList.getSelectedRec();
+                this.btnOk.setDisabled(!rec || rec.get('level')==0 || rec.get('type')==0 && $.trim(this.inputRange.getValue())=='');
+            } else
+                this.btnOk.setDisabled($.trim(this.inputUrl.getValue())=='');
         },
 
         onLinkTypeClick: function(type, btn, event) {
             this.ShowHideElem(type);
+            if (this.isAutoUpdate) {
+                if (type==Asc.c_oAscHyperlinkType.RangeLink) {
+                    var rec = this.internalList.getSelectedRec(),
+                        list = rec && rec.get('level') ? rec.get('name') : '';
+                    if (rec && rec.get('type')==1) {
+                        this.inputDisplay.setValue(list);
+                    } else {
+                        var val = this.inputRange.getValue();
+                        this.inputDisplay.setValue(list + (list!=='' || val!=='' ? '!' : '') + val);
+                    }
+
+                } else {
+                    this.inputDisplay.setValue(this.inputUrl.getValue());
+                }
+            }
+        },
+
+        onSelectItem: function(picker, item, record, e){
+            this.btnOk.setDisabled(record.get('level')==0 || record.get('type')==0 && $.trim(this.inputRange.getValue())=='');
+            this.inputRange.setDisabled(record.get('type')==1 || record.get('level')==0);
+            if (this.isAutoUpdate) {
+                var list = record.get('level') ? record.get('name') : '';
+                if (record.get('type')==1) {
+                    this.inputDisplay.setValue(list);
+                } else {
+                    var val = this.inputRange.getValue();
+                    this.inputDisplay.setValue(list + ((list!=='' && val!=='') ? '!' : '') + val);
+                }
+            }
         },
 
         textTitle:          'Hyperlink Settings',
-        textInternalLink:   'Internal Data Range',
+        textInternalLink:   'Place in Document',
         textExternalLink:   'Web Link',
         textEmptyLink:      'Enter link here',
         textEmptyDesc:      'Enter caption here',
@@ -312,6 +447,8 @@ define([
         txtEmpty:           'This field is required',
         textInvalidRange:   'ERROR! Invalid cells range',
         txtNotUrl:          'This field should be a URL in the format \"http://www.example.com\"',
-        textDefault:        'Selected range'
+        textDefault:        'Selected range',
+        textSheets:         'Sheets',
+        textNames:          'Defined names'
     }, SSE.Views.HyperlinkSettingsDialog || {}))
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1749,12 +1749,14 @@
   "SSE.Views.HyperlinkSettingsDialog.textEmptyLink": "Enter link here",
   "SSE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here",
   "SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
-  "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range",
+  "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Place in Document",
   "SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range",
   "SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
   "SSE.Views.HyperlinkSettingsDialog.txtNotUrl": "This field should be a URL in the \"http://www.example.com\" format",
+  "SSE.Views.HyperlinkSettingsDialog.textSheets": "Sheets",
+  "SSE.Views.HyperlinkSettingsDialog.textNames": "Defined names",
   "SSE.Views.ImageSettings.textAdvanced": "Show advanced settings",
   "SSE.Views.ImageSettings.textCrop": "Crop",
   "SSE.Views.ImageSettings.textCropFill": "Fill",

apps/spreadsheeteditor/main/resources/less/app.less

@@ -88,6 +88,7 @@
 @import "../../../../common/main/resources/less/radiobox.less";
 @import "../../../../common/main/resources/less/dataview.less";
 @import "../../../../common/main/resources/less/listview.less";
+@import "../../../../common/main/resources/less/treeview.less";
 @import "../../../../common/main/resources/less/colorpalette.less";
 @import "../../../../common/main/resources/less/theme-colorpalette.less";
 @import "../../../../common/main/resources/less/dimension-picker.less";