[DE] Optimize textart loading

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

@@ -1020,7 +1020,6 @@ define([
                             if (me.needToUpdateVersion)
                                 toolbarController.onApiCoAuthoringDisconnect();
                             me.api.UpdateInterfaceState();
-                            me.fillTextArt(me.api.asc_getTextArtPreviews());
 
                             Common.NotificationCenter.trigger('document:ready', 'main');
                             me.applyLicense();
@@ -1835,11 +1834,14 @@ define([
             },
 
             fillTextArt: function(shapes){
-                if (_.isEmpty(shapes)) return;
+                var arr = [],
-
-                var me = this, arr = [],
                     artStore = this.getCollection('Common.Collections.TextArt');
 
+                if (!shapes && artStore.length>0) {// shapes == undefined when update textart collection (from asc_onSendThemeColors)
+                    shapes = this.api.asc_getTextArtPreviews();
+                }
+                if (_.isEmpty(shapes)) return;
+
                 _.each(shapes, function(shape, index){
                     arr.push({
                         imageUrl : shape,
@@ -1849,14 +1851,6 @@ define([
                     });
                 });
                 artStore.reset(arr);
-
-                setTimeout(function(){
-                    me.getApplication().getController('Toolbar').fillTextArt();
-                }, 50);
-
-                setTimeout(function(){
-                    me.getApplication().getController('RightMenu').fillTextArt();
-                }, 50);
             },
 
             updateThemeColors: function() {
@@ -1875,7 +1869,7 @@ define([
                     this.updateThemeColors();
                     var me = this;
                     setTimeout(function(){
-                        me.fillTextArt(me.api.asc_getTextArtPreviews());
+                        me.fillTextArt();
                     }, 1);
                 }
             },

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

@@ -251,10 +251,6 @@ define([
             this.rightmenu.textartSettings.UpdateThemeColors();
         },
 
-        fillTextArt:  function() {
-            this.rightmenu.textartSettings.fillTextArt();
-        },
-
         updateMetricUnit: function() {
             this.rightmenu.headerSettings.updateMetricUnit();
             this.rightmenu.paragraphSettings.updateMetricUnit();

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

@@ -110,7 +110,8 @@ define([
                     'insert:break'      : this.onClickPageBreak,
                     'change:compact'    : this.onClickChangeCompact,
                     'home:open'         : this.onHomeOpen,
-                    'add:chart'         : this.onSelectChart
+                    'add:chart'         : this.onSelectChart,
+                    'insert:textart'    : this.onInsertTextart
                 },
                 'FileMenu': {
                     'menu:hide': this.onFileMenu.bind(this, 'hide'),
@@ -1880,6 +1881,19 @@ define([
             }
         },
 
+        onInsertTextart: function (data) {
+            if (this.api) {
+                this.toolbar.fireEvent('inserttextart', this.toolbar);
+                this.api.AddTextArt(data);
+
+                if (this.toolbar.btnInsertShape.pressed)
+                    this.toolbar.btnInsertShape.toggle(false, true);
+
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertTextArt);
+                Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
+            }
+        },
+
         onInsertPageNumberClick: function(picker, item, record) {
             if (this.api)
                 this.api.put_PageNum(record.get('data').type, record.get('data').subtype);
@@ -2558,53 +2572,6 @@ define([
             }
         },
 
-        fillTextArt: function() {
-            if (!this.toolbar.btnInsertTextArt.rendered) return;
-
-            if (this.toolbar.mnuTextArtPicker) {
-                var models = this.getApplication().getCollection('Common.Collections.TextArt').models,
-                    count = this.toolbar.mnuTextArtPicker.store.length;
-                if (count>0 && count==models.length) {
-                    var data = this.toolbar.mnuTextArtPicker.store.models;
-                    _.each(models, function(template, index){
-                        data[index].set('imageUrl', template.get('imageUrl'));
-                    });
-                } else {
-                    this.toolbar.mnuTextArtPicker.store.reset(models);
-                }
-            } else if (!this.binding.onShowBeforeTextArt) {
-                var me = this;
-                me.binding.onShowBeforeTextArt = function(menu) {
-                    me.toolbar.mnuTextArtPicker = new Common.UI.DataView({
-                        el: $('#id-toolbar-menu-insart'),
-                        store: me.getApplication().getCollection('Common.Collections.TextArt'),
-                        parentMenu: menu,
-                        showLast: false,
-                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
-                    });
-
-                    me.toolbar.mnuTextArtPicker.on('item:click', function(picker, item, record, e) {
-                        if (me.api) {
-                            if (record) {
-                                me.toolbar.fireEvent('inserttextart', me.toolbar);
-                                me.api.AddTextArt(record.get('data'));
-                            }
-
-                            if (me.toolbar.btnInsertShape.pressed)
-                                me.toolbar.btnInsertShape.toggle(false, true);
-
-                            if (e.type !== 'click')
-                                me.toolbar.btnInsertTextArt.menu.hide();
-                            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertTextArt);
-                            Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
-                        }
-                    });
-                    menu.off('show:before', me.binding.onShowBeforeTextArt);
-                };
-                me.toolbar.btnInsertTextArt.menu.on('show:before', me.binding.onShowBeforeTextArt);
-            }
-        },
-
         activateControls: function() {
             _.each(this.toolbar.toolbarControls, function(item){
                 item.setDisabled(false);

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

@@ -105,6 +105,10 @@ define([
             this.BorderSize = 0;
             this.BorderType = Asc.c_oDashType.solid;
 
+            DE.getCollection('Common.Collections.TextArt').bind({
+                reset: this.fillTextArt.bind(this)
+            });
+
             this.render();
         },
 
@@ -1019,6 +1023,10 @@ define([
 
             var models = this.application.getCollection('Common.Collections.TextArt').models,
                 count = this.cmbTextArt.menuPicker.store.length;
+            if (models.length<1) {
+                DE.getController('Main').fillTextArt(this.api.asc_getTextArtPreviews());
+                return;
+            }
             if (count>0 && count==models.length) {
                 var data = this.cmbTextArt.menuPicker.store.models;
                 _.each(models, function(template, index){

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

@@ -1716,6 +1716,26 @@ define([
                 };
                 this.btnInsertChart.menu.on('show:before', onShowBefore);
 
+                var onShowBeforeTextArt = function (menu) {
+                    var collection = DE.getCollection('Common.Collections.TextArt');
+                    if (collection.length<1)
+                        DE.getController('Main').fillTextArt(me.api.asc_getTextArtPreviews());
+                    var picker = new Common.UI.DataView({
+                        el: $('#id-toolbar-menu-insart'),
+                        store: collection,
+                        parentMenu: menu,
+                        showLast: false,
+                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
+                    });
+                    picker.on('item:click', function (picker, item, record, e) {
+                        if (record)
+                            me.fireEvent('insert:textart', [record.get('data')]);
+                        if (e.type !== 'click') menu.hide();
+                    });
+                    menu.off('show:before', onShowBeforeTextArt);
+                };
+                this.btnInsertTextArt.menu.on('show:before', onShowBeforeTextArt);
+
                 // set dataviews
 
                 var _conf = this.mnuMarkersPicker.conf;