Fix reload on home page (and others small improvements)

Leonardo Merlin
1 parent e88dfaf9
Showing 7 changed files with 194 additions and 79 deletions Show diff stats
src/app/components/programa/programa.scss
src/app/components/programas/programas.directive.js
src/app/components/programas/programas.html
src/app/index.config.js
src/app/index.route.js
src/app/partials/inicio/inicio.scss
src/index.html
@@ -181,11 +181,15 @@ $darken: 15%;
             -o-transform: scale($scale); /* prefixo para opera */
             transform: scale($scale);
         }
+
+        .contraste & {
+            background-color: #262626;
+        }
     }
 }
 .program-preview {
     .program-banner {
-        
+
     }
 }
@@ -3,15 +3,13 @@
   angular
     .module('dialoga')
-    .filter('filterByCategory', filterByCategory)
-    .filter('filterByCriteria', filterByCriteria)
     .directive('programaList', programaList);
   /** @ngInject */
   function programaList() {
     /** @ngInject */
-    function ProgramaListController($scope, $location, $log) {
+    function ProgramaListController($scope, $location, $filter, $log) {
       $log.debug('ProgramaListController');
       // alias
@@ -20,6 +18,7 @@
       // dependencies
       vm.$scope = $scope;
       vm.$location = $location;
+      vm.$filter = $filter;
       vm.$log = $log;
       // initialization
@@ -36,34 +35,51 @@
       vm.categories = vm.article.categories;
       vm.programs = vm.article.children;
-      vm.filtredProgramList = [];
       vm.orderCriteries = [
-      { label: 'Título', name: 'title' },
-      { label: 'Tema', name: 'category' }
-      // , { label: 'Mais participações', name: 'more_participants' }
+        { label: 'Aleatório', name: 'aleatorio' },
+        { label: 'Título', name: 'titulo' },
+        { label: 'Tema', name: 'tema' }
       ];
+      vm.filtredProgramList = vm.getFiltredPrograms();
       vm.search = vm.$location.search();
       // Add initial values for the filter
       vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
-      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : 4;
-      vm.categoryFilter = (vm.search && vm.search.tema) ? vm.filterByCategorySlug(vm.search.tema) : null;
+      vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : null;
+      vm.categoryFilter = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
+      vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
+      vm.reverse = (vm.search && vm.search.reverso) ? true : false;
       // update window location params
       vm.$scope.$watch('vm.query', function(newValue, oldValue){
-        vm.search.filtro = newValue;
-        vm.$location.search(vm.search);
+        vm.search.filtro = newValue ? newValue : null;
+        vm.$location.search('filtro', vm.search.filtro);
+        vm.filtredProgramList = vm.getFiltredPrograms();
       });
       vm.$scope.$watch('vm.limitTo', function(newValue, oldValue){
-        vm.search.limite = newValue;
-        vm.$location.search(vm.search);
+        vm.search.limite = newValue ? newValue : null;
+        vm.$location.search('limite', vm.search.limite);
+        vm.filtredProgramList = vm.getFiltredPrograms();
       });
       vm.$scope.$watch('vm.categoryFilter', function(newValue, oldValue){
         vm.search.tema = newValue ? newValue.slug : null;
-        vm.$location.search(vm.search);
+        vm.$location.search('tema', vm.search.tema);
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.orderCriteria', function(newValue, oldValue){
+        vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
+        vm.$location.search('ordem', vm.search.ordem);
+        vm.filtredProgramList = vm.getFiltredPrograms();
+      });
+
+      vm.$scope.$watch('vm.reverse', function(newValue, oldValue){
+        vm.search.reverso = newValue ? newValue : null;
+        vm.$location.search('reverso', vm.search.reverso);
+        vm.filtredProgramList = vm.getFiltredPrograms();
       });
     };
@@ -72,8 +88,9 @@
       var vm = this;
       vm.query = null;
-      vm.limitTo = 4;
+      vm.limitTo = null;
       vm.categoryFilter = null;
+      vm.orderCriteria = null;
     };
     ProgramaListController.prototype.getIconClasses = function (category) {
@@ -83,7 +100,7 @@
       return 'glyphicon glyphicon-exclamation-sign';
     };
-    ProgramaListController.prototype.filterByCategorySlug = function (categorySlug) {
+    ProgramaListController.prototype.getCategoryBySlug = function (categorySlug) {
       var vm = this;
       var result = null;
@@ -119,16 +136,108 @@
       vm.limitTo = vm.programs.length;
     };
-    // function ProgramaListLinker (scope, element, attrs) {
+    ProgramaListController.prototype.getFiltredPrograms = function () {
+      var vm = this;
+
+      var input = vm.programs;
+      var output = input;
+      var query = vm.query;
+      var categoryFilter = vm.categoryFilter;
+      var orderCriteria = vm.orderCriteria ? vm.orderCriteria : { name : 'aleatorio'};
+      var filter = vm.$filter('filter');
+      var orderBy = vm.$filter('orderBy');
+      var limitTo = vm.$filter('limitTo');
+      var limit = vm.limitTo ? vm.limitTo : 4;
+      
+      if(categoryFilter){
+        output = _filterByCategory(output, categoryFilter);
+      }
+
+      if(query){
+        output = filter(output, query, false);
+      }
+
+      switch(orderCriteria.name) {
+        case 'titulo':
+          output = orderBy(output, 'title', vm.reverse);
+          break;
+        case 'tema':
+          output = orderBy(output, 'categories[0].name', vm.reverse);
+          break;
+        case 'more_participants':
+          $log.info('Criteria not handled yet: ', orderCriteria);
+          break;
+        case 'aleatorio':
+        default:
+          // shuffling
+          // if(!vm._isShuffled){
+            output = vm.filterShuffle(output);
+          //   vm._isShuffled = true;
+          // }
+
+          if(vm.reverse){
+            output = output.slice().reverse();
+          }
+
+          break;
+      }
+
+      output = limitTo(output, limit);        
+      
+      return output;
+    };
+
+    ProgramaListController.prototype.filterShuffle = function (input) {
+      var result = [];
+      var resultByCategory = {};
-    //   scope.$watch('article', function(newValue, oldValue){
-    //     if(!newValue){
-    //       return;
-    //     }
-    //     scope.vm.categories = scope.vm.article.categories;
-    //     scope.vm.programs = scope.vm.article.children;
-    //   });
-    // }
+      // divide by categories
+      for (var i = 0; i < input.length; i++) {
+        var program = input[i];
+        var categorySlug = program.categories[0].slug;
+
+        if(!resultByCategory[categorySlug]){
+          resultByCategory[categorySlug] = [];
+        }
+
+        resultByCategory[categorySlug].push(program);
+      }
+
+      // shuffle each array
+      for (var prop in resultByCategory){
+        if( resultByCategory.hasOwnProperty( prop ) ) {
+          var categoryWithPrograms = resultByCategory[prop];
+          resultByCategory[prop] = shuffle(categoryWithPrograms);
+        }
+      }
+      
+      // Concat all into result array
+      // > while has program at Lists on resultByCategory
+      var hasProgram = true;
+      while (hasProgram) {
+        
+        var foundProgram = false;
+        // each categoryList with array of program
+        for (var prop in resultByCategory){
+        
+          if( resultByCategory.hasOwnProperty( prop ) ) {
+            var categoryWithPrograms = resultByCategory[prop];
+            
+            if (categoryWithPrograms.length > 0 ) {
+              var pivotProgram = categoryWithPrograms.pop(); 
+              result.push(pivotProgram);
+              foundProgram = true;
+            }
+          }
+        }
+
+        if(!foundProgram){
+          hasProgram = false;
+        }
+      }
+
+      return result;
+    }
     var directive = {
       restrict: 'E',
@@ -138,75 +247,62 @@
       },
       controller: ProgramaListController,
       controllerAs: 'vm',
-      bindToController: true,
-      // link: ProgramaListLinker
+      bindToController: true
     };
-
     return directive;
   }
-  function filterByCategory(){
-    return function (input, category){
-      input = input || [];
+  function _filterByCategory (input, category){
+    input = input || [];
-      if(!category){
-        // no filter
-        return input;
-      }
+    if(!category){
+      // no filter
+      return input;
+    }
-      var out = [];
-      for (var i = 0; i < input.length; i++) {
-        var program = input[i];
-        if(program.categories[0].slug === category.slug){
-          out.push(program);
-        }
+    var out = [];
+    for (var i = 0; i < input.length; i++) {
+      var program = input[i];
+      if(program.categories[0].slug === category.slug){
+        out.push(program);
       }
+    }
-      return out;
-    };
+    return out;
   }
-  /** @ngInject */
-  function filterByCriteria($filter, $log){
-    var orderBy = $filter('orderBy');
+  function _filterByCriteria (input, criteria, reverse){
+    var vm = this;
+    input = input || [];
+    criteria = criteria || {};
+    reverse = reverse || false;
-    return function (input, criteria, reverse){
-      input = input || [];
-      criteria = criteria || {};
-      reverse = reverse || false;
+    var out = [];
-      var out = [];
-      // for (var i = 0; i < input.length; i++) {
-      //   var program = input[i];
+    
-      //   // todo ordering
-      //   out.push(program);
-      // }
+    return out;
+  }
-      switch(criteria.name){
-        case 'title':
-          out = orderBy(input, 'title', reverse);
-          break;
-        case 'category':
-          out = orderBy(input, 'categories[0].name', reverse);
-          break;
-        case 'more_participants':
-          // break;
-        default:
-          $log.info('Criteria not handled yet: ', criteria);
+  // -> Fisher–Yates shuffle algorithm
+  function shuffle (array) {
+    var currentIndex = array.length, temporaryValue, randomIndex ;
-          if(reverse){
-            out = input.slice().reverse();
-          }else{
-            out = input;
-          }
-          break;
-      }
+    // While there remain elements to shuffle...
+    while (0 !== currentIndex) {
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
-      return out;
-    };
+      // And swap it with the current element.
+      temporaryValue = array[currentIndex];
+      array[currentIndex] = array[randomIndex];
+      array[randomIndex] = temporaryValue;
+    }
+
+    return array;
   }
@@ -46,7 +46,7 @@
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" ng-model="orderReverse">
+                  <input type="checkbox" ng-model="vm.reverse">
                   Reverso
                 </label>
               </div>
@@ -57,7 +57,8 @@
             </div>
           </aside>
         </div>
-        <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
+        
+        <div ng-repeat="program in vm.filtredProgramList as results">
           <programa-box program="program" display="'box'" class="col-xs-12 col-sm-6"></programa-box>
           <div ng-if="$odd" class="clearfix"></div>
         </div>
@@ -4,6 +4,7 @@
   angular
     .module('dialoga')
     .config(configAuthInterceptor)
+    .config(configLocationProvider)
     .config(config);
   /** @ngInject */
@@ -27,7 +28,13 @@
         return $injector.get('AuthInterceptor');
       }
     ]);
+  }
+  /** @ngInject */
+  function configLocationProvider ($locationProvider, Modernizr) {
+    if (Modernizr.history) {
+      $locationProvider.html5Mode(true);
+    }
   }
   /** @ngInject */
@@ -10,6 +10,7 @@
     $stateProvider
       .state('inicio', {
         url: '/?limite&tema',
+        reloadOnSearch: false,
         views: {
           'header': { templateUrl: 'app/partials/header/header.html' },
           'main': {
 .section-gray {
   background-color: $gray;
+
+  .contraste & {
+    color: #fff;
+    background-color: #000;
+  }
 }
 .video-wrapper {
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <title>Dialoga Brasil</title>
     <meta name="description" content="">
+    <base href="/">
     <meta name="viewport" content="width=device-width">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	@@ -5,6 +5,7 @@		@@ -5,6 +5,7 @@
5	<meta charset="utf-8">	5	<meta charset="utf-8">
6	<title>Dialoga Brasil</title>	6	<title>Dialoga Brasil</title>
7	<meta name="description" content="">	7	<meta name="description" content="">
		8	+ <base href="/">
8	<meta name="viewport" content="width=device-width">	9	<meta name="viewport" content="width=device-width">
9	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->	10	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
10		11