[DE] set off changin of underscore's templates to Mustache
This commit is contained in:
Maxim Kadushkin
parent
4ec5d92ebd
commit
ea6af98bab
|
|
@ -193,44 +193,108 @@ define([
|
|||
'print(\'<i class=\"icon \' + iconCls + \'\"> </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}}\"> </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}}\"> </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 + \'\"> </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 + \'\"> </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 + \'\"> </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 + \'\"> </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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
19
apps/documenteditor/main/app/template/Viewport.handlebars
Normal file
19
apps/documenteditor/main/app/template/Viewport.handlebars
Normal file
|
|
@ -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>
|
||||
|
|
@ -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});
|
||||
})();
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue