Merge pull request uPortal-Attic#163 from UW-Madison-DoIT/sticky_layout_selection

Tim Levett · Tim Levett · commit 5acfe033da60 · 2015-03-10T15:44:53.000-05:00
MUMUP-1746 : Sticky layout selection
diff --git a/angularjs-portal-frame/src/main/webapp/js/app-config.js b/angularjs-portal-frame/src/main/webapp/js/app-config.js
@@ -2,7 +2,10 @@
 (function() {
 angular.module('app-config', [])
 .constant('APP_FLAGS', {
-                          'enableToggle': true
+                          'enableToggle': true,
+                          'defaultView' : 'list',
+                          'list' : true,
+                          'widgets' : true
                        }
           )
 .constant('SERVICE_LOC', {
diff --git a/angularjs-portal-frame/src/main/webapp/js/main/main-controllers.js b/angularjs-portal-frame/src/main/webapp/js/main/main-controllers.js
@@ -13,7 +13,8 @@
             profileImg: "img/terrace.jpg", 
             notificationsDemo : false,
             typeaheadSearch: false,
-            exampleWidgets: false
+            exampleWidgets: false,
+            layoutMode : 'list' //other option is 'widgets'
             };
     $scope.$storage = $localStorage.$default(defaults);
     
diff --git a/angularjs-portal-home/src/main/webapp/js/angular-page.js b/angularjs-portal-home/src/main/webapp/js/angular-page.js
@@ -35,7 +35,7 @@
       when('/static/:fname', {templateUrl: 'partials/static-content-max.html'}).
       when('/widgets', {templateUrl: 'partials/home-widget-view.html'}).
       when('/list', {templateUrl: 'partials/home-list-view.html'}).
-      otherwise({templateUrl: 'partials/home-list-view.html'});
+      otherwise({ redirectTo : '/list'});
       }
  	]);
 
diff --git a/angularjs-portal-home/src/main/webapp/js/app-config.js b/angularjs-portal-home/src/main/webapp/js/app-config.js
@@ -2,7 +2,10 @@
 (function() {
 angular.module('app-config', [])
 .constant('APP_FLAGS', {
-                          'enableToggle': true
+                          'enableToggle': true,
+                          'defaultView' : 'list',
+                          'list' : true,
+                          'widgets' : true
                        }
           )
 .constant('SERVICE_LOC', {
diff --git a/angularjs-portal-home/src/main/webapp/js/layout/layout-controller.js b/angularjs-portal-home/src/main/webapp/js/layout/layout-controller.js
@@ -10,19 +10,15 @@
                                        '$rootScope', 
                                        'layoutService', 
                                        'miscService', 
-                                       'sharedPortletService',
-                                       'APP_FLAGS', 
+                                       'sharedPortletService', 
                                        function($location, 
                                                 $localStorage, 
                                                 $sessionStorage, 
                                                 $scope, 
                                                 $rootScope, 
                                                 layoutService, 
                                                 miscService, 
-                                                sharedPortletService,
-                                                APP_FLAGS) {
-    miscService.pushPageview();
-    $scope.toggle = APP_FLAGS.enableToggle;
+                                                sharedPortletService) {
     if(typeof $rootScope.layout === 'undefined' || $rootScope.layout == null) {
       
       $rootScope.layout = [];
@@ -108,22 +104,15 @@
                                        '$rootScope', 
                                        'layoutService', 
                                        'miscService', 
-                                       'sharedPortletService',
-                                       'APP_FLAGS', 
+                                       'sharedPortletService', 
                                        function($location, 
                                             $localStorage, 
                                             $sessionStorage, 
                                             $scope, 
                                             $rootScope, 
                                             layoutService, 
                                             miscService, 
-                                            sharedPortletService,
-                                            APP_FLAGS) {
-                                              
-    miscService.pushPageview();
-    $scope.toggle = APP_FLAGS.enableToggle;
-    var that = this;
-    
+                                            sharedPortletService) {
     if(typeof $rootScope.layout === 'undefined' || $rootScope.layout == null) {
       
       $rootScope.layout = [];
@@ -333,6 +322,46 @@
           return date >= today;
       }
   }]);
+  
+  app.controller('ToggleController',['$localStorage',
+                                     '$scope',
+                                     '$location',
+                                     'miscService',
+                                     'APP_FLAGS', function($localStorage, 
+                                                           $scope, 
+                                                           $location, 
+                                                           miscService, 
+                                                           APP_FLAGS){
+       //scope functions
+       $scope.switchMode = function(mode) {
+           $localStorage.layoutMode = mode;
+           $location.path('/' + mode);
+       }
+       
+       $scope.modeIs = function(mode) {
+           return $localStorage.layoutMode === mode;
+       }
+       
+       //local functions
+       this.init = function() {
+         $scope.toggle = APP_FLAGS.enableToggle;
+         if($localStorage.layoutMode 
+              && $location.url().indexOf($localStorage.layoutMode) == -1) {
+           //opps, we are in the wrong mode, switch!
+           if(APP_FLAGS[$localStorage.layoutMode]) { //check to make sure that mode is active
+             $location.path('/' + $localStorage.layoutMode);
+           } else {
+             console.log("Something is weird, resetting to default layout view");
+             $scope.switchMode(APP_FLAGS.defaultView);
+           }
+         } else {
+           //all is well, ga pageview, go
+           miscService.pushPageview();
+         }
+       }
+       
+       this.init();
+   }]);
 
 
 
diff --git a/angularjs-portal-home/src/main/webapp/js/layout/layout-directives.js b/angularjs-portal-home/src/main/webapp/js/layout/layout-directives.js
@@ -102,5 +102,13 @@
           templateUrl: 'partials/example-widgets.html'
       }
    });
+   
+   app.directive('homeToggle', function(){
+       return {
+           restrict: 'E',
+           templateUrl: 'partials/home-toggle.html',
+           controller: 'ToggleController'
+       };
+   });
 
 })();
diff --git a/angularjs-portal-home/src/main/webapp/partials/home-header.html b/angularjs-portal-home/src/main/webapp/partials/home-header.html
@@ -15,4 +15,22 @@ <h1>MyUW Home</h1>
 <div class="col-xs-12 notification-section" ng-show="{{$storage.notificationsDemo}}">
   <h3 class="home-section-header">Notifications</h3>
   <notifications></notifications>
+</div>
+<div class="inner-nav-container">
+  <ul class="inner-nav">
+    <li class="active home-title">
+        <a>My Favorites</a>
+    </li>
+    <li class="hide-mobile">
+      <a href='#/apps'
+       tooltip="Browse for more apps"
+       tooltip-trigger="mouseenter"
+       tooltip-placement="top"
+       tooltip-popup-delay="500">
+      <i class='fa fa-plus'></i>
+     </a>
+    </li>
+    <home-toggle></home-toggle>
+  </ul>
+  
 </div>
diff --git a/angularjs-portal-home/src/main/webapp/partials/home-list-view.html b/angularjs-portal-home/src/main/webapp/partials/home-list-view.html
@@ -1,29 +1,6 @@
-
-
 <div class="row portlet-frame">
   <home-header></home-header>
   <div class="col-xs-12 no-padding portlet-body" ng-controller="LayoutController as layoutCtrl">
-    <div class="inner-nav-container">
-      <ul class="inner-nav">
-        <li class="active home-title">
-            <a>My Favorites</a>
-        </li>
-        <li class="hide-mobile">
-          <a href='#/apps'
-           tooltip="Browse for more apps"
-           tooltip-trigger="mouseenter"
-           tooltip-placement="top"
-           tooltip-popup-delay="500">
-          <i class='fa fa-plus'></i>
-         </a>
-        </li>
-        <span class="layout-chooser" ng-if="toggle">
-          <li class="active"><a><i class="fa fa-th" ng-if="toggle"></i></a></li>
-          <li><a href="#/widgets"><i class="fa fa-th-large" ng-if="toggle"></i></a></li>
-        </span>
-      </ul>
-      
-    </div>
     <loading-gif data-object='layout' data-empty='layoutEmpty'></loading-gif>
     <!-- List View -->
     <ul ui-sortable="sortableOptions" ng-model="layout" class="tile-list">
diff --git a/angularjs-portal-home/src/main/webapp/partials/home-toggle.html b/angularjs-portal-home/src/main/webapp/partials/home-toggle.html
@@ -0,0 +1,4 @@
+<span class="layout-chooser" ng-if="toggle">
+  <li ng-class="{active : modeIs('list')}"><a  href="javascript:;" ng-click="switchMode('list')"><i class="fa fa-th"></i></a></li>
+  <li ng-class="{active : modeIs('widgets')}" ><a href="javascript:;" ng-click="switchMode('widgets')"><i class="fa fa-th-large"></i></a></li>
+</span>
diff --git a/angularjs-portal-home/src/main/webapp/partials/home-widget-view.html b/angularjs-portal-home/src/main/webapp/partials/home-widget-view.html
@@ -1,27 +1,6 @@
 <div class="row portlet-frame">
   <home-header></home-header>
   <div class="col-xs-12 no-padding portlet-body" ng-controller="WidgetController as widgetCtrl">
-    <div class="inner-nav-container">
-      <ul class="inner-nav">
-        <li class="active home-title">
-            <a>My Favorites</a>
-        </li>
-        <li class="hide-mobile">
-          <a href='#/apps'
-           tooltip="Browse for more apps"
-           tooltip-trigger="mouseenter"
-           tooltip-placement="top"
-           tooltip-popup-delay="500">
-          <i class='fa fa-plus'></i>
-         </a>
-        </li>
-        <span class="layout-chooser" ng-if="toggle">
-          <li><a href="#/list"><i class="fa fa-th" ng-if="toggle"></i></a></li>
-          <li class="active"><a href="#/widgets"><i class="fa fa-th-large" ng-if="toggle"></i></a></li>
-        </span>
-      </ul>
-      
-    </div>
     <loading-gif  data-object='layout' data-empty='layoutEmpty'></loading-gif>
     <!-- Widget View -->
     <ul ui-sortable="sortableOptions" ng-model="layout" class="tile-list">
diff --git a/angularjs-portal-home/src/test/setup.sh b/angularjs-portal-home/src/test/setup.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+npm install karma --save-dev  
+npm install karma-jasmine --save-dev
+npm install karma-htmlfile-reporter --save-dev
+npm install jasmine-core --save-dev
+npm install grunt --save-dev
+npm install grunt-karma --save-dev
+npm install karma-phantomjs-launcher --save-dev
+
diff --git a/angularjs-portal-home/src/test/spec/controllers/toggle_controller_spec.js b/angularjs-portal-home/src/test/spec/controllers/toggle_controller_spec.js
@@ -0,0 +1,99 @@
+
+
+describe("ToggleController", function() {
+  var scope;
+  var controller;
+  var $localStorage;
+  var $location;
+  var miscService;
+  var APP_FLAGS;
+  var currentPath;
+  var gaPageViewHits;
+  
+
+  // load the marketplace controller
+  beforeEach(function() {
+    module('portal');
+  });
+  
+  beforeEach(inject(function(_$rootScope_, $controller, _$localStorage_, _APP_FLAGS_) {
+    scope = _$rootScope_.$new();
+    $localStorage = _$localStorage_;
+    APP_FLAGS = _APP_FLAGS_;
+    currentPath = "/";
+    gaPageViewHits = 0;
+    $location = {
+        'path' : function(newPath) {
+            if(newPath) {
+                currentPath = newPath;
+            } else {
+                return path;
+            }
+        },
+        'url' : function() {
+            return currentPath;
+        }
+    }; 
+    
+    miscService = { 
+                    'pushPageview' : function() { gaPageViewHits++; console.log($location.url()); return;}
+                  };
+    
+    controller = $controller('ToggleController', {'$localStorage' : $localStorage, 
+                                                  '$scope': scope,
+                                                  '$location' : $location,
+                                                  'miscService' : miscService,
+                                                  'APP_FLAGS' : APP_FLAGS
+                                                  });
+  }));
+  
+  it("should have toggle set", function() {
+      expect(scope.toggle).toBeTruthy();
+  });
+  
+  it("should switch to default if layoutMode is set to something weird", function() {
+      $localStorage.layoutMode = 'fishy'; //basically not list or widgets
+      controller.init();
+      
+      //verify it was reset properly
+      expect($localStorage.layoutMode === APP_FLAGS.defaultView);
+  });
+  
+  it("should redirect if you go somewhere you are not supposed to be.", function(){
+      //setup
+      $location.path('/widgets');
+      $localStorage.layoutMode = 'list';
+      //execute init
+      controller.init();
+      
+      expect($location.url()).toBe('/list');
+  });
+  
+  it("should redirect you if you switch modes and have a new layoutMode", function() {
+    //setup
+    $location.path('/widgets');
+    controller.init();
+    
+    //switch!
+    scope.switchMode('list');
+    controller.init();
+    
+    //validate
+    expect($localStorage.layoutMode).toBe('list');
+    expect($location.url()).toBe('/list');
+  });
+  
+  it("should only have page hits if it didn't redirect", function() {
+    //setup
+    gaPageViewHits = 0;
+    $localStorage.layoutMode = 'widgets';
+    $location.path('/list');
+    controller.init();
+    
+    //verify redirect happened
+    expect($location.url()).toBe('/widgets');
+    controller.init();//fire again due to redirect
+    
+    expect(gaPageViewHits).toEqual(1);//there can be only one
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,10 @@`
`2`	`2`	`(function() {`
`3`	`3`	`angular.module('app-config', [])`
`4`	`4`	`.constant('APP_FLAGS', {`
`5`		`- 'enableToggle': true`
	`5`	`+ 'enableToggle': true,`
	`6`	`+ 'defaultView' : 'list',`
	`7`	`+ 'list' : true,`
	`8`	`+ 'widgets' : true`
`6`	`9`	`}`
`7`	`10`	`)`
`8`	`11`	`.constant('SERVICE_LOC', {`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`when('/static/:fname', {templateUrl: 'partials/static-content-max.html'}).`
`36`	`36`	`when('/widgets', {templateUrl: 'partials/home-widget-view.html'}).`
`37`	`37`	`when('/list', {templateUrl: 'partials/home-list-view.html'}).`
`38`		`- otherwise({templateUrl: 'partials/home-list-view.html'});`
	`38`	`+ otherwise({ redirectTo : '/list'});`
`39`	`39`	`}`
`40`	`40`	`]);`
`41`	`41`