Commit ef175cf664b7f0c5a03c174c197a221cf5bbe51f
1 parent
432f8dc0
Exists in
master
and in
8 other branches
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
... | ... | @@ -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
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
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 | +} | ... | ... |
... | ... | @@ -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> | ... | ... |
... | ... | @@ -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
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss