Commit 8a9c29fb1a2aba064ae2657bb35d208b8cb174bb
1 parent
fbc2b3c7
Exists in
master
and in
8 other branches
add theme color by category on category-list--item
Showing
3 changed files
with
33 additions
and
19 deletions
Show diff stats
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 | } | ... | ... |