From ea6af98bab40a13e0b2bc33e455e7a56e50269c4 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 11 Aug 2020 15:54:07 +0300
Subject: [PATCH] [DE] set off changin of underscore's templates to Mustache

---
 apps/common/main/lib/component/Button.js      | 182 +++++++++++++-----
 .../main/app/template/Viewport.handlebars     |  19 ++
 .../template/compiled/Viewport.template.js    |   6 +
 apps/documenteditor/main/app/view/Viewport.js |   4 +-
 apps/documenteditor/main/index.html           |   5 +
 5 files changed, 172 insertions(+), 44 deletions(-)
 create mode 100644 apps/documenteditor/main/app/template/Viewport.handlebars
 create mode 100644 apps/documenteditor/main/app/template/compiled/Viewport.template.js

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 50c2c4020..8814b42cc 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -193,44 +193,108 @@ define([
                     'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
             '<% } %>';
 
+    // var templateHugeCaption =
+    //         '<button type="button" class="btn <%= cls %> class-123" id="<%= id %>" > ' +
+    //             '<div class="inner-box-icon">' +
+    //                 templateBtnIcon +
+    //             '</div>' +
+    //             '<div class="inner-box-caption">' +
+    //                 '<span class="caption"><%= caption %></span>' +
+    //             '</div>' +
+    //         '</button>';
+
+    // var templateHugeMenuCaption =
+    //     '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
+    //         '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+    //             '<div class="inner-box-icon">' +
+    //                 templateBtnIcon +
+    //             '</div>' +
+    //             '<div class="inner-box-caption">' +
+    //                 '<span class="caption"><%= caption %></span>' +
+    //                 '<i class="caret img-commonctrl"></i>' +
+    //             '</div>' +
+    //         '</button>' +
+    //     '</div>';
+
+    // var templateHugeSplitCaption =
+    //     '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
+    //         '<button type="button" class="btn <%= cls %> inner-box-icon">' +
+    //             '<span class="btn-fixflex-hcenter">' +
+    //                 templateBtnIcon +
+    //             '</span>' +
+    //         '</button>' +
+    //         '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
+    //             '<span class="btn-fixflex-vcenter">' +
+    //                 '<span class="caption"><%= caption %></span>' +
+    //                 '<i class="caret img-commonctrl"></i>' +
+    //             '</span>' +
+    //         '</button>' +
+    //     '</div>';
+
+
+    Handlebars.registerHelper('check_if_svg', function (iconcls) {
+        return /svgicon/.test(iconcls);
+    });
+
+    var templateBtnIcon_hbrs =
+        '{{#if (iconImg)}}' +
+            '<img src="{{ iconImg }}">' +
+        '{{else if (check_if_svg iconCls)}}' +
+                'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+                            '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
+        '{{else}}' +
+            '<i class=\"icon {{iconCls}}\">&nbsp;</i>' +
+        '{{/if}}';
+
     var templateHugeCaption =
-            '<button type="button" class="btn <%= cls %>" id="<%= id %>" > ' +
+            '<button type="button" class="btn {{cls}}" id="{{id}}" > ' +
                 '<div class="inner-box-icon">' +
-                    templateBtnIcon +
+                    templateBtnIcon_hbrs +
                 '</div>' +
                 '<div class="inner-box-caption">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption">{{caption}}</span>' +
                 '</div>' +
             '</button>';
 
     var templateHugeMenuCaption =
-        '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
-            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+        '<div class="btn-group icon-top" id="{{id}}" style="{{style}}">' +
+            '<button type="button" class="btn dropdown-toggle {{cls}}" data-toggle="dropdown">' +
                 '<div class="inner-box-icon">' +
-                    templateBtnIcon +
+                    templateBtnIcon_hbrs +
                 '</div>' +
                 '<div class="inner-box-caption">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption">{{caption}}</span>' +
                     '<i class="caret img-commonctrl"></i>' +
                 '</div>' +
             '</button>' +
         '</div>';
 
     var templateHugeSplitCaption =
-        '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
-            '<button type="button" class="btn <%= cls %> inner-box-icon">' +
+        '<div class="btn-group x-huge split icon-top" id="{{id}}" style="{{style}}">' +
+            '<button type="button" class="btn {{cls}} inner-box-icon">' +
                 '<span class="btn-fixflex-hcenter">' +
-                    templateBtnIcon +
+                    templateBtnIcon_hbrs +
                 '</span>' +
             '</button>' +
-            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
+            '<button type="button" class="btn {{cls}} inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="btn-fixflex-vcenter">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption">{{caption}}</span>' +
                     '<i class="caret img-commonctrl"></i>' +
                 '</span>' +
             '</button>' +
         '</div>';
 
+    Handlebars.registerPartial('applyicon',
+        '{{#if (iconImg)}}' +
+            '<img src=\"{{iconImg}}\">' +
+        '{{else if (check_if_svg iconCls)}}' +
+            '<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+                '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use>' +
+            '</svg>' +
+        '{{else if iconCls}}' +
+            '<i class=\"icon {{iconCls}}\">&nbsp;</i>' +
+        '{{/if}}');
+
     Common.UI.Button = Common.UI.BaseView.extend({
         options : {
             id              : null,
@@ -248,45 +312,74 @@ define([
             visible         : true
         },
 
-        template: _.template([
-            '<% var applyicon = function() { %>',
-                '<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
-                // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
-                '<% if (iconCls != "") { ' +
-                    ' if (/svgicon/.test(iconCls)) {' +
-                        'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
-                            '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
-                    '} else ' +
-                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
-                '}} %>',
-            '<% } %>',
-            '<% if ( !menu ) { %>',
-                '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                    '<% applyicon() %>',
-                    '<span class="caption"><%= caption %></span>',
+        // template: _.template([
+        //     '<% var applyicon = function() { %>',
+        //         '<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
+        //         // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
+        //         '<% if (iconCls != "") { ' +
+        //             ' if (/svgicon/.test(iconCls)) {' +
+        //                 'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
+        //                     '<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
+        //             '} else ' +
+        //                 'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
+        //         '}} %>',
+        //     '<% } %>',
+        //     '<% if ( !menu ) { %>',
+        //         '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
+        //             '<% applyicon() %>',
+        //             '<span class="caption"><%= caption %></span>',
+        //         '</button>',
+        //     '<% } else if (split == false) {%>',
+        //         '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
+        //             '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
+        //                 '<% applyicon() %>',
+        //                 '<span class="caption"><%= caption %></span>',
+        //                 '<span class="inner-box-caret">' +
+        //                     '<i class="caret img-commonctrl"></i>' +
+        //                 '</span>',
+        //             '</button>',
+        //         '</div>',
+        //     '<% } else { %>',
+        //         '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
+        //             '<button type="button" class="btn <%= cls %>">',
+        //                 '<% applyicon() %>',
+        //                 '<span class="caption"><%= caption %></span>',
+        //             '</button>',
+        //             '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
+        //                 '<i class="caret img-commonctrl"></i>',
+        //                 '<span class="sr-only"></span>',
+        //             '</button>',
+        //         '</div>',
+        //     '<% } %>'
+        // ].join('')),
+        template: Handlebars.compile([
+            '{{#unless menu}}',
+                '<button type="button" class="btn {{cls}}" id="{{id}}" style="{{style}}">',
+                    '{{> applyicon}}',
+                    '<span class="caption">{{caption}}</span>',
                 '</button>',
-            '<% } else if (split == false) {%>',
-                '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
-                    '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
-                        '<% applyicon() %>',
-                        '<span class="caption"><%= caption %></span>',
+            '{{else unless split}}',
+                '<div class="btn-group" id="{{id}}" style="{{style}}">',
+                    '<button type="button" class="btn dropdown-toggle {{cls}}" data-toggle="dropdown">',
+                        '{{> applyicon}}',
+                        '<span class="caption">{{caption}}</span>',
                         '<span class="inner-box-caret">' +
                             '<i class="caret img-commonctrl"></i>' +
                         '</span>',
                     '</button>',
                 '</div>',
-            '<% } else { %>',
-                '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
-                    '<button type="button" class="btn <%= cls %>">',
-                        '<% applyicon() %>',
-                        '<span class="caption"><%= caption %></span>',
+            '{{else}}',
+                '<div class="btn-group split" id="{{id}}" style="{{style}}">',
+                    '<button type="button" class="btn {{cls}}">',
+                        '{{> applyicon}}',
+                        '<span class="caption">{{caption}}</span>',
                     '</button>',
-                    '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
+                    '<button type="button" class="btn {{cls}} dropdown-toggle" data-toggle="dropdown">',
                         '<i class="caret img-commonctrl"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
                 '</div>',
-            '<% } %>'
+            '{{/unless}}'
         ].join('')),
 
         initialize : function(options) {
@@ -331,12 +424,15 @@ define([
                     if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
                         if ( me.split === true ) {
                             !!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
-                            this.template = _.template(templateHugeSplitCaption);
+                            // this.template = _.template(templateHugeSplitCaption);
+                            this.template = Handlebars.compile(templateHugeSplitCaption);
                         } else
                         if ( !!me.menu ) {
-                            this.template = _.template(templateHugeMenuCaption);
+                            // this.template = _.template(templateHugeMenuCaption);
+                            this.template = Handlebars.compile(templateHugeMenuCaption);
                         } else {
-                            this.template = _.template(templateHugeCaption);
+                            // this.template = _.template(templateHugeCaption);
+                            this.template = Handlebars.compile(templateHugeCaption);
                         }
                     }
 
diff --git a/apps/documenteditor/main/app/template/Viewport.handlebars b/apps/documenteditor/main/app/template/Viewport.handlebars
new file mode 100644
index 000000000..41582b203
--- /dev/null
+++ b/apps/documenteditor/main/app/template/Viewport.handlebars
@@ -0,0 +1,19 @@
+<div class="layout-region">
+    <div id="viewport-vbox-layout" class="layout-ct vbox ">
+        <section class="layout-ct">
+            <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
+        </section>
+        <section id="app-title" class="layout-item"></section>
+        <div id="toolbar" class="layout-item"></div>
+        <div class="layout-item middle">
+            <div id="viewport-hbox-layout" class="layout-ct hbox">
+                <div id="left-menu" class="layout-item" style="width: 40px;"></div>
+                <div id="about-menu-panel" class="left-menu-full-ct" style="display:none;"></div>
+                <div id="editor-container" class="layout-item"><div id="editor_sdk"></div></div>
+                <div id="right-menu" class="layout-item"></div>
+                <div id="left-panel-history" class="layout-item"></div>
+            </div>
+        </div>
+        <div id="statusbar" class="layout-item"></div>
+    </div>
+</div>
diff --git a/apps/documenteditor/main/app/template/compiled/Viewport.template.js b/apps/documenteditor/main/app/template/compiled/Viewport.template.js
new file mode 100644
index 000000000..a05fc6f75
--- /dev/null
+++ b/apps/documenteditor/main/app/template/compiled/Viewport.template.js
@@ -0,0 +1,6 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['Viewport'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    return "<div class=\"layout-region\">\r\n    <div id=\"viewport-vbox-layout\" class=\"layout-ct vbox \">\r\n        <section class=\"layout-ct\">\r\n            <div id=\"file-menu-panel\" class=\"toolbar-fullview-panel\" style=\"display:none;\"></div>\r\n        </section>\r\n        <section id=\"app-title\" class=\"layout-item\"></section>\r\n        <div id=\"toolbar\" class=\"layout-item\"></div>\r\n        <div class=\"layout-item middle\">\r\n            <div id=\"viewport-hbox-layout\" class=\"layout-ct hbox\">\r\n                <div id=\"left-menu\" class=\"layout-item\" style=\"width: 40px;\"></div>\r\n                <div id=\"about-menu-panel\" class=\"left-menu-full-ct\" style=\"display:none;\"></div>\r\n                <div id=\"editor-container\" class=\"layout-item\"><div id=\"editor_sdk\"></div></div>\r\n                <div id=\"right-menu\" class=\"layout-item\"></div>\r\n                <div id=\"left-panel-history\" class=\"layout-item\"></div>\r\n            </div>\r\n        </div>\r\n        <div id=\"statusbar\" class=\"layout-item\"></div>\r\n    </div>\r\n</div>\r\n";
+},"useData":true});
+})();
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index a90ad6f6b..fc9705019 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -45,6 +45,7 @@ define([
     'jquery',
     'underscore',
     'backbone',
+    'documenteditor/main/app/template/compiled/Viewport.template',
     'common/main/lib/component/Layout'
 ], function (viewportTemplate, $, _, Backbone) {
     'use strict';
@@ -53,7 +54,8 @@ define([
         el: '#viewport',
 
         // Compile our stats template
-        template: _.template(viewportTemplate),
+        // template: _.template(viewportTemplate),
+        template: Handlebars.templates.Viewport,
 
         // Delegated events for creating new items, and clearing completed ones.
         events: {
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 81e239298..3b133cbcc 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -5,6 +5,9 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <!--<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost https://cdn.jsdelivr.net 'unsafe-eval' 'unsafe-inline';">-->
+    <!--<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost https://cdn.jsdelivr.net 'unsafe-inline';">-->
+
     <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon">
 
     <!-- splash -->
@@ -285,6 +288,8 @@
     <script src="../../../vendor/less/dist/less.js" type="text/javascript"></script>
     <!-- debug end -->
 
+    <!--<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.runtime.js"></script>-->
+    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
     <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>