merge with develop

CHANGELOG.md

@@ -4,7 +4,8 @@
 * 
 
 ### Document Editor
-* 
+* Create and manage bookmarks
+* Create internal hyperlinks to bookmarks and headings
 
 ### Spreadsheet Editor
 * Support Spanish in formulas

apps/common/main/resources/less/advanced-settings-window.less

@@ -36,12 +36,16 @@
     }
 
     .footer {
-        padding-top: 15px;
+        padding: 15px 15px 0;
 
         &.center {
             text-align: center;
         }
 
+        &.right {
+            text-align: right;
+        }
+
         &.justify {
             padding-left: 30px;
             padding-right: 30px;

apps/common/main/resources/less/buttons.less

@@ -512,6 +512,12 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
+    &.auto {
+        width: auto;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
     &:hover:not(.disabled),
     .over:not(.disabled) {
         background-color: @secondary !important;
@@ -520,6 +526,7 @@
     &:active:not(.disabled),
     &.active:not(.disabled) {
         background-color: @primary !important;
+        border-color: @primary;
         color: white;
     }
 

apps/common/main/resources/less/toolbar.less

@@ -317,3 +317,4 @@
 .button-normal-icon(~'x-huge .btn-contents', 53, @toolbar-big-icon-size);
 .button-normal-icon(btn-controls,         54, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-select-pivot', 55, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-bookmarks', 56, @toolbar-big-icon-size);

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

@@ -44,7 +44,8 @@ define([
     'documenteditor/main/app/view/Links',
     'documenteditor/main/app/view/NoteSettingsDialog',
     'documenteditor/main/app/view/HyperlinkSettingsDialog',
-    'documenteditor/main/app/view/TableOfContentsSettings'
+    'documenteditor/main/app/view/TableOfContentsSettings',
+    'documenteditor/main/app/view/BookmarksDialog'
 ], function () {
     'use strict';
 
@@ -64,7 +65,8 @@ define([
                     'links:contents': this.onTableContents,
                     'links:update': this.onTableContentsUpdate,
                     'links:notes': this.onNotesClick,
-                    'links:hyperlink': this.onHyperlinkClick
+                    'links:hyperlink': this.onHyperlinkClick,
+                    'links:bookmarks': this.onBookmarksClick
                 },
                 'DocumentHolder': {
                     'links:contents': this.onTableContents,
@@ -311,6 +313,19 @@ define([
             }
         },
 
+        onBookmarksClick: function(btn) {
+            var me = this;
+            (new DE.Views.BookmarksDialog({
+                api: me.api,
+                props: me.api.asc_GetBookmarksManager(),
+                handler: function (result, settings) {
+                    if (settings) {
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                }
+            })).show();
+        },
+
         onShowContentControlsActions: function(action, x, y) {
             var menu = (action==1) ? this.view.contentsUpdateMenu : this.view.contentsMenu,
                 documentHolderView  = this.getApplication().getController('DocumentHolder').documentHolder,

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

@@ -161,6 +161,7 @@
                 <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge slot-inshyperlink"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-bookmarks"></span>
                 </div>
             </section>
         </section>

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

@@ -0,0 +1,303 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  BookmarksDialog.js.js
+ *
+ *  Created by Julia Radzhabova on 15.02.2018
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/ListView',
+    'common/main/lib/component/InputField',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/RadioBox',
+    'common/main/lib/view/AdvancedSettingsWindow'
+], function () { 'use strict';
+
+    DE.Views.BookmarksDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 300,
+            height: 360
+        },
+
+        initialize : function(options) {
+            var me = this;
+
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: [
+                    '<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
+                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
+                            '<div class="settings-panel active">',
+                                '<table cols="1" style="width: 100%;">',
+                                    '<tr>',
+                                        '<td class="padding-extra-small">',
+                                        '<label class="input-label">', me.textBookmarkName, '</label>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-large">',
+                                            '<div id="bookmarks-txt-name" style="display:inline-block;vertical-align: top;margin-right: 10px;"></div>',
+                                            '<button type="button" result="add" class="btn btn-text-default" id="bookmarks-btn-add" style="vertical-align: top;">', me.textAdd,'</button>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-extra-small">',
+                                            '<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
+                                            '<div id="bookmarks-radio-name" style="display: inline-block; margin-right: 10px;"></div>',
+                                            '<div id="bookmarks-radio-location" style="display: inline-block;"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-small">',
+                                        '<div id="bookmarks-list" style="width:100%; height: 130px;"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td class="padding-large">',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto" style="margin-right: 10px;">', me.textGoto,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete" style="">', me.textDelete,'</button>',
+                                        '</td>',
+                                    '</tr>',
+                                    '<tr>',
+                                        '<td>',
+                                            '<div id="bookmarks-checkbox-hidden"></div>',
+                                        '</td>',
+                                    '</tr>',
+                                '</table>',
+                            '</div></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="footer right">',
+                    '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + me.textClose + '</button>',
+                    '</div>'
+                ].join('')
+            }, options);
+
+            this.api        = options.api;
+            this.handler    = options.handler;
+            this.props      = options.props;
+
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+
+            this.txtName = new Common.UI.InputField({
+                el          : $('#bookmarks-txt-name'),
+                allowBlank  : true,
+                validateOnChange: true,
+                validateOnBlur: false,
+                style       : 'width: 195px;',
+                value       : '',
+                maxLength: 40
+            }).on('changing', _.bind(this.onNameChanging, this));
+
+            this.radioName = new Common.UI.RadioBox({
+                el: $('#bookmarks-radio-name'),
+                labelText: this.textName,
+                name: 'asc-radio-bookmark-sort',
+                checked: true
+            });
+            this.radioName.on('change', _.bind(this.onRadioSort, this));
+
+            this.radioLocation = new Common.UI.RadioBox({
+                el: $('#bookmarks-radio-location'),
+                labelText: this.textLocation,
+                name: 'asc-radio-bookmark-sort'
+            });
+            this.radioLocation.on('change', _.bind(this.onRadioSort, this));
+
+            this.bookmarksList = new Common.UI.ListView({
+                el: $('#bookmarks-list', this.$window),
+                store: new Common.UI.DataViewStore(),
+                itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="pointer-events:none;"><%= value %></div>')
+            });
+            this.bookmarksList.store.comparator = function(rec) {
+                return (me.radioName.getValue() ? rec.get("value") : rec.get("location"));
+            };
+            this.bookmarksList.on('item:dblclick', _.bind(this.onDblClickBookmark, this));
+            this.bookmarksList.on('entervalue', _.bind(this.onPrimary, this));
+            this.bookmarksList.on('item:select', _.bind(this.onSelectBookmark, this));
+
+            this.btnAdd = new Common.UI.Button({
+                el: $('#bookmarks-btn-add'),
+                disabled: true
+            });
+            this.$window.find('#bookmarks-btn-add').on('click', _.bind(this.onDlgBtnClick, this));
+
+            this.btnGoto = new Common.UI.Button({
+                el: $('#bookmarks-btn-goto'),
+                disabled: true
+            });
+            this.btnGoto.on('click', _.bind(this.gotoBookmark, this));
+
+            this.btnDelete = new Common.UI.Button({
+                el: $('#bookmarks-btn-delete'),
+                disabled: true
+            });
+            this.btnDelete.on('click', _.bind(this.deleteBookmark, this));
+
+            this.chHidden = new Common.UI.CheckBox({
+                el: $('#bookmarks-checkbox-hidden'),
+                labelText: this.textHidden,
+                value: Common.Utils.InternalSettings.get("de-bookmarks-hidden") || false
+            });
+            this.chHidden.on('change', _.bind(this.onChangeHidden, this));
+
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        show: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+        },
+
+        close: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments);
+            Common.Utils.InternalSettings.set("de-bookmarks-hidden", this.chHidden.getValue()=='checked');
+        },
+
+        _setDefaults: function (props) {
+            this.refreshBookmarks();
+            this.bookmarksList.scrollToRecord(this.bookmarksList.selectByIndex(0));
+        },
+
+        getSettings: function () {
+            return {};
+        },
+
+        onDlgBtnClick: function(event) {
+            var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
+            if (state == 'add') {
+                this.props.asc_AddBookmark(this.txtName.getValue());
+            }
+
+            this.close();
+        },
+
+        onPrimary: function() {
+            return true;
+        },
+
+        refreshBookmarks: function() {
+            if (this.props) {
+                var store = this.bookmarksList.store,
+                    count = this.props.asc_GetCount(),
+                    showHidden = this.chHidden.getValue()=='checked',
+                    arr = [];
+                for (var i=0; i<count; i++) {
+                    var name = this.props.asc_GetName(i);
+                    if (!this.props.asc_IsInternalUseBookmark(name) && (showHidden || !this.props.asc_IsHiddenBookmark(name))) {
+                        var rec = new Common.UI.DataViewModel();
+                        rec.set({
+                            value: name,
+                            location: i
+                        });
+                        arr.push(rec);
+                    }
+                }
+                store.reset(arr, {silent: false});
+            }
+        },
+
+        onSelectBookmark: function(listView, itemView, record) {
+            var value = record.get('value');
+            this.txtName.setValue(value);
+            this.btnAdd.setDisabled(false);
+            this.btnGoto.setDisabled(false);
+            this.btnDelete.setDisabled(false);
+        },
+
+        gotoBookmark: function(btn, eOpts){
+            var rec = this.bookmarksList.getSelectedRec();
+            if (rec.length>0) {
+                this.props.asc_GoToBookmark(rec[0].get('value'));
+            }
+        },
+
+        onDblClickBookmark: function(listView, itemView, record) {
+            this.props.asc_GoToBookmark(record.get('value'));
+        },
+
+        deleteBookmark: function(btn, eOpts){
+            var rec = this.bookmarksList.getSelectedRec();
+            if (rec.length>0) {
+                this.props.asc_RemoveBookmark(rec[0].get('value'));
+                var store = this.bookmarksList.store;
+                var idx = _.indexOf(store.models, rec[0]);
+                store.remove(rec[0]);
+            }
+        },
+
+        onRadioSort: function(field, newValue, eOpts) {
+            if (newValue) {
+                this.bookmarksList.store.sort();
+                this.bookmarksList.onResetItems();
+            }
+        },
+
+        onChangeHidden: function(field, newValue, oldValue, eOpts){
+            this.refreshBookmarks();
+        },
+
+        onNameChanging: function (input, value) {
+            var exist = this.props.asc_HaveBookmark(value);
+            this.bookmarksList.deselectAll();
+            this.btnAdd.setDisabled(!this.props.asc_CheckNewBookmarkName(value) && !exist);
+            this.btnGoto.setDisabled(!exist);
+            this.btnDelete.setDisabled(!exist);
+        },
+
+        textTitle:    'Bookmarks',
+        textLocation: 'Location',
+        textBookmarkName: 'Bookmark name',
+        textSort: 'Sort by',
+        textName: 'Name',
+        textAdd: 'Add',
+        textGoto: 'Go to',
+        textDelete: 'Delete',
+        textClose: 'Close',
+        textHidden: 'Hidden bookmarks'
+
+    }, DE.Views.BookmarksDialog || {}))
+});

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

@@ -42,6 +42,11 @@
 if (Common === undefined)
     var Common = {};
 
+var c_oHyperlinkType = {
+    InternalLink:0,
+    WebLink: 1
+};
+
 define([
     'common/main/lib/util/utils',
     'common/main/lib/component/InputField',
@@ -61,11 +66,20 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box">',
+                '<div class="box" style="height: 260px;">',
-                    '<div class="input-row">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<label>' + this.textUrl + ' *</label>',
+                        '<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>',
+                        '</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>',
-                    '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
                         '<label>' + this.textDisplay + '</label>',
                     '</div>',
@@ -94,6 +108,23 @@ define([
             var me = this,
                 $window = this.getChild();
 
+            me.btnExternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-external'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false,
+                pressed: true
+            });
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
+
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
                 allowBlank  : false,
@@ -122,8 +153,117 @@ define([
                 maxLength   : Asc.c_oAscMaxTooltipLength
             });
 
+            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')
+            });
+
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
+            me.externalPanel = $window.find('#id-external-link');
+            me.internalPanel = $window.find('#id-internal-link');
+        },
+
+        ShowHideElem: function(value) {
+            this.externalPanel.toggleClass('hidden', value !== c_oHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
+            var store = this.internalList.store;
+            if (value==c_oHyperlinkType.InternalLink) {
+                if (store.length<1) {
+                    var anchors = this.api.asc_GetHyperlinkAnchors(),
+                        count = anchors.length,
+                        prev_level = 0,
+                        header_level = 0,
+                        arr = [];
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtBeginning,
+                        level: 0,
+                        index: 0,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: true,
+                        hasSubItems: false
+                    }));
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtHeadings,
+                        level: 0,
+                        index: 1,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: false,
+                        hasSubItems: false
+                    }));
+
+                    for (var i=0; i<count; i++) {
+                        var anchor = anchors[i],
+                            level = anchors[i].asc_GetHeadingLevel(),
+                            hasParent = true;
+                        if (anchor.asc_GetType()== Asc.c_oAscHyperlinkAnchor.Heading){
+                            if (level>prev_level)
+                                arr[arr.length-1].set('hasSubItems', true);
+                            if (level<=header_level) {
+                                header_level = level;
+                                hasParent = false;
+                            }
+                            arr.push(new Common.UI.TreeViewModel({
+                                name : anchor.asc_GetHeadingText(),
+                                level: level,
+                                index: i+2,
+                                hasParent: hasParent,
+                                type: Asc.c_oAscHyperlinkAnchor.Heading,
+                                headingParagraph: anchor.asc_GetHeadingParagraph()
+                            }));
+                            prev_level = level;
+                        }
+                    }
+                    arr.push(new Common.UI.TreeViewModel({
+                        name : this.txtBookmarks,
+                        level: 0,
+                        index: arr.length,
+                        hasParent: false,
+                        isEmptyItem: false,
+                        isNotHeader: false,
+                        hasSubItems: false
+                    }));
+
+                    prev_level = 0;
+                    for (var i=0; i<count; i++) {
+                        var anchor = anchors[i],
+                            hasParent = true;
+                        if (anchor.asc_GetType()== Asc.c_oAscHyperlinkAnchor.Bookmark){
+                            if (prev_level<1)
+                                arr[arr.length-1].set('hasSubItems', true);
+                            arr.push(new Common.UI.TreeViewModel({
+                                name : anchor.asc_GetBookmarkName(),
+                                level: 1,
+                                index: arr.length,
+                                hasParent: false,
+                                type: Asc.c_oAscHyperlinkAnchor.Bookmark
+                            }));
+                            prev_level = 1;
+                        }
+                    }
+                    store.reset(arr);
+                }
+                var rec = this.internalList.getSelectedRec();
+                this.btnOk.setDisabled(rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0);
+
+            } else
+                this.btnOk.setDisabled(false);
+        },
+
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
+        onSelectItem: function(picker, item, record, e){
+            this.btnOk.setDisabled(record.get('level')==0 && record.get('index')>0);
         },
 
         show: function() {
@@ -139,10 +279,31 @@ define([
             if (props) {
                 var me = this;
 
-                if (props.get_Value()) {
+                var bookmark = props.get_Bookmark(),
-                    me.inputUrl.setValue(props.get_Value().replace(new RegExp(" ",'g'), "%20"));
+                    type = (bookmark === null || bookmark=='') ? c_oHyperlinkType.WebLink : c_oHyperlinkType.InternalLink;
+
+                (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
+                me.ShowHideElem(type);
+
+                if (type == c_oHyperlinkType.WebLink) {
+                    if (props.get_Value()) {
+                        me.inputUrl.setValue(props.get_Value().replace(new RegExp(" ",'g'), "%20"));
+                    } else {
+                        me.inputUrl.setValue('');
+                    }
                 } else {
-                    me.inputUrl.setValue('');
+                    if (props.is_TopOfDocument())
+                        this.internalList.selectByIndex(0);
+                    else if (props.is_Heading()) {
+                        var heading = props.get_Heading(),
+                            rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Heading, headingParagraph: heading });
+                        if (rec)
+                            this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                    } else {
+                        var rec = this.internalList.store.findWhere({type: Asc.c_oAscHyperlinkAnchor.Bookmark, name: bookmark});
+                        if (rec)
+                            this.internalList.scrollToRecord(this.internalList.selectRecord(rec));
+                    }
                 }
 
                 if (props.get_Text() !== null) {
@@ -163,17 +324,34 @@ define([
         getSettings: function () {
             var me      = this,
                 props   = new Asc.CHyperlinkProperty(),
-                url     = $.trim(me.inputUrl.getValue());
+                display = '';
 
-            if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
+            if (this.btnExternal.isActive()) {//WebLink
-                url = ( (me.isEmail) ? 'mailto:' : 'http://' ) + url;
+                var url     = $.trim(me.inputUrl.getValue());
 
-            url = url.replace(new RegExp("%20",'g')," ");
+                if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
-            props.put_Value(url);
+                    url = ( (me.isEmail) ? 'mailto:' : 'http://' ) + url;
+
+                url = url.replace(new RegExp("%20",'g')," ");
+                props.put_Value(url);
+                props.put_Bookmark(null);
+                display = url;
+            } else {
+                var rec = this.internalList.getSelectedRec();
+                if (rec.length>0) {
+                    props.put_Bookmark(rec[0].get('name'));
+                    if (rec[0].get('index')==0)
+                        props.put_TopOfDocument();
+                    var para = rec[0].get('headingParagraph');
+                    if (para)
+                        props.put_Heading(para);
+                    display = rec[0].get('name');
+                }
+            }
 
             if (!me.inputDisplay.isDisabled() && ( this.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
                 if (_.isEmpty(me.inputDisplay.getValue()))
-                    me.inputDisplay.setValue(url);
+                    me.inputDisplay.setValue(display);
                 props.put_Text(me.inputDisplay.getValue());
             } else {
                 props.put_Text(null);
@@ -199,13 +377,17 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = this.inputUrl.checkValidate(),
+                    if (this.btnExternal.isActive()) {//WebLink
-                        checkdisp = this.inputDisplay.checkValidate();
+                        if (this.inputUrl.checkValidate() !== true)  {
-                    if (checkurl !== true)  {
+                            this.inputUrl.cmpEl.find('input').focus();
-                        this.inputUrl.cmpEl.find('input').focus();
+                            return;
-                        return;
+                        }
+                    } else {
+                        var rec = this.internalList.getSelectedRec();
+                        if (rec.length<1 || rec[0].get('level')==0 && rec[0].get('index')>0)
+                            return;
                     }
-                    if (checkdisp !== true) {
+                    if (this.inputDisplay.checkValidate() !== true) {
                         this.inputDisplay.cmpEl.find('input').focus();
                         return;
                     }
@@ -225,6 +407,11 @@ define([
         txtNotUrl:          'This field should be a URL in the format \"http://www.example.com\"',
         textTooltip:        'ScreenTip text',
         textDefault:        'Selected text',
-        textTitle:          'Hyperlink Settings'
+        textTitle:          'Hyperlink Settings',
+        textExternal:       'External Link',
+        textInternal:       'Place in Document',
+        txtBeginning: 'Beginning of document',
+        txtHeadings: 'Headings',
+        txtBookmarks: 'Bookmarks'
     }, DE.Views.HyperlinkSettingsDialog || {}))
 });

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

@@ -101,6 +101,10 @@ define([
                     me.fireEvent('links:hyperlink');
                 });
             });
+
+            this.btnBookmarks.on('click', function (b, e) {
+                me.fireEvent('links:bookmarks');
+            });
         }
 
         return {
@@ -161,6 +165,15 @@ define([
                 _injectComponent('#slot-btn-contents-update', this.btnContentsUpdate);
                 this.paragraphControls.push(this.btnContentsUpdate);
 
+                this.btnBookmarks = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-bookmarks',
+                    caption: this.capBtnBookmarks,
+                    disabled: true
+                });
+                _injectComponent('#slot-btn-bookmarks', this.btnBookmarks);
+                this.paragraphControls.push(this.btnBookmarks);
+
                 this._state = {disabled: false};
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
@@ -255,6 +268,8 @@ define([
                         btn.updateHint(me.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
                     });
 
+                    me.btnBookmarks.updateHint(me.tipBookmarks);
+
                     setEvents.call(me);
                 });
             },
@@ -293,7 +308,9 @@ define([
             capBtnInsFootnote: 'Footnotes',
             confirmDeleteFootnotes: 'Do you want to delete all footnotes?',
             capBtnInsLink: 'Hyperlink',
-            tipInsertHyperlink: 'Add Hyperlink'
+            tipInsertHyperlink: 'Add Hyperlink',
+            capBtnBookmarks: 'Bookmark',
+            tipBookmarks: 'Create a bookmark'
         }
     }()), DE.Views.Links || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -787,6 +787,16 @@
   "DE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
   "DE.Controllers.Viewport.textFitPage": "Fit to Page",
   "DE.Controllers.Viewport.textFitWidth": "Fit to Width",
+  "DE.Views.BookmarksDialog.textTitle": "Bookmarks",
+  "DE.Views.BookmarksDialog.textLocation": "Location",
+  "DE.Views.BookmarksDialog.textBookmarkName": "Bookmark name",
+  "DE.Views.BookmarksDialog.textSort": "Sort by",
+  "DE.Views.BookmarksDialog.textName": "Name",
+  "DE.Views.BookmarksDialog.textAdd": "Add",
+  "DE.Views.BookmarksDialog.textGoto": "Go to",
+  "DE.Views.BookmarksDialog.textDelete": "Delete",
+  "DE.Views.BookmarksDialog.textClose": "Close",
+  "DE.Views.BookmarksDialog.textHidden": "Hidden bookmarks",
   "DE.Views.ChartSettings.textAdvanced": "Show advanced settings",
   "DE.Views.ChartSettings.textArea": "Area",
   "DE.Views.ChartSettings.textBar": "Bar",
@@ -1177,6 +1187,11 @@
   "DE.Views.HyperlinkSettingsDialog.textUrl": "Link to",
   "DE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",
   "DE.Views.HyperlinkSettingsDialog.txtNotUrl": "This field should be a URL in the \"http://www.example.com\" format",
+  "DE.Views.HyperlinkSettingsDialog.textExternal": "External Link",
+  "DE.Views.HyperlinkSettingsDialog.textInternal": "Place in Document",
+  "DE.Views.HyperlinkSettingsDialog.txtBeginning": "Beginning of document",
+  "DE.Views.HyperlinkSettingsDialog.txtHeadings": "Headings",
+  "DE.Views.HyperlinkSettingsDialog.txtBookmarks": "Bookmarks",
   "DE.Views.ImageSettings.textAdvanced": "Show advanced settings",
   "DE.Views.ImageSettings.textEdit": "Edit",
   "DE.Views.ImageSettings.textEditObject": "Edit Object",
@@ -1291,6 +1306,8 @@
   "DE.Views.Links.tipContentsUpdate": "Refresh table of contents",
   "DE.Views.Links.tipInsertHyperlink": "Add hyperlink",
   "DE.Views.Links.tipNotes": "Insert or edit footnotes",
+  "DE.Views.Links.capBtnBookmarks": "Bookmark",
+  "DE.Views.Links.tipBookmarks": "Create a bookmark",
   "DE.Views.MailMergeEmailDlg.cancelButtonText": "Cancel",
   "DE.Views.MailMergeEmailDlg.filePlaceholder": "PDF",
   "DE.Views.MailMergeEmailDlg.okButtonText": "Send",

apps/documenteditor/main/resources/less/rightmenu.less

@@ -31,6 +31,10 @@
         display: block;
     }
 
+    .padding-extra-small {
+        padding-bottom: 2px;
+    }
+
     .padding-small {
         padding-bottom: 8px;
     }

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

@@ -69,14 +69,14 @@ define([
             }, options || {});
 
             this.template = [
-                '<div class="box" style="height: 270px;">',
+                '<div class="box" style="height: 250px;">',
-                    '<div class="input-row">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<label style="font-weight: bold;">' + this.textLinkType + '</label>',
+                        '<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-dlg-hyperlink-type" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
-                            '<label style="font-weight: bold;">' + this.strLinkTo + ' *</label>',
+                            '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -89,11 +89,11 @@ define([
                         '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>',
                     '</div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.strDisplay + '</label>',
+                        '<label>' + this.strDisplay + '</label>',
                     '</div>',
                     '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
-                        '<label style="font-weight: bold;">' + this.textTipText + '</label>',
+                        '<label>' + this.textTipText + '</label>',
                     '</div>',
                         '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
@@ -116,23 +116,22 @@ define([
             var me = this,
                 $window = this.getChild();
 
-            me._arrTypeSrc = [
+            me.btnExternal = new Common.UI.Button({
-                {displayValue: me.textInternalLink,   value: c_oHyperlinkType.InternalLink},
+                el: $('#id-dlg-hyperlink-external'),
-                {displayValue: me.textExternalLink,   value: c_oHyperlinkType.WebLink}
+                enableToggle: true,
-            ];
+                toggleGroup: 'hyperlink-type',
-
+                allowDepress: false,
-            me.cmbLinkType = new Common.UI.ComboBox({
+                pressed: true
-                el: $('#id-dlg-hyperlink-type'),
-                cls: 'input-group-nr',
-                style: 'width: 100%;',
-                menuStyle: 'min-width: 318px;',
-                editable: false,
-                data: this._arrTypeSrc
             });
-            me.cmbLinkType.setValue(me._arrTypeSrc[1].value);
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
-            me.cmbLinkType.on('selected', _.bind(function(combo, record) {
+
-                this.ShowHideElem(record.value);
+            me.btnInternal = new Common.UI.Button({
-            }, me));
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
 
             me.inputUrl = new Common.UI.InputField({
                 el          : $('#id-dlg-hyperlink-url'),
@@ -217,7 +216,7 @@ define([
                 var me = this;
 
                 var type = me.parseUrl(props.get_Value());
-                me.cmbLinkType.setValue(type);
+                (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
                 me.ShowHideElem(type);
                 
                 if (props.get_Text()!==null) {
@@ -239,7 +238,7 @@ define([
             var me      = this,
                 props   = new Asc.CHyperlinkProperty();
             var def_display = '';
-            if (me.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) {
+            if (this.btnInternal.isActive()) {//InternalLink
                 var url = "ppaction://hlink";
                 var tip = '';
                 var txttip = me.inputTip.getValue();
@@ -298,7 +297,7 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() == c_oHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -321,6 +320,10 @@ define([
             this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
         },
 
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         parseUrl: function(url) {
             if (url===null || url===undefined || url=='' )
                 return c_oHyperlinkType.WebLink;
@@ -364,13 +367,12 @@ define([
         },
 
         textTitle:          'Hyperlink Settings',
-        textInternalLink:   'Place In This Document',
+        textInternalLink:   'Slide In This Presentation',
-        textExternalLink:   'File or Web Page',
+        textExternalLink:   'External Link',
         textEmptyLink:      'Enter link here',
         textEmptyDesc:      'Enter caption here',
         textEmptyTooltip:   'Enter tooltip here',
         txtSlide:           'Slide',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',

apps/presentationeditor/main/locale/en.json

@@ -988,7 +988,7 @@
   "PE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here",
   "PE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "PE.Views.HyperlinkSettingsDialog.textInternalLink": "Slide In This Presentation",
-  "PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "PE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "PE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "PE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",

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

@@ -63,18 +63,17 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div class="input-row">',
+                    '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<label>' + this.textLinkType + '</label>',
+                        '<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 class="input-row" id="id-dlg-hyperlink-type" style="margin-bottom: 5px;">',
+                    '<div id="id-external-link">',
-                    '</div>',
-                    '<div id="id-dlg-hyperlink-external">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + ' *</label>',
                         '</div>',
                         '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-internal" style="display: none;">',
+                    '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
                             '<label style="width: 50%;">' + this.strSheet + '</label>',
                             '<label style="width: 50%;">' + this.strRange + ' *</label>',
@@ -111,20 +110,22 @@ define([
             var $window = this.getChild(),
                 me = this;
 
-            me.cmbLinkType = new Common.UI.ComboBox({
+            me.btnExternal = new Common.UI.Button({
-                el      : $('#id-dlg-hyperlink-type'),
+                el: $('#id-dlg-hyperlink-external'),
-                cls     : 'input-group-nr',
+                enableToggle: true,
-                editable: false,
+                toggleGroup: 'hyperlink-type',
-                menuStyle: 'min-width: 100%;',
+                allowDepress: false,
-                data    : [
+                pressed: true
-                    {displayValue: this.textInternalLink, value: Asc.c_oAscHyperlinkType.RangeLink},
-                    {displayValue: this.textExternalLink, value: Asc.c_oAscHyperlinkType.WebLink}
-                ]
-            }).on('selected', function(combo, record) {
-                $('#id-dlg-hyperlink-external')[record.value == Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
-                $('#id-dlg-hyperlink-internal')[record.value != Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
             });
-            me.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
+            me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.WebLink));
+
+            me.btnInternal = new Common.UI.Button({
+                el: $('#id-dlg-hyperlink-internal'),
+                enableToggle: true,
+                toggleGroup: 'hyperlink-type',
+                allowDepress: false
+            });
+            me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.RangeLink));
 
             me.cmbSheets = new Common.UI.ComboBox({
                 el      : $('#id-dlg-hyperlink-sheet'),
@@ -182,6 +183,9 @@ define([
 
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
+
+            me.externalPanel = $window.find('#id-external-link');
+            me.internalPanel = $window.find('#id-internal-link');
         },
 
         show: function() {
@@ -198,20 +202,18 @@ define([
                 var me = this;
 
                 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.btnInternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.WebLink));
+                me.btnExternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.RangeLink));
+
                 if (!settings.props) {
-                    this.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
                     this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text);
                     this.focusedInput = this.inputUrl.cmpEl.find('input');
                     this.cmbSheets.setValue(settings.currentSheet);
                 } else {
-                    this.cmbLinkType.setValue(settings.props.asc_getType());
+                    if (type == Asc.c_oAscHyperlinkType.RangeLink) {
-                    this.cmbLinkType.setDisabled(!settings.allowInternal);
-
-                    if (settings.props.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink) {
-                        $('#id-dlg-hyperlink-external').hide();
-                        $('#id-dlg-hyperlink-internal').show();
-
                         this.cmbSheets.setValue(settings.props.asc_getSheet());
                         this.inputRange.setValue(settings.props.asc_getRange());
                         this.focusedInput = this.inputRange.cmpEl.find('input');
@@ -231,9 +233,9 @@ define([
         getSettings: function() {
             var props = new Asc.asc_CHyperlink(),
                 def_display = "";
-            props.asc_setType(this.cmbLinkType.getValue());
+            props.asc_setType(this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink);
 
-            if (this.cmbLinkType.getValue() == Asc.c_oAscHyperlinkType.RangeLink) {
+            if (this.btnInternal.isActive()) {
                 props.asc_setSheet(this.cmbSheets.getValue());
                 props.asc_setRange(this.inputRange.getValue());
                 def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue();
@@ -273,8 +275,8 @@ define([
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {
-                    var checkurl = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
+                    var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
-                        checkrange = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.RangeLink) ? this.inputRange.checkValidate() : true,
+                        checkrange = (this.btnInternal.isActive()) ? this.inputRange.checkValidate() : true,
                         checkdisp = this.inputDisplay.checkValidate();
                     if (checkurl !== true)  {
                         this.inputUrl.cmpEl.find('input').focus();
@@ -296,6 +298,15 @@ define([
             this.close();
         },
 
+        ShowHideElem: function(value) {
+            this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
+            this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
+        },
+
+        onLinkTypeClick: function(type, btn, event) {
+            this.ShowHideElem(type);
+        },
+
         textTitle:          'Hyperlink Settings',
         textInternalLink:   'Internal Data Range',
         textExternalLink:   'Web Link',
@@ -304,7 +315,6 @@ define([
         textEmptyTooltip:   'Enter tooltip here',
         strSheet:           'Sheet',
         strRange:           'Range',
-        textLinkType:       'Link Type',
         strDisplay:         'Display',
         textTipText:        'Screen Tip Text',
         strLinkTo:          'Link To',

apps/spreadsheeteditor/main/locale/en.json

@@ -1332,7 +1332,7 @@
   "SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
   "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range",
   "SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range",
-  "SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
+  "del_SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
   "SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
   "SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
   "SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",