From 234c38aadf139a95dea6e8cf05b77060344755a6 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Thu, 11 Jan 2018 18:02:27 +0300
Subject: [PATCH] [DE] Change advanced settings for table of contents.

---
 .../main/resources/less/asc-mixins.less       |   2 +-
 .../main/app/view/TableOfContentsSettings.js  | 126 ++++++++++++++++--
 .../resources/less/advanced-settings.less     |  30 +++++
 3 files changed, 147 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 447654e4b..fccee9993 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -146,7 +146,7 @@
 @common-controls-width: 100px;
 .img-commonctrl, 
         .theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before,
-        .btn-toolbar .icon.img-commonctrl {
+        .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before {
     background-image: data-uri(%("%s",'@{common-image-path}/@{common-controls}'));
     background-repeat: no-repeat;
 
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 3a0aa4f27..36e4b22ea 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -49,7 +49,7 @@ define([
     DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 500,
-            height: 380
+            height: 445
         },
 
         initialize : function(options) {
@@ -67,7 +67,7 @@ define([
                                         '<div id="tableofcontents-chb-pages"></div>',
                                         '</td>',
                                         '<td rowspan="6" class="padding-small" style="vertical-align: top;">',
-                                        '<div style="border: 1px solid #cbcbcb;width: 215px; height: 197px; float: right;">',
+                                        '<div style="border: 1px solid #cbcbcb;width: 230px; height: 197px; float: right;">',
                                             '<div id="tableofcontents-img" style="width: 100%; height: 100%;"></div>',
                                         '</div>',
                                         '</td>',
@@ -94,19 +94,30 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td class="padding-large">',
+                                        '<td class="padding-small">',
                                             '<label class="input-label padding-small" style="display: block;">' + me.textBuildTable + '</label>',
                                             '<div id="tableofcontents-radio-styles" class="padding-small" style="display: block;"></div>',
-                                            '<div id="tableofcontents-radio-levels" class="padding-small" style="display: block;"></div>',
+                                            '<div id="tableofcontents-radio-levels" class="" style="display: block;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td class="padding-small">',
-                                            '<label class="input-label padding-small">' + me.textLevels + '</label>',
-                                            '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                        '<td class="padding-small" style="vertical-align: top;">',
+                                            '<div id="tableofcontents-from-levels">',
+                                                '<label class="input-label">' + me.textLevels + '</label>',
+                                                '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                            '</div>',
+                                            '<div id="tableofcontents-from-styles" class="hidden">',
+                                                '<table><tr><td style="height: 25px;">',
+                                                        '<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
+                                                        '<label class="input-label" style="">' + me.textLevel + '</label>',
+                                                    '</td></tr>',
+                                                    '<tr><td class="padding-small">',
+                                                        '<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 91px;"></div>',
+                                                '</td></tr></table>',
+                                            '</div>',
                                         '</td>',
-                                        '<td class="padding-small">',
-                                            '<label class="input-label padding-small">' + me.textStyles + '</label>',
+                                        '<td class="padding-small" style="vertical-align: top;">',
+                                            '<label class="input-label" style="margin-left: 15px;">' + me.textStyles + '</label>',
                                             '<div id="tableofcontents-combo-styles" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
                                         '</td>',
                                     '</tr>',
@@ -189,12 +200,24 @@ define([
                 name: 'asc-radio-content-build',
                 checked: true
             });
+            this.radioLevels.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue) {
+                    this.levelsContainer.toggleClass('hidden', !newValue);
+                    this.stylesContainer.toggleClass('hidden', newValue);
+                }
+            }, this));
 
             this.radioStyles = new Common.UI.RadioBox({
                 el: $('#tableofcontents-radio-styles'),
                 labelText: this.textRadioStyles,
                 name: 'asc-radio-content-build'
             });
+            this.radioStyles.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue) {
+                    this.stylesContainer.toggleClass('hidden', !newValue);
+                    this.levelsContainer.toggleClass('hidden', newValue);
+                }
+            }, this));
 
             this.cmbStyles = new Common.UI.ComboBox({
                 el: $('#tableofcontents-combo-styles'),
@@ -229,7 +252,31 @@ define([
                 }
             }, this));
 
+            this.stylesLevels = new Common.UI.DataViewStore();
 
+            if (this.stylesLevels) {
+                this.stylesList = new Common.UI.ListView({
+                    el: $('#tableofcontents-styles-list', this.$window),
+                    store: this.stylesLevels,
+                    simpleAddMode: true,
+                    showLast: false,
+                    template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                    itemTemplate: _.template([
+                        '<div id="<%= id %>" class="list-item">',
+                            '<div class="<% if (checked) { %>checked<% } %>"><%= name %></div>',
+                            '<div>',
+                                '<div class="input-field" style="width:40px;"><input type="text" class="form-control" value="<%= value %>" style="text-align: right;">',
+                            '</div>',
+                            '</div>',
+                        '</div>'
+                    ].join(''))
+                });
+                this.stylesList.on('item:change', _.bind(this.onItemChange, this));
+                this.stylesList.on('item:add', _.bind(this.addEvents, this));
+            }
+
+            this.levelsContainer = $('#tableofcontents-from-levels');
+            this.stylesContainer = $('#tableofcontents-from-styles');
             this.afterRender();
         },
 
@@ -244,6 +291,27 @@ define([
         _setDefaults: function (props) {
             if (props) {
             }
+
+            this.stylesLevels.reset([
+                (new Common.UI.DataViewModel({
+                    name: 'header1',
+                    allowSelected: false,
+                    checked: true,
+                    value: 1
+                })),
+                (new Common.UI.DataViewModel({
+                    name: 'header2',
+                    allowSelected: false,
+                    checked: false,
+                    value: ''
+                })),
+                (new Common.UI.DataViewModel({
+                    name: 'header3',
+                    allowSelected: false,
+                    checked: false,
+                    value: ''
+                }))]);
+
             // this._changedProps = new Asc.asc_CParagraphProperty();
         },
 
@@ -252,6 +320,37 @@ define([
             return props;
         },
 
+        addEvents: function(listView, itemView, record) {
+            var input = itemView.$el.find('input');
+            input.on('keypress', function(e) {
+                var charCode = String.fromCharCode(e.which);
+                if(!/[1-9]/.test(charCode) && !e.ctrlKey && e.keyCode !== Common.UI.Keys.DELETE && e.keyCode !== Common.UI.Keys.BACKSPACE &&
+                    e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.HOME &&
+                    e.keyCode !== Common.UI.Keys.END && e.keyCode !== Common.UI.Keys.ESC && e.keyCode !== Common.UI.Keys.INSERT &&
+                    e.keyCode !== Common.UI.Keys.TAB  || input.val().length>1){
+                    // if (e.keyCode==Common.UI.Keys.RETURN) me.trigger('changed', me, el.val());
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+            });
+            input.on('input', function(e) {
+                // console.log(input.val());
+                var newval = !_.isEmpty(input.val());
+                if (record.get('checked') !== newval) {
+                    record.set('checked', !_.isEmpty(input.val()));
+                }
+                record.set('value', input.val());
+            });
+        },
+
+        onItemChange: function(listView, itemView, record) {
+            this.addEvents(listView, itemView, record);
+            setTimeout(function(){
+                itemView.$el.find('input').focus();
+            }, 10);
+        },
+
         textTitle:  'Table of Contents',
         textLeader: 'Leader',
         textBuildTable: 'Build table of contents from',
@@ -264,8 +363,15 @@ define([
         textNone: 'None',
         textRadioLevels: 'Outline levels',
         textRadioStyles: 'Selected styles',
+        textStyle: 'Style',
+        textLevel: 'Level',
         cancelButtonText: 'Cancel',
-        okButtonText    : 'Ok'
+        okButtonText    : 'Ok',
+        txtCurrent: 'Current',
+        txtSimple: 'Simple',
+        txtStandard: 'Standard',
+        txtModern: 'Modern',
+        txtClassic: 'Classic'
 
     }, DE.Views.TableOfContentsSettings || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 5b15b0632..374a3293f 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -75,6 +75,36 @@
     height:20px;
 }
 
+.header-styles-tableview {
+    .list-item > div{
+        &:nth-child(1) {
+            width:160px;
+            height: 16px;
+            padding-left:16px;
+            padding-right: 5px;
+
+            &.checked {
+                &:before {
+                    content: '';
+                    width: 16px;
+                    height: 16px;
+                    display: inline-block;
+                    float: left;
+                    margin-left: -18px;
+                    background-position: @menu-check-offset-x @menu-check-offset-y;
+                }
+            }
+        }
+
+        padding-right: 6px;
+        vertical-align: middle;
+        display: inline-block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
+    }
+}
+