Commit 8a9c29fb1a2aba064ae2657bb35d208b8cb174bb

Authored by Leonardo Merlin
1 parent fbc2b3c7

add theme color by category on category-list--item

src/app/components/programas/programas.directive.js
... ... @@ -9,7 +9,7 @@
9 9 function programaList() {
10 10  
11 11 /** @ngInject */
12   - function ProgramaListController($scope, $location, $filter, $anchorScroll, $log) {
  12 + function ProgramaListController($scope, $element, $location, $filter, $log) {
13 13 $log.debug('ProgramaListController');
14 14  
15 15 // alias
... ... @@ -17,10 +17,11 @@
17 17  
18 18 // dependencies
19 19 vm.$scope = $scope;
  20 + vm.$element = $element;
20 21 vm.$location = $location;
21 22 vm.$filter = $filter;
22   - vm.$anchorScroll = $anchorScroll;
23 23 vm.$log = $log;
  24 + vm.defaultLimit = 6;
24 25  
25 26 // initialization
26 27 vm.init();
... ... @@ -47,15 +48,14 @@
47 48  
48 49 // Add initial values for the filter
49 50 vm.query = (vm.search && vm.search.filtro) ? vm.search.filtro : null;
50   - vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : 4;
  51 + vm.limitTo = (vm.search && vm.search.limite) ? parseInt(vm.search.limite, 10) : vm.defaultLimit;
51 52 vm.categoryFilter = (vm.search && vm.search.tema) ? vm.getCategoryBySlug(vm.search.tema) : null;
52 53 vm.orderCriteria = (vm.search && vm.search.ordem) ? { name: vm.search.ordem } : null;
53 54 vm.reverse = (vm.search && vm.search.reverso) ? true : false;
54 55  
55   - if(!angular.equals({}, vm.search)){
56   - vm.$location.hash('lista-de-programas');
57   - vm.$anchorScroll();
58   - console.log('scrolled');
  56 + if (!angular.equals({}, vm.search)) {
  57 + var $el = vm.$element;
  58 + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
59 59 }
60 60  
61 61 // update window location params
... ... @@ -66,7 +66,7 @@
66 66 });
67 67  
68 68 vm.$scope.$watch('vm.limitTo', function(newValue, oldValue){
69   - vm.search.limite = (newValue && newValue !== 4) ? newValue : null;
  69 + vm.search.limite = (newValue && newValue !== vm.defaultLimit) ? newValue : null;
70 70 vm.$location.search('limite', vm.search.limite);
71 71 vm.filtredProgramList = vm.getFiltredPrograms();
72 72 });
... ... @@ -95,7 +95,7 @@
95 95 var vm = this;
96 96  
97 97 vm.query = null;
98   - vm.limitTo = 4;
  98 + vm.limitTo = vm.defaultLimit;
99 99 vm.categoryFilter = null;
100 100 vm.orderCriteria = null;
101 101 };
... ... @@ -154,7 +154,7 @@
154 154 var orderBy = vm.$filter('orderBy');
155 155 var limitTo = vm.$filter('limitTo');
156 156 var limit = vm.limitTo ? vm.limitTo : 4;
157   -
  157 +
158 158 if(categoryFilter){
159 159 output = _filterByCategory(output, categoryFilter);
160 160 }
... ... @@ -188,8 +188,8 @@
188 188 break;
189 189 }
190 190  
191   - output = limitTo(output, limit);
192   -
  191 + output = limitTo(output, limit);
  192 +
193 193 return output;
194 194 };
195 195  
... ... @@ -216,21 +216,21 @@
216 216 resultByCategory[prop] = shuffle(categoryWithPrograms);
217 217 }
218 218 }
219   -
  219 +
220 220 // Concat all into result array
221 221 // > while has program at Lists on resultByCategory
222 222 var hasProgram = true;
223 223 while (hasProgram) {
224   -
  224 +
225 225 var foundProgram = false;
226 226 // each categoryList with array of program
227 227 for (var prop in resultByCategory){
228   -
  228 +
229 229 if( resultByCategory.hasOwnProperty( prop ) ) {
230 230 var categoryWithPrograms = resultByCategory[prop];
231   -
  231 +
232 232 if (categoryWithPrograms.length > 0 ) {
233   - var pivotProgram = categoryWithPrograms.pop();
  233 + var pivotProgram = categoryWithPrograms.pop();
234 234 result.push(pivotProgram);
235 235 foundProgram = true;
236 236 }
... ... @@ -286,7 +286,7 @@
286 286  
287 287 var out = [];
288 288  
289   -
  289 +
290 290  
291 291 return out;
292 292 }
... ...
src/app/components/programas/programas.html
... ... @@ -3,7 +3,7 @@
3 3 <div class="category-list">
4 4 <nav class="navigation">
5 5 <h3 class="title"><b>Programas</b> por Tema</h3>
6   - <div class="list-group category-list">
  6 + <div class="list-group category-list" ng-class="vm.categoryFilter.slug">
7 7 <button type="button" class="list-group-item category-item"
8 8 ng-repeat="category in vm.categories"
9 9 ng-class="{active: vm.categoryFilter.slug === category.slug}"
... ...
src/app/components/programas/programas.scss
... ... @@ -11,4 +11,18 @@
11 11 top: 2px;
12 12 }
13 13 }
  14 +
  15 +}
  16 +
  17 +.category-list {
  18 +
  19 + @each $category, $color in $categories {
  20 + &.#{$category} {
  21 + .list-group-item.active,
  22 + .list-group-item.active:hover,
  23 + .list-group-item.active:focus {
  24 + background-color: $color;
  25 + }
  26 + }
  27 + }
14 28 }
... ...