From 5c473697d9959e09efad2794989f128f37e84540 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Sat, 20 Aug 2016 17:17:06 -0300
Subject: [PATCH] Displaying layout tool current state

---
 .../viewer/layoutButton/layoutButton.js       |  1 +
 .../viewer/layoutChooser/layoutChooser.js     | 94 +++++++++++++------
 2 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.js b/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.js
index b29326664..06a54f7a2 100644
--- a/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.js
+++ b/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.js
@@ -11,6 +11,7 @@ Template.layoutButton.events({
             left: $button.offset().left + 'px'
         });
 
+        // Open or close the layout chooser dialog
         toggleDialog($dropdown);
     }
 });
diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
index 98421c769..cdb95ac7b 100644
--- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
+++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
@@ -1,43 +1,75 @@
-/**
- * Adds the 'hover' class to cells above and to the left of the current cell
- * This is used to "fill in" the grid that the user will change the layout to,
- * if they click on a specific table cell.
- *
- * @param currentCell
- */
-function highlightCells(currentCell) {
-    const cells = $('.layoutChooser table td');
-    cells.removeClass('hover');
+Template.layoutChooser.onRendered(() => {
+    const instance = Template.instance();
 
-    currentCell = $(currentCell);
-    const table = currentCell.parents('.layoutChooser table').get(0);
-    const rowIndex = currentCell.closest('tr').index();
-    const columnIndex = currentCell.index();
+    /**
+     * Adds the 'hover' class to cells above and to the left of the current cell
+     * This is used to "fill in" the grid that the user will change the layout to,
+     * if they click on a specific table cell.
+     *
+     * @param currentCell
+     */
+    instance.highlightCells = currentCell => {
+        const cells = $('.layoutChooser table td');
+        cells.removeClass('hover');
 
-    // Loop through the table row by row
-    // and cell by cell to apply the highlighting
-    for (var i = 0; i < table.rows.length; i++) {
-        const row = table.rows[i];
-        if (i <= rowIndex) {
-            for (var j = 0; j < row.cells.length; j++) {
-                if (j <= columnIndex) {
-                    const cell = row.cells[j];
-                    cell.classList.add('hover');
+        currentCell = $(currentCell);
+        const table = currentCell.parents('.layoutChooser table').get(0);
+        const rowIndex = currentCell.closest('tr').index();
+        const columnIndex = currentCell.index();
+
+        // Loop through the table row by row
+        // and cell by cell to apply the highlighting
+        for (var i = 0; i < table.rows.length; i++) {
+            const row = table.rows[i];
+            if (i <= rowIndex) {
+                for (var j = 0; j < row.cells.length; j++) {
+                    if (j <= columnIndex) {
+                        const cell = row.cells[j];
+                        cell.classList.add('hover');
+                    }
                 }
             }
         }
-    }
-}
+    };
+
+    // Refresh layout chooser highlighting based on current viewports state
+    instance.refreshHighlights = () => {
+        // Stop here if layoutManager is not defined yet
+        if (!window.layoutManager) {
+            return;
+        }
+
+        // Get the layout rows and columns amount
+        const info = window.layoutManager.layoutProps;
+
+        // get the limiter cell
+        const cell = instance.$('tr').eq(info.rows - 1).children().eq(info.columns - 1);
+
+        // Highlight all cells before the limiter
+        instance.highlightCells(cell);
+    };
+
+    instance.autorun(() => {
+        // Run this computation every time the viewer layout is changed
+        Session.get('LayoutManagerUpdated');
+
+        instance.refreshHighlights();
+    });
+});
 
 Template.layoutChooser.events({
-    'touchstart .layoutChooser table td, mouseenter .layoutChooser table td'(evt) {
-        highlightCells(evt.currentTarget);
+    'touchstart .layoutChooser table td, mouseenter .layoutChooser table td'(event, instance) {
+        instance.highlightCells(event.currentTarget);
     },
 
-    'click .layoutChooser table td'(evt) {
-        const currentCell = $(evt.currentTarget);
-        const rowIndex = currentCell.closest('tr').index();
-        const columnIndex = currentCell.index();
+    'mouseleave .layoutChooser'(event, instance) {
+        instance.refreshHighlights();
+    },
+
+    'click .layoutChooser table td'(event, instance) {
+        const $currentCell = $(event.currentTarget);
+        const rowIndex = $currentCell.closest('tr').index();
+        const columnIndex = $currentCell.index();
 
         // Add 1 because the indices start from zero
         const layoutProps = {