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,