Web components of La Silla Vacía

Sharebuttons 

<div class="c-shareButtons">
    <ul class="c-shareButtons__list">
        <li class="twitter"><button>Tweet</button></li>
        <li class="facebook"><button>Share on Facebook</button></li>
        <li class="whatsapp"><a data-action="share/whatsapp/share" href="whatsapp://send?text=I'm a nice title en http://localhost:5000/">Share on WhatsApp</a></li>
        <li class="email"><a href="mailto:?subject=I'm a nice title&amp;amp;body=I'm the text thats that will be the postcontent: http://localhost:5000/">Share by e-mail</a></li>
    </ul>
    <script src="//connect.facebook.net/es_ES/all.js" type="text/javascript" charSet="utf-8"></script>
</div>
 
/* eslint-disable react/react-in-jsx-scope */
import { h, Component } from 'preact';

const ShareButtons = () => (
  <div className="c-shareButtons">
    <ul className="c-shareButtons__list">
      <li className="twitter">
        <button>
          Tweet
        </button>
      </li>
      <li className="facebook">
        <button>Share on Facebook</button>
      </li>
      <li className="whatsapp">
        <a
          data-action="share/whatsapp/share"
          href="whatsapp://send?text=I'm a nice title en http://localhost:5000/"
        >
          Share on WhatsApp
        </a>
      </li>
      <li className="email">
        <a
          href="mailto:?subject=I'm a nice title&amp;amp;body=I'm the text thats that will be the postcontent: http://localhost:5000/"
        >
          Share by e-mail
        </a>
      </li>
    </ul>
    <script src="//connect.facebook.net/es_ES/all.js" type="text/javascript" charSet="utf-8" />
  </div>
);

export default ShareButtons;
 
/* No context defined for this component. */
  • Content: 
    .c-shareButtons {
  &__list {
    padding: 0;
    margin: 0;
    list-style: none;
    & li {
      float: left;
    }
    & button,
    & a {
      background: 0;
      padding: 0;
      border: 0;
      width: 30px;
      height: 30px;
      text-indent: -9999px;
      font-size: 0;
      display: block;
    }

    & .whatsapp {
      @media (--from-small-screen) {
        display: none;
      }
    }
  }

  & .twitter button {
    background-image: url('../icons/twitter.svg');
  }

  & .facebook button {
    background-image: url('../icons/facebook.svg');
  }

  & .whatsapp a {
    background-image: url('../icons/whatsapp.svg');
  }

  & .email a {
    background-image: url('../icons/email.svg');
  }
}
  • URL: /components/raw/sharebuttons/ShareButtons.css
  • Filesystem Path: src/components/common/ShareButtons/ShareButtons.css
  • Size: 715 Bytes
  • Content: 
    (function(d) {
  const url = window.location;
  const groups = d.querySelectorAll('.c-shareButtons');
  if (groups.length) {
    for (let group of groups) {
      const twitter = group.querySelector('.twitter button');
      twitter.addEventListener('click', tweet);

      const facebook = group.querySelector('.facebook button');
      facebook.addEventListener('click', fbShare);
    }
  }

  function tweet() {
    window.open(`https://twitter.com/intent/tweet?text=${d.title} en @LaSillaVacia&url=${url}`,
      '_blank',
      'toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450');
  }

  function fbShare() {
    FB.init({
      appId: '707991449304858',
      status: true,
      xfbml: true,
      version: 'v2.4' // or v2.0, v2.1, v2.2, v2.3
    });

    FB.ui({
        // ID de la cuenta de Jerrejerre, cambiar por la de LSV
        // app_id: "866382070105753",
        app_id: '707991449304858',
        method: 'feed',
        link: url,
        name: d.title
      },
      (response) => {

        /* if (response && response.post_id) {
         alert('Post was published.');
         } else {
         alert('Post was not published.');
         }*/
      });
  }
})(document);
  • URL: /components/raw/sharebuttons/ShareButtons.js
  • Filesystem Path: src/components/common/ShareButtons/ShareButtons.js
  • Size: 1.3 KB

There are no notes for this item.