From 06b599ee3799e5ba809f803e18ed85ff7b1a458f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 28 Jan 2015 16:25:16 -0800
Subject: [PATCH] [Browse] Begin implementing splitter movement

Begin implementing moveable splitter, WTD-747.
---
 .../commonUI/browse/res/templates/browse.html |  7 ++--
 platform/commonUI/general/bundle.json         |  8 +++++
 .../res/templates/containers/split-pane.html  |  9 +++++
 .../src/controllers/SplitPaneController.js    | 36 +++++++++++++++++++
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 platform/commonUI/general/res/templates/containers/split-pane.html
 create mode 100644 platform/commonUI/general/src/controllers/SplitPaneController.js

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index f7faeede26..db8d015ac8 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -2,7 +2,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area outline abs" ng-controller="BrowseController">
         <div class='split-layout vertical contents abs'>
-            <div class='split-pane-component treeview pane' style="width: 200px;">
+            <div class='split-pane-component treeview pane'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -12,13 +12,12 @@
                     </mct-representation>
                 </div>
             </div>
-            <div class="splitter" style="left: 200px"></div>
-            <div class='split-pane-component items pane' style="right:0; left:200px;">
+            <mct-container key="splitter">
                 <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
-            </div>
+            </mct-container>
         </div>
     </div>
     <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 00e73a1568..58ba7c61f1 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -84,6 +84,10 @@
                 "key": "GetterSetterController",
                 "implementation": "controllers/GetterSetterController.js",
                 "depends": [ "$scope" ]
+            },
+            {
+                "key": "SplitPaneController",
+                "implementation": "controllers/SplitPaneController.js"
             }
         ],
         "directives": [
@@ -108,6 +112,10 @@
                 "key": "accordion",
                 "templateUrl": "templates/containers/accordion.html",
                 "attributes": [ "title" ]
+            },
+            {
+                "key": "splitter",
+                "templateUrl": "templates/containers/split-pane.html"
             }
         ],
         "representations": [
diff --git a/platform/commonUI/general/res/templates/containers/split-pane.html b/platform/commonUI/general/res/templates/containers/split-pane.html
new file mode 100644
index 0000000000..05dc2a5df3
--- /dev/null
+++ b/platform/commonUI/general/res/templates/containers/split-pane.html
@@ -0,0 +1,9 @@
+<span ng-controller="SplitPaneController as splitter">
+    <div class="splitter" ng-style="splitter.style()"
+         mct-drag="splitter.move(delta.x)">
+    </div>
+    <div class='split-pane-component items pane' style="right:0;"
+         ng-style="splitter.style()"
+         ng-transclude>
+    </div>
+</span>
\ No newline at end of file
diff --git a/platform/commonUI/general/src/controllers/SplitPaneController.js b/platform/commonUI/general/src/controllers/SplitPaneController.js
new file mode 100644
index 0000000000..0f7b314f13
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/SplitPaneController.js
@@ -0,0 +1,36 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function SplitPaneController() {
+            var minimum = 8,
+                maximum = 600,
+                current = 200,
+                style;
+
+            function updateStyle() {
+                style = { left: current + 'px' };
+            }
+
+            updateStyle();
+
+            return {
+                style: function () {
+                    return style;
+                },
+                move: function (delta) {
+                    current = Math.min(
+                        maximum,
+                        Math.max(minimum, current + delta)
+                    );
+                    updateStyle();
+                }
+            };
+        }
+
+        return SplitPaneController;
+    }
+);
\ No newline at end of file