Don't redraw kanban when the tab is not focused

www/common/visible.js

@@ -25,10 +25,12 @@
             typeof document[hidden] === "undefined");
     };
 
-    Visible.onChange = function (f) {
+    Visible.onChange = function (f, once) {
         document.addEventListener(visibilityChange, function (ev) {
             f(!document[hidden], ev);
-        }, false);
+        }, {
+            once: once
+        });
     };
 
     Visible.currently = function () {

www/kanban/jkanban_cp.js

@@ -1,8 +1,9 @@
 define([
     'jquery',
     '/customize/messages.js',
+    '/common/visible.js',
     '/bower_components/dragula.js/dist/dragula.min.js',
-], function ($, Messages, Dragula) {
+], function ($, Messages, Visible, Dragula) {
         /**
          * jKanban
          * Vanilla Javascript plugin for manage kanban boards
@@ -739,6 +740,8 @@ define([
             return self;
         };
 
+        var todoOnVisible = function () {};
+        var onVisibleHandler = false;
         this.setBoards = function (boards) {
             var scroll = {};
             // Fix the tags
@@ -754,17 +757,32 @@ define([
                 this.removeBoard(boardkey);
             }
             this.options.boards = boards;
+
+            todoOnVisible = function () {
                 // Add all new boards
-            this.addBoards();
+                self.addBoards();
                 self.options.refresh();
                 // Preserve scroll
-            this.options.boards.list.forEach(function (id) {
+                self.options.boards.list.forEach(function (id) {
                     if (!scroll[id]) { return; }
                     $('.kanban-board[data-id="'+id+'"] .kanban-drag').scrollTop(scroll[id]);
                 });
                 $el.scrollLeft(scrollLeft);
             };
 
+            // If the tab is not focused, redraw on focus
+            if (!Visible.currently()) {
+                if (onVisibleHandler) { return; }
+                onVisibleHandler = true;
+                return void Visible.onChange(function (visible) {
+                    if (!visible) { return; }
+                    todoOnVisible();
+                    onVisibleHandler = false;
+                }, true);
+            }
+            todoOnVisible();
+        };
+
         this.findBoard = function (id) {
             var el = self.element.querySelector('[data-id="' + id + '"]');
             return el;