1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122 | 4x
4x
4x
20x
150x
150x
30x
30x
30x
150x
150x
60x
60x
30x
30x
30x
30x
30x
30x
30x
30x
30x
30x
30x
30x
4x
| var React = require('react');
var ReactDOM = require('react-dom');
var ButtonManagerMixin = {
iconsProviderName: null,
setIconsProvider: function(name) {
this.iconsProviderName = name;
},
isFontAwesome: function() {
return this.iconsProviderName === 'font-awesome';
},
getStyleMarkdownBtn: function() {
return {
'flex': '1',
'maxWidth': '50px',
'border': '1px solid #ddd',
'backgroundColor': 'white',
'borderRadius': '4px',
'margin': '0 2px',
'padding': '2px 3px',
'cursor': 'pointer',
'display': 'flex',
'justifyContent': 'center',
'alignItems': 'center'
};
},
getBoldButton: function(isDisabled, onClickHandler) {
var _style = this.getStyleMarkdownBtn();
Eif (this.isFontAwesome()) {
return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-bold', 'bold-btn');
} else {
return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_bold', 'bold-btn');
}
},
getButtonMaterializeIcon: function(isDisabled, onClickHandler, styleBtn, iconName, containerClassName) {
return (
<div role='button' className={containerClassName} style={styleBtn} disabled={isDisabled} onClick={onClickHandler}>
<i className='material-icons'>{iconName}</i>
</div>
);
},
getButtonFontAwesomeIcon: function(isDisabled, onClickHandler, styleBtn, iconName, containerClassName) {
var _className = 'fa ' + iconName;
return (
<div role='button' className={containerClassName} style={styleBtn} disabled={isDisabled} onClick={onClickHandler}>
<i className={_className}></i>
</div>
);
},
getButtonWithoutIcon: function(isDisabled, onClickHandler, additionalClassName, textBtn) {
var styleBtn = {
'display': 'flex',
'minWidth': '50px',
'border': '1px solid #ddd',
'color': 'black',
'backgroundColor': 'white',
'borderRadius': '4px',
'margin': '0 2px',
'padding': '2px 3px',
'cursor': 'pointer',
'textAlign': 'center',
'justifyContent': 'flex-end',
'alignItems': 'center'
};
return (
<div role='button' style={styleBtn} className={additionalClassName} disabled={isDisabled} onClick={onClickHandler}>
<span>{textBtn}</span>
</div>
);
},
getItalicButton: function(isDisabled, onClickHandler) {
Eif (this.isFontAwesome()) {
var _style = this.getStyleMarkdownBtn();
return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-italic', 'italic-btn');
} else {
var _style = this.getStyleMarkdownBtn();
return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_italic', 'italic-btn');
}
},
getMakeListButton: function(isDisabled, onClickHandler) {
Eif (this.isFontAwesome()) {
var _style = this.getStyleMarkdownBtn();
return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-list-ul', 'list-btn');
} else {
var _style = this.getStyleMarkdownBtn();
return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'format_list_bulleted', 'list-btn');
}
},
getImageButton: function(isDisabled, onClickHandler) {
Eif (this.isFontAwesome()) {
var _style = this.getStyleMarkdownBtn();
return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-file-image-o', 'insert-img-btn');
} else {
var _style = this.getStyleMarkdownBtn();
return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'insert_photo', 'insert-img-btn');
}
},
getLinkButton: function(isDisabled, onClickHandler) {
Eif (this.isFontAwesome()) {
var _style = this.getStyleMarkdownBtn();
return this.getButtonFontAwesomeIcon(isDisabled, onClickHandler, _style, 'fa-link', 'insert-link-btn');
} else {
var _style = this.getStyleMarkdownBtn();
return this.getButtonMaterializeIcon(isDisabled, onClickHandler, _style, 'insert_link', 'insert-link-btn');
}
}
};
module.exports = ButtonManagerMixin;
|