Fix social-share. Add missing params (image, url, title, etc.)

Leonardo Merlin
1 parent a779ab01
Showing 5 changed files with 46 additions and 22 deletions Show diff stats
src/app/components/proposal-box/proposal-box.directive.js
src/app/components/proposal-box/proposal-box.html
src/app/components/social-share/social-share.directive.js
src/app/components/social-share/social-share.html
src/app/pages/programas/programa.html
@@ -205,9 +205,23 @@
       return vm.$state.href('programa', {
         slug: vm.topic.slug,
         proposal_id: vm.proposal.id,
+      }, {
+        absolute: true
       });
     };
  
+    ProposalBoxController.prototype.getSocialText = function() {
+      var vm = this;
+
+      return vm.proposal.abstract;
+    };
+
+    ProposalBoxController.prototype.getSocialImage = function() {
+      var vm = this;
+
+      return vm.$rootScope.basePath + vm.topic.image.url;
+    };
+
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/proposal-box/proposal-box.html',
@@ -30,10 +30,10 @@
                               <span class="icon icon-social-share" aria-hidden="true"></span>
                             </button>
                             <social-share
-                              url="vm.getSocialUrl()"
-                              text="vm.getSocialText()"
-                              image="vm.getSocialImage()"
-                              class="dropdown-menu dropdown-menu-right ng-isolate-scope"></social-share>
+                              social-url="vm.getSocialUrl()"
+                              social-text="vm.getSocialText()"
+                              social-image="vm.getSocialImage()"
+                              class="dropdown-menu dropdown-menu-right"></social-share>
                             </div>
                         </div>
                         <div class="col-xs-6 feedback--next">
@@ -184,6 +184,11 @@
       <div class="dropdown">
         <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
         <social-share class="dropdown-menu dropdown-menu-right"></social-share>
+        <social-share
+          social-url="vm.getSocialUrl()"
+          social-text="vm.getSocialText()"
+          social-image="vm.getSocialImage()"
+          class="dropdown-menu dropdown-menu-right"></social-share>
       </div>
     </div>
     <div class="proposal-box--ranking">
@@ -11,10 +11,11 @@
       restrict: 'E',
       templateUrl: 'app/components/social-share/social-share.html',
       scope: {
-        url: '=',
-        image: '=',
-        text: '=',
-        arrowClass: '@',
+        socialVia: '=',
+        socialUrl: '=',
+        socialImage: '=',
+        socialText: '=',
+        arrowClass: '@'
       },
       controller: SocialShareController,
       controllerAs: 'vm',
@@ -27,7 +28,13 @@
     function SocialShareController($log) {
       $log.debug('SocialShareController');
  
-      // var vm = this;
+      var vm = this;
+
+      vm.socialVia = vm.socialVia || "687948707977695"; // 476168325877872
+      vm.socialUrl = vm.socialUrl || "http://dialoga.gov.br/";
+      vm.socialImage = vm.socialImage || "http://dialoga.gov.br/images/logo.png";
+      vm.socialText = vm.socialText || "Conheça o Dialoga Brasil. Dialoga Brasil | O País fica melhor quando VOCÊ PARTICIPA.";
+
     }
   }
  
@@ -3,17 +3,15 @@
 </div>
 <ul class="social-share list-inline">
   <li>
-      <!-- socialshare-via="687948707977695" dialoga -->
-      <!-- socialshare-via="476168325877872" MyApp / Test -->
     <a href="#" role="button"
       socialshare
       socialshare-provider="facebook"
       socialshare-type="feed"
-      socialshare-via="687948707977695"
-      socialshare-url="http://dialoga.gov.br"
+      socialshare-via="vm.socialVia"
+      socialshare-url="vm.socialUrl"
       socialshare-redirect-uri="https://dialoga.gov.br/"
-      socialshare-media="http://dialoga.gov.br/images/logo.png"
-      socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil | O País fica melhor quando VOCÊ PARTICIPA."
+      socialshare-media="vm.socialImage"
+      socialshare-text="vm.socialText"
       title="Compartilhar no Facebook">
       <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
       <span class="sr-only">Compartilhar no Facebook</span>
@@ -23,8 +21,8 @@
     <a href="#" role="button"
       socialshare
       socialshare-provider="twitter"
-      socialshare-url="http://dialoga.gov.br"
-      socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil | O País fica melhor quando VOCÊ PARTICIPA."
+      socialshare-url="vm.socialUrl"
+      socialshare-text="vm.socialText"
       socialshare-hastags="dialogabrasil"
       title="Compartilhar no Twitter">
       <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
@@ -35,8 +33,8 @@
     <a href="#" role="button"
       socialshare
       socialshare-provider="google+"
-      socialshare-url="http://dialoga.gov.br"
-      socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil | O País fica melhor quando VOCÊ PARTICIPA."
+      socialshare-url="vm.socialUrl"
+      socialshare-text="vm.socialText"
       title="Compartilhar no Google Plus">
       <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-googleplus"><span class="icon icon-social-googleplus"></span></span>
       <span class="sr-only">Compartilhar no Google Plus</span>
@@ -46,9 +46,9 @@
                     <div class="dropdown">
                       <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
                       <social-share
-                        url=""
-                        text=""
-                        image=""
+                        social-url="pagePrograma.$state.href('programa', {slug: pagePrograma.article.slug}, {absolute: true})"
+                        social-text="pagePrograma.article.title"
+                        social-image="pagePrograma.banner.src"
                         arrow-class="social-share--arrow"
                         class="dropdown-menu dropdown-menu-right"
                         ></social-share>
...	...	@@ -205,9 +205,23 @@
205	205	return vm.$state.href('programa', {
206	206	slug: vm.topic.slug,
207	207	proposal_id: vm.proposal.id,
	208	+ }, {
	209	+ absolute: true
208	210	});
209	211	};
210	212
	213	+ ProposalBoxController.prototype.getSocialText = function() {
	214	+ var vm = this;
	215	+
	216	+ return vm.proposal.abstract;
	217	+ };
	218	+
	219	+ ProposalBoxController.prototype.getSocialImage = function() {
	220	+ var vm = this;
	221	+
	222	+ return vm.$rootScope.basePath + vm.topic.image.url;
	223	+ };
	224	+
211	225	var directive = {
212	226	restrict: 'E',
213	227	templateUrl: 'app/components/proposal-box/proposal-box.html',
...	...
...	...	@@ -30,10 +30,10 @@
30	30	<span class="icon icon-social-share" aria-hidden="true"></span>
31	31	</button>
32	32	<social-share
33		- url="vm.getSocialUrl()"
34		- text="vm.getSocialText()"
35		- image="vm.getSocialImage()"
36		- class="dropdown-menu dropdown-menu-right ng-isolate-scope"></social-share>
	33	+ social-url="vm.getSocialUrl()"
	34	+ social-text="vm.getSocialText()"
	35	+ social-image="vm.getSocialImage()"
	36	+ class="dropdown-menu dropdown-menu-right"></social-share>
37	37	</div>
38	38	</div>
39	39	<div class="col-xs-6 feedback--next">
...	...	@@ -184,6 +184,11 @@
184	184	<div class="dropdown">
185	185	<button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
186	186	<social-share class="dropdown-menu dropdown-menu-right"></social-share>
	187	+ <social-share
	188	+ social-url="vm.getSocialUrl()"
	189	+ social-text="vm.getSocialText()"
	190	+ social-image="vm.getSocialImage()"
	191	+ class="dropdown-menu dropdown-menu-right"></social-share>
187	192	</div>
188	193	</div>
189	194	<div class="proposal-box--ranking">
...	...
...	...	@@ -11,10 +11,11 @@
11	11	restrict: 'E',
12	12	templateUrl: 'app/components/social-share/social-share.html',
13	13	scope: {
14		- url: '=',
15		- image: '=',
16		- text: '=',
17		- arrowClass: '@',
	14	+ socialVia: '=',
	15	+ socialUrl: '=',
	16	+ socialImage: '=',
	17	+ socialText: '=',
	18	+ arrowClass: '@'
18	19	},
19	20	controller: SocialShareController,
20	21	controllerAs: 'vm',
...	...	@@ -27,7 +28,13 @@
27	28	function SocialShareController($log) {
28	29	$log.debug('SocialShareController');
29	30
30		- // var vm = this;
	31	+ var vm = this;
	32	+
	33	+ vm.socialVia = vm.socialVia \|\| "687948707977695"; // 476168325877872
	34	+ vm.socialUrl = vm.socialUrl \|\| "http://dialoga.gov.br/";
	35	+ vm.socialImage = vm.socialImage \|\| "http://dialoga.gov.br/images/logo.png";
	36	+ vm.socialText = vm.socialText \|\| "Conheça o Dialoga Brasil. Dialoga Brasil \| O País fica melhor quando VOCÊ PARTICIPA.";
	37	+
31	38	}
32	39	}
33	40
...	...
...	...	@@ -3,17 +3,15 @@
3	3	</div>
4	4	<ul class="social-share list-inline">
5	5	<li>
6		- <!-- socialshare-via="687948707977695" dialoga -->
7		- <!-- socialshare-via="476168325877872" MyApp / Test -->
8	6	<a href="#" role="button"
9	7	socialshare
10	8	socialshare-provider="facebook"
11	9	socialshare-type="feed"
12		- socialshare-via="687948707977695"
13		- socialshare-url="http://dialoga.gov.br"
	10	+ socialshare-via="vm.socialVia"
	11	+ socialshare-url="vm.socialUrl"
14	12	socialshare-redirect-uri="https://dialoga.gov.br/"
15		- socialshare-media="http://dialoga.gov.br/images/logo.png"
16		- socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil \| O País fica melhor quando VOCÊ PARTICIPA."
	13	+ socialshare-media="vm.socialImage"
	14	+ socialshare-text="vm.socialText"
17	15	title="Compartilhar no Facebook">
18	16	<span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
19	17	<span class="sr-only">Compartilhar no Facebook</span>
...	...	@@ -23,8 +21,8 @@
23	21	<a href="#" role="button"
24	22	socialshare
25	23	socialshare-provider="twitter"
26		- socialshare-url="http://dialoga.gov.br"
27		- socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil \| O País fica melhor quando VOCÊ PARTICIPA."
	24	+ socialshare-url="vm.socialUrl"
	25	+ socialshare-text="vm.socialText"
28	26	socialshare-hastags="dialogabrasil"
29	27	title="Compartilhar no Twitter">
30	28	<span aria-hidden="true" class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
...	...	@@ -35,8 +33,8 @@
35	33	<a href="#" role="button"
36	34	socialshare
37	35	socialshare-provider="google+"
38		- socialshare-url="http://dialoga.gov.br"
39		- socialshare-text="Conheça o Dialoga Brasil. Dialoga Brasil \| O País fica melhor quando VOCÊ PARTICIPA."
	36	+ socialshare-url="vm.socialUrl"
	37	+ socialshare-text="vm.socialText"
40	38	title="Compartilhar no Google Plus">
41	39	<span aria-hidden="true" class="icon-circle icon-small icon-circle-social-googleplus"><span class="icon icon-social-googleplus"></span></span>
42	40	<span class="sr-only">Compartilhar no Google Plus</span>
...	...
...	...	@@ -46,9 +46,9 @@
46	46	<div class="dropdown">
47	47	<button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
48	48	<social-share
49		- url=""
50		- text=""
51		- image=""
	49	+ social-url="pagePrograma.$state.href('programa', {slug: pagePrograma.article.slug}, {absolute: true})"
	50	+ social-text="pagePrograma.article.title"
	51	+ social-image="pagePrograma.banner.src"
52	52	arrow-class="social-share--arrow"
53	53	class="dropdown-menu dropdown-menu-right"
54	54	></social-share>
...	...