commit 3d8f5de12ae3b61ad2f751098ecd19690f6d9bbb
author Matteo Scandolo <teo@onlab.us> Mon May 23 14:27:52 2016 -0700
committer Matteo Scandolo <teo@onlab.us> Mon Jul 18 16:36:48 2016 -0700
tree c0e1a142ad8967bd45042885b0bb3a85f41fab55
parent 701d8dca99bca02293f003c6c9b18f2fbf5bd316

Displaying service coarse graph

Change-Id: I88e6c83421d0f9fee1f34595fb640e4987e93514

views/ngXosViews/serviceGrid/src/js/sidePanel.component.js

diff --git a/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js b/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js
new file mode 100644
index 0000000..4421ee7
--- /dev/null
+++ b/views/ngXosViews/serviceGrid/src/js/sidePanel.component.js
@@ -0,0 +1,74 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 7/18/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+  .directive('xosSidePanel', function(){
+    return {
+      restrict: 'E',
+      scope: {
+        config: '=',
+        show: '='
+      },
+      template: `
+        <div class="xos-side-panel-content {{vm.classes.join(' ')}}">
+          <div class="row">
+            <div class="col-xs-12">
+              <button type="button" class="close" ng-click="vm.dismiss()">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xs-12" ng-transclude></div>
+          </div>
+        </div>
+      `,
+      transclude: true,
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function($scope, $timeout, _){
+        console.log(this.show);
+
+        this.classes = [];
+
+        this.classes.push(this.config.position);
+
+        this.dismiss = () => {
+          this.show = false;
+          this.classes = this.toggleClass(this.classes);
+          $timeout(() => {
+            return _.remove(this.classes, c => c === 'out');
+          }, 500);
+        };
+
+        this.toggleClass = (classes) => {
+          if(classes.indexOf('in') > -1){
+            _.remove(this.classes, c => c === 'in');
+            this.classes.push('out');
+            return classes;
+          }
+          _.remove(this.classes, c => c === 'out');
+          this.classes.push('in');
+          return classes;
+        };
+
+        $scope.$watch(() => this.show, val => {
+          if (angular.isDefined(val)){
+            if (val && val === true){
+              this.classes = this.toggleClass(this.classes);
+            }
+          }
+        })
+      }
+    }
+  });
+})();
+