make edits for a messages-only view of the chat module

webroot/js/chat/chat-input.js

@@ -18,6 +18,7 @@ export default class ChatInput extends Component {
   constructor(props, context) {
     super(props, context);
     this.formMessageInput = createRef();
+    this.emojiPickerButton = createRef();
 
     this.messageCharCount = 0;
 		this.maxMessageLength = 500;
@@ -65,10 +66,7 @@ export default class ChatInput extends Component {
           custom: json,
           initialCategory: 'custom',
           showPreview: false,
-          position: {
+          position: 'top'
-            top: '50%',
-            right: '100'
-          },
         });
         this.emojiPicker.on('emoji', emoji => {
           this.handleEmojiSelected(emoji);
@@ -81,7 +79,7 @@ export default class ChatInput extends Component {
 
   handleEmojiButtonClick() {
     if (this.emojiPicker) {
-      this.emojiPicker.togglePicker(this.emojiPicker);
+      this.emojiPicker.togglePicker(this.emojiPickerButton.current);
     }
   }
 
@@ -253,20 +251,26 @@ export default class ChatInput extends Component {
             onPaste=${this.handlePaste}
             />
 
-          <button
-            type="button"
-            style=${emojiButtonStyle}
-            onclick=${this.handleEmojiButtonClick}
-          >😏</button>
           <div id="message-form-actions" class="flex">
             <span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
-            <button
+
-              onclick=${this.handleSubmitChatButton}
+            <div id="message-form-actions-buttons" class="flex">
-              type="button"
+              <button
-              id="button-submit-message"
+                ref=${this.emojiPickerButton}
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+                id="emoji-button"
-            > Chat
+                type="button"
-            </button>
+                style=${emojiButtonStyle}
+                onclick=${this.handleEmojiButtonClick}
+              >😏</button>
+
+              <button
+                onclick=${this.handleSubmitChatButton}
+                type="button"
+                id="button-submit-message"
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+              > Chat
+              </button>
+            </div>
           </div>
       </div>
     `);

webroot/js/chat/chat.js

@@ -128,18 +128,6 @@ export default class Chat extends Component {
     this.disableChat()
   }
 
-  // handleSubmitChatButton(event) {
-  //   const { inputValue } = this.state;
-	// 	var value = inputValue.trim();
-	// 	if (value) {
-	// 		this.submitChat(value);
-	// 		event.preventDefault();
-	// 	return false;
-	// 	}
-	// 	event.preventDefault();
-	// 	return false;
-  // }
-
   submitChat(content) {
 		if (!content) {
 			return;
@@ -186,18 +174,26 @@ export default class Chat extends Component {
 
 
   render(props, state) {
-    const { username } = props;
+    const { username, messagesOnly } = props;
     const { messages, inputEnabled, chatUserNames } = state;
 
+    const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
+
+    if (messagesOnly) {
+      return (
+        html`
+          <div id="messages-container">
+            ${messageList}
+          </div>
+      `);
+    }
+
     return (
       html`
         <section id="chat-container-wrap" class="flex">
           <div id="chat-container" class="bg-gray-800">
             <div id="messages-container">
-              ${
+              ${messageList}
-                messages.map(message => (html`<${Message} message=${message} username=${username} />`))
-              }
-              messages..
             </div>
             <${ChatInput}
               chatUserNames=${chatUserNames}

webroot/js/chat/standalone.js

@@ -1,4 +1,8 @@
-import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
+import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
+
+
 import UsernameForm from './username.js';
 import Chat from './chat.js';
 import Websocket from '../websocket.js';
@@ -33,10 +37,26 @@ export default class StandaloneChat extends Component {
   }
 
   render(props, state) {
+    const { messagesOnly } = props;
     const { username, userAvatarImage, websocket } = state;
+
+
+    if (messagesOnly) {
+      return (
+      html`
+        <${Chat}
+          websocket=${websocket}
+          username=${username}
+          userAvatarImage=${userAvatarImage}
+          chatEnabled
+          messagesOnly
+        />
+      `);
+    }
+
     return (
       html`
-        <div class="flex">
+        <${Fragment}>
           <${UsernameForm}
             username=${username}
             userAvatarImage=${userAvatarImage}
@@ -50,7 +70,7 @@ export default class StandaloneChat extends Component {
             userAvatarImage=${userAvatarImage}
             chatEnabled
           />
-        </div>
+        </${Fragment}>
     `);
   }
 

webroot/standalone-chat.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link href="./styles/layout.css" rel="stylesheet" />
+    <!-- <link href="./styles/layout.css" rel="stylesheet" /> -->
     <link href="./styles/chat.css" rel="stylesheet" />
     <link href="./styles/standalone-chat.css" rel="stylesheet" />
 
@@ -20,8 +20,11 @@
     <script type="module">
       import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
       import StandaloneChat from './js/chat/standalone.js';
+
+      const messagesOnly = true;
+
       (function () {
-        render(html`<${StandaloneChat} />`, document.getElementById("chat-container"));
+        render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container"));
       })();
     </script>
   </body>

webroot/styles/chat.css

@@ -3,6 +3,7 @@
   overflow: auto;
   padding: 1em 0;
 }
+
 #message-input-container {
   width: 100%;
   padding: 1em;
@@ -13,22 +14,8 @@
   align-items: flex-end;
   margin-bottom: 0;
 }
-#message-body-form {
-  font-size: 1em;
-  height: 60px;
-}
-#message-body-form:disabled{
-  opacity: .5;
-}
-#message-body-form img {
-  display: inline;
-  padding-left: 5px;
-  padding-right: 5px;
-}
 
-#message-body-form .emoji {
+
-  width: 40px;
-}
 
 #message-form-actions {
   flex-direction: row;
@@ -37,16 +24,22 @@
   width: 100%;
 }
 
-.message-text img {
+#message-form-actions-buttons {
-  display: inline;
+  flex-direction: row;
-  padding-left: 5px;
+  justify-content: flex-end;
-  padding-right: 5px;
+  align-items: center;
 }
 
-.message-text .emoji {
+/* Emoji picker button */
-  width: 60px;
+#emoji-button {
+  font-size: 1.75em;
+  cursor: pointer;
+  margin-right: .5em;
 }
 
+.emoji-picker__wrapper {}
+
+
 
 
 .message {
@@ -68,75 +61,69 @@
   max-width: 85%;
   word-wrap: break-word;
 }
-.message-content a {
+
+
+
+
+
+
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+.message-text a {
   color: #7F9CF5; /* indigo-400 */
 }
-.message-content a:hover {
+.message-text a:hover {
   text-decoration: underline;
 }
 
-
+.message-text img {
-.message-text iframe {
+  display: inline;
-  width: 100%;
+  padding-left: 5px;
-  height: 170px;
+  padding-right: 5px;
-  border-radius: 15px;
-}
-
-.message-text .instagram-embed {
-  height: 314px;
 }
 
 .message-text code {
   background-color:darkslategrey;
   padding: 3px;
 }
-/* Emoji picker */
+
-#emoji-button {
+.message-text .emoji {
-  position: relative;
+  width: 60px;
-  top: -65px;
-  right: 10px;
-  cursor: pointer;
 }
 
-.message-text .embedded-image {
+
+.message-text iframe {
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }
 
-.message-text code {
+.message-text .instagram-embed {
-  background-color:darkslategrey;
+  height: 314px;
-  padding: 3px;
 }
 
-/* Emoji picker */
-#emoji-button {
-  position: relative;
-  top: -65px;
-  right: 10px;
-  cursor: pointer;
-}
 .message-text .embedded-image {
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }
 
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
 .message-text .highlighted {
   color: orange;
   font-weight: 400;
   font-size: 14px;
-
 }
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT CONTENT */
+
+
+
+
+
 
-.message-text code {
-  background-color:darkslategrey;
-  padding: 3px;
-}
 
 /*
 The chat input has a fake placeholder that is styled below.
@@ -144,6 +131,30 @@ It pulls the placeholder text from the div's placeholder attribute.
 But really it's just the innerHTML content.
 */
 
+
+
+
+
+
+
+#message-body-form {
+  font-size: 1em;
+  height: 60px;
+}
+#message-body-form:disabled{
+  opacity: .5;
+}
+#message-body-form img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#message-body-form .emoji {
+  width: 40px;
+}
+
+
 /* If the div is empty then show the placeholder */
 #message-body-form:empty:before{
   content: attr(placeholder);