8:00 – 5:30 SR

• DB Backups
• Angular
  • Keeping scatterplotTest1 intact in case I break things
  • Adding a controller at the panel organization level. This should closely mimic how tabs should work – selecting a tab causes the others to go to the ‘unselected’ state. the getCssClass() call should still work though, which is nice.
  • Help from StackOverflow: http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive
  • To make this work, the directives need to communicate, which requires a controller. To manage the instances, we must use the ‘requires’ tag. Here’s what I did:

First, excerpts from the javascript directives

sp.directive('floatingPanelManager', [function() {
   return {
      restrict: 'AE',
      scope: {
         panelObj: '='
      },
      templateUrl: 'directives/floatingPanelManager.html',
      controller: function($scope) {
         var currentId = -1;
         var hideAllPanels = false;
         $scope.panels = [];
         this.registerPanel = function(panelScope){
            $scope.panels.push(panelScope);
         }
         this.selectPanel = function(panelId) {
            currentId = panelId;
            var ps;
            for (var i = 0; i < $scope.panels.length; i++) {
               ps = $scope.panels[i];
               if(ps.$id === panelId){
                  ps.selected = !ps.selected;
                  hideAllPanels = ps.selected; // hide all the other panels if one is selected
               }else{
                  ps.selected = false;
               }
            }
         };
         this.getHideAllPanels = function(){
            return hideAllPanels;
         }
      }
   }
}]);

sp.directive('floatingPanel', ['$sce', function(sce) {
   return {
      restrict: 'AE',
      require: '^floatingPanelManager',
      scope: {
         panelObj: '=',
         stageObj: '='
      },
      templateUrl: 'directives/floatingPanel.html',
      link: function(scope, element, attr, panelMgr) {
         panelMgr.registerPanel(scope);
         scope.getCssClass = function(){
            if(scope.selected){
               return 'selectedClass';
            }
            if(panelMgr.getHideAllPanels()){
               return 'hiddenClass';
            }
            if(scope.hover){
               return 'hoverClass';
            }
            return '';
         }
         scope.selectPanel = function(){
            var sid = scope.$id;
            panelMgr.selectPanel(sid);
         }
      }
   };
}])

And here’s the directive html:

<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-click="selectPanel()"
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false"
     ng-style="{'transform':getTransformString()}" ng-bind-html="getHtml()"></div>

• In this case, I have a ‘floatingPanel’ directive that requires (watch the spelling!!!)  ‘floatingPanelManager’. The use of ‘require’ means that angular will inject the required instance as the fourth argument to the link function.
• It’s important to remember that we have to have a single instance here. In this case, that instance has an array of all the floating panels that are being managed. And that array needs to be attached to the $scope passed into the controller. As I understand it, that means that it is attached to the DOM.