From 9d6940b272215386b68bfeeb806d01429b5451fa Mon Sep 17 00:00:00 2001 From: woi Date: Wed, 18 Mar 2015 21:17:24 +0700 Subject: [PATCH] WIP, mobile detection and force to inpage when mobile --- app/chatyuk.jsx | 6 +++++- app/components/chat_area.jsx | 6 +++--- app/components/in_page_chat_box.jsx | 14 ++++++++++++-- package.json | 3 ++- public/chat.html | 6 +----- public/css/chatyuk.css | 1 + 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/app/chatyuk.jsx b/app/chatyuk.jsx index d0c1d45..eb2aac2 100644 --- a/app/chatyuk.jsx +++ b/app/chatyuk.jsx @@ -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' @@ -24,7 +28,7 @@ var Chatyuk = { renderComponent: function(parentEl) { React.render( - , + , parentEl ); } diff --git a/app/components/chat_area.jsx b/app/components/chat_area.jsx index 65c9f3c..fd8477a 100644 --- a/app/components/chat_area.jsx +++ b/app/components/chat_area.jsx @@ -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; @@ -47,7 +47,7 @@ var ChatArea = React.createClass({ if(this.props. comms.isConnected()) { return ( - + @@ -55,7 +55,7 @@ var ChatArea = React.createClass({ ); } else { return ( - + ); diff --git a/app/components/in_page_chat_box.jsx b/app/components/in_page_chat_box.jsx index a551a00..c711f98 100644 --- a/app/components/in_page_chat_box.jsx +++ b/app/components/in_page_chat_box.jsx @@ -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 ( -
+
{this.props.children}
-
); +
+ ); } }); diff --git a/package.json b/package.json index 7a86dbf..ddad37e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/chat.html b/public/chat.html index 94d3958..8c7cd1c 100644 --- a/public/chat.html +++ b/public/chat.html @@ -8,15 +8,11 @@
diff --git a/public/css/chatyuk.css b/public/css/chatyuk.css index 8f0a74d..56d7f47 100644 --- a/public/css/chatyuk.css +++ b/public/css/chatyuk.css @@ -1508,3 +1508,4 @@ input.custom-xmpp-status { margin: 0 0.25em 0 0.5em; vertical-align: -0.5em; background-size: 5em 5em; } +