From be2464e87df601243db474346789ec7affbe9fb9 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 11 Aug 2020 15:55:33 +0300
Subject: [PATCH] [DE] precompiled 'underscore' template in toolbar

---
 .../main/app/template/compiled/Toolbar.template.js    | 11 +++++++++++
 apps/documenteditor/main/app/view/Toolbar.js          | 11 +++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 apps/documenteditor/main/app/template/compiled/Toolbar.template.js

diff --git a/apps/documenteditor/main/app/template/compiled/Toolbar.template.js b/apps/documenteditor/main/app/template/compiled/Toolbar.template.js
new file mode 100644
index 000000000..e1975d6d4
--- /dev/null
+++ b/apps/documenteditor/main/app/template/compiled/Toolbar.template.js
@@ -0,0 +1,11 @@
+window.JST = window.JST || {};
+window.JST['Toolbar'] =
+function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
+with(obj||{}){
+__p+='<div class="toolbar">\r\n    <div class="box-tabs">\r\n        <div class="extra left"></div>\r\n        '+
+((__t=( tabsmarkup ))==null?'':__t)+
+'\r\n        <div class="extra right"></div>\r\n    </div>\r\n    <section class="box-controls">\r\n        <section class="panel static">\r\n            <div class="group no-mask">\r\n                <div class="elset">\r\n                    <span class="btn-slot" id="slot-btn-print"></span>\r\n                </div>\r\n                <div class="elset">\r\n                    <span class="btn-slot" id="slot-btn-save"></span>\r\n                </div>\r\n            </div>\r\n            <div class="separator long"></div>\r\n            <div class="group">\r\n                <div class="elset">\r\n                    <span class="btn-slot split" id="slot-btn-copy"></span>\r\n                    <span class="btn-slot" id="slot-btn-paste"></span>\r\n                </div>\r\n                <div class="elset">\r\n                    <span class="btn-slot split" id="slot-btn-undo"></span>\r\n                    <span class="btn-slot" id="slot-btn-redo"></span>\r\n                </div>\r\n            </div>\r\n            <div class="separator long"></div>\r\n        </section>\r\n        <section class="box-panels">\r\n            <section class="panel" data-tab="home">\r\n                <div class="group">\r\n                    <div class="elset" style="width:260px;">\r\n                        <span class="btn-slot" id="slot-field-fontname"></span>\r\n                        <span class="btn-slot" id="slot-field-fontsize"></span>\r\n                        <span class="btn-slot" id="slot-btn-incfont"></span>\r\n                        <span class="btn-slot" id="slot-btn-decfont"></span>\r\n                    </div>\r\n                    <div class="elset font-attr">\r\n                        <span class="btn-slot" id="slot-btn-bold"></span>\r\n                        <span class="btn-slot" id="slot-btn-italic"></span>\r\n                        <span class="btn-slot" id="slot-btn-underline"></span>\r\n                        <span class="btn-slot" id="slot-btn-strikeout"></span>\r\n                        <span class="btn-slot" id="slot-btn-superscript"></span>\r\n                        <span class="btn-slot" id="slot-btn-subscript"></span>\r\n                        <span class="btn-slot split" id="slot-btn-highlight"></span>\r\n                        <span class="btn-slot split" id="slot-btn-fontcolor"></span>\r\n                        <span class="btn-slot split" id="slot-btn-paracolor"></span>\r\n                    </div>\r\n                </div>\r\n                <div class="separator long" style="margin-left: 5px;"></div>\r\n                <div class="group">\r\n                    <div class="elset">\r\n                        <span class="btn-slot split" id="slot-btn-markers"></span>\r\n                        <span class="btn-slot split" id="slot-btn-numbering"></span>\r\n                        <span class="btn-slot split" id="slot-btn-multilevels"></span>\r\n                        <span class="btn-slot split" id="slot-btn-decoffset"></span>\r\n                        <span class="btn-slot split" id="slot-btn-incoffset"></span>\r\n                        <span class="btn-slot split" id="slot-btn-linespace"></span>\r\n                    </div>\r\n                    <div class="elset">\r\n                        <span class="btn-slot split" id="slot-btn-align-left"></span>\r\n                        <span class="btn-slot split" id="slot-btn-align-center"></span>\r\n                        <span class="btn-slot split" id="slot-btn-align-right"></span>\r\n                        <span class="btn-slot split" id="slot-btn-align-just"></span>\r\n                        <span class="btn-slot split" id="slot-btn-hidenchars"></span>\r\n                    </div>\r\n                </div>\r\n                <div class="separator long" style="margin-left: 5px;"></div>\r\n                <div class="group">\r\n                    <div class="elset">\r\n                        <span class="btn-slot split" id="slot-btn-clearstyle"></span>\r\n                        <span class="btn-slot split" id="slot-btn-colorschemas"></span>\r\n                    </div>\r\n                    <div class="elset">\r\n                        <span class="btn-slot split" id="slot-btn-copystyle"></span>\r\n                        <span class="btn-slot" id="slot-btn-mailrecepients"></span>\r\n                    </div>\r\n                </div>\r\n                <div class="group" id="slot-field-styles"></div>\r\n            </section>\r\n            <section class="panel" data-tab="ins">\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-blankpage"></span>\r\n                    <span class="btn-slot text x-huge btn-pagebreak"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-instable"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-insimage"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-inschart"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-insshape"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge slot-comment"></span>\r\n                    <span class="btn-slot text x-huge slot-inshyperlink"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-editheader"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-datetime"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-instext"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-instextart"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-inssymbol"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-dropcap"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-controls"></span>\r\n                </div>\r\n            </section>\r\n            <section class="panel" data-tab="layout">\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-pagemargins"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-pageorient"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-pagesize"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-columns"></span>\r\n                    <span class="btn-slot text x-huge btn-pagebreak"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-img-align"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-img-group"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-img-movefrwd"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-img-movebkwd"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-img-wrapping"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge" id="slot-btn-watermark"></span>\r\n                </div>\r\n            </section>\r\n            <section class="panel" data-tab="links">\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge btn-contents"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-contents-update"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge slot-notes"></span>\r\n                </div>\r\n                <div class="separator long"></div>\r\n                <div class="group">\r\n                    <span class="btn-slot text x-huge slot-inshyperlink"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-bookmarks"></span>\r\n                    <span class="btn-slot text x-huge" id="slot-btn-caption"></span>\r\n                </div>\r\n            </section>\r\n        </section>\r\n    </section>\r\n</div>';
+}
+return __p;
+}
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index b740bd2d8..c032692f9 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -59,6 +59,7 @@ define([
     'common/main/lib/component/ComboDataView'
     ,'common/main/lib/component/SynchronizeTip'
     ,'common/main/lib/component/Mixtbar'
+    ,'documenteditor/main/app/template/compiled/Toolbar.template'
 ], function ($, _, Backbone, template, template_view) {
     'use strict';
 
@@ -106,8 +107,9 @@ define([
                 var me = this;
 
                 if ( config.isEdit ) {
+                    var _tpl = !!JST ? JST['Toolbar'] : undefined;
                     Common.UI.Mixtbar.prototype.initialize.call(this, {
-                            template: _.template(template),
+                            template:  _tpl || _.template(template),
                             tabs: [
                                 {caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
                                 {caption: me.textTabHome, action: 'home', extcls: 'canedit'},
@@ -1730,7 +1732,12 @@ define([
                         restoreHeight: 421,
                         groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)),
                         store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
+                        // itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
+                        itemTemplate: Handlebars.compile('<div id="{{id}}" class="item-chartlist">' +
+                                                            '<svg width="40" height="40" class=\"icon\">' +
+                                                                '<use xlink:href=\"#chart-{{iconCls}}\"></use>' +
+                                                            '</svg>' +
+                                                        '</div>')
                     });
                     picker.on('item:click', function (picker, item, record, e) {
                         if (record)