[DE] Bug 52346

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

@@ -85,7 +85,10 @@ define([
                 RepeatRow: false,
                 DisabledControls: false,
                 Width: null,
-                Height: null
+                Height: null,
+                beginPreviewStyles: true,
+                previewStylesCount: -1,
+                currentStyleFound: false
             };
             this.spinners = [];
             this.lockedControls = [];
@@ -233,6 +236,10 @@ define([
             this.api = o;
             if (o) {
                 this.api.asc_registerCallback('asc_onInitTableTemplates', _.bind(this.onInitTableTemplates, this));
+                this.api.asc_registerCallback('asc_onBeginTableStylesPreview', _.bind(this.onBeginTableStylesPreview, this));
+                this.api.asc_registerCallback('asc_onAddTableStylesPreview', _.bind(this.onAddTableStylesPreview, this));
+                this.api.asc_registerCallback('asc_onEndTableStylesPreview', _.bind(this.onEndTableStylesPreview, this));
+
             }
             return this;
         },
@@ -524,19 +531,9 @@ define([
                 //for table-template
                value = props.get_TableStyle();
                 if (this._state.TemplateId!==value || this._isTemplatesChanged) {
-                    var rec = this.mnuTableTemplatePicker.store.findWhere({
-                        templateId: value
-                    });
-                    if (!rec) {
-                        rec = this.mnuTableTemplatePicker.store.at(0);
-                    }
-                    this.btnTableTemplate.suspendEvents();
-                    this.mnuTableTemplatePicker.selectRecord(rec, true);
-                    this.btnTableTemplate.resumeEvents();
-
-                    this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'auto 52px'});
-
                     this._state.TemplateId = value;
+                    this._state.currentStyleFound = false;
+                    this.selectCurrentTableStyle();
                 }
                 this._isTemplatesChanged = false;
 
@@ -740,6 +737,62 @@ define([
              !this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
         },
 
+        selectCurrentTableStyle: function() {
+            if (!this.mnuTableTemplatePicker) return;
+
+            var rec = this.mnuTableTemplatePicker.store.findWhere({
+                templateId: this._state.TemplateId
+            });
+            if (!rec && this._state.previewStylesCount===this.mnuTableTemplatePicker.store.length) {
+                rec = this.mnuTableTemplatePicker.store.at(0);
+            }
+            if (rec) {
+                this._state.currentStyleFound = true;
+                this.btnTableTemplate.suspendEvents();
+                this.mnuTableTemplatePicker.selectRecord(rec, true);
+                this.btnTableTemplate.resumeEvents();
+                this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'auto 52px'});
+            }
+        },
+
+        onBeginTableStylesPreview: function(count){
+            this._state.beginPreviewStyles = true;
+            this._state.currentStyleFound = false;
+            this._state.previewStylesCount = count;
+        },
+
+        onEndTableStylesPreview: function(){
+            !this._state.currentStyleFound && this.selectCurrentTableStyle();
+        },
+
+        onAddTableStylesPreview: function(Templates){
+            var self = this;
+            var arr = [];
+            _.each(Templates, function(template){
+                var tip = template.asc_getDisplayName();
+                if (template.asc_getType()==0) {
+                    ['Table Grid', 'Plain Table', 'Grid Table', 'List Table', 'Light', 'Dark', 'Colorful', 'Accent'].forEach(function(item){
+                        var str = 'txtTable_' + item.replace(' ', '');
+                        if (self[str])
+                            tip = tip.replace(item, self[str]);
+                    });
+
+                }
+                arr.push({
+                    imageUrl: template.asc_getImage(),
+                    id     : Common.UI.getId(),
+                    templateId: template.asc_getId(),
+                    tip    : tip
+                });
+            });
+            if (this._state.beginPreviewStyles) {
+                this._state.beginPreviewStyles = false;
+                self.mnuTableTemplatePicker.store.reset(arr);
+            } else
+                self.mnuTableTemplatePicker.store.add(arr);
+            !this._state.currentStyleFound && this.selectCurrentTableStyle();
+        },
+
         onInitTableTemplates: function(){
             if (this._initSettings) {
                 this._tableTemplates = true;
@@ -749,7 +802,6 @@ define([
         },
 
         _onInitTemplates: function(){
-            var Templates = this.api.asc_getTableStylesPreviews();
             var self = this;
             this._isTemplatesChanged = true;
 
@@ -780,39 +832,11 @@ define([
                     });
                 });
                 this.btnTableTemplate.render($('#table-btn-template'));
+                this.btnTableTemplate.cmpEl.find('.icon-template-table').css({'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'auto 52px'});
                 this.lockedControls.push(this.btnTableTemplate);
                 this.mnuTableTemplatePicker.on('item:click', _.bind(this.onTableTemplateSelect, this, this.btnTableTemplate));
             }
-            
+            this.api.asc_generateTableStylesPreviews();
-            var count = self.mnuTableTemplatePicker.store.length;
-            if (count>0 && count==Templates.length) {
-                var data = self.mnuTableTemplatePicker.dataViewItems;
-                data && _.each(Templates, function(template, index){
-                    var img = template.asc_getImage();
-                    data[index].model.set('imageUrl', img, {silent: true});
-                    $(data[index].el).find('img').attr('src', img);
-                });
-            } else {
-                var arr = [];
-                _.each(Templates, function(template){
-                    var tip = template.asc_getDisplayName();
-                    if (template.asc_getType()==0) {
-                        ['Table Grid', 'Plain Table', 'Grid Table', 'List Table', 'Light', 'Dark', 'Colorful', 'Accent'].forEach(function(item){
-                            var str = 'txtTable_' + item.replace(' ', '');
-                            if (self[str])
-                                tip = tip.replace(item, self[str]);
-                        });
-
-                    }
-                    arr.push({
-                        imageUrl: template.asc_getImage(),
-                        id     : Common.UI.getId(),
-                        templateId: template.asc_getId(),
-                        tip    : tip
-                    });
-                });
-                self.mnuTableTemplatePicker.store.reset(arr);
-            }
         },
 
         openAdvancedSettings: function(e) {
@@ -899,7 +923,7 @@ define([
                 _.each(this.lockedControls, function(item) {
                     item.setDisabled(disable);
                 });
-                this.linkAdvanced.toggleClass('disabled', disable);
+                this.linkAdvanced && this.linkAdvanced.toggleClass('disabled', disable);
             }
         },