[DE] precompiled 'underscore' template in toolbar

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);
                         }
                     }
 

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>

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});
+})();

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)

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: {

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>