From acb64c42464e11ad854d11566b4260a4e49b641a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= <eloisalgado@gmail.com>
Date: Wed, 25 Jan 2017 18:31:13 -0200
Subject: [PATCH] Creating helpers to add classes in viewports and Layout
 Manager elements, so any app using ohif-viewerbase can style on its own

---
 .../viewer/gridLayout/gridLayout.html         |  2 +-
 .../viewer/gridLayout/gridLayout.js           | 25 +++++++++++++++++
 .../client/lib/classes/LayoutManager.js       | 27 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
index 4ae2bb421..ef1fb839c 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
+++ b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
@@ -1,7 +1,7 @@
 <template name="gridLayout">
     <div id='imageViewerViewports'>
         {{#each viewport in viewports}}
-            <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
+            <div class="viewportContainer {{getClass @index}}" style="height:{{height}}%;width:{{width}}%;">
                 <div class="removable">
                     {{>imageViewerViewport (clone viewport)}}
                 </div>
diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
index 02f74024e..293ef6a8d 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
@@ -1,6 +1,10 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 
+const TOP_CLASS = 'top';
+const BOTTOM_CLASS = 'bottom';
+const MIDDLE_CLASS = 'middle';
+
 Template.gridLayout.helpers({
     // Get the height percentage for each viewport
     height() {
@@ -16,6 +20,27 @@ Template.gridLayout.helpers({
         return 100 / columns;
     },
 
+    // Get class for each viewport, so each app
+    // using ohif-viewerbase can style on their own
+    getClass(index) {
+        const { rows, columns } = this;
+
+        if (rows === 1) {
+            return `${TOP_CLASS} ${BOTTOM_CLASS}`;
+        }
+
+        const actualRow = Math.floor(index / columns);
+            
+        if ( actualRow === 0 ) {
+            return TOP_CLASS;
+        }
+        if ( actualRow + 1 === rows ) {
+            return BOTTOM_CLASS;
+        }
+
+        return MIDDLE_CLASS;
+    },
+    
     // Return the viewports list
     viewports() {
         const instance = Template.instance();
diff --git a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
index bc56ea037..c7565bd23 100644
--- a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
+++ b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
@@ -21,6 +21,7 @@ export class LayoutManager {
             rows: 1,
             columns: 1
         };
+        this.layoutClassName = this.getLayoutClass();
 
         this.isZoomed = false;
 
@@ -111,6 +112,28 @@ export class LayoutManager {
         }
     }
 
+    getLayoutClass() {
+        const { rows, columns } = this.layoutProps;
+        const layoutClass = `layout-${rows}-${columns}`;
+
+        return layoutClass;
+    }
+
+    // To help other apps using ohif-viewerbase,
+    // so they can style on their own
+    updateLayoutClass() {
+        const newLayoutClass = this.getLayoutClass();
+        
+        // If layout has changed, change its class
+        if (this.layoutClassName !== newLayoutClass) {
+            this.parentNode.classList.remove(this.layoutClassName);
+        }
+
+        this.layoutClassName = newLayoutClass;
+
+        this.parentNode.classList.add(newLayoutClass);
+    }
+
     updateViewports() {
         OHIF.log.info('LayoutManager updateViewports');
 
@@ -133,8 +156,10 @@ export class LayoutManager {
         });
 
         const layoutTemplate = Template[this.layoutTemplateName];
+        const $parentNode = $(this.parentNode);
 
-        $(this.parentNode).html('');
+        $parentNode.html('');
+        this.updateLayoutClass();
         Blaze.renderWithData(layoutTemplate, data, this.parentNode);
 
         this.updateSession();