From c97e7cfdbefc479c2241b197a5be8c78f9dcfd38 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Sat, 10 Feb 2018 15:50:29 +0300
Subject: [PATCH] [DE][SSE] Open CSV/TXT: use perfect-scrollbar in the preview
 panel, load data blocks (for future use)

---
 apps/common/main/lib/view/OpenDialog.js       | 56 ++++++++++++++++++-
 .../main/resources/less/opendialog.less       | 14 ++++-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/view/OpenDialog.js b/apps/common/main/lib/view/OpenDialog.js
index 934cfce30..f51d41bf8 100644
--- a/apps/common/main/lib/view/OpenDialog.js
+++ b/apps/common/main/lib/view/OpenDialog.js
@@ -131,6 +131,9 @@ define([
                 if (!this.closable)
                     this.$window.find('.tool').hide();
                 this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+
+                this.previewPanel = this.$window.find((this.type == Asc.c_oAscAdvancedOptionsID.CSV) ? '#id-preview-csv' : '#id-preview-txt');
+
                 if (this.type == Asc.c_oAscAdvancedOptionsID.DRM) {
                     this.inputPwd = new Common.UI.InputField({
                         el: $('#id-password-txt'),
@@ -410,6 +413,11 @@ define([
         },
 
         updatePreview: function() {
+            if (!_.isUndefined(this.previewScroller)) {
+                this.previewScroller.destroy();
+                delete this.previewScroller;
+            }
+
             if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
                 var delimiter = this.cmbDelimiter ? this.cmbDelimiter.getValue() : null,
                     delimiterChar = (delimiter == -1) ? this.inputDelimiter.getValue() : null;
@@ -441,10 +449,54 @@ define([
                     tpl += '</tr>';
                 }
                 tpl += '</table>';
-                this.$window.find('#id-preview-csv').html(_.template(tpl));
+                this.previewPanel.html(tpl);
             } else {
-                this.$window.find('#id-preview-txt').text(data);
+                this.previewPanel.text(data);
             }
+            this.previewScroller = new Common.UI.Scroller({
+                el: this.previewPanel,
+                minScrollbarLength  : 10
+            });
+        },
+
+        startLoadData: function() {
+            if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
+                this.previewPanel.html('<table></table>');
+                this.previewInner = this.previewPanel.find('table');
+            } else {
+                this.previewPanel.html('');
+            }
+            this.previewScroller = new Common.UI.Scroller({
+                el: this.previewPanel,
+                minScrollbarLength  : 10
+            });
+        },
+
+        previewDataBlock: function(data) {
+            if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
+                var maxlength = 0;
+                for (var i=0; i<data.length; i++) {
+                    if (data[i].length>maxlength)
+                        maxlength = data[i].length;
+                }
+                var tpl = '';
+                for (var i=0; i<data.length; i++) {
+                    tpl += '<tr>';
+                    for (var j=0; j<data[i].length; j++) {
+                        tpl += '<td>' + Common.Utils.String.htmlEncode(data[i][j]) + '</td>';
+                    }
+                    for (j=data[i].length; j<maxlength; j++) {
+                        tpl += '<td></td>';
+                    }
+                    tpl += '</tr>';
+                }
+                this.previewInner.append($(tpl));
+            } else {
+                var span = $('<span/>');
+                span.text(data);
+                this.previewPanel.append(span);
+            }
+            this.previewScroller.update();
         },
 
         onCmbDelimiterSelect: function(combo, record){
diff --git a/apps/common/main/resources/less/opendialog.less b/apps/common/main/resources/less/opendialog.less
index be1714856..9f47451af 100644
--- a/apps/common/main/resources/less/opendialog.less
+++ b/apps/common/main/resources/less/opendialog.less
@@ -39,9 +39,10 @@
       }
 
       #id-preview-csv, #id-preview-txt {
+        position:relative;
         width: 100%;
         height: 106px;
-        overflow:auto;
+        overflow:hidden;
         border: @gray-soft solid 1px;
       }
 
@@ -49,6 +50,17 @@
         padding: 1px 8px 1px 0;
         border-right: @gray-soft solid 1px;
         min-width: 30px;
+        white-space: nowrap;
+      }
+
+      td:last-child {
+        border-right: none;
+      }
+
+      tr:last-child {
+        td {
+          padding-bottom: 8px;
+        }
       }
     }
   }