Use ajax requests for board collapse/expand

app/Controller/Board.php

@@ -88,15 +88,7 @@ class Board extends Base
             return $this->response->status(400);
         }
 
-        $this->response->html(
+        $this->response->html($this->renderBoard($project_id), 201);
-            $this->template->render('board/table_container', array(
-                'project' => $this->project->getById($project_id),
-                'swimlanes' => $this->taskFilter->search($this->userSession->getFilters($project_id))->getBoard($project_id),
-                'board_private_refresh_interval' => $this->config->get('board_private_refresh_interval'),
-                'board_highlight_period' => $this->config->get('board_highlight_period'),
-            )),
-            201
-        );
     }
 
     /**
@@ -121,14 +113,7 @@ class Board extends Base
             return $this->response->status(304);
         }
 
-        $this->response->html(
+        $this->response->html($this->renderBoard($project_id));
-            $this->template->render('board/table_container', array(
-                'project' => $this->project->getById($project_id),
-                'swimlanes' => $this->taskFilter->search($this->userSession->getFilters($project_id))->getBoard($project_id),
-                'board_private_refresh_interval' => $this->config->get('board_private_refresh_interval'),
-                'board_highlight_period' => $this->config->get('board_highlight_period'),
-            ))
-        );
     }
 
     /**
@@ -318,9 +303,7 @@ class Board extends Base
      */
     public function collapse()
     {
-        $project_id = $this->request->getIntegerParam('project_id');
+        $this->changeDisplayMode(true);
-        $this->userSession->setBoardDisplayMode($project_id, true);
-        $this->response->redirect($this->helper->url->to('board', 'show', array('project_id' => $project_id)));
     }
 
     /**
@@ -329,9 +312,40 @@ class Board extends Base
      * @access public
      */
     public function expand()
+    {
+        $this->changeDisplayMode(false);
+    }
+
+    /**
+     * Change display mode
+     *
+     * @access private
+     */
+    private function changeDisplayMode($mode)
     {
         $project_id = $this->request->getIntegerParam('project_id');
-        $this->userSession->setBoardDisplayMode($project_id, false);
+        $this->userSession->setBoardDisplayMode($project_id, $mode);
-        $this->response->redirect($this->helper->url->to('board', 'show', array('project_id' => $project_id)));
+
+        if ($this->request->isAjax()) {
+            $this->response->html($this->renderBoard($project_id));
+        }
+        else {
+            $this->response->redirect($this->helper->url->to('board', 'show', array('project_id' => $project_id)));
+        }
+    }
+
+    /**
+     * Render board
+     *
+     * @access private
+     */
+    private function renderBoard($project_id)
+    {
+        return $this->template->render('board/table_container', array(
+            'project' => $this->project->getById($project_id),
+            'swimlanes' => $this->taskFilter->search($this->userSession->getFilters($project_id))->getBoard($project_id),
+            'board_private_refresh_interval' => $this->config->get('board_private_refresh_interval'),
+            'board_highlight_period' => $this->config->get('board_highlight_period'),
+        ));
     }
 }

app/Template/project/filters.php

@@ -5,13 +5,14 @@
             <ul>
                 <?php if (isset($is_board)): ?>
                 <li>
-                    <?php if ($this->board->isCollapsed($project['id'])): ?>
+                    <span class="filter-display-mode" <?= $this->board->isCollapsed($project['id']) ? '' : 'style="display: none;"' ?>>
                         <i class="fa fa-expand fa-fw"></i>
                         <?= $this->url->link(t('Expand tasks'), 'board', 'expand', array('project_id' => $project['id']), false, 'board-display-mode', t('Keyboard shortcut: "%s"', 's')) ?>
-                    <?php else: ?>
+                    </span>
+                    <span class="filter-display-mode" <?= $this->board->isCollapsed($project['id']) ? 'style="display: none;"' : '' ?>>
                         <i class="fa fa-compress fa-fw"></i>
                         <?= $this->url->link(t('Collapse tasks'), 'board', 'collapse', array('project_id' => $project['id']), false, 'board-display-mode', t('Keyboard shortcut: "%s"', 's')) ?>
-                    <?php endif ?>
+                    </span>
                 </li>
                 <li>
                     <span class="filter-compact">

assets/js/src/board.js

@@ -20,7 +20,19 @@
         });
 
         Mousetrap.bind("s", function() {
-            window.location = $(".board-display-mode").attr("href");
+            $.ajax({
+                cache: false,
+                url: $('.filter-display-mode:not([style="display: none;"]) a').attr('href'),
+                success: function(data) {
+                    $("#board-container").remove();
+                    $("#main").append(data);
+                    Kanboard.InitAfterAjax();
+                    board_unload_events();
+                    board_load_events();
+                    compactview_reload();
+                    $('.filter-display-mode').toggle();
+                }
+            });
         });
 
         Mousetrap.bind("c", function() {