Add pause button (#163) Closes #113. Closes #137.

mthenw · Aug 27, 2019 · 01afdc8 · 01afdc8
1 parent 4d5f29b
commit 01afdc8
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@
 * log rotation
 * auto-scrolling
 * marking logs
+* pause logs
 * number of unread logs in favicon
 * themes (default, dark)
 * [highlighting](#highlighting)

diff --git a/test/app.js b/test/app.js
@@ -13,6 +13,7 @@ describe('browser application', () => {
       socket: io,
       container: window.document.querySelector('.log'),
       filterInput: window.document.querySelector('#filter'),
+      pauseBtn: window.document.querySelector('#pauseBtn'),
       topbar: window.document.querySelector('.topbar'),
       body: window.document.querySelector('body')
     });
@@ -43,7 +44,8 @@ describe('browser application', () => {
   beforeEach((done) => {
     io = new events.EventEmitter();
     const html = '<title></title><body><div class="topbar"></div>'
-      + '<div class="log"></div><input type="test" id="filter"/></body>';
+      + '<div class="log"></div><button type="button" id="pauseBtn"></button>'
+      + '<input type="test" id="filter"/></body>';
     const ansiup = fs.readFileSync('./web/assets/ansi_up.js', 'utf-8');
     const src = fs.readFileSync('./web/assets/app.js', 'utf-8');
 
@@ -201,4 +203,37 @@ describe('browser application', () => {
     log.childNodes[2].style.display.should.be.equal('none');
     window.location.href.should.containEql('filter=other');
   });
+
+  it('should pause', () => {
+    io.emit('line', 'line1');
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+    io.emit('line', 'line3');
+
+    btn.className.should.containEql('play');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('==> SKIPED: 2 <==');
+  });
+
+  it('should play', () => {
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line1');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(1);
+    log.lastChild.textContent.should.be.equal('==> SKIPED: 1 <==');
+    btn.className.should.containEql('play');
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+
+    btn.className.should.not.containEql('play');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('line2');
+  });
 });
diff --git a/web/assets/app.js b/web/assets/app.js
@@ -27,6 +27,24 @@ window.App = (function app(window, document) {
    */
   var _filterValue = '';
 
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _pauseBtn;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isPaused = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _skipCounter = 0;
+
   /**
    * @type {HTMLElement}
    * @private
@@ -147,7 +165,7 @@ window.App = (function app(window, document) {
    * @private
    */
   var _updateFaviconCounter = function() {
-    if (_isWindowFocused) {
+    if (_isWindowFocused || _isPaused) {
       return;
     }
 
@@ -205,6 +223,7 @@ window.App = (function app(window, document) {
       _logContainer = opts.container;
       _filterInput = opts.filterInput;
       _filterInput.focus();
+      _pauseBtn = opts.pauseBtn;
       _topbar = opts.topbar;
       _body = opts.body;
 
@@ -223,6 +242,17 @@ window.App = (function app(window, document) {
         _filterLogs();
       });
 
+      // Pause button bind
+      _pauseBtn.addEventListener('mouseup', function() {
+        _isPaused = !_isPaused;
+        if (_isPaused) {
+          this.className += ' play';
+        } else {
+          _skipCounter = 0;
+          this.classList.remove('play');
+        }
+      });
+
       // Favicon counter bind
       window.addEventListener(
         'blur',
@@ -257,7 +287,12 @@ window.App = (function app(window, document) {
           _highlightConfig = highlightConfig;
         })
         .on('line', function(line) {
-          self.log(line);
+          if (_isPaused) {
+            _skipCounter += 1;
+            self.log('==> SKIPED: ' + _skipCounter + ' <==', (_skipCounter > 1));
+          } else {
+            self.log(line);
+          }
         });
     },
 
@@ -266,7 +301,7 @@ window.App = (function app(window, document) {
      *
      * @param {string} data data to log
      */
-    log: function log(data) {
+    log: function log(data, replace = false) {
       var wasScrolledBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;
       var div = document.createElement('div');
       var p = document.createElement('p');
@@ -289,7 +324,11 @@ window.App = (function app(window, document) {
 
       div.appendChild(p);
       _filterElement(div);
-      _logContainer.appendChild(div);
+      if (replace) {
+        _logContainer.replaceChild(div, _logContainer.lastChild);
+      } else {
+        _logContainer.appendChild(div);
+      }
 
       if (_logContainer.children.length > _linesLimit) {
         _logContainer.removeChild(_logContainer.children[0]);

diff --git a/web/assets/styles/dark.css b/web/assets/styles/dark.css
@@ -19,6 +19,17 @@ body {
   color: #999;
 }
 
+.btn-pause {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+    border: 1px solid transparent;
+}
+
+.btn-pause.play {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+}
+
 .form-control {
   border: 0;
   color: #7f8289;

diff --git a/web/assets/styles/default.css b/web/assets/styles/default.css
@@ -10,14 +10,30 @@ body {
 }
 
 .navbar-brand {
-  width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
+.btn-pause {
+    margin: 8px 0 8px;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>") no-repeat center center;
+    background-color: #e2e6ea;
+    background-size: contain;
+    cursor: pointer;
+    display: inline-block;
+    height: 34px;
+    width: 34px;
+    border: 1px solid #ccc;
+}
+
+.btn-pause.play {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>") no-repeat center center;
+    background-color: #e2e6ea;
+}
+
 .navbar-form-custom {
-  padding: 8px 12px 8px 0;
+  padding: 8px 0;
 }
 
 .no-horiz-padding {

diff --git a/web/index.html b/web/index.html
@@ -13,10 +13,13 @@
     <nav class="topbar navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container-fluid">
             <div class="row">
-                <div class="col-sm-10">
+                <div class="col-sm-9">
                     <span class="navbar-brand" title="__TITLE__">tail -f __TITLE__</span>
+                    <div class="text-right">
+                        <button type="button" class="btn btn-light btn-pause" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
+                    </div>
                 </div>
-                <div class="col-sm-2">
+                <div class="col-sm-3">
                     <form class="navbar-form-custom" role="search" onkeypress="return event.keyCode != 13;">
                         <input type="text" class="form-control query" placeholder="Filter" tabindex="1">
                     </form>
@@ -43,6 +46,7 @@
             socket: socket,
             container: document.getElementsByClassName('log')[0],
             filterInput: document.getElementsByClassName('query')[0],
+            pauseBtn: document.getElementsByClassName('btn-pause')[0],
             topbar: document.getElementsByClassName('topbar')[0],
             body: document.getElementsByTagName('body')[0]
         });