Made most of requested changes

scripts/communityModules/chat/FloofChat.html

@@ -9,169 +9,11 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
-
+    <link type="text/css" rel="stylesheet" href="css/FloofChat.css" media="screen,projection"/>
 
     <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
-    <style>
-        .disabledrag {
-            -webkit-user-drag: none !important;
-            -khtml-user-drag: none !important;
-            -moz-user-drag: none !important;
-            -o-user-drag: none !important;
-            user-drag: none !important;
-        }
-
-        html {
-            height: 100%;
-        }
-
-        div.dockButton {
-
-            position: absolute; /*or fixed*/
-            right: 10px;
-
-
-            overflow: hidden;
-            border: 1px solid #ccc;
-            background-color: #f1f1f1;
-        }
-
-        div.dockButton button {
-            background-color: inherit;
-            float: right;
-            border: none;
-            outline: none;
-            cursor: pointer;
-            padding: 14px 16px;
-            transition: 0.3s;
-        }
-
-        /* Change background color of buttons on hover */
-        div.dockButton button:hover {
-            background-color: #ddd;
-        }
-
-        /* Create an active/current tablink class */
-        div.dockButton button.active {
-            background-color: #ccc;
-        }
-
-        /* Style the tab content */
-        .TabContent {
-            display: none;
-
-            padding: 6px 12px;
-            border-top: none;
-        }
-
-        body {
-            width: 100%;
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: hidden;
-            margin: 0;
-            font-family: 'Raleway', sans-serif;
-            color: white;
-            background: linear-gradient(#2b2b2b, #0f212e);
-        }
-
-        .Content {
-            min-height: 100vh;
-            font-size: 20px;
-            width: 100%;
-            height: 100%;
-        }
-
-        .ChatLog {
-            height: calc(100vh - 137px);
-            padding: 20px !important;
-            font-size: 20px;
-            color: white;
-            background-color: black;
-            overflow-x: hidden;
-            overflow-y: scroll;
-            word-wrap: break-word;
-        }
-
-        .ChatLogLine {
-            margin-bottom: 15px;
-        }
-
-        .ChatLogLineDisplayName {
-            font-weight: bold;
-        }
-
-        .ChatLogLineMessage {
-        }
-
-        .LogLogLine {
-            margin-bottom: 15px;
-            padding: 10px !important;
-        }
-
-        .LogLogLineMessage {
-            /*font-style: italic;*/
-        }
-
-        .ChatInput {
-            color: #252525;
-            background: #252525;
-            height: 60px !important;
-        }
-
-        .ChatInputText {
-            padding: 5px !important;
-            height: 50px !important;
-            width: calc(100vw - 20px) !important;
-            font-size: 20px !important;
-            background-color: white !important;
-            border-style: solid !important;
-            border-color: #232323 !important;
-            border-width: 5px 5px 5px 5px !important;
-
-        }
-
-        .responsive {
-            width: 100%;
-            max-width: 420px;
-            height: auto;
-        }
-
-        .row .col {
-            padding: 0;
-        }
-
-        .switch label .lever {
-            content: "";
-            display: inline-block;
-            position: relative;
-            width: 36px;
-            height: 14px;
-            background-color: rgba(0, 0, 0, 0.38);
-            border-radius: 15px;
-            margin-right: 10px;
-            -webkit-transition: background 0.3s ease;
-            transition: background 0.3s ease;
-            vertical-align: middle;
-            margin: 0 16px;
-        }
-
-        .muteSwitch label input[type=checkbox]:checked + .lever:after {
-            background-color: #a62113 !important;
-        }
-
-        body,img,a,div {
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            -webkit-user-drag: none;
-            user-drag: none;
-            -webkit-touch-callout: none;
-        }
-    </style>
 </head>
 <body>
 
@@ -202,8 +44,6 @@
     <input type="text" class="ChatInputText col s12" id="ChatInputText" size="256" placeholder="Type here">
 </div>
 
-</body>
-
 <script>
     var muted = {"Local": false, "Domain": false, "Grid": false};
     var instance;
@@ -593,4 +433,6 @@
 </script>
 <script type="text/javascript" src="js/materialize.min.js"></script>
 
+</body>
+
 </html>

scripts/communityModules/chat/FloofChat.js

@@ -1,6 +1,11 @@
 /* globals OverlayWindow */
 
 var ROOT = Script.resolvePath('').split("FloofChat.js")[0];
+var H_KEY = 72;
+var ENTER_KEY = 16777220;
+var ESC_KEY = 16777216;
+var FLOOF_CHAT_CHANNEL = "Chat";
+var FLOOF_NOTIFICATION_CHANNEL = "Floof-Notif";
 
 Script.scriptEnding.connect(function () {
     shutdown();
@@ -9,7 +14,7 @@ Script.scriptEnding.connect(function () {
 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var button = tablet.addButton({
     icon: ROOT + "chat.png",
-    text: "Chat\nHistory"
+    text: "CHAT"
 });
 
 Script.scriptEnding.connect(function () { // So if anything errors out the tablet/toolbar button gets removed!
@@ -31,7 +36,7 @@ var muted = Settings.getValue(settingsRoot + "/muted", {"Local": false, "Domain"
 
 var ws;
 var wsReady = false;
-var webSocketURL = "ws://gridchat.darlingvr.club:8090";
+var WEB_SOCKET_URL = "ws://gridchat.darlingvr.club:8090";
 var shutdownBool = false;
 
 var defaultColour = {red: 255, green: 255, blue: 255};
@@ -43,7 +48,7 @@ colours["gridChatColour"] = Settings.getValue(settingsRoot + "/gridChatColour",
 init();
 
 function init() {
-    Messages.subscribe("Chat");
+    Messages.subscribe(FLOOF_CHAT_CHANNEL);
     historyLog = [];
     try {
         historyLog = JSON.parse(Settings.getValue(settingsRoot + "/HistoryLog", "[]"));
@@ -69,7 +74,7 @@ function init() {
 }
 
 function connectWebSocket(timeout) {
-    ws = new WebSocket(webSocketURL);
+    ws = new WebSocket(WEB_SOCKET_URL);
     ws.onmessage = function incoming(_data) {
         var message = _data.data;
         var cmd = {FAILED: true};
@@ -81,7 +86,7 @@ function connectWebSocket(timeout) {
         if (!cmd.FAILED) {
             addToLog(cmd.message, cmd.displayName, cmd.colour, cmd.channel);
             if (!muted["Grid"]) {
-                Messages.sendLocalMessage("Floof-Notif", JSON.stringify({
+                Messages.sendLocalMessage(FLOOF_NOTIFICATION_CHANNEL, JSON.stringify({
                     sender: "(G) " + cmd.displayName,
                     text: replaceFormatting(cmd.message),
                     colour: {text: cmd.colour}
@@ -361,7 +366,7 @@ function time() {
 function addToLog(msg, dp, colour, tab) {
     historyLog.push([time(), msg, dp, colour, tab]);
     chatHistory.emitScriptEvent(JSON.stringify({type: "MSG", data: [[time(), msg, dp, colour, tab]]}));
-    while(historyLog.length > 500) {
+    while (historyLog.length > 500) {
         historyLog.shift();
     }
     Settings.setValue(settingsRoot + "/HistoryLog", JSON.stringify(historyLog))
@@ -433,13 +438,13 @@ function setVisible(_visible) {
 }
 
 function keyPressEvent(event) {
-    if (event.key === 72 && !event.isAutoRepeat && event.isControl) {
+    if (event.key === H_KEY && !event.isAutoRepeat && event.isControl) {
         toggleChatHistory()
     }
-    if (event.key === 16777220 && !event.isAutoRepeat && !visible) {
+    if (event.key === ENTER_KEY && !event.isAutoRepeat && !visible) {
         setVisible(true);
     }
-    if (event.key === 16777216 && !event.isAutoRepeat && visible) {
+    if (event.key === ESC_KEY && !event.isAutoRepeat && visible) {
         setVisible(false);
     }
 }

scripts/communityModules/chat/css/FloofChat.css

@@ -0,0 +1,157 @@
+
+.disabledrag {
+    -webkit-user-drag: none !important;
+    -khtml-user-drag: none !important;
+    -moz-user-drag: none !important;
+    -o-user-drag: none !important;
+    user-drag: none !important;
+}
+
+html {
+    height: 100%;
+}
+
+div.dockButton {
+
+    position: absolute; /*or fixed*/
+    right: 10px;
+
+
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+div.dockButton button {
+    background-color: inherit;
+    float: right;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+div.dockButton button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+div.dockButton button.active {
+    background-color: #ccc;
+}
+
+/* Style the tab content */
+.TabContent {
+    display: none;
+
+    padding: 6px 12px;
+    border-top: none;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    margin: 0;
+    font-family: 'Raleway', sans-serif;
+    color: white;
+    background: linear-gradient(#2b2b2b, #0f212e);
+}
+
+.Content {
+    min-height: 100vh;
+    font-size: 20px;
+    width: 100%;
+    height: 100%;
+}
+
+.ChatLog {
+    height: calc(100vh - 137px);
+    padding: 20px !important;
+    font-size: 20px;
+    color: white;
+    background-color: black;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    word-wrap: break-word;
+}
+
+.ChatLogLine {
+    margin-bottom: 15px;
+}
+
+.ChatLogLineDisplayName {
+    font-weight: bold;
+}
+
+.ChatLogLineMessage {
+}
+
+.LogLogLine {
+    margin-bottom: 15px;
+    padding: 10px !important;
+}
+
+.LogLogLineMessage {
+    /*font-style: italic;*/
+}
+
+.ChatInput {
+    color: #252525;
+    background: #252525;
+    height: 60px !important;
+}
+
+.ChatInputText {
+    padding: 5px !important;
+    height: 50px !important;
+    width: calc(100vw - 20px) !important;
+    font-size: 20px !important;
+    background-color: white !important;
+    border-style: solid !important;
+    border-color: #232323 !important;
+    border-width: 5px 5px 5px 5px !important;
+
+}
+
+.responsive {
+    width: 100%;
+    max-width: 420px;
+    height: auto;
+}
+
+.row .col {
+    padding: 0;
+}
+
+.switch label .lever {
+    content: "";
+    display: inline-block;
+    position: relative;
+    width: 36px;
+    height: 14px;
+    background-color: rgba(0, 0, 0, 0.38);
+    border-radius: 15px;
+    margin-right: 10px;
+    -webkit-transition: background 0.3s ease;
+    transition: background 0.3s ease;
+    vertical-align: middle;
+    margin: 0 16px;
+}
+
+.muteSwitch label input[type=checkbox]:checked + .lever:after {
+    background-color: #a62113 !important;
+}
+
+body, img, a, div {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-user-drag: none;
+    user-drag: none;
+    -webkit-touch-callout: none;
+}

scripts/communityModules/notificationCore/notificationCore.js

@@ -4,6 +4,7 @@ var sizeData = {30: {widthMul: 1.8, heightMul: 2.05, split: 35, size: 30}};
 
 var DEFAULT_SIZE = 30;
 var DEFAULT_OFFSET = 10;
+var FLOOF_NOTIFICATION_CHANNEL = "Floof-Notif";
 
 var offset = DEFAULT_OFFSET;
 
@@ -15,7 +16,7 @@ function init(){
 
 function messageReceived(channel, message, sender, local) {
     if (local) {
-        if (channel === "Floof-Notif") {
+        if (channel === FLOOF_NOTIFICATION_CHANNEL) {
             var cmd = {FAILED: true};
             try {
                 cmd = JSON.parse(message);