2015-12-22 07:34:24 -08:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
const Grid = ReactBootstrap.Grid;
|
|
|
|
const Row = ReactBootstrap.Row;
|
|
|
|
const Col = ReactBootstrap.Col;
|
2015-12-22 23:21:33 -08:00
|
|
|
const Nav = ReactBootstrap.Nav;
|
|
|
|
const NavItem = ReactBootstrap.NavItem;
|
|
|
|
const Badge = ReactBootstrap.Badge;
|
2015-12-22 07:34:24 -08:00
|
|
|
|
|
|
|
const electron = require('electron');
|
|
|
|
const remote = electron.remote;
|
|
|
|
|
2015-12-22 22:53:34 -08:00
|
|
|
const osLocale = require('os-locale');
|
|
|
|
const fs = require('fs');
|
|
|
|
const url = require('url');
|
2015-12-23 00:06:17 -08:00
|
|
|
const path = require('path');
|
2015-12-22 22:53:34 -08:00
|
|
|
|
2015-12-22 07:34:24 -08:00
|
|
|
const settings = require('../common/settings');
|
|
|
|
|
|
|
|
var MainPage = React.createClass({
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2015-12-22 23:21:33 -08:00
|
|
|
key: 0,
|
|
|
|
unreadCounts: new Array(this.props.teams.length)
|
2015-12-22 07:34:24 -08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
handleSelect: function(key) {
|
|
|
|
this.setState({
|
2015-12-22 23:21:33 -08:00
|
|
|
key: key
|
|
|
|
});
|
|
|
|
},
|
|
|
|
handleUnreadCountChange: function(index, count) {
|
|
|
|
var counts = this.state.unreadCounts;
|
|
|
|
counts[index] = count;
|
|
|
|
this.setState({
|
|
|
|
unreadCounts: counts
|
2015-12-22 07:34:24 -08:00
|
|
|
});
|
2015-12-23 00:06:17 -08:00
|
|
|
if (this.props.onUnreadCountChange) {
|
|
|
|
var c = counts.reduce(function(prev, curr) {
|
|
|
|
return prev + curr;
|
|
|
|
});
|
|
|
|
this.props.onUnreadCountChange(c);
|
|
|
|
}
|
2015-12-22 07:34:24 -08:00
|
|
|
},
|
|
|
|
visibleStyle: function(visible) {
|
|
|
|
var visibility = visible ? 'initial' : 'hidden';
|
|
|
|
return {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 42,
|
|
|
|
right: 0,
|
|
|
|
bottom: 0,
|
|
|
|
left: 0,
|
|
|
|
visibility: visibility
|
|
|
|
};
|
|
|
|
},
|
|
|
|
render: function() {
|
2015-12-22 23:21:33 -08:00
|
|
|
var thisObj = this;
|
2015-12-22 07:34:24 -08:00
|
|
|
var tabs = this.props.teams.map(function(team, index) {
|
2015-12-22 23:21:33 -08:00
|
|
|
var badge;
|
|
|
|
if (thisObj.state.unreadCounts[index] != 0) {
|
|
|
|
badge = (<Badge>
|
|
|
|
{ thisObj.state.unreadCounts[index] }
|
|
|
|
</Badge>);
|
|
|
|
}
|
|
|
|
return (<NavItem eventKey={ index }>
|
|
|
|
{ team.name }
|
|
|
|
{ ' ' }
|
|
|
|
{ badge }
|
|
|
|
</NavItem>);
|
2015-12-22 07:34:24 -08:00
|
|
|
});
|
|
|
|
var views = this.props.teams.map(function(team, index) {
|
2015-12-22 23:21:33 -08:00
|
|
|
var handleUnreadCountChange = function(count) {
|
|
|
|
thisObj.handleUnreadCountChange(index, count);
|
|
|
|
};
|
|
|
|
return (<MattermostView style={ thisObj.visibleStyle(thisObj.state.key === index) } src={ team.url } onUnreadCountChange={ handleUnreadCountChange } />)
|
2015-12-22 07:34:24 -08:00
|
|
|
});
|
|
|
|
return (
|
|
|
|
<Grid fluid>
|
|
|
|
<Row>
|
2015-12-22 23:21:33 -08:00
|
|
|
<Nav bsStyle="tabs" activeKey={ this.state.key } onSelect={ this.handleSelect }>
|
2015-12-22 07:34:24 -08:00
|
|
|
{ tabs }
|
2015-12-22 23:21:33 -08:00
|
|
|
</Nav>
|
2015-12-22 07:34:24 -08:00
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
{ views }
|
|
|
|
</Row>
|
|
|
|
</Grid>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-12-22 23:21:33 -08:00
|
|
|
|
2015-12-22 07:34:24 -08:00
|
|
|
var MattermostView = React.createClass({
|
2015-12-22 22:53:34 -08:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
unreadCount: 0
|
|
|
|
};
|
|
|
|
},
|
|
|
|
handleUnreadCountChange: function(count) {
|
|
|
|
this.setState({
|
|
|
|
unreadCount: count
|
|
|
|
});
|
|
|
|
if (this.props.onUnreadCountChange) {
|
|
|
|
this.props.onUnreadCountChange(count);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
|
|
var thisObj = this;
|
|
|
|
var webview = ReactDOM.findDOMNode(this.refs.webview);
|
|
|
|
|
|
|
|
// Open link in browserWindow. for exmaple, attached files.
|
|
|
|
webview.addEventListener('new-window', function(e) {
|
|
|
|
var currentURL = url.parse(webview.getURL());
|
|
|
|
var destURL = url.parse(e.url);
|
|
|
|
if (currentURL.host === destURL.host) {
|
|
|
|
window.open(e.url, 'electron-mattermost');
|
|
|
|
} else {
|
|
|
|
// if the link is external, use default browser.
|
|
|
|
require('shell').openExternal(e.url);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
webview.addEventListener("dom-ready", function() {
|
|
|
|
// webview.openDevTools();
|
|
|
|
|
|
|
|
// Use 'Meiryo UI' and 'MS Gothic' to prevent CJK fonts on Windows(JP).
|
|
|
|
if (process.platform === 'win32') {
|
|
|
|
var applyCssFile = function(cssFile) {
|
|
|
|
fs.readFile(cssFile, 'utf8', function(err, data) {
|
|
|
|
if (err) {
|
|
|
|
console.log(err);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
webview.insertCSS(data);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
osLocale(function(err, locale) {
|
|
|
|
if (err) {
|
|
|
|
console.log(err);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (locale === 'ja_JP') {
|
|
|
|
applyCssFile(__dirname + '/css/jp_fonts.css');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
webview.addEventListener('ipc-message', function(event) {
|
|
|
|
switch (event.channel) {
|
|
|
|
case 'onUnreadCountChange':
|
|
|
|
var unreadCount = event.args[0];
|
|
|
|
thisObj.handleUnreadCountChange(unreadCount);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
2015-12-22 07:34:24 -08:00
|
|
|
render: function() {
|
|
|
|
// 'disablewebsecurity' is necessary to display external images.
|
|
|
|
// However, it allows also CSS/JavaScript.
|
|
|
|
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
|
2015-12-22 22:53:34 -08:00
|
|
|
return (<webview style={ this.props.style } preload="webview/mattermost.js" src={ this.props.src } ref="webview"></webview>);
|
2015-12-22 07:34:24 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-12-22 23:21:33 -08:00
|
|
|
|
2015-12-22 07:34:24 -08:00
|
|
|
var configFile = remote.getGlobal('config-file');
|
|
|
|
var config = settings.readFileSync(configFile);
|
|
|
|
|
2015-12-23 00:06:17 -08:00
|
|
|
var showUnreadBadge = function(unreadCount) {
|
|
|
|
switch (process.platform) {
|
|
|
|
case 'win32':
|
|
|
|
var window = remote.getCurrentWindow();
|
|
|
|
if (unreadCount > 0) {
|
|
|
|
window.setOverlayIcon(path.join(__dirname, '../resources/badge.png'), 'You have unread channels.');
|
|
|
|
} else {
|
|
|
|
window.setOverlayIcon(null, '');
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'darwin':
|
|
|
|
if (unreadCount > 0) {
|
|
|
|
remote.app.dock.setBadge(unreadCount.toString());
|
|
|
|
} else {
|
|
|
|
remote.app.dock.setBadge('');
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-12-22 07:34:24 -08:00
|
|
|
ReactDOM.render(
|
2015-12-23 00:06:17 -08:00
|
|
|
<MainPage teams={ config.teams } onUnreadCountChange={ showUnreadBadge } />,
|
2015-12-22 07:34:24 -08:00
|
|
|
document.getElementById('content')
|
|
|
|
);
|