Download as
Browse Code »

Commit ef175cf664b7f0c5a03c174c197a221cf5bbe51f

Authored by Leonardo Merlin
1 parent 432f8dc0
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Split content handler. Added PageContentController

Showing 14 changed files with 298 additions and 57 deletions   Show diff stats
src/app/components/programa/programa.directive.js
  Diff comments   View file @ef175cf
@@ -9,10 +9,11 @@ @@ -9,10 +9,11 @@
9 function programaBox($rootScope) { 9 function programaBox($rootScope) {
10 10
11 /** @ngInject */ 11 /** @ngInject */
12 - function ProgramaController($state, Slug, $log) { 12 + function ProgramaController(ArticleService, $state, Slug, $log) {
13 $log.debug('ProgramaController'); 13 $log.debug('ProgramaController');
14 14
15 var vm = this; 15 var vm = this;
  16 + vm.ArticleService = ArticleService;
16 vm.$state = $state; 17 vm.$state = $state;
17 vm.Slug = Slug; 18 vm.Slug = Slug;
18 vm.$log = $log; 19 vm.$log = $log;
@@ -27,6 +28,8 @@ @@ -27,6 +28,8 @@
27 vm.program.slug = vm.Slug.slugify(vm.program.title); 28 vm.program.slug = vm.Slug.slugify(vm.program.title);
28 } 29 }
29 30
  31 + vm.displayType = vm.display;
  32 +
30 // if(vm.program.color && !vm.program.bgColor){ 33 // if(vm.program.color && !vm.program.bgColor){
31 // // 15% more darker 34 // // 15% more darker
32 // vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15); 35 // vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15);
@@ -79,10 +82,18 @@ @@ -79,10 +82,18 @@
79 ProgramaController.prototype.showContent = function () { 82 ProgramaController.prototype.showContent = function () {
80 var vm = this; 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 vm.$state.go('programa', { 95 vm.$state.go('programa', {
84 - slug: vm.program.slug,  
85 - program: vm.program 96 + slug: vm.program.slug
86 }, { 97 }, {
87 location: true 98 location: true
88 }); 99 });
src/app/components/programa/programa.html
  Diff comments   View file @ef175cf
1 <div ng-if="vm.program" class="{{::vm.getCategorySlug()}}"> 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 <div> 3 <div>
4 <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2> 4 <h2 class="program-box--category">{{::vm.getCategoryName()}}</h2>
5 <div class="program-box--image-wrapper"> 5 <div class="program-box--image-wrapper">
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 <h1>{{::vm.program.title}}</h1> 10 <h1>{{::vm.program.title}}</h1>
11 </div> 11 </div>
12 <div class="program-box--abstract" ng-bind-html="vm.program.abstract"></div> 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 <button class="btn btn-block"> 14 <button class="btn btn-block">
15 Participe 15 Participe
16 </button> 16 </button>
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 </div> 18 </div>
19 </article> 19 </article>
20 20
21 - <article ng-if="vm.isDisplayPreview()" class="program-preview"> 21 + <article ng-if="vm.displayType == 'preview'" class="program-preview">
22 <header class="program-banner"> 22 <header class="program-banner">
23 <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}"> 23 <img class="program-banner--image" ng-src="{{vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}">
24 <div class="program-banner--strip"> 24 <div class="program-banner--strip">
@@ -26,5 +26,15 @@ @@ -26,5 +26,15 @@
26 <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p> 26 <p class="program-banner--abstract" ng-bind-html="vm.program.abstract"></p>
27 </div> 27 </div>
28 </header> 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 </article> 39 </article>
30 </div> 40 </div>
src/app/components/programa/programa.scss
  Diff comments   View file @ef175cf
@@ -4,6 +4,46 @@ $scale: 1.1; @@ -4,6 +4,46 @@ $scale: 1.1;
4 $time: .2s; 4 $time: .2s;
5 $darken: 15%; 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 .program-box { 47 .program-box {
8 cursor: pointer; 48 cursor: pointer;
9 background-color: #fff; 49 background-color: #fff;
@@ -110,45 +150,6 @@ $darken: 15%; @@ -110,45 +150,6 @@ $darken: 15%;
110 p { margin: 0; } 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 &--image-wrapper { 153 &--image-wrapper {
153 position: relative; 154 position: relative;
154 // width: 100%; 155 // width: 100%;
@@ -231,4 +232,31 @@ $darken: 15%; @@ -231,4 +232,31 @@ $darken: 15%;
231 .program-banner--abstract { 232 .program-banner--abstract {
232 padding-bottom: 10px; 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
  Diff comments   View file @ef175cf
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 position: absolute; 64 position: absolute;
65 top: -16px; 65 top: -16px;
66 left: -14px; 66 left: -14px;
67 - transform: scale(0.4); 67 + transform: scale(0.35);
68 } 68 }
69 69
70 @each $category, $color in $categories { 70 @each $category, $color in $categories {
src/app/index.route.js
  Diff comments   View file @ef175cf
@@ -57,6 +57,18 @@ @@ -57,6 +57,18 @@
57 'footer': { templateUrl: 'app/pages/footer/footer.html' } 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 .state('sobre', { 72 .state('sobre', {
61 url: '/sobre', 73 url: '/sobre',
62 views: { 74 views: {
src/app/index.run.js
  Diff comments   View file @ef175cf
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 $rootScope.$on('$stateChangeStart', function(event, next) { 18 $rootScope.$on('$stateChangeStart', function(event, next) {
19 19
20 if (!next.data || !next.data.authorizedRoles) { 20 if (!next.data || !next.data.authorizedRoles) {
21 - $log.debug('public url/state'); 21 + $log.debug('runAuth: public url/state');
22 return; 22 return;
23 } 23 }
24 24
src/app/pages/article/article.service.js
  Diff comments   View file @ef175cf
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 getTerms: getTerms, 22 getTerms: getTerms,
23 getArticleById: getArticleById, 23 getArticleById: getArticleById,
24 getArticleBySlug: getArticleBySlug, 24 getArticleBySlug: getArticleBySlug,
  25 + getContentById: getContentById,
25 setHomeAbstract: setHomeAbstract, 26 setHomeAbstract: setHomeAbstract,
26 getHomeAbstract: getHomeAbstract 27 getHomeAbstract: getHomeAbstract
27 }; 28 };
@@ -85,6 +86,12 @@ @@ -85,6 +86,12 @@
85 }, cbError); 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 function getHome (cbSuccess, cbError) { 95 function getHome (cbSuccess, cbError) {
89 return getArticleById(idArticleHome, { 96 return getArticleById(idArticleHome, {
90 fields: 'id,children,categories,abstract,title,image,url,setting,position', 97 fields: 'id,children,categories,abstract,title,image,url,setting,position',
src/app/pages/header/header.html
  Diff comments   View file @ef175cf
1 <header class="container"> 1 <header class="container">
2 2
3 <div class="row"> 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 </div> 16 </div>
14 </div> 17 </div>
15 18
src/app/pages/header/header.scss
  Diff comments   View file @ef175cf
@@ -0,0 +1,16 @@ @@ -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
  Diff comments   View file @ef175cf
@@ -0,0 +1,55 @@ @@ -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
  Diff comments   View file @ef175cf
@@ -0,0 +1,92 @@ @@ -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
  Diff comments   View file @ef175cf
@@ -29,6 +29,7 @@ @@ -29,6 +29,7 @@
29 29
30 vm.program = null; 30 vm.program = null;
31 vm.currentCategory = null; 31 vm.currentCategory = null;
  32 + vm.loadingContent = null;
32 33
33 vm.ArticleService.getHome(function(data){ 34 vm.ArticleService.getHome(function(data){
34 vm.categories = data.article.categories; 35 vm.categories = data.article.categories;
src/app/pages/programas/programa.html
  Diff comments   View file @ef175cf
@@ -34,6 +34,5 @@ @@ -34,6 +34,5 @@
34 <div ng-if="pagePrograma.program"> 34 <div ng-if="pagePrograma.program">
35 <programa-box program="pagePrograma.program" display="'preview'"></programa-box> 35 <programa-box program="pagePrograma.program" display="'preview'"></programa-box>
36 </div> 36 </div>
37 - <div id="content" ng-bind-html="pagePrograma.program.body"></div>  
38 </div> 37 </div>
39 38
src/app/pages/programas/programas.scss
  Diff comments   View file @ef175cf
@@ -7,6 +7,10 @@ @@ -7,6 +7,10 @@
7 7
8 &--item { 8 &--item {
9 margin: 8px 0; 9 margin: 8px 0;
  10 +
  11 + @media (max-width: $screen-xs) {
  12 + margin: 8px;
  13 + }
10 } 14 }
11 15
12 .navbar { 16 .navbar {
@@ -28,4 +32,7 @@ @@ -28,4 +32,7 @@
28 } 32 }
29 } 33 }
30 34
  35 +.program--aside {
  36 + margin-top: 20px;
  37 +}
31 38