From 01afdc8cdd7019cd844fb8b434314f0876770e01 Mon Sep 17 00:00:00 2001 From: Pavlo Bashynskyi Date: Tue, 27 Aug 2019 12:24:25 +0300 Subject: [PATCH] Add pause button (#163) Closes #113. Closes #137. --- README.md | 1 + test/app.js | 37 ++++++++++++++++++++++++++- web/assets/app.js | 47 ++++++++++++++++++++++++++++++++--- web/assets/styles/dark.css | 11 ++++++++ web/assets/styles/default.css | 20 +++++++++++++-- web/index.html | 8 ++++-- 6 files changed, 115 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index dd071b0..bb31dcf 100644 --- 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 index 03c47c3..fa24318 100644 --- 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 = '
' - + '
'; + + '
' + + ''; 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 index a93e7c8..6475d26 100644 --- 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 index 5f1d1c9..cbd5f36 100644 --- 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,") no-repeat center center; + background-color: #2f3238; + border: 1px solid transparent; +} + +.btn-pause.play { + background: url("data:image/svg+xml;utf8,") 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 index 7b52bc6..e20a6e1 100644 --- 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,") 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,") 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 index 9d7dc30..dfa2833 100644 --- a/web/index.html +++ b/web/index.html @@ -13,10 +13,13 @@