Skip to content

WIP, mobile detection and force to inpage when mobile #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brain64bit wants to merge 1 commit into
base: master
Choose a base branch
from
+24 −12
Open

WIP, mobile detection and force to inpage when mobile #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/chatyuk.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ var ChatArea = require('./components/chat_area.jsx');

var comms = Object.create(XmppComms);

var MobileDetect = require('mobile-detect');
var Chatyuk = {
isMobile: function() {
return new MobileDetect(window.navigator.userAgent).mobile() !== null;
},

defaultConfig: {
display_mode: 'inpage'
Expand All @@ -24,7 +28,7 @@ var Chatyuk = {

renderComponent: function(parentEl) {
React.render(
<ChatArea comms={comms} config={this.config} />,
<ChatArea comms={comms} config={this.config} mobile={this.isMobile()} />,
parentEl
);
}
Expand Down
6 changes: 3 additions & 3 deletions app/components/chat_area.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ var ChatArea = React.createClass({
},

chatBoxClass: function() {
if(this.props.config.display_mode == 'inpage') {
if(this.props.config.display_mode == 'inpage' || this.props.mobile == true) {
return InPageChatBox;
} else {
return OnPageChatBox;
Expand All @@ -47,15 +47,15 @@ var ChatArea = React.createClass({

if(this.props. comms.isConnected()) {
return (
<ChatBox>
<ChatBox mobile={this.props.mobile}>
<MessagePane comms={this.props.comms} />
<LoggedInBox logout={this.logout} username={this.state.username} room={this.state.room} />
<MessageBox comms={this.props.comms} />
</ChatBox>
);
} else {
return (
<ChatBox>
<ChatBox mobile={this.props.mobile}>
<LoginForm loggedInAs={this.loggedInAs} username="test" room="testroom" />
</ChatBox>
);
Expand Down
14 changes: 12 additions & 2 deletions app/components/in_page_chat_box.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,25 @@ var ChatBoxHead = require('./chat_box_head.jsx');
var InPageChatBox = React.createClass({

render: function() {
var chatStyle = {};
if(this.props.mobile){
chatStyle = {
backgroundColor: 'yellow',
height: '1000px',
width: '500px'
}
}

return (
<div id="chatyuk">
<div id="chatyuk" style= {chatStyle}>
<ChatBoxHead ref="chatBoxHead"/>
<div className="chat-body" >
<div className="chat-area">
{this.props.children}
</div>
</div>
</div>);
</div>
);
}

});
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"version": "0.0.1",
"description": "A fun embed-able multiuser chat room for fun and profit",
"dependencies": {
"react": "^0.12"
"react": "^0.12",
"mobile-detect": "0.4.3"
},
"scripts": {
"build-tests": "watchify -p proxyquireify/plugin -e jasmine/spec/suite.js -t reactify -o jasmine/spec/bundle.js --verbose",
Expand Down
6 changes: 1 addition & 5 deletions public/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,11 @@

<body>
<div id="chatarea" style="
border: 1px solid black;
width: 25%;
height: 100%;
float: right;
"></div>
<script type="text/javascript" src="scripts/bundle.js"></script>
<script type="text/javascript">
var chatyuk = Object.create(Chatyuk);
chatyuk.init(document.querySelector('#chatarea'), {display_mode: 'inpage'});
chatyuk.init(document.querySelector('#chatarea'), {display_mode: 'onpage'});
</script>
</body>

Expand Down
1 change: 1 addition & 0 deletions public/css/chatyuk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1508,3 +1508,4 @@ input.custom-xmpp-status {
margin: 0 0.25em 0 0.5em;
vertical-align: -0.5em;
background-size: 5em 5em; }