Tidy up code and improve flexibility

EatonCiaran · Jul 13, 2021 · ef8b5af · ef8b5af
1 parent ccb84da
commit ef8b5af
Show file tree

Hide file tree

Showing 7 changed files with 323 additions and 192 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,10 @@ The jQuery Console plugin allows you to easily create a non-interactive console
 
 ---
 
+## Live Demo
+
+A live demo of this project can be found at https://eatonciaran.github.io/jquery-console/
+
 ## Usage
 
 Initialise the console by attaching it to a `div` tag. `options` is optional.
@@ -27,19 +31,36 @@ myConsole.log("message");
 
 ## Options
 
+### defaultLevel
+Integer or string. Set the default severity level of messaages. If an integer it needs to be a valid index of the levels 
+array and if it's a string the value needs to be found in that array.
+
+### fadeoutTime
+Integer to set how long in milliseconds messages take to fadeout when `timeout` is being used. Default: `400`.
+
 ### history
-Integer to set how many messages to retain. Default: `10000`.
+Integer to set how many messages to retain. Set to `0` to retain everything (Not recommended). Default: `10000`.
+
+### levels
+Array of severity levels. Modifying this is only useful if the number of default severities is insufficient for your CSS needs. 
+Default `["emergency", "alert", "critical", "error", "warning", "notice", "info", "debug"]`
 
 ### msgDirection
-String to denote whether messages are appended to the top or bottom. Default: `"down"`
+String to denote whether messages are appended to the top or bottom. Default: `"down"`.
 * `"down"`: append to the bottom
 * `"up"`: append to the top
 
 ### showTimestamp
-Boolean flag indicating whether the timestamp the message was logged should be shown. Default: `true`
+Boolean to enable displaying of message timestamps. Default: `true`.
+
+### tagOddEven
+Boolean to enable messages being tagged odd or even to allow alternating message styling. Default `false`.
 
 ### timeout
-Integer to set how long in milliseconds until messages are deleted. Setting to `0` results in no timeout. Default: `0`
+Integer to set how long in milliseconds until messages are deleted. Set to `0` for no timeout. Default: `0`.
+
+### timestampOnLeft
+Boolean to control whether timestamp appears on the left or the right of the message. Default: `false`.
 
 ---
 
@@ -48,7 +69,7 @@ Integer to set how long in milliseconds until messages are deleted. Setting to `
 ### log
 Logs message to the assigned console. Takes 2 parameters:
 * `msg`: String representing the message to be logged. Required.
-* `level`: Can either be an integer or string representing the desired visual style. Default: `6`
+* `level`: Can either be an integer or string representing the desired visual style / severity. Default determined by the option `defaultLevel`. Assuming the option `levels` is default the following values are accepted:
 
 | Integer | String        |
 | ------- | ------------- |

diff --git a/demos/index.html b/demos/index.html
@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
 
-    <link rel="stylesheet" href="./css/main.css" type="text/css" />
-    <link rel="stylesheet" href="../src/jquery.console.css" type="text/css" />
+    <link rel="stylesheet" href="./main.css" type="text/css" />
+    <link rel="stylesheet" href="../dist/jquery.console.min.css" type="text/css" />
 
     <title>jQuery Console Plugin</title>
 </head>
@@ -30,17 +30,21 @@ <h2>New messages placed at the bottom and limited history of 15 messages</h2>
 
         <h2>No timestamp and messages timeout after 3 seconds</h2>
         <div class="console3"></div>
+
+        <h2>Odd even tagging, timestamp on left side</h2>
+        <div class="console4"></div>
     </main>
 
     <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
-    <script language="javascript" type="text/javascript" src="../src/jquery.console.js"></script>
+    <script language="javascript" type="text/javascript" src="../dist/jquery.console.min.js"></script>
 
     <script type="text/javascript">
         $(document).ready(function () {
             // Init the consoles
             let con1 = $(".console1").console({ msgDirection: "up" });
             let con2 = $(".console2").console({ history: 15 });
             let con3 = $(".console3").console({ msgDirection: "up", showTimestamp: false, timeout: 3000 });
+            let con4 = $(".console4").console({ tagOddEven: true, timestampOnLeft: true });
 
             // Sample messages to show off the different log levels
             let long_txt = "This is very long alert message. This is very long alert message. This is very long alert message. "
@@ -76,40 +80,16 @@ <h2>No timestamp and messages timeout after 3 seconds</h2>
                     con1.log(msg["txt"], msg["level"]);
                     con2.log(msg["txt"], msg["level"]);
                     con3.log(msg["txt"], msg["level"]);
+                    con4.log(msg["txt"], msg["level"]);
                 }
                 else {
                     con1.log(msg["txt"]);
                     con2.log(msg["txt"]);
                     con3.log(msg["txt"]);
+                    con4.log(msg["txt"]);
                 }
             }
-            let tid = setInterval(writeMessage, 1000);
-
-
-            /* 
-            TODO: Decide if generator or closure implementation is easier to understand and maintain.
-
-            // Closure implementation of writing a message every second from the message array
-            const writeMessage = (function () {
-                let index = 0;
-                return function () {
-                    let msg = msgs[index];
-                    if ("level" in msg) {
-                        con1.log(msg["txt"], msg["level"]);
-                        con2.log(msg["txt"], msg["level"]);
-                        con3.log(msg["txt"], msg["level"]);
-                    }
-                    else {
-                        con1.log(msg["txt"]);
-                        con2.log(msg["txt"]);
-                        con3.log(msg["txt"]);
-                    }
-                    index = (index + 1) % msgs.length;
-                    return index;
-                }
-            })();
-            let tid = setInterval(writeMessage, 1000);
-            */
+            let tid = setInterval(writeMessage, 500);
         });
     </script>
 </body>

diff --git a/demos/css/main.css → demos/main.css b/demos/css/main.css → demos/main.css
diff --git a/dist/jquery.console.min.css b/dist/jquery.console.min.css
diff --git a/dist/jquery.console.min.js b/dist/jquery.console.min.js
diff --git a/src/jquery.console.css b/src/jquery.console.css
@@ -11,14 +11,16 @@
     padding: 0 0.5em 0 0.5em;
 }
 
+/* message content */
 .jquery-console-msg {
     display: inline-block;
     word-break: break-all;
     text-align: left;
     width: 100%;
 }
 
-.jquery-console-msg-nots {
+/* timestamped message */
+.jquery-console-msg-ts {
     float: left;
     width: 90%;
 }
@@ -29,8 +31,27 @@
     width: 10%;
 }
 
+/* timestamp on the left */
+.jquery-console-msg-ts-left {
+    float: right;
+    width: 94%;
+}
+.jquery-console-timestamp-left {
+    display: inline-block;
+    text-align: left;
+    width: 5%;
+}
+
+.jquery-console-odd {
+    background-color: #d6d6d6;
+}
+
+.jquery-console-even {
+    background-color: #FFFFFF;
+}
+
 .jquery-console-lvl-debug {
-    color: #D2D2D2;
+    color: #868686;
 }
 
 .jquery-console-lvl-info {