Commit ef175cf664b7f0c5a03c174c197a221cf5bbe51f

Authored by Leonardo Merlin
1 parent 432f8dc0

Split content handler. Added PageContentController

src/app/components/programa/programa.directive.js
... ... @@ -9,10 +9,11 @@
9 9 function programaBox($rootScope) {
10 10  
11 11 /** @ngInject */
12   - function ProgramaController($state, Slug, $log) {
  12 + function ProgramaController(ArticleService, $state, Slug, $log) {
13 13 $log.debug('ProgramaController');
14 14  
15 15 var vm = this;
  16 + vm.ArticleService = ArticleService;
16 17 vm.$state = $state;
17 18 vm.Slug = Slug;
18 19 vm.$log = $log;
... ... @@ -27,6 +28,8 @@
27 28 vm.program.slug = vm.Slug.slugify(vm.program.title);
28 29 }
29 30  
  31 + vm.displayType = vm.display;
  32 +
30 33 // if(vm.program.color && !vm.program.bgColor){
31 34 // // 15% more darker
32 35 // vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
... ... @@ -79,10 +82,18 @@
79 82 ProgramaController.prototype.showContent = function () {
80 83 var vm = this;
81 84  
82   - vm.$log.info('showContent');
  85 + vm.$state.go('programa-conheca', {
  86 + slug: vm.program.slug
  87 + }, {
  88 + location: true
  89 + });
  90 + };
  91 +
  92 + ProgramaController.prototype.showPreview = function () {
  93 + var vm = this;
  94 +
83 95 vm.$state.go('programa', {
84   - slug: vm.program.slug,
85   - program: vm.program
  96 + slug: vm.program.slug
86 97 }, {
87 98 location: true
88 99 });
... ...
src/app/components/programa/programa.html
1 1 <div ng-if="vm.program" class="{{::vm.getCategorySlug()}}">
2   - <article class="program-box" ng-if="vm.isDisplayBox()" ng-click="vm.showContent()">
  2 + <article ng-if="vm.displayType == 'box'" class="program-box" ng-click="vm.showPreview()">
3 3 <div>
4 4 <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5 5 <div class="program-box--image-wrapper">
... ... @@ -10,7 +10,7 @@
10 10 <h1>{{::vm.program.title}}</h1>
11 11 </div>
12 12 <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div>
13   - <div class="program-box--button">
  13 + <div class="button--themed">
14 14 <button class="btn btn-block">
15 15 Participe
16 16 </button>
... ... @@ -18,7 +18,7 @@
18 18 </div>
19 19 </article>
20 20  
21   - <article ng-if="vm.isDisplayPreview()" class="program-preview">
  21 + <article ng-if="vm.displayType == 'preview'" class="program-preview">
22 22 <header class="program-banner">
23 23 <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
24 24 <div class="program-banner--strip">
... ... @@ -26,5 +26,15 @@
26 26 <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
27 27 </div>
28 28 </header>
  29 +
  30 + <section class="call-to-action--section">
  31 + <div class="row">
  32 + <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
  33 + <div class="button--themed">
  34 + <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
  35 + </div>
  36 + </div>
  37 + </div>
  38 + </section>
29 39 </article>
30 40 </div>
... ...
src/app/components/programa/programa.scss
... ... @@ -4,6 +4,46 @@ $scale: 1.1;
4 4 $time: .2s;
5 5 $darken: 15%;
6 6  
  7 +// Commons
  8 +.button--themed {
  9 + padding: $program-box-space;
  10 + .btn {
  11 + color: #fff;
  12 + font-weight: bold;
  13 + padding: 15px 0;
  14 + border-left: 0;
  15 + border-right: 0;
  16 + border-top: 0;
  17 + border-radius: 6px;
  18 +
  19 + -webkit-transition: all $time ease-in-out;
  20 + -moz-transition: all $time ease-in-out;
  21 + -o-transition: all $time ease-in-out;
  22 + transition: all $time ease-in-out;
  23 +
  24 + @each $category, $color in $categories {
  25 + .#{$category} & {
  26 + background-color: $color;
  27 + border-bottom: 3px solid darken($color, $darken);
  28 + }
  29 + }
  30 +
  31 + &:hover,
  32 + &:focus {
  33 + @each $category, $color in $categories {
  34 + .#{$category} & {
  35 + background-color: darken($color, $darken);
  36 + }
  37 + }
  38 + }
  39 +
  40 + .contraste & {
  41 + color: #262626;
  42 + background-color: #fff;
  43 + }
  44 + }
  45 +}
  46 +
7 47 .program-box {
8 48 cursor: pointer;
9 49 background-color: #fff;
... ... @@ -110,45 +150,6 @@ $darken: 15%;
110 150 p { margin: 0; }
111 151 }
112 152  
113   - &--button {
114   - padding: $program-box-space;
115   - .btn {
116   - color: #fff;
117   - font-weight: bold;
118   - padding: 15px 0;
119   - border-left: 0;
120   - border-right: 0;
121   - border-top: 0;
122   - border-radius: 6px;
123   -
124   - -webkit-transition: all $time ease-in-out;
125   - -moz-transition: all $time ease-in-out;
126   - -o-transition: all $time ease-in-out;
127   - transition: all $time ease-in-out;
128   -
129   - @each $category, $color in $categories {
130   - .#{$category} & {
131   - background-color: $color;
132   - border-bottom: 3px solid darken($color, $darken);
133   - }
134   - }
135   -
136   - &:hover,
137   - &:focus {
138   - @each $category, $color in $categories {
139   - .#{$category} & {
140   - background-color: darken($color, $darken);
141   - }
142   - }
143   - }
144   -
145   - .contraste & {
146   - color: #262626;
147   - background-color: #fff;
148   - }
149   - }
150   - }
151   -
152 153 &--image-wrapper {
153 154 position: relative;
154 155 // width: 100%;
... ... @@ -231,4 +232,31 @@ $darken: 15%;
231 232 .program-banner--abstract {
232 233 padding-bottom: 10px;
233 234 }
  235 +
  236 + .button--themed {
  237 + .btn {
  238 + font-size: 38px;
  239 +
  240 + @media (max-width: $screen-sm){
  241 + font-size: 20px;
  242 + }
  243 + }
  244 + }
  245 +}
  246 +
  247 +
  248 +.program-content {
  249 + h2 {
  250 + font-size: 38px;
  251 + font-weight: 500;
  252 + margin-bottom: 40px;
  253 + padding-bottom: 20px;
  254 +
  255 + small {
  256 + display: block;
  257 + font-size: 16px;
  258 + padding-top: 5px;
  259 + text-transform: none;
  260 + }
  261 + }
234 262 }
... ...
src/app/components/programas/programas.scss
... ... @@ -64,7 +64,7 @@
64 64 position: absolute;
65 65 top: -16px;
66 66 left: -14px;
67   - transform: scale(0.4);
  67 + transform: scale(0.35);
68 68 }
69 69  
70 70 @each $category, $color in $categories {
... ...
src/app/index.route.js
... ... @@ -57,6 +57,18 @@
57 57 'footer': { templateUrl: 'app/pages/footer/footer.html' }
58 58 }
59 59 })
  60 + .state('programa-conheca', {
  61 + url: '/programa/:slug/conheca-o-programa',
  62 + views: {
  63 + 'header': { templateUrl: 'app/pages/header/header.html' },
  64 + 'main': {
  65 + templateUrl: 'app/pages/programas/conheca-o-programa.html',
  66 + controller: 'ProgramaContentPageController',
  67 + controllerAs: 'pageProgramaContent'
  68 + },
  69 + 'footer': { templateUrl: 'app/pages/footer/footer.html' }
  70 + }
  71 + })
60 72 .state('sobre', {
61 73 url: '/sobre',
62 74 views: {
... ...
src/app/index.run.js
... ... @@ -18,7 +18,7 @@
18 18 $rootScope.$on('$stateChangeStart', function(event, next) {
19 19  
20 20 if (!next.data || !next.data.authorizedRoles) {
21   - $log.debug('public url/state');
  21 + $log.debug('runAuth: public url/state');
22 22 return;
23 23 }
24 24  
... ...
src/app/pages/article/article.service.js
... ... @@ -22,6 +22,7 @@
22 22 getTerms: getTerms,
23 23 getArticleById: getArticleById,
24 24 getArticleBySlug: getArticleBySlug,
  25 + getContentById: getContentById,
25 26 setHomeAbstract: setHomeAbstract,
26 27 getHomeAbstract: getHomeAbstract
27 28 };
... ... @@ -85,6 +86,12 @@
85 86 }, cbError);
86 87 }
87 88  
  89 + function getContentById (contentId, cbSuccess, cbError) {
  90 + return getArticleById(contentId, {
  91 + fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic'
  92 + }, cbSuccess, cbError);
  93 + }
  94 +
88 95 function getHome (cbSuccess, cbError) {
89 96 return getArticleById(idArticleHome, {
90 97 fields: 'id,children,categories,abstract,title,image,url,setting,position',
... ...
src/app/pages/header/header.html
1 1 <header class="container">
2 2  
3 3 <div class="row">
4   - <div class="accessibility-wrapper">
5   - <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
6   - <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
7   - </button>
  4 + <div class="col-sm-12">
8 5  
9   - <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
10   - <span class="glyphicon glyphicon-user"></span>
11   - Entrar
12   - </button>
  6 + <div class="accessibility-wrapper">
  7 + <button type="button" id="display-contrast" class="btn btn-link" ng-click="toggleContrast()">
  8 + <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> Alto Contraste
  9 + </button>
  10 +
  11 + <button type="button" class="btn btn-link pull-right" ui-sref="entrar">
  12 + <span class="icon icon-user"></span>
  13 + Entrar
  14 + </button>
  15 + </div>
13 16 </div>
14 17 </div>
15 18  
... ...
src/app/pages/header/header.scss
... ... @@ -0,0 +1,16 @@
  1 +.accessibility-wrapper {
  2 + .icon-user {
  3 + display: inline-block;
  4 + vertical-align: middle;
  5 + width: 26px;
  6 + height: 26px;
  7 + border: 1px solid #ccc;
  8 + border-radius: 100%;
  9 + background-position: 1px 0px;
  10 +
  11 + .contraste & {
  12 + // XXX: chage for dinamic handler
  13 + background-position: -0px -24px;
  14 + }
  15 + }
  16 +}
... ...
src/app/pages/programas/conheca-o-programa.html 0 → 100644
... ... @@ -0,0 +1,55 @@
  1 +<div class="container page--conheca-o-programa">
  2 + <div class="row">
  3 + <div class="col-xs-12">
  4 + <div class="article-bar" ng-class="pageProgramaContent.program.categories[0].slug">
  5 + <div class="navbar">
  6 + <div class="navbar-header">
  7 + <button class="article-bar--item btn btn-link" ng-click="pageProgramaContent.goBack()">
  8 + <!-- <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> -->
  9 + <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  10 + Voltar
  11 + </button>
  12 + </div>
  13 + <div class="navbar-left">
  14 + <button class="article-bar--item btn btn-link">
  15 + <span class="glyphicon glyphicon-refresh"></span>
  16 + <span class="category-name">{{::pageProgramaContent.program.categories[0].name}}</span>
  17 + </button>
  18 + </div>
  19 + <div class="navbar-right" ng-if="pageProgramaContent.categories">
  20 + <label for="selectCategory" class="control-label sr-only" title="Selecione uma opção para acessar os programas do tema">Temas:</label>
  21 + <select id="selectCategory" name="selectCategory" class="article-bar--item form-control" ng-model="pageProgramaContent.currentCategory" ng-options="category.name for category in pageProgramaContent.categories track by category.slug">
  22 + </select>
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 +
  29 + <div class="row">
  30 + <article class="program-content">
  31 + <div ng-if="!pageProgramaContent.program.body">
  32 + <div ng-if="!pageProgramaContent.error" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
  33 + <div ng-if="pageProgramaContent.error" class="alert alert-warning" role="alert">{{pageProgramaContent}}</div>
  34 + </div>
  35 + <div ng-if="pageProgramaContent.program.body">
  36 + <section ng-bind-html="pageProgramaContent.program.body"></section>
  37 + </div>
  38 + </article>
  39 + </div>
  40 + <div class="row">
  41 + <aside class="program--aside"ng-class="pageProgramaContent.program.categories[0].slug">
  42 + <div class="col-sm-6" >
  43 + <div class="button--themed">
  44 + <button class="btn btn-block" ng-click="pageProgramaContent.goBack()">
  45 + <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  46 + Participe
  47 + </button>
  48 + </div>
  49 + </div>
  50 + <div class="col-sm-6">
  51 + <social-share display="'full'"></social-share>
  52 + </div>
  53 + </aside>
  54 + </div>
  55 +</div>
... ...
src/app/pages/programas/programa.content.controller.js 0 → 100644
... ... @@ -0,0 +1,92 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .controller('ProgramaContentPageController', ProgramaContentPageController);
  7 +
  8 + /** @ngInject */
  9 + function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) {
  10 + $log.debug('ProgramaContentPageController');
  11 +
  12 + var vm = this;
  13 +
  14 + vm.ArticleService = ArticleService;
  15 + vm.$state = $state;
  16 + vm.$location = $location;
  17 + vm.$scope = $scope;
  18 + vm.$rootScope = $rootScope;
  19 + vm.$log = $log;
  20 +
  21 + vm.init();
  22 + }
  23 +
  24 + ProgramaContentPageController.prototype.init = function () {
  25 + var vm = this;
  26 +
  27 + var params = vm.$state.params;
  28 + var slug = params.slug;
  29 +
  30 + vm.program = null;
  31 + vm.currentCategory = null;
  32 + vm.loadingContent = null;
  33 + vm.error = null;
  34 +
  35 + vm.ArticleService.getHome(function(data){
  36 + vm.categories = data.article.categories;
  37 + }, function (error) {
  38 + vm.$log.error(error);
  39 + });
  40 +
  41 + vm.ArticleService.getArticleBySlug(slug, function(program){
  42 + vm.program = program;
  43 + vm.currentCategory = vm.program.categories[0];
  44 +
  45 + vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){
  46 + if(newValue !== oldValue){
  47 + vm.$state.go('inicio', {
  48 + tema: newValue.slug
  49 + }, {
  50 + location: true
  51 + });
  52 + }
  53 + });
  54 +
  55 + vm.loadContent();
  56 +
  57 + }, function (error) {
  58 + vm.$log.error(error);
  59 + vm.$log.info('Rollback to home page.');
  60 + vm.$state.go('inicio', {}, {location: true});
  61 + });
  62 + };
  63 +
  64 + ProgramaContentPageController.prototype.loadContent = function () {
  65 + var vm = this;
  66 +
  67 + vm.loadingContent = true;
  68 + if(!vm.program.body){
  69 + vm.ArticleService.getContentById(vm.program.id, function (data) {
  70 + vm.program.body = data.article.body;
  71 + vm.loadingContent = false;
  72 + }, function (error) {
  73 + vm.loadingContent = false;
  74 + vm.error = error;
  75 + });
  76 + }
  77 + vm.loadingContent = false;
  78 + };
  79 +
  80 + ProgramaContentPageController.prototype.goBack = function () {
  81 + var vm = this;
  82 +
  83 + var prevState = vm.$rootScope.$previousState;
  84 + if(prevState && prevState.state.name){
  85 + vm.$state.go(prevState.state.name, prevState.params);
  86 + } else {
  87 + vm.$state.go('programa', {
  88 + slug: vm.program.slug
  89 + });
  90 + }
  91 + };
  92 +})();
... ...
src/app/pages/programas/programa.controller.js
... ... @@ -29,6 +29,7 @@
29 29  
30 30 vm.program = null;
31 31 vm.currentCategory = null;
  32 + vm.loadingContent = null;
32 33  
33 34 vm.ArticleService.getHome(function(data){
34 35 vm.categories = data.article.categories;
... ...
src/app/pages/programas/programa.html
... ... @@ -34,6 +34,5 @@
34 34 <div ng-if="pagePrograma.program">
35 35 <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
36 36 </div>
37   - <div id="content" ng-bind-html="pagePrograma.program.body"></div>
38 37 </div>
39 38  
... ...
src/app/pages/programas/programas.scss
... ... @@ -7,6 +7,10 @@
7 7  
8 8 &--item {
9 9 margin: 8px 0;
  10 +
  11 + @media (max-width: $screen-xs) {
  12 + margin: 8px;
  13 + }
10 14 }
11 15  
12 16 .navbar {
... ... @@ -28,4 +32,7 @@
28 32 }
29 33 }
30 34  
  35 +.program--aside {
  36 + margin-top: 20px;
  37 +}
31 38  
... ...