Add history message box - addresses #335

thedjpetersen · Aug 29, 2014 · 3a041ec · 3a041ec
1 parent 5b43fda
commit 3a041ec
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 19 deletions.
diff --git a/src/components/app/messageInput.jsx b/src/components/app/messageInput.jsx
@@ -1,11 +1,40 @@
 /** @jsx React.DOM */
 
 app.components.message_input = function() {
+  var messageBox = React.createBackboneClass({
+    componentDidUpdate: function() {
+      if(this.props.historyMode) {
+        var position = $('ul li:nth-child(' + this.props.historyOffset + ')', this.getDOMNode()).position();
+        position = position ? position.top : 0;
+        $(this.getDOMNode()).animate({
+          scrollTop: position
+        }, 200);
+      }
+    },
+
+    render: function() {
+      var _this = this;
+      return (
+        <div className={this.props.historyMode ? "messageBox" : "messageBox hide"}>
+          <ul>
+            {this.props.history.map(function(message, idx){
+              return (
+                <li onClick={_this.handleSelect} className={_this.props.historyOffset-1 === idx ? "selected": ""}>
+                  <span>{message}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )
+    }
+  });
+
   var nickBox = React.createBackboneClass({
     componentDidUpdate: function() {
-      var position = $('ul li:nth-child(' + this.props.selectedIndex + ')', this.getDOMNode()).position();
-      position = position ? position.top : 0;
       if(this.props.tabMode) {
+        var position = $('ul li:nth-child(' + this.props.selectedIndex + ')', this.getDOMNode()).position();
+        position = position ? position.top : 0;
         $(this.getDOMNode()).animate({
           scrollTop: position
         }, 200);
@@ -42,7 +71,8 @@ app.components.message_input = function() {
     getInitialState: function() {
       return {
         nicks: [],
-        selectedIndex: 0
+        selectedIndex: 0,
+        history: []
       };
     },
 
@@ -61,10 +91,43 @@ app.components.message_input = function() {
     },
 
     keyDown: function(ev) {
+      var server = app.irc.getActiveServer();
+      var channel = app.irc.getActiveChannel();
+      var historyVal;
+
+      if (ev.keyCode === 38) {
+        // handle up key
+        historyVal = channel.getNextHistory();
+      }
+
+      if (ev.keyCode === 40) {
+        // handle down key
+        historyVal = channel.getPrevHistory();
+      }
+
+      if (ev.keyCode === 38 || ev.keyCode === 40) {
+        this.setState({
+          history: channel.attributes.history,
+          historyMode: true,
+          historyOffset: channel.attributes.history_offset
+        });
+
+        if (historyVal !== undefined) {
+          ev.target.value = historyVal;
+        } else {
+          ev.target.value = "";
+        }
+      } else {
+        this.setState({historyMode: false})
+      }
+
+      // Handle esc key
+      if (ev.keyCode === 27) {
+        this.setState({historyMode: false, tabMode: false})
+      }
+
       // handle tabKey and autocompletion
       if (ev.keyCode === 9) {
-        var server = app.irc.getActiveServer();
-        var channel = app.irc.getActiveChannel();
 
         var sentence = ev.target.value.split(" ");
         ev.target.focus();
@@ -142,20 +205,12 @@ app.components.message_input = function() {
         ev.target.value = "";
       }
 
-      if (ev.keyCode === 38) {
-        // handle up key
-        ev.target.value = channel.getNextHistory();
-      }
-
-      if (ev.keyCode === 40) {
-        // handle down key
-        ev.target.value = channel.getPrevHistory();
-      }
     },
 
     render: function() {
       return (
         <div className="messageInput">
+          <messageBox history={this.state.history} historyMode={this.state.historyMode} historyOffset={this.state.historyOffset} />
           <nickBox selectUser={this.selectUser} nicks={this.state.nicks} selectedIndex={this.state.selectedIndex} tabMode={this.state.tabMode}/>
           <input ref="messageInput" onKeyDown={this.keyDown} onKeyUp={this.handleInput} placeholder="You type here..."/>
         </div>

diff --git a/src/js/handle_irc.js b/src/js/handle_irc.js
@@ -24,7 +24,6 @@ util.handle_irc = function(message, irc, app_ref) {
       if (!app.initialized && message.client_server) {
         app.initialized = true;
 
-        console.log(app);
         app.irc.set({
           active_server: message.client_server,
           active_channel: "status"

diff --git a/src/styl/messageInput.styl b/src/styl/messageInput.styl
@@ -1,28 +1,45 @@
 .messageInput
   position: relative
 
+.messageBox
+  background: white;
+  right: 0
+
 .nickBox
+  background: #F8F8F8
+  border-radius: 0 5px 0 0
+  border-right: 1px solid #DDD
+
+.nickBox, .messageBox
   position: absolute
   bottom: 63px
   left: 0
-  background: #F8F8F8
-  border-radius: 0 5px 0 0
   border-top: 1px solid #DDD
-  border-right: 1px solid #DDD
 
   max-height: 250px
   overflow: scroll
 
-.nickBox ul
+.nickBox ul, .messageBox ul
   list-style: none
   margin: 0
   padding: 0
   overflow: hidden
 
+.messageBox li.selected
+  background: #BBBBBB
+  color: white
+
 .nickBox li.selected
   background: #8D8D8D
   color: white
 
+.messageBox li
+  padding: 8px
+  border-bottom: 1px solid #EEE
+
+  &:last-child
+    border-bottom: none
+
 .nickBox li
   padding-right: 250px