Commit 432f8dc0fa9e9ecf3df073faa06a398553970e9a

Authored by Leonardo Merlin
1 parent 73273817

Add directive: social-share

src/app/components/socialShare/socialShare.directive.js 0 → 100644
... ... @@ -0,0 +1,33 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('socialShare', socialShare);
  7 +
  8 + /** @ngInject */
  9 + function socialShare() {
  10 + var directive = {
  11 + restrict: 'E',
  12 + templateUrl: 'app/components/socialShare/socialShare.html',
  13 + scope: {
  14 + display: '='
  15 + },
  16 + controller: SocialShareController,
  17 + controllerAs: 'vm',
  18 + bindToController: true
  19 + };
  20 +
  21 + return directive;
  22 +
  23 + /** @ngInject */
  24 + function SocialShareController($log) {
  25 + $log.debug('SocialShareController');
  26 +
  27 + var vm = this;
  28 +
  29 + vm.displayFull = (vm.display && vm.display === 'full');
  30 + }
  31 + }
  32 +
  33 +})();
... ...
src/app/components/socialShare/socialShare.html 0 → 100644
... ... @@ -0,0 +1,43 @@
  1 +<div class="social-share">
  2 +
  3 + <p ng-if="vm.displayFull" class="social-share--description">
  4 + <span>COMPARTILHE</span>
  5 + <br>
  6 + <span>ESTE PROGRAMA</span>
  7 + </p>
  8 + <ul>
  9 + <li>
  10 + <a ng-href="{{vm.social.facebook.href}}"
  11 + data-caption="{{vm.social.facebook.caption}}"
  12 + data-description="{{vm.social.facebook.description}}">
  13 + <span class="icon icon-social-facebook"></span>
  14 + <span class="sr-only">Compartilhar no Facebook</span>
  15 + </a>
  16 + </li>
  17 + <li>
  18 + <a ng-href="{{vm.social.twitter.href}}" target="_blank">
  19 + <span class="icon icon-social-twitter"></span>
  20 + <span class="sr-only">Compartilhar no Twitter</span>
  21 + </a>
  22 + </li>
  23 + <li>
  24 + <a ng-href="{{vm.social.googlePlus.href}}" target="_blank">
  25 + <span class="icon icon-social-google-plus"></span>
  26 + <span class="sr-only">Compartilhar no Google Plus</span>
  27 + </a>
  28 + </li>
  29 + <li>
  30 + <a ng-href="{{vm.social.whatsapp.href}}" target="_blank">
  31 + <span class="icon icon-social-whatsapp"></span>
  32 + <span class="sr-only">Compartilhar no WhatsApp</span>
  33 + </a>
  34 + </li>
  35 + </ul>
  36 +</div>
  37 +
  38 +<!-- <ul>
  39 + <li><a href="http://dialoga.gov.br/#/programas/121492/sobre-o-programa" class="fb-share icon icon-facebook" data-caption="Brasil de Todas as Telas" data-description="Apoio ao audiovisual brasileiro: ampliação da produção, da difusão e do acesso"><span class="fa fa-facebook"></span><span class="sr-only">Compartilhar no Facebook</span></a></li>
  40 + <li><a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fdialoga.gov.br%2F%23%2Fprogramas%2F121492%2Fsobre-o-programa&amp;text=Apoio ao audiovisual brasileiro: ampliação da produção, da difusão e do acesso" target="_blank" class="tw-share icon icon-twitter popup"><span class="fa fa-twitter"></span><span class="sr-only">Compartilhar no Twitter</span></a></li>
  41 + <li><a href="https://plus.google.com/share?url=http%3A%2F%2Fdialoga.gov.br%2F%23%2Fprogramas%2F121492%2Fsobre-o-programa" target="_blank" class="gp-share icon icon-gplus popup"><span class="fa fa-google-plus"></span><span class="sr-only">Compartilhar no Google Plus</span></a></li>
  42 + <li><a href="whatsapp://send?text=Apoio ao audiovisual brasileiro: ampliação da produção, da difusão e do acesso http%3A%2F%2Fdialoga.gov.br%2F%23%2Fprogramas%2F121492%2Fsobre-o-programa" target="_blank" class="ws-share icon icon-whatsapp"><span class="fa fa-whatsapp"></span><span class="sr-only">Compartilhar no WhatsApp</span></a></li>
  43 +</ul> -->
... ...
src/app/components/socialShare/socialShare.scss 0 → 100644
... ... @@ -0,0 +1,28 @@
  1 +.social-share {
  2 + ul {
  3 + display: inline-block;
  4 + vertical-align: middle;
  5 + list-style: none;
  6 + padding-left: 0;
  7 + }
  8 +
  9 + li{
  10 + display: inline-block;
  11 + padding: 0 2px !important;
  12 + vertical-align: top;
  13 + }
  14 +
  15 + .social-share--description {
  16 + display: inline-block;
  17 + color: #000;
  18 + font-size: 12px;
  19 + font-weight: 300;
  20 + padding-right: 10px;
  21 + text-align: right;
  22 + vertical-align: middle;
  23 + }
  24 +
  25 + .icon {
  26 + display: block;
  27 + }
  28 +}
... ...