Merge pull request #23 from guillaumewuip/feature-collapse

Feature collapse and line number

lib/console2.js

@@ -86,7 +86,9 @@
             length = 0;
 
         tags.forEach(function (tag) {
-            if(typeof tag === "undefined" || tag === null) return;
+            if(typeof tag === "undefined" || tag === null) {
+                return;
+            }
             if (typeof tag === 'object') {
                 result += applyColors('[' + tag.msg + ']', tag.colors);
                 length += tag.msg.toString().length + 2;
@@ -173,6 +175,26 @@
         return msg;
     };
 
+    /**
+     * spaceLUT
+     *
+     * Save offset space strings
+     */
+    var spaceLUT = {};
+
+    /**
+     * getSpaces
+     *
+     * @param  {int}        offset
+     * @return {String}     A string of [offset] space
+     */
+    var getSpaces = function(offset){
+        if(typeof spaceLUT[offset] === "undefined"){
+            spaceLUT[offset] = new Array(offset).join(' ');
+        }
+        return spaceLUT[offset];
+    };
+
     /*
      * Console2
      *
@@ -342,14 +364,6 @@
         return this;
     };
 
-    var spaceLUT = {};
-    var getSpaces = function(offset){
-        if(typeof spaceLUT[offset] === "undefined"){
-            spaceLUT[offset] = new Array(offset).join(' ');
-        }
-        return spaceLUT[offset];
-    }
-
     /**
      * Console2.prototype.buildArgs
      *

static/js/directives/log.js

@@ -9,7 +9,7 @@
      */
 
     window.app.directive('log', [function () {
-    
+
         return {
             scope : {
 
@@ -21,40 +21,48 @@
                  */
                 log      : "=",
 
+                /**
+                 * number
+                 *
+                 * Line number
+                 * @type {Int}
+                 */
+                number : "=",
+
                 /**
                  * showFile
-                 * 
+                 *
                  * Force to show file ?
                  *
-                 * @type {Boolean} 
+                 * @type {Boolean}
-                 */ 
+                 */
                 showFile : "=",
 
                 /**
                  * showTime
-                 * 
+                 *
                  * Force to show time ?
                  *
-                 * @type {Boolean} 
+                 * @type {Boolean}
-                 */ 
+                 */
                 showTime : "=",
 
                 /**
                  * showDate
-                 * 
+                 *
                  * Force to show date ?
                  *
-                 * @type {Boolean} 
+                 * @type {Boolean}
-                 */ 
+                 */
                 showDate : "=",
 
                 /**
                  * showTags
-                 * 
+                 *
                  * Force to show tags ?
                  *
-                 * @type {Boolean} 
+                 * @type {Boolean}
-                 */ 
+                 */
                 showTags : "="
             },
             restrict    : 'E',
@@ -78,14 +86,41 @@
                     } else if (typeof tag === 'object') {
                         return tag.msg || '';
                     } else {
-                        return tag; 
+                        return tag;
                     }
 
                 };
 
+                /**
+                 * scope.collapse
+                 *
+                 * @type {Boolean}  True to collapse the log
+                 */
+                $scope.collapse = false;
+
+                /**
+                 * $scope.changeState
+                 */
+                $scope.changeState = function () {
+                    $scope.collapse = !$scope.collapse;
+                };
+
+                /**
+                 * $scope.isMultilines
+                 *
+                 * @return {Boolean}        true if log is multilines
+                 */
+                $scope.isMultilines = function () {
+                    if ($scope.log.hasOwnProperty('argsString')) {
+                        return (/\n/).test($scope.log.argsString);
+                    } else {
+                        return (/\n/).test($scope.log);
+                    }
+                };
+
             }]
         };
-        
+
     }]);
 
 

static/partials/elements/log.html

@@ -1,4 +1,15 @@
-<p class="log">
+<p ng-class="{'log--collapse' : collapse == true, 'log': true}">
+
+    <span class="log__item log__number">
+        {{number}}
+    </span>
+
+    <span class="log__item log__collapse">
+        <span ng-if="isMultilines()" ng-click="changeState()">
+            <span ng-if="collapse">▶</span>
+            <span ng-if="!collapse">▼</span>
+        </span>
+    </span>
 
     <span class="log__item log__time" ng-if="showDate != 0 && (showDate == 1 || log.show.date) ||
                                              showTime != 0 && (showTime == 1 || log.show.time)">
@@ -22,8 +33,12 @@
         </span>
     </span>
 
-    <span class="log__item log__message" ng-if="log.hasOwnProperty('argsString')" >{{log.argsString}}</span>
+    <span class="log__item log__message" ng-if="log.hasOwnProperty('argsString')">
+        <span>{{log.argsString}}</span>
+    </span>
 
-    <span class="log__item log__json" ng-if="!log.hasOwnProperty('argsString')">{{log}}</span>
+    <span class="log__item log__json" ng-if="!log.hasOwnProperty('argsString')">
+        <span>{{log}}</span>
+    </span>
 
 </p>

static/partials/logs.html

@@ -8,6 +8,7 @@
         <log
             ng-repeat="line in lines | orderBy : order : reverse | filter : search track by $index"
             log="line"
+            number="$index"
             show-file="showFile"
             show-time="showTime"
             show-date="showDate"

static/style.css

@@ -439,7 +439,7 @@ body {
     /* width: 100%; */
     text-align: left;
     /* padding: 15px; */
-    border-left: 15px solid #111;
+    border-left: 5px solid #111;
 }
 .log {
     display: table-row;
@@ -452,28 +452,37 @@ body {
 }
     .log__item {
         display: table-cell;
-        padding: 0 6px;
-
-        padding-right: 6px;
         text-align: left;
+        padding-bottom: 2px;
+        padding-right: 6px;
         padding-left: 0;
 }
-    .log__tags {
+    .log__number,
-    background: #111;
+    .log__collapse,
-}
+    .log__time,
-        .log__tag {}
-    .log__time {
-    background: #111;
-}
     .log__location {
+        background: #111;
+    }
+
+    .log__number {
+        text-align: right;
+}
+    .log__collapse {
+        font-size: 12px;
+}
+        .log__collapse > span {
+            display: block;
+            width: 12px; /* fix size between states */
+            padding: 2px 4px;
+            cursor: pointer;
+}
+    .log__tags {
     background: #111;
 }
         .log__location > span {
             color: #2980b9;
         }
     .log__message {
-        white-space: pre;
-
         color: #FFF;
         line-height: 13px;
         /* margin-top: -10px; */
@@ -482,6 +491,14 @@ body {
         border-left: 1px solid #222;
         /* box-shadow: inset 2px 0 2px -2px #000; */
         padding-left: 6px;
+}
+        .log__message > span {
+            display: block;
+            overflow: hidden;
+            white-space: pre;
+}
+        .log--collapse .log__message > span {
+            height : 15px;
 }
     .log__json {
         white-space: pre-wrap;