Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[component] button's refactoring

Browse source
This commit is contained in:
Maxim Kadushkin 2019-09-24 14:00:01 +03:00
parent f07418e832
commit 856f260667
1 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
apps/common/main/lib/component/Button.js
View file

@ -183,48 +183,48 @@ define([
}; };
var templateBtnIcon = var templateBtnIcon =
'<% if ( iconImg ) { %>' + '<% if ( opts.iconImg ) { %>' +
'<img src="<%= iconImg %>">' + '<img src="<%= opts.iconImg %>">' +
'<% } else { %>' + '<% } else { %>' +
'<% if (/svgicon/.test(iconCls)) {' + '<% if (/svgicon/.test(opts.iconCls)) {' +
'print(\'<svg width="26" height="26" class=\"icon\"><use href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' + 'print(\'<svg width="26" height="26" class=\"icon\"><use href=\"#\' + /svgicon\\s(\\S+)/.exec(opts.iconCls)[1] + \'\"></use></svg>\');' +
'} else ' + '} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' + 'print(\'<i class=\"icon \' + opts.iconCls + \'\">&nbsp;</i>\'); %>' +
'<% } %>'; '<% } %>';
var templateHugeCaption = var templateHugeCaption =
'<button type="button" class="btn <%= cls %>" id="<%= id %>" > ' + '<button type="button" class="btn <%= opts.cls %>" id="<%= opts.id %>" > ' +
'<div class="inner-box-icon">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
'<div class="inner-box-caption">' + '<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= opts.caption %></span>' +
'</div>' + '</div>' +
'</button>'; '</button>';
var templateHugeMenuCaption = var templateHugeMenuCaption =
'<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' + '<div class="btn-group icon-top" id="<%= opts.id %>" style="<%= opts.style %>">' +
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' + '<button type="button" class="btn dropdown-toggle <%= opts.cls %>" data-toggle="dropdown">' +
'<div class="inner-box-icon">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
'<div class="inner-box-caption">' + '<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= opts.caption %></span>' +
'<i class="caret img-commonctrl"></i>' + '<i class="caret img-commonctrl"></i>' +
'</div>' + '</div>' +
'</button>' + '</button>' +
'</div>'; '</div>';
var templateHugeSplitCaption = var templateHugeSplitCaption =
'<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' + '<div class="btn-group x-huge split icon-top" id="<%= opts.id %>" style="<%= opts.style %>">' +
'<button type="button" class="btn <%= cls %> inner-box-icon">' + '<button type="button" class="btn <%= opts.cls %> inner-box-icon">' +
'<span class="btn-fixflex-hcenter">' + '<span class="btn-fixflex-hcenter">' +
templateBtnIcon + templateBtnIcon +
'</span>' + '</span>' +
'</button>' + '</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' + '<button type="button" class="btn <%= opts.cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
'<span class="btn-fixflex-vcenter">' + '<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= opts.caption %></span>' +
'<i class="caret img-commonctrl"></i>' + '<i class="caret img-commonctrl"></i>' +
'</span>' + '</span>' +
'</button>' + '</button>' +
@ -249,43 +249,49 @@ define([
template: _.template([ template: _.template([
'<% var applyicon = function() { %>', '<% var applyicon = function() { %>',
'<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>', '<% if (opts.iconImg) { print(\'<img src=\"\' + opts.iconImg + \'\">\'); } else { %>',
// '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>', // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
'<% if (iconCls != "") { ' + '<% if (opts.iconCls != "") { ' +
' if (/svgicon/.test(iconCls)) {' + ' if (/svgicon/.test(opts.iconCls)) {' +
'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' + 'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(opts.iconCls)[1] + \'\"></use></svg>\');' +
'} else ' + '} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' + 'print(\'<i class=\"icon \' + opts.iconCls + \'\">&nbsp;</i>\'); ' +
'}} %>', '}} %>',
'<% } %>', '<% } %>',
'<% if ( !menu ) { %>', '<% if ( !opts.menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">', '<button type="button" class="btn <%= opts.cls %>" id="<%= opts.id %>" style="<%= opts.style %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= opts.caption %></span>',
'</button>', '</button>',
'<% } else if (split == false) {%>', '<% } else if (opts.split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">', '<div class="btn-group" id="<%= opts.id %>" style="<%= opts.style %>">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">', '<button type="button" class="btn dropdown-toggle <%= opts.cls %>" data-toggle="dropdown">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= opts.caption %></span>',
'<span class="inner-box-caret">' + '<span class="inner-box-caret">' +
'<i class="caret img-commonctrl"></i>' + '<i class="caret img-commonctrl"></i>' +
'</span>', '</span>',
'</button>', '</button>',
'</div>', '</div>',
'<% } else { %>', '<% } else { %>',
'<div class="btn-group split" id="<%= id %>" style="<%= style %>">', '<div class="btn-group split" id="<%= opts.id %>" style="<%= opts.style %>">',
'<button type="button" class="btn <%= cls %>">', '<button type="button" class="btn <%= opts.cls %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= opts.caption %></span>',
'</button>', '</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn <%= opts.cls %> dropdown-toggle" data-toggle="dropdown">',
'<i class="caret img-commonctrl"></i>', '<i class="caret img-commonctrl"></i>',
'<span class="sr-only"></span>', '<span class="sr-only"></span>',
'</button>', '</button>',
'</div>', '</div>',
'<% } %>' '<% } %>'
].join('')), ].join(''), null, {variable:'opts'}),
templates: {
hugesplitted : _.template(templateHugeSplitCaption, null, {variable:'opts'}),
hugewithmenu : _.template(templateHugeMenuCaption, null, {variable:'opts'}),
hugesimple : _.template(templateHugeCaption, null, {variable:'opts'})
},
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
@ -328,12 +334,12 @@ define([
if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) { if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
if ( me.split === true ) { if ( me.split === true ) {
!!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, '')); !!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
this.template = _.template(templateHugeSplitCaption); this.template = this.templates.hugesplitted;
} else } else
if ( !!me.menu ) { if ( !!me.menu ) {
this.template = _.template(templateHugeMenuCaption); this.template = this.templates.hugewithmenu;
} else { } else {
this.template = _.template(templateHugeCaption); this.template = this.templates.hugesimple;
} }
} }