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,15 +757,30 @@ define([
                 this.removeBoard(boardkey);
             }
             this.options.boards = boards;
-            // Add all new boards
-            this.addBoards();
-            self.options.refresh();
-            // Preserve scroll
-            this.options.boards.list.forEach(function (id) {
-                if (!scroll[id]) { return; }
-                $('.kanban-board[data-id="'+id+'"] .kanban-drag').scrollTop(scroll[id]);
-            });
-            $el.scrollLeft(scrollLeft);
+
+            todoOnVisible = function () {
+                // Add all new boards
+                self.addBoards();
+                self.options.refresh();
+                // Preserve scroll
+                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) {