[DE] Add footnote settings.

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

@@ -53,7 +53,8 @@ define([
     'documenteditor/main/app/view/MailMergeRecepients',
     'documenteditor/main/app/view/StyleTitleDialog',
     'documenteditor/main/app/view/PageMarginsDialog',
-    'documenteditor/main/app/view/PageSizeDialog'
+    'documenteditor/main/app/view/PageSizeDialog',
+    'documenteditor/main/app/view/NoteSettingsDialog'
 ], function () {
     'use strict';
 
@@ -264,6 +265,9 @@ define([
             toolbar.mnuZoomIn.on('click',                               _.bind(this.onZoomInClick, this));
             toolbar.mnuZoomOut.on('click',                              _.bind(this.onZoomOutClick, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
+            toolbar.btnNotes.menu.on('item:click',                      _.bind(this.onNotesClick, this));
+            toolbar.mnuGotoFootPrev.on('click',                         _.bind(this.onFootnotePrevClick, this));
+            toolbar.mnuGotoFootNext.on('click',                         _.bind(this.onFootnoteNextClick, this));
 
             $('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
 
@@ -1987,6 +1991,50 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
+        onNotesClick: function(menu, item) {
+            if (this.api) {
+                if (item.value == 'ins_footnote')
+                    this.api.asc_AddFootnote();
+                else if (item.value == 'delele')
+                    this.api.deleteFootnotes();
+                else if (item.value == 'settings') {
+                    var me = this;
+                    (new DE.Views.NoteSettingsDialog({
+                        api: me.api,
+                        handler: function(result, settings) {
+                            if (settings) {
+                                if (result == 'insert') {
+                                    me.api.asc_SetFootnoteProps(settings);
+                                    me.api.asc_AddFootnote();
+                                } else if (result == 'apply') {
+                                    me.api.asc_SetFootnoteProps(settings);
+                                }
+                            }
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                        },
+                        props   : me.api.asc_GetFootnoteProps()
+                    })).show();
+                } else
+                    return;
+
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            }
+        },
+
+        onFootnotePrevClick: function(btn) {
+            if (this.api)
+                this.api.GotoFootnotePrev();
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onFootnoteNextClick: function(btn) {
+            if (this.api)
+                this.api.GotoFootnoteNext();
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         _clearBullets: function() {
             this.toolbar.btnMarkers.toggle(false, true);
             this.toolbar.btnNumbers.toggle(false, true);

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

@@ -191,6 +191,12 @@
                 <span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-mailrecepients"></span>
             </div>
         </div>
+        <div class="separator long" style="margin-left: 5px;"></div>
+        <div class="toolbar-group">
+            <div class="toolbar-row">
+                <span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-notes"></span>
+            </div>
+        </div>
         <div class="toolbar-group" id="id-toolbar-full-placeholder-field-styles" style="width: 100%; min-width: 160px;">
         </div>
         <div class="toolbar-group no-mask">

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

+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html).
+ * In accordance with Section 7(a) of the GNU GPL 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 more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
+ *
+ * You can contact Ascensio System SIA by email at sales@onlyoffice.com
+ *
+ * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display
+ * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
+ *
+ * Pursuant to Section 7  3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains
+ * relevant author attributions when distributing the software. If the display of the logo in its graphic
+ * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE"
+ * in every copy of the program you distribute.
+ * Pursuant to Section 7  3(e) we decline to grant you any rights under trademark law for use of our trademarks.
+ *
+*/
+
+define([
+    'common/main/lib/component/BaseView'
+], function () {
+    'use strict';
+
+    DE.Views.FootnoteTip = Common.UI.BaseView.extend(_.extend((function() {
+        var tipEl;
+
+        return {
+            options : {
+                name    : '',
+                text    : '',
+                target  : null,
+                placement: 'bottom'
+            },
+
+            template: _.template([
+                '<div class="footnote-tip-root <%= scope.placement %>">',
+                    '<div class="asc-footnotetip">',
+                        '<div class="tip-arrow"></div>',
+                        '<div>',
+                            '<label class="tip-name" style="width: 220px;"><%= scope.name %></label>',
+                            '<label class="tip-text" style="width: 220px;"><%= scope.text %></label>',
+                            '<div class="move-ct">',
+                                '<button id="footnote-btn-prev" type="button" class="btn btn-toolbar"><span class="prev img-commonctrl">&nbsp;</span></button>',
+                                '<button id="footnote-btn-next" type="button" class="btn btn-toolbar"><span class="next img-commonctrl">&nbsp;</span></button>',
+                            '</div>',
+                        '</div>',
+                        '<div class="show-link"><label><%= scope.textSettings %></label></div>',
+                    '</div>',
+                '</div>'
+            ].join('')),
+
+            initialize : function(options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                this.text = this.options.text;
+                this.name = this.options.name;
+                this.target = this.options.target;
+                this.placement = this.options.placement;
+            },
+
+            render: function() {
+                tipEl = $(this.template({ scope: this }));
+
+                this.btnPrev = new Common.UI.Button({
+                    el: $('#footnote-btn-prev',tipEl)
+                });
+
+                this.btnNext = new Common.UI.Button({
+                    el: $('#footnote-btn-next',tipEl)
+                });
+
+                tipEl.find('.show-link label').on('click', _.bind(function() { this.trigger('settingsclick');}, this));
+                this.btnPrev.on('click', _.bind(function(btn) {
+                    this.trigger('prevclick');
+                }, this));
+                this.btnNext.on('click', _.bind(function(btn) {
+                    this.trigger('nextclick');
+                }, this));
+                
+                this.lblName = tipEl.find('.tip-name');
+                this.lblText = tipEl.find('.tip-text');
+
+                $(document.body).append(tipEl);
+                this.applyPlacement(this.target);
+
+                return this;
+            },
+
+            show: function(name, text, target){
+                if (tipEl) {
+                    this.lblName.text(name);
+                    this.lblText.text(text);
+                    this.applyPlacement(target);
+                    tipEl.show()
+                } else
+                    this.render();
+            },
+
+            hide: function() {
+                if (tipEl) tipEl.hide();
+            },
+
+            applyPlacement: function (target) {
+                if (!target)
+                    target = {top: 0, left: 0, width: 1, height: 1};
+                var docHeight = Common.Utils.innerHeight(),
+                    elHeight = tipEl.height(),
+                    elWidth = tipEl.width(),
+                    placement = this.placement;
+                
+                if (this.placement == 'bottom') {
+                    if (target.top + target.height + elHeight > docHeight)
+                        placement = 'top';
+                } else if (this.placement == 'top') {
+                    if (target.top - elHeight < 0)
+                        placement = 'bottom';
+                }
+                tipEl.removeClass(placement == 'top' ? 'bottom' : 'top');
+                tipEl.addClass(placement);
+                (placement == 'top') ? tipEl.css({top: 'auto', bottom : docHeight - target.top + 'px', left: target.left + target.width/2 - elWidth/2 + 'px'})
+                                     : tipEl.css({top : target.top + target.height + 'px', bottom: 'auto', left: target.left + target.width/2  - elWidth/2 + 'px'});
+            },
+
+            textSettings: 'Note Settings'
+        }
+    })(), DE.Views.FootnoteTip || {}));
+});
+

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

@@ -737,6 +737,14 @@ define([
             });
             this.toolbarControls.push(this.btnColorSchemas);
 
+            this.btnNotes = new Common.UI.Button({
+                id          : 'id-toolbar-btn-notes',
+                cls         : 'btn-toolbar',
+                iconCls     : 'btn-notes',
+                menu        : true
+            });
+            this.toolbarControls.push(this.btnNotes);
+
             this.btnMailRecepients= new Common.UI.Button({
                 id          : 'id-toolbar-btn-mailrecepients',
                 cls         : 'btn-toolbar',
@@ -1076,6 +1084,7 @@ define([
             replacePlacholder('#id-toolbar-full-placeholder-field-styles',                 this.listStyles);
             replacePlacholder('#id-toolbar-short-placeholder-btn-halign',                  this.btnHorizontalAlign);
             replacePlacholder('#id-toolbar-full-placeholder-btn-mailrecepients',           this.btnMailRecepients);
+            replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-notes',      this.btnNotes);
         },
 
         createDelayedElements: function() {
@@ -1143,6 +1152,7 @@ define([
             this.btnMailRecepients.updateHint(this.tipMailRecepients);
             this.btnHide.updateHint(this.tipViewSettings);
             this.btnAdvSettings.updateHint(this.tipAdvSettings);
+            this.btnNotes.updateHint(this.tipNotes);
 
             // set menus
 
@@ -1284,6 +1294,40 @@ define([
                 cls : 'btn-toolbar'
             });
 
+            this.btnNotes.setMenu(
+                new Common.UI.Menu({
+                    items: [
+                        { caption: this.mniInsFootnote,  value: 'ins_footnote' },
+                        { caption: this.mniDelFootnote,  value: 'delele' },
+                        { caption: '--' },
+                        this.mnuGotoFootnote = new Common.UI.MenuItem({
+                            template: _.template([
+                                '<div id="id-toolbar-menu-goto-footnote" class="menu-zoom" style="height: 25px;" ',
+                                '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                'data-stopPropagation="true"',
+                                '<% } %>', '>',
+                                '<label class="title">' + this.textGotoFootnote + '</label>',
+                                '<button id="id-menu-goto-footnote-next" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><span class="btn-icon mmerge-next">&nbsp;</span></button>',
+                                '<button id="id-menu-goto-footnote-prev" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><span class="btn-icon mmerge-prev">&nbsp;</span></button>',
+                                '</div>'
+                            ].join('')),
+                            stopPropagation: true
+                        }),
+                        { caption: '--' },
+                        { caption: this.mniNoteSettings, value: 'settings' }
+                    ]
+                })
+            );
+
+            this.mnuGotoFootPrev = new Common.UI.Button({
+                el  : $('#id-menu-goto-footnote-prev'),
+                cls : 'btn-toolbar'
+            });
+            this.mnuGotoFootNext = new Common.UI.Button({
+                el  : $('#id-menu-goto-footnote-next'),
+                cls : 'btn-toolbar'
+            });
+
             // set dataviews
             
             var _conf = this.mnuMarkersPicker.conf;
@@ -1517,6 +1561,7 @@ define([
                 this.cmbFontName.setDisabled(true);
                 this.cmbFontSize.setDisabled(true);
                 this.listStyles.setDisabled(true);
+                this.btnNotes.setDisabled(true);
                 if (mode.disableDownload)
                     this.btnPrint.setDisabled(true);
             }
@@ -1911,7 +1956,12 @@ define([
         textPortrait: 'Portrait',
         textLandscape: 'Landscape',
         textInsertPageCount: 'Insert number of pages',
-        textCharts: 'Charts'
+        textCharts: 'Charts',
+        tipNotes: 'Footnotes',
+        mniInsFootnote: 'Insert Footnote',
+        mniDelFootnote: 'Delete All Footnotes',
+        mniNoteSettings: 'Notes Settings',
+        textGotoFootnote: 'Go to Footnotes'
 
     }, DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1115,6 +1115,24 @@
   "DE.Views.MailMergeSettings.txtPrev": "To previous record",
   "DE.Views.MailMergeSettings.txtUntitled": "Untitled",
   "DE.Views.MailMergeSettings.warnProcessMailMerge": "Starting merge failed",
+  "DE.Views.NoteSettingsDialog.textTitle": "Notes Settings",
+  "DE.Views.NoteSettingsDialog.textLocation": "Location",
+  "DE.Views.NoteSettingsDialog.textFootnote": "Footnote",
+  "DE.Views.NoteSettingsDialog.textPageBottom": "Bottom of page",
+  "DE.Views.NoteSettingsDialog.textTextBottom": "Below text",
+  "DE.Views.NoteSettingsDialog.textFormat": "Format",
+  "DE.Views.NoteSettingsDialog.textNumFormat": "Number Format",
+  "DE.Views.NoteSettingsDialog.textStart": "Start at",
+  "DE.Views.NoteSettingsDialog.textNumbering": "Numbering",
+  "DE.Views.NoteSettingsDialog.textContinue": "Continuous",
+  "DE.Views.NoteSettingsDialog.textEachPage": "Restart each page",
+  "DE.Views.NoteSettingsDialog.textEachSection": "Restart each section",
+  "DE.Views.NoteSettingsDialog.textApplyTo": "Apply changes to",
+  "DE.Views.NoteSettingsDialog.textDocument": "Whole document",
+  "DE.Views.NoteSettingsDialog.textSection": "Current section",
+  "DE.Views.NoteSettingsDialog.textApply": "Apply",
+  "DE.Views.NoteSettingsDialog.textInsert": "Insert",
+  "DE.Views.NoteSettingsDialog.textCancel": "Cancel",
   "DE.Views.PageMarginsDialog.cancelButtonText": "Cancel",
   "DE.Views.PageMarginsDialog.notcriticalErrorTitle": "Warning",
   "DE.Views.PageMarginsDialog.okButtonText": "Ok",
@@ -1566,5 +1584,11 @@
   "DE.Views.Toolbar.txtScheme6": "Concourse",
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
-  "DE.Views.Toolbar.txtScheme9": "Foundry"
+  "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.tipNotes": "Footnotes",
+  "DE.Views.Toolbar.mniInsFootnote": "Insert Footnote",
+  "DE.Views.Toolbar.mniDelFootnote": "Delete All Footnotes",
+  "DE.Views.Toolbar.mniNoteSettings": "Notes Settings",
+  "DE.Views.Toolbar.textGotoFootnote": "Go to Footnotes"
+
 }
\ No newline at end of file

apps/documenteditor/main/resources/less/footnote.less

+.footnote-tip-root {
+    position: absolute;
+    z-index: @zindex-tooltip + 5;
+    width: 250px;
+
+    .tip-arrow {
+        position: absolute;
+        overflow: hidden;
+    }
+
+    &.bottom {
+        margin: 15px 0 0 0;
+
+        .tip-arrow {
+            left: 50%;
+            top: -15px;
+            width: 26px;
+            height: 15px;
+            margin-left: -13px;
+            &:after {
+                top: 8px;
+                left: 5px;
+                .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+
+    &.top {
+        margin: 0 0px 15px 0;
+
+        .tip-arrow {
+            left: 50%;
+            bottom: -15px;
+            width: 26px;
+            height: 15px;
+            margin-left: -13px;
+            &:after {
+                top: -8px;
+                left: 5px;
+            }
+        }
+    }
+}
+
+.asc-footnotetip {
+    padding: 15px 8px 10px 15px;
+    border-radius: 5px;
+    background-color: #fff;
+    overflow: visible;
+
+    .box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
+    font-size: 11px;
+}
+
+.asc-footnotetip .tip-arrow:after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 8px;
+    background-color: #fff;
+    width: 15px;
+    height: 15px;
+
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+
+    .box-shadow(0 4px 8px -1px rgba(0, 0, 0, 0.2));
+}
+
+.asc-footnotetip .show-link {
+    margin-top: 15px;
+
+    label {
+        border-bottom: 1px dotted #445799;
+        color: #445799;
+        cursor: pointer;
+    }
+}
+
+.asc-footnotetip .move-ct {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 16px;
+    margin: 8px;
+
+    .prev, .next {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        cursor: pointer;
+    }
+
+    .prev {
+        background-position: @search-dlg-offset-x @search-dlg-offset-y;
+    }
+
+    .next {
+        background-position: @search-dlg-offset-x @search-dlg-offset-y - 16px;
+    }
+
+    .btn {
+        &:hover,
+        .over,
+        &:active,
+        &.active {
+            background-color: transparent !important;
+        }
+
+        &.disabled{
+            cursor: default;
+            .prev {
+                background-position: @search-dlg-offset-x - 32px @search-dlg-offset-y;
+            }
+
+            .next{
+                background-position: @search-dlg-offset-x  - 32px @search-dlg-offset-y - 16px;
+            }
+        }
+    }
+}

apps/documenteditor/main/resources/less/toolbar.less

@@ -149,7 +149,7 @@
     .title {
         padding: 5px 0 5px 20px;
         float: left;
-        max-width: 95px;
+        //max-width: 95px;
         overflow: hidden;
         text-overflow: ellipsis;
     }
@@ -333,6 +333,7 @@
 .button-normal-icon(btn-zoomout,          58, @toolbar-icon-size);
 .button-normal-icon(btn-columns,          82, @toolbar-icon-size);
 .button-normal-icon(btn-pagemargins,      83, @toolbar-icon-size);
+.button-normal-icon(btn-notes,            83, @toolbar-icon-size);
 
 .button-normal-icon(mmerge-next,          71, @toolbar-icon-size);
 .button-normal-icon(mmerge-last,          72, @toolbar-icon-size);