{ this.checkboxRefs[channel.uid] = ref; }} />}
117 | key={channel.uid}
118 | primaryText={channel.name}
119 | />);
120 | return null;
121 | });
122 |
123 | nestedItems.push(}
126 | key={100500}
127 | primaryText={this.props.local.channels_add_channel}
128 | />);
129 |
130 | return (
131 |
132 |
137 |
157 |
158 | );
159 | }
160 | }
161 | SideBarChannels.propTypes = {
162 | signal: PropTypes.object,
163 | channels: PropTypes.array,
164 | local: PropTypes.object,
165 | };
166 |
167 | module.exports = SideBarChannels;
168 |
--------------------------------------------------------------------------------
/app/components/SideBarBotProfile.jsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const {
3 | Divider,
4 | Avatar,
5 | ListItem,
6 | IconButton,
7 | IconMenu,
8 | MenuItem,
9 | FlatButton,
10 | TextField,
11 | Dialog,
12 | CircularProgress,
13 | } = require('material-ui');
14 | const MoreVertIcon = require('material-ui/svg-icons/navigation/more-vert').default;
15 | const RefreshIcon = require('material-ui/svg-icons/navigation/refresh').default;
16 | const ChangeIcon = require('material-ui/svg-icons/editor/mode-edit').default;
17 | const RemoveIcon = require('material-ui/svg-icons/action/delete').default;
18 | const shallowCompare = require('react-addons-shallow-compare');
19 | const PropTypes = require('prop-types');
20 |
21 | const tags = {
22 | circProgressStyle: { marginTop: -5 },
23 | origin: { horizontal: 'right', vertical: 'top' },
24 | dialogStyle: { width: 310 },
25 | };
26 |
27 | class SideBarBotProfile extends React.Component {
28 | constructor(props) {
29 | super(props);
30 |
31 | this.state = {
32 | load: false,
33 | avatarLoad: false,
34 | setAdminBotDialog: false,
35 | token: this.props.token || '',
36 | };
37 |
38 | this.props.signal.register('SetLoadState', (s) => this.setState({ load: s }));
39 | this.props.signal.register('SetAvatarLoadState', (s) => this.setState({ avatarLoad: s }));
40 |
41 | // Binding context
42 | this.setAdminBot = this.setAdminBot.bind(this);
43 | this.openSetAdminBotDialog = this.openSetAdminBotDialog.bind(this);
44 | this.closeSetAdminBotDialog = this.closeSetAdminBotDialog.bind(this);
45 | this.removeAdminBot = this.removeAdminBot.bind(this);
46 | this.tokenChange = this.tokenChange.bind(this);
47 | }
48 |
49 | shouldComponentUpdate(nextProps, nextState) {
50 | return shallowCompare(this, nextProps, nextState);
51 | }
52 |
53 | setAdminBot() {
54 | this.props.signal.call('SetAdminBot', [this.state.token, this.closeSetAdminBotDialog]);
55 | }
56 |
57 | removeAdminBot() {
58 | this.props.signal.call('RemoveAdminBot');
59 | }
60 |
61 | openSetAdminBotDialog() {
62 | this.setState({ setAdminBotDialog: true });
63 | }
64 |
65 | closeSetAdminBotDialog() {
66 | this.setState({ setAdminBotDialog: false });
67 | }
68 |
69 | tokenChange(event) {
70 | this.setState({ token: event.target.value });
71 | }
72 |
73 | render() {
74 | let BotProfile;
75 |
76 | const BotAvatar = this.state.avatarLoad ?
77 | () :
78 | ();
79 |
80 | if (this.state.load) {
81 | BotProfile = (}
84 | />);
85 | } else if (this.props.name) {
86 | BotProfile = (
87 | {this.props.name}}
90 | secondaryText={this.props.username}
91 | rightIconButton={
92 | }
94 | targetOrigin={tags.origin}
95 | anchorOrigin={tags.origin}
96 | >
97 | }
99 | onClick={this.setAdminBot}
100 | primaryText={this.props.local.bot_refresh}
101 | />
102 | }
104 | onClick={this.openSetAdminBotDialog}
105 | primaryText={this.props.local.bot_change}
106 | />
107 | }
109 | onClick={this.removeAdminBot}
110 | primaryText={this.props.local.bot_remove}
111 | />
112 |
113 | }
114 | />);
115 | } else {
116 | BotProfile = (
117 | }
120 | primaryText={{this.props.local.bot_set}
}
121 | />);
122 | }
123 |
124 | const actions = [
125 | ,
129 | ,
134 | ];
135 |
136 | return (
137 |
138 |
139 | {BotProfile}
140 |
154 |
159 |
160 |
{this.props.local.drafts_empty}
161 |
162 | );
163 | }
164 | } else {
165 | const draft = this.getDraftByUid(this.state.change);
166 | const settings = {
167 | disableNotification: draft.disableNotification,
168 | disablePreview: draft.disablePreview,
169 | parser: draft.parser,
170 | };
171 | content = (
172 | );
181 | }
182 |
183 | return (
184 |
185 | {content}
186 |
187 | );
188 | }
189 | }
190 | ContentBarDraft.propTypes = {
191 | signal: PropTypes.object,
192 | local: PropTypes.object,
193 | drafts: PropTypes.array,
194 | };
195 |
196 | module.exports = ContentBarDraft;
197 |
--------------------------------------------------------------------------------
/app/components/SideBar.jsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const {
3 | List,
4 | Divider,
5 | Dialog,
6 | FlatButton,
7 | SelectField,
8 | MenuItem,
9 | Toggle,
10 | Checkbox,
11 | } = require('material-ui');
12 | const { Layout, Fixed, Flex } = require('react-layout-pane');
13 | const SideBarMenu = require('./SideBarMenu');
14 | const SideBarChannels = require('./SideBarChannels');
15 | const SideBarBotProfile = require('./SideBarBotProfile');
16 | const { shell } = window;
17 | const shallowCompare = require('react-addons-shallow-compare');
18 | const PropTypes = require('prop-types');
19 |
20 | const tags = {
21 | topSideBarStyle: { height: '100%', overflow: 'auto' },
22 | listStyle: { width: '100%' },
23 | h4Style: { margin: 0 },
24 | dialogStyle: { width: 310 },
25 | };
26 |
27 | class SideBar extends React.Component {
28 | constructor(props) {
29 | super(props);
30 |
31 | this.state = {
32 | preferencesDialog: false,
33 | aboutDialog: false,
34 | };
35 |
36 | this.props.signal.register('MenuPreferences', () => this.setState({ preferencesDialog: true }));
37 | this.props.signal.register('MenuAbout', () => this.setState({ aboutDialog: true }));
38 |
39 | // Binding context
40 | this.closePreferencesDialog = this.closePreferencesDialog.bind(this);
41 | this.closeAboutDialog = this.closeAboutDialog.bind(this);
42 | this.languageChange = this.languageChange.bind(this);
43 | this.darkThemeChange = this.darkThemeChange.bind(this);
44 | this.formattingStyleChange = this.formattingStyleChange.bind(this);
45 |
46 | this.openGithub = () => this.openBrowser('https://github.com/40PK/Chad');
47 | this.openSite = () => this.openBrowser('https://40pk.github.io/Chad/');
48 | this.openTelegram = () => this.openBrowser('https://telegram.me/perkovec/');
49 | this.openVK = () => this.openBrowser('https://vk.com/id120146182');
50 | this.openEmail = () => this.openBrowser('mailto:perkovec24@gmail.com');
51 | this.openLinkedIn = () => this.openBrowser('https://www.linkedin.com/in/perkovec');
52 | }
53 |
54 | shouldComponentUpdate(nextProps, nextState) {
55 | return shallowCompare(this, nextProps, nextState);
56 | }
57 |
58 | formattingStyleChange(event, index, value) {
59 | const data = this.props.data.postWriteDefaults;
60 | data.parser = value;
61 | this.props.signal.call('PostWriteDefaultsChange', [data]);
62 | }
63 |
64 | checkboxChange(type, event, isInputChecked) {
65 | const data = this.props.data.postWriteDefaults;
66 | data[type] = isInputChecked;
67 | this.props.signal.call('PostWriteDefaultsChange', [data]);
68 | }
69 |
70 | openBrowser(url) {
71 | shell.openExternal(url);
72 | }
73 |
74 | closePreferencesDialog() {
75 | this.setState({ preferencesDialog: false });
76 | }
77 |
78 | closeAboutDialog() {
79 | this.setState({ aboutDialog: false });
80 | }
81 |
82 | languageChange(event, index, value) {
83 | this.props.signal.call('LanguageChange', [value]);
84 | }
85 |
86 | darkThemeChange(event) {
87 | this.props.signal.call('DarkThemeChange', [event.target.checked]);
88 | }
89 |
90 | render() {
91 | const actionsPreferences = [
92 | ,
97 | ];
98 |
99 | const actionsAbout = [
100 | ,
105 | ];
106 |
107 | return (
108 |
109 |
110 |
111 |
115 |
116 |
121 |
122 |
123 |
124 |
125 |
133 |
134 |
135 |
180 |
181 |
197 |
198 | );
199 | }
200 | }
201 | SideBar.propTypes = {
202 | signal: PropTypes.object,
203 | data: PropTypes.object,
204 | local: PropTypes.object,
205 | };
206 |
207 | module.exports = SideBar;
208 |
--------------------------------------------------------------------------------
/app/components/WPostWrite.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-alert */
2 | const React = require('react');
3 | const {
4 | SelectField,
5 | MenuItem,
6 | RaisedButton,
7 | FlatButton,
8 | Dialog,
9 | Checkbox,
10 | } = require('material-ui');
11 | const { Layout, Fixed, Flex } = require('react-layout-pane');
12 | const shallowCompare = require('react-addons-shallow-compare');
13 | const WPostWriteInput = require('./WPostWriteInput');
14 | const WPostWritePreview = require('./WPostWritePreview');
15 | const PropTypes = require('prop-types');
16 |
17 | const tags = {
18 | buttonStyle: {
19 | margin: '8px 0 0 8px',
20 | float: 'right',
21 | },
22 | constentStyle: { padding: '0 8px 8px 8px' },
23 | settingsButtonStyle: { margin: '8px 8px 0 0' },
24 | previewContainerStyle: { height: 100 },
25 | dialogStyle: { width: 350 },
26 | };
27 |
28 | class WPostWrite extends React.Component {
29 | constructor(props) {
30 | super(props);
31 |
32 | const state = {
33 | parser: 'none',
34 | disablePreview: false,
35 | disableNotification: false,
36 | preview: '',
37 | settingsDialog: false,
38 | };
39 |
40 | if (this.props.settings) {
41 | if (this.props.settings.parser) state.parser = this.props.settings.parser;
42 | if (this.props.settings.disablePreview) state.disablePreview = true;
43 | if (this.props.settings.disableNotification) state.disableNotification = true;
44 | }
45 |
46 | this.state = state;
47 |
48 | this.inputRef = null;
49 | this.previewRef = null;
50 |
51 | // Binding context
52 | this.onSend = this.onSend.bind(this);
53 | this.saveDraft = this.saveDraft.bind(this);
54 | this.openSettingsDialog = this.openSettingsDialog.bind(this);
55 | this.closeSettingsDialog = this.closeSettingsDialog.bind(this);
56 | this.formattingStyleChange = this.formattingStyleChange.bind(this);
57 | this.checkParser = this.checkParser.bind(this);
58 | this.onInputRef = this.onInputRef.bind(this);
59 | this.onPreviewRef = this.onPreviewRef.bind(this);
60 | this.updatePreview = this.updatePreview.bind(this);
61 | this.getParser = this.getParser.bind(this);
62 | }
63 |
64 | componentWillReceiveProps(newProps) {
65 | const state = this.state;
66 | if (newProps.settings) {
67 | if (newProps.settings.parser) state.parser = newProps.settings.parser;
68 | if (newProps.settings.disablePreview) state.disablePreview = true;
69 | if (newProps.settings.disableNotification) state.disableNotification = true;
70 | }
71 |
72 | this.setState(state, () => this.updatePreview(this.inputRef.getText()));
73 | }
74 |
75 | shouldComponentUpdate(nextProps, nextState) {
76 | return shallowCompare(this, nextProps, nextState);
77 | }
78 |
79 | onSend() {
80 | this.props.onSend({
81 | text: this.inputRef.getText(),
82 | parser: this.state.parser,
83 | disablePreview: this.state.disablePreview,
84 | disableNotification: this.state.disableNotification,
85 | });
86 | }
87 |
88 | onInputRef(ref) {
89 | this.inputRef = ref;
90 | }
91 |
92 | onPreviewRef(ref) {
93 | this.previewRef = ref;
94 | }
95 |
96 | getParser() {
97 | return this.state.parser;
98 | }
99 |
100 | clearText() {
101 | this.inputRef.clearText();
102 | }
103 |
104 | saveDraft() {
105 | this.props.onSaveDraft({
106 | text: this.inputRef.getText(),
107 | parser: this.state.parser,
108 | disablePreview: this.state.disablePreview,
109 | disableNotification: this.state.disableNotification,
110 | });
111 | }
112 |
113 | checkboxChange(type, event, isInputChecked) {
114 | const state = {};
115 | state[type] = isInputChecked;
116 | this.setState(state);
117 | }
118 |
119 | updatePreview(text) {
120 | this.previewRef.updatePreview(text, this.state.parser);
121 | }
122 |
123 | formattingStyleChange(event, index, value) {
124 | this.setState({
125 | parser: value,
126 | }, () => this.updatePreview(this.inputRef.getText()));
127 | }
128 |
129 | fieldChange(event, type) {
130 | const state = {};
131 | state[type] = event.target.value;
132 | this.setState(state);
133 | }
134 |
135 | closeSettingsDialog() {
136 | this.setState({ settingsDialog: false });
137 | }
138 |
139 | openSettingsDialog() {
140 | this.setState({ settingsDialog: true });
141 | }
142 |
143 | checkParser() {
144 | if (this.state.parser === 'none') {
145 | return alert(this.props.local.alert_select_formatting_style);
146 | }
147 |
148 | return true;
149 | }
150 |
151 | render() {
152 | const settingsActions = [
153 | ,
158 | ];
159 |
160 | let sendButton;
161 | if (typeof this.props.sendButtonContent === 'string') {
162 | sendButton = ();
168 | } else {
169 | sendButton = ();
175 | }
176 |
177 | return (
178 |
179 |
180 |
188 |
189 |
190 |
191 |
192 |
198 |
199 |
200 | {sendButton}
201 |
206 | {this.props.onCancel && (
207 |
212 | )}
213 |
218 |
219 |
248 |
249 |
250 |
251 |
252 | );
253 | }
254 | }
255 | WPostWrite.propTypes = {
256 | settings: PropTypes.object,
257 | local: PropTypes.object,
258 | text: PropTypes.string,
259 | sendButtonContent: PropTypes.oneOfType([
260 | PropTypes.string,
261 | PropTypes.element,
262 | ]),
263 | onSend: PropTypes.func,
264 | onSaveDraft: PropTypes.func,
265 | onCancel: PropTypes.func,
266 | };
267 |
268 | module.exports = WPostWrite;
269 |
--------------------------------------------------------------------------------
/app/components/WPostWriteInput.jsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const {
3 | RaisedButton,
4 | TextField,
5 | Divider,
6 | FlatButton,
7 | Dialog,
8 | } = require('material-ui');
9 | const shallowCompare = require('react-addons-shallow-compare');
10 | const PropTypes = require('prop-types');
11 |
12 | const tags = {
13 | buttonStyle: {
14 | margin: '8px 0 0 8px',
15 | float: 'right',
16 | },
17 | constrolButtonStyle: { margin: '8px 0 0 8px' },
18 | dialogStyle: { width: 350 },
19 | dividerStyle: { marginTop: 10 },
20 | submitStyle: { display: 'none' },
21 | };
22 |
23 | class WPostWriteInput extends React.Component {
24 | constructor(props) {
25 | super(props);
26 |
27 | this.state = {
28 | text: this.props.text || '',
29 | insertLinkTitle: '',
30 | insertLinkURL: '',
31 | insertLinkDialog: false,
32 | };
33 |
34 | this.inputRef = null;
35 | this.insertLinkTitleRef = null;
36 | this.insertLinkURLRef = null;
37 |
38 | // Binding context
39 | this.insertLink = this.insertLink.bind(this);
40 | this.insertBold = this.insertBold.bind(this);
41 | this.insertItalic = this.insertItalic.bind(this);
42 | this.insertStrikethrough = this.insertStrikethrough.bind(this);
43 | this.insertUnderline = this.insertUnderline.bind(this);
44 | this.insertHiddenLink = this.insertHiddenLink.bind(this);
45 | this.onInputRef = this.onInputRef.bind(this);
46 | this.postTextChange = this.postTextChange.bind(this);
47 | this.titleFieldChange = this.titleFieldChange.bind(this);
48 | this.urlFieldChange = this.urlFieldChange.bind(this);
49 | this.closeInsertLinkDialog = this.closeInsertLinkDialog.bind(this);
50 | this.insertLinkInText = this.insertLinkInText.bind(this);
51 | this.clearText = this.clearText.bind(this);
52 | this.getText = this.getText.bind(this);
53 | }
54 |
55 | shouldComponentUpdate(nextProps, nextState) {
56 | return shallowCompare(this, nextProps, nextState);
57 | }
58 |
59 | onInputRef(ref) {
60 | if (this.inputRef === null) this.inputRef = ref.input.refs.input;
61 | }
62 |
63 | getText() {
64 | return this.state.text;
65 | }
66 |
67 | clearText() {
68 | this.setState({
69 | text: '',
70 | }, () => this.props.updatePreview(''));
71 | }
72 |
73 | insertUnderline() {
74 | if (!this.props.checkParser()) return;
75 |
76 | const selStart = this.inputRef.selectionStart;
77 | const selEnd = this.inputRef.selectionEnd;
78 |
79 | let text = this.state.text.substring(selStart, selEnd);
80 | if (text.length === 0) text = 'underline';
81 |
82 | const parser = this.props.getParser();
83 |
84 | let res;
85 | let padLeft;
86 | if (parser === 'markdown') {
87 | res = `__${text}__`;
88 | padLeft = 2;
89 | } else if (parser === 'HTML') {
90 | res = `${text}`;
91 | padLeft = 3;
92 | }
93 |
94 | this.replaceText(selStart, selEnd, padLeft, text.length, res);
95 | }
96 |
97 | insertStrikethrough() {
98 | if (!this.props.checkParser()) return;
99 |
100 | const selStart = this.inputRef.selectionStart;
101 | const selEnd = this.inputRef.selectionEnd;
102 |
103 | let text = this.state.text.substring(selStart, selEnd);
104 | if (text.length === 0) text = 'strikethrough';
105 |
106 | const parser = this.props.getParser();
107 |
108 | let res;
109 | let padLeft;
110 | if (parser === 'markdown') {
111 | res = `~${text}~`;
112 | padLeft = 1;
113 | } else if (parser === 'HTML') {
114 | res = `${text}`;
115 | padLeft = 3;
116 | }
117 |
118 | this.replaceText(selStart, selEnd, padLeft, text.length, res);
119 | }
120 |
121 | insertItalic() {
122 | if (!this.props.checkParser()) return;
123 |
124 | const selStart = this.inputRef.selectionStart;
125 | const selEnd = this.inputRef.selectionEnd;
126 |
127 | let text = this.state.text.substring(selStart, selEnd);
128 | if (text.length === 0) text = 'italic';
129 |
130 | const parser = this.props.getParser();
131 |
132 | let res;
133 | let padLeft;
134 | if (parser === 'markdown') {
135 | res = `_${text}_`;
136 | padLeft = 1;
137 | } else if (parser === 'HTML') {
138 | res = `${text}`;
139 | padLeft = 3;
140 | }
141 |
142 | this.replaceText(selStart, selEnd, padLeft, text.length, res);
143 | }
144 |
145 | insertBold() {
146 | if (!this.props.checkParser()) return;
147 |
148 | const selStart = this.inputRef.selectionStart;
149 | const selEnd = this.inputRef.selectionEnd;
150 |
151 | let text = this.state.text.substring(selStart, selEnd);
152 | if (text.length === 0) text = 'bold';
153 |
154 | const parser = this.props.getParser();
155 |
156 | let res;
157 | let padLeft;
158 | if (parser === 'markdown') {
159 | res = `*${text}*`;
160 | padLeft = 1;
161 | } else if (parser === 'HTML') {
162 | res = `${text}`;
163 | padLeft = 3;
164 | }
165 |
166 | this.replaceText(selStart, selEnd, padLeft, text.length, res);
167 | }
168 |
169 | insertLinkInText(e) {
170 | e.preventDefault();
171 |
172 | const selStart = this.inputRef.selectionStart;
173 | const selEnd = this.inputRef.selectionEnd;
174 |
175 | const parser = this.props.getParser();
176 |
177 | let res;
178 | let padLeft;
179 | if (parser === 'markdown') {
180 | res = `[${this.state.insertLinkTitle}](${this.state.insertLinkURL})`;
181 | padLeft = 1;
182 | } else if (parser === 'HTML') {
183 | res = `${this.state.insertLinkTitle}`;
184 | padLeft = 9;
185 | }
186 |
187 | this.replaceText(selStart, selEnd, padLeft, this.state.insertLinkTitle.length, res);
188 | this.closeInsertLinkDialog();
189 |
190 | return false;
191 | }
192 |
193 | insertLink() {
194 | if (!this.props.checkParser()) return;
195 |
196 | const selStart = this.inputRef.selectionStart;
197 | const selEnd = this.inputRef.selectionEnd;
198 |
199 | const title = (selStart === selEnd) ? '' : this.state.text.substring(selStart, selEnd);
200 |
201 | this.setState({
202 | insertLinkTitle: title,
203 | insertLinkURL: '',
204 | }, this.openInsertLinkDialog);
205 | }
206 |
207 | insertHiddenLink() {
208 | const parser = this.props.getParser();
209 | if (parser != "HTML")
210 | return alert(this.props.local.alert_hidden_link_not_allowed);
211 |
212 | const selStart = this.inputRef.selectionStart;
213 | const selEnd = this.inputRef.selectionEnd;
214 |
215 | let text = this.state.text.substring(selStart, selEnd);
216 | if (text.length === 0) text = 'your_link';
217 |
218 | const res = ``;
219 | const padLeft = 9;
220 |
221 | this.replaceText(selStart, selEnd, padLeft, text.length, res);
222 | }
223 |
224 | replaceText(start, end, paddingLeft, dataLength, text) {
225 | const postText = this.state.text;
226 | this.setState({
227 | text: postText.substring(0, start) +
228 | text + postText.substring(end, postText.length),
229 | }, () => {
230 | this.props.updatePreview(this.state.text);
231 | this.inputRef.focus();
232 | let padLeft = start + paddingLeft;
233 | this.inputRef.setSelectionRange(padLeft, padLeft + dataLength);
234 | });
235 | }
236 |
237 | closeInsertLinkDialog() {
238 | this.setState({ insertLinkDialog: false });
239 | }
240 |
241 | openInsertLinkDialog() {
242 | this.setState({
243 | insertLinkDialog: true,
244 | }, () => {
245 | if (this.state.insertLinkTitle) {
246 | this.insertLinkURLRef.focus();
247 | } else {
248 | this.insertLinkTitleRef.focus();
249 | }
250 | });
251 | }
252 |
253 | postTextChange(event) {
254 | this.setState({
255 | text: event.target.value,
256 | }, () => this.props.updatePreview(this.state.text));
257 | }
258 |
259 | titleFieldChange(event) {
260 | this.setState({ insertLinkTitle: event.target.value });
261 | }
262 |
263 | urlFieldChange(event) {
264 | this.setState({ insertLinkURL: event.target.value });
265 | }
266 |
267 | render() {
268 | const linkActions = [
269 | ,
274 | ,
279 | ];
280 |
281 | return (
282 |
283 |
288 |
293 |
298 |
303 |
308 |
313 |
314 |
323 |
324 |
347 |
12 |