Commit c51bc7bec68c591af77f24af511cb3110293f450

Authored by Leonardo Merlin
2 parents 0606c9a0 b3e32b03

Merge branch 'view-program'

bower.json
... ... @@ -11,7 +11,8 @@
11 11 "bootstrap-sass-official": "~3.3.4",
12 12 "animate.css": "~3.3.0",
13 13 "angular": "~1.4.0",
14   - "modernizr": "~2.8.3"
  14 + "modernizr": "~2.8.3",
  15 + "angular-slugify": "~1.0.1"
15 16 },
16 17 "devDependencies": {
17 18 "angular-mocks": "~1.4.0"
... ...
src/app/components/programa/programa.directive.js
... ... @@ -9,17 +9,23 @@
9 9 function programaBox(api) {
10 10  
11 11 /** @ngInject */
12   - function ProgramaController($log) {
  12 + function ProgramaController($state, Slug, $log) {
13 13 $log.debug('ProgramaController');
14 14  
15 15 var vm = this;
  16 + vm.$state = $state;
  17 + vm.Slug = Slug;
16 18 vm.$log = $log;
17 19  
18 20 vm.init();
19 21 }
20 22  
21 23 ProgramaController.prototype.init = function () {
  24 + var vm = this;
22 25  
  26 + if(!vm.program.slug){
  27 + vm.program.slug = vm.Slug.slugify(vm.program.title);
  28 + }
23 29 };
24 30  
25 31 ProgramaController.prototype.getCategory = function () {
... ... @@ -49,17 +55,40 @@
49 55 return 'TODO: create image alt on server-side.';
50 56 };
51 57  
  58 + ProgramaController.prototype.isDisplay = function (display) {
  59 + return this.display === display;
  60 + };
  61 +
  62 + ProgramaController.prototype.isDisplayBox = function () {
  63 + return this.isDisplay('box');
  64 + };
  65 +
  66 + ProgramaController.prototype.isDisplayPreview = function () {
  67 + return this.isDisplay('preview');
  68 + };
  69 +
  70 + ProgramaController.prototype.isDisplayContent = function () {
  71 + return this.isDisplay('content');
  72 + };
  73 +
52 74 ProgramaController.prototype.showContent = function () {
53 75 var vm = this;
54 76  
55   - vm.$log.debug('TODO: showContent()', vm.program);
  77 + vm.$log.info('showContent');
  78 + vm.$state.go('programa', {
  79 + slug: vm.program.slug,
  80 + program: vm.program
  81 + }, {
  82 + location: true
  83 + });
56 84 };
57 85  
58 86 var directive = {
59 87 restrict: 'E',
60 88 templateUrl: 'app/components/programa/programa.html',
61 89 scope: {
62   - program: '='
  90 + program: '=',
  91 + display: '='
63 92 },
64 93 controller: ProgramaController,
65 94 controllerAs: 'vm',
... ...
src/app/components/programa/programa.html
1   -<article class="program-box {{::vm.getCategorySlug()}}" ng-if="vm.program" ng-click="vm.showContent()">
2   - <h2 class="category-name">{{::vm.getCategoryName()}}</h2>
3   - <div class="image-wrapper">
4   - <img class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
5   - </div>
6   - <h1 class="program-title">{{::vm.program.title}}</h1>
7   - <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
8   -</article>
  1 +<div ng-if="vm.program">
  2 + <article ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
  3 + <div class="program-box {{::vm.getCategorySlug()}}">
  4 + <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
  5 + <div class="program-box--image-wrapper">
  6 + <img class="program-box--image img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
  7 + </div>
  8 + <h1 class="program-box--title">{{::vm.program.title}}</h1>
  9 + <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
  10 + <div class="program-box--button">
  11 + <button class="btn btn-block">
  12 + Participe
  13 + </button>
  14 + </div>
  15 + </div>
  16 + </article>
  17 +
  18 + <article ng-if="vm.isDisplayPreview()">
  19 + <header class="program-banner">
  20 + <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
  21 + <div class="program-banner--strip">
  22 + <h1 class="program-banner--title">{{::vm.program.title}}</h1>
  23 + <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
  24 + </div>
  25 + </header>
  26 + </article>
  27 +</div>
... ...
src/app/components/programa/programa.scss
1 1 // Variables
  2 +$program-box-space: 20px;
2 3 $scale: 1.1;
3 4 $time: .3s;
4 5  
5 6 // sandbox
6 7 .program-box {
7 8 cursor: pointer;
8   - .category-name {
  9 + background-color: #fff;
  10 + margin-bottom: $program-box-space;
  11 +
  12 + .contraste & {
  13 + color: #fff;
  14 + background-color: #262626;
  15 + }
  16 +
  17 + &--category {
9 18 font-size: 14px;
10 19 font-weight: bold;
11   - line-height: 30px;
  20 + text-transform: uppercase;
  21 + line-height: 22px;
12 22 display: block;
13 23 height: 30px;
14   - margin-bottom: 0;
  24 + margin: 0;
  25 + padding: 5px $program-box-space;
15 26 color: #ffffff;
16   - background-color: #000000;
  27 +
  28 + @each $category, $color in $categories {
  29 + .#{$category} & {
  30 + background-color: $color;
  31 + }
  32 + }
  33 +
  34 + .contraste & {
  35 + background-color: #262626;
  36 + }
17 37 }
18   - .image-wrapper {
  38 +
  39 + &--title {
  40 + font-size: 18px;
  41 + font-weight: bold;
  42 + padding: 0 $program-box-space;
  43 + margin: 0 0 10px 0;
  44 + }
  45 +
  46 + &--abstract {
  47 + padding: 0 $program-box-space;
  48 + }
  49 +
  50 + &--button {
  51 + padding: $program-box-space;
  52 + .btn {
  53 + color: #fff;
  54 + font-weight: bold;
  55 +
  56 + @each $category, $color in $categories {
  57 + .#{$category} & {
  58 + background-color: $color;
  59 + }
  60 + }
  61 +
  62 + .contraste & {
  63 + color: #262626;
  64 + background-color: #fff;
  65 + }
  66 + }
  67 + }
  68 +
  69 + &--image-wrapper {
19 70 position: relative;
20 71 // width: 100%;
21 72 // width: 370px;
... ... @@ -23,14 +74,17 @@ $time: .3s;
23 74  
24 75 overflow: hidden;
25 76 text-align: center;
  77 + min-height: 170px;
26 78 }
27   - .img-responsive {
  79 +
  80 + &--image {
28 81 -webkit-transition: all $time ease-in-out;
29 82 -moz-transition: all $time ease-in-out;
30 83 -o-transition: all $time ease-in-out;
31 84 transition: all $time ease-in-out;
32 85 }
33   - &:hover .img-responsive {
  86 +
  87 + &:hover .program-box--image {
34 88 -webkit-transform: scale($scale); /* prefixo para browsers webkit */
35 89 -moz-transform: scale($scale); /* prefixo para browsers gecko */
36 90 -o-transform: scale($scale); /* prefixo para opera */
... ...
src/app/components/programas/programas.directive.js
... ... @@ -106,7 +106,7 @@
106 106 vm.categoryFilter = category;
107 107 }else{
108 108 // already selected. Unselect.
109   - vm.showAll();
  109 + vm.showAll($event);
110 110 }
111 111 };
112 112  
... ...
src/app/components/programas/programas.html
... ... @@ -34,11 +34,13 @@
34 34 <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
35 35 <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
36 36  
37   - <select class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
  37 + <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
  38 + <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
38 39 <option value="">-- Filtrar por tema --</option>
39   - </select>
  40 + </select> -->
40 41  
41   - <select class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
  42 + <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
  43 + <select id="selectOrderBy" name="selectOrderBy" class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
42 44 <option value="">-- Ordernar por: --</option>
43 45 </select>
44 46  
... ... @@ -56,7 +58,7 @@
56 58 </aside>
57 59 </div>
58 60 <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query | limitTo:vm.limitTo as results">
59   - <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
  61 + <programa-box program="program" display="'box'" class="col-xs-12 col-sm-6"></programa-box>
60 62 <div ng-if="$odd" class="clearfix"></div>
61 63 </div>
62 64 <div class="animate-repeat" ng-if="results.length == 0">
... ...
src/app/index.constants.js
... ... @@ -6,7 +6,8 @@
6 6 .module('dialoga')
7 7 .constant('api', {
8 8 token: null,
9   - host: 'http://hom.login.dialoga.gov.br',
  9 + hostHom: 'http://hom.dialoga.gov.br',
  10 + hostProd: 'http://login.dialoga.gov.br',
10 11 // host: 'http://www.participa.br',
11 12 articleId: {
12 13 home: 103358
... ...
src/app/index.module.js
... ... @@ -2,6 +2,6 @@
2 2 'use strict';
3 3  
4 4 angular
5   - .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router']);
  5 + .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'slugifier']);
6 6  
7 7 })();
... ...
src/app/index.route.js
... ... @@ -56,6 +56,18 @@
56 56 'footer': { templateUrl: 'app/partials/footer/footer.html' }
57 57 }
58 58 })
  59 + .state('programa', {
  60 + url: '/programa/:slug',
  61 + views: {
  62 + 'header': { templateUrl: 'app/partials/header/header.html' },
  63 + 'main': {
  64 + templateUrl: 'app/partials/programas/programa.html',
  65 + controller: 'ProgramaController',
  66 + controllerAs: 'programa'
  67 + },
  68 + 'footer': { templateUrl: 'app/partials/footer/footer.html' }
  69 + }
  70 + })
59 71 .state('sobre', {
60 72 url: '/sobre',
61 73 views: {
... ...
src/app/index.run.js
... ... @@ -6,6 +6,7 @@
6 6 .module('dialoga')
7 7 .run(runAuth)
8 8 .run(runAccessibility)
  9 + .run(runPath)
9 10 .run(runBlock);
10 11  
11 12 /** @ngInject */
... ... @@ -73,6 +74,14 @@
73 74 }
74 75  
75 76 /** @ngInject */
  77 + function runPath($rootScope, api, $log) {
  78 + var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test(window.location.href));
  79 + $rootScope.basePath = isProduction ? api.hostProd : api.hostHom;
  80 +
  81 + $log.debug('runPath end.');
  82 + }
  83 +
  84 + /** @ngInject */
76 85 function runBlock($log) {
77 86 $log.debug('runBlock end.');
78 87 }
... ...
src/app/index.scss
... ... @@ -20,42 +20,17 @@ $gray: #f1f1f1;
20 20  
21 21 // -------------
22 22  
  23 +// 1.4 - dicionarios
  24 +$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738);
  25 +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.", cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.");
23 26  
24 27 // -------------
25   -// Paleta de Cores
26   -// -------------
27   -$cinza1: #f1f1f1;
28   -$cinza2: #eaeaea;
29   -$cinza3: #dadada;
30   -$cinza4: #989898;
31   -$cinza5: #606060;
32   -$cinza6: #484848;
33   -
34   -
35   -// -------------
36   -// Tipografia
37   -// -------------
38   -// $open-sans-regular:
39   -// $open-sans-bold:
40   -$titulo1-size: 32pt;
41   -$titulo1-line-height: 36pt;
42 28  
43   -$titulo2-size: 26pt;
44   -$titulo2-line-height: 30pt;
45   -
46   -$titulo3-size: 22pt;
47   -$titulo3-line-height: 26pt;
48   -
49   -$titulo4-size: 18pt;
50   -$titulo4-line-height: 22pt;
51   -
52   -$titulo5-size: 14pt;
53   -$titulo5-line-height: 18pt;
  29 +body {
  30 + // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  31 +}
54 32  
55   -$paragraph-size: 12pt;
56   -$paragraph-line-height: 16pt;
57 33  
58   -// -------------
59 34 .skip-links a:focus {
60 35 background-color: #fff !important;
61 36 opacity: 1;
... ...
src/app/partials/article/article.service.js
... ... @@ -6,33 +6,53 @@
6 6 .factory('ArticleService', ArticleService);
7 7  
8 8 /** @ngInject */
9   - function ArticleService($http, $q, api, UtilService, $log) {
  9 + function ArticleService($http, $q, $rootScope, UtilService, Slug, $log) {
10 10 $log.debug('ArticleService');
11 11  
12 12 var idArticleHome = '103358';
13 13 var _savedAbstract = null;
14 14  
15 15 var service = {
16   - apiArticles: api.host + '/api/v1/articles/',
  16 + apiArticles: $rootScope.basePath + '/api/v1/articles/',
17 17 getHome: getHome,
  18 + getArticleBySlug: getArticleBySlug,
18 19 setHomeAbstract: setHomeAbstract,
19 20 getHomeAbstract: getHomeAbstract
20 21 };
21 22  
  23 + var CACHE = {}; // cache by article id
  24 +
22 25 return service;
23 26  
24   - function getHome () {
25   - return getArticleById(idArticleHome);
26   - }
  27 + function loadArticleById (articleId, cbSuccess, cbError) {
27 28  
28   - function getArticleById (articleId) {
29 29 var url = service.apiArticles + articleId;
30 30 var params = {
31 31 fields: 'id,children,categories,abstract,title,image,url,setting,position',
32 32 private_token: 'null'
33 33 };
34 34  
35   - return UtilService.get(url, {params: params});
  35 + UtilService.get(url, {params: params}).then(function(data){
  36 + CACHE[articleId] = data;
  37 + cbSuccess(data);
  38 + }, function(error){
  39 + cbError(error);
  40 + });
  41 +
  42 + }
  43 +
  44 + function getArticleById (articleId, cbSuccess, cbError) {
  45 + var cachedArticle = CACHE[articleId];
  46 +
  47 + if(cachedArticle){
  48 + cbSuccess(cachedArticle);
  49 + }else{
  50 + loadArticleById(articleId, cbSuccess, cbError);
  51 + }
  52 + }
  53 +
  54 + function getHome (cbSuccess, cbError) {
  55 + return getArticleById(idArticleHome, cbSuccess, cbError);
36 56 }
37 57  
38 58 function setHomeAbstract (newAbstract) {
... ... @@ -42,5 +62,34 @@
42 62 function getHomeAbstract () {
43 63 return _savedAbstract;
44 64 }
  65 +
  66 + function getArticleBySlug (slug, cbSuccess, cbError) {
  67 + var vm = this;
  68 +
  69 + vm.getHome(function (data) {
  70 + var mainArticle = data.article;
  71 + var programList = mainArticle.children;
  72 + var result = null;
  73 +
  74 + for (var i = programList.length - 1; i >= 0; i--) {
  75 + var program = programList[i];
  76 +
  77 + if(!program.slug){
  78 + program.slug = Slug.slugify(program.title);
  79 + }
  80 +
  81 + if(program.slug === slug){
  82 + result = program;
  83 + break;
  84 + }
  85 + }
  86 +
  87 + if(result){
  88 + cbSuccess(result);
  89 + }else{
  90 + cbError('None program with slug "' + slug + '"" was found.');
  91 + }
  92 + }, cbError);
  93 + }
45 94 }
46 95 })();
... ...
src/app/partials/header/header.html
... ... @@ -16,4 +16,11 @@
16 16 <div class="row">
17 17 <app-navbar></app-navbar>
18 18 </div>
  19 +
  20 + <!-- TODO: breadcrumb -->
  21 + <!-- <ol class="breadcrumb">
  22 + <li><a href="#">Home</a></li>
  23 + <li><a href="#">Library</a></li>
  24 + <li class="active">Data</li>
  25 + </ol> -->
19 26 </header>
... ...
src/app/partials/inicio/inicio.controller.js
... ... @@ -32,8 +32,8 @@
32 32 hideBackground(2000);
33 33 }
34 34  
35   - vm.ArticleService.getHome().then(function(result) {
36   - vm.article = result.article;
  35 + vm.ArticleService.getHome(function(data) {
  36 + vm.article = data.article;
37 37 }, function(error) {
38 38 vm.$log.error('Error on getHome article.', error);
39 39 });
... ...
src/app/partials/programas/programa.controller.js 0 → 100644
... ... @@ -0,0 +1,65 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .controller('ProgramaController', ProgramaController);
  7 +
  8 + /** @ngInject */
  9 + function ProgramaController(ArticleService, $state, $rootScope, $log) {
  10 + $log.debug('ProgramaController');
  11 +
  12 + var vm = this;
  13 +
  14 + vm.ArticleService = ArticleService;
  15 + vm.$state = $state;
  16 + vm.$log = $log;
  17 +
  18 + vm.init();
  19 + }
  20 +
  21 + ProgramaController.prototype.init = function () {
  22 + var vm = this;
  23 +
  24 + var params = vm.$state.params;
  25 + var slug = params.slug;
  26 +
  27 + vm.program = null;
  28 +
  29 + vm.ArticleService.getArticleBySlug(slug, function(program){
  30 + vm.program = program;
  31 +
  32 + // load proposals
  33 + // vm.ArticleService.getRandomProposals(program.id).then(function(proposal){
  34 + // vm.program.proposal = proposal;
  35 + // }, function (error){
  36 + // vm.$log.error(error);
  37 + // });
  38 +
  39 + // load events
  40 + // vm.ArticleService.getEvents(program.id).then(function(proposal){
  41 + // vm.program.proposal = proposal;
  42 + // }, function (error){
  43 + // vm.$log.error(error);
  44 + // });
  45 +
  46 + // load body content
  47 + // vm.ArticleService.getBodyContent(program.id).then(function(proposal){
  48 + // vm.program.proposal = proposal;
  49 + // }, function (error){
  50 + // vm.$log.error(error);
  51 + // });
  52 +
  53 + }, function (error) {
  54 + vm.$log.error(error);
  55 + vm.$log.info('Rollback to home page.');
  56 + vm.$state.go('inicio', {}, {location: true});
  57 + });
  58 + };
  59 +
  60 + ProgramaController.prototype.goBack = function () {
  61 + var vm = this;
  62 +
  63 + vm.$log.warn('Not implemented yet!');
  64 + };
  65 +})();
... ...
src/app/partials/programas/programa.html 0 → 100644
... ... @@ -0,0 +1,35 @@
  1 +<div class="container">
  2 +
  3 + <div class="article-bar" ng-class="programa.program.categories[0].slug">
  4 + <div class="navbar">
  5 + <div class="navbar-header">
  6 + <button class="btn btn-link" ng-click="programa.goBack()">
  7 + <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
  8 + <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  9 + Voltar
  10 + </button>
  11 + </div>
  12 + <div class="navbar-left">
  13 + <button class="btn btn-link">
  14 + <span class="glyphicon glyphicon-refresh"></span>
  15 + <span class="category-name">{{::programa.program.categories[0].name}}</span>
  16 + </button>
  17 + </div>
  18 + <div class="navbar-right">
  19 + <select name="selectCategory" id="selectCategory-{{::programa.program.categories[0].id}}" class="form-control">
  20 + <option value="">-- Selectione um Tema --</option>
  21 + </select>
  22 + </div>
  23 + </div>
  24 + </div>
  25 +
  26 + <div ng-if="!programa.program">
  27 + <div class="alert alert-info" role="alert">Carregando informações sobre o progama</div>
  28 + </div>
  29 +
  30 + <div ng-if="programa.program">
  31 + <programa-box program="programa.program" display="'preview'"></programa-box>
  32 + </div>
  33 + <div id="content" ng-bind-html="programa.program.body"></div>
  34 +</div>
  35 +
... ...
src/app/partials/programas/programas.scss 0 → 100644
... ... @@ -0,0 +1,19 @@
  1 +.article-bar {
  2 +
  3 + .btn {
  4 + color: #fff;
  5 + font-weight: bold;
  6 + }
  7 +
  8 + @each $category, $color in $categories {
  9 + &.#{$category} {
  10 + background-color: $color;
  11 + }
  12 + }
  13 +
  14 + .contraste & {
  15 + background-color: #262626;
  16 + }
  17 +}
  18 +
  19 +
... ...
src/index.html
1 1 <!doctype html>
2   -<!--[if lt IE 7]> <html lang="pt-br" ng-app="dialoga" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3   -<!--[if IE 7]> <html lang="pt-br" ng-app="dialoga" class="no-js lt-ie9 lt-ie8"> <![endif]-->
4 2 <!--[if IE 8]> <html lang="pt-br" ng-app="dialoga" class="no-js lt-ie9"> <![endif]-->
5 3 <!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br" ng-app="dialoga"> <!--<![endif]-->
6 4 <head>
... ...