share-menu.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<!-- neon-animation is deprecated! going to remove the dependency as soon as paper-dialog gets updated -->
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/neon-animation.html">
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/scale-down-animation.html">
<link rel="import" href="social-icons.html">

<script src="../clipboard/dist/clipboard.min.js"></script>

<dom-module id="share-menu">
  <template>
    <style>
      [hidden] {
        display: none !important;
      }
      #shareDialog {
        max-width: 480px;
        @apply --share-dialog;
      }
      #copyDialog {
        @apply --copy-dialog;
      }
      #shareDialog, #copyDialog {
        background-color: var(--dialog-background-color, white);
      }
      #urlHeader, #dialogTitle, .social > div {
        color: var(--dialog-text-color, black);
      }
      #copySuccess {
        --paper-toast-background-color: var(--toast-background-color, #323232);
        --paper-toast-color: var(--toast-text-color, #f1f1f1);
      }
      #dialogTitle {
        padding: 16px;
        margin: 0;
        @apply --paper-font-title;
        @apply --dialog-title;
      }
      #shareButtons {
        border-top: 1px solid rgba(128, 128, 128, .5);
        display: block;
        text-align: center;
        margin: auto;
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - 126px);
      }
      @media (orientation: landscape) {
        #shareButtons {
          max-height: 50vh;
        }
      }
      @media (orientation: portrait) {
        #shareButtons {
          max-height: 60vh;
        }
      }
      .social {
        display: inline-block;
        width: 72px;
        margin: 8px 4px;
        text-align: center;
      }
      .social > div {
        @apply --paper-font-caption;
        margin-top: 8px;
        color: black;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        @apply --social-text;
      }
      .icon {
        cursor: pointer;
        width: 64px;
        height: 64px;
        padding: 16px;
        color: white;
        border-radius: 50%;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        -webkit-transition: box-shadow .2s;
        -moz-transition: box-shadow .2s;
        -ms-transition: box-shadow .2s;
        -o-transition: box-shadow .2s;
        transition: box-shadow .2s;
        @apply --social-icon;
      }
      .icon:hover, .icon:focus {
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.14), 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 6px 2px -4px rgba(0, 0, 0, 0.2);
      }
      .icon:active {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      }
      #clipboard {
        background-color: #777;
      }
      #urlHeader {
        font-weight: 700;
        @apply --clipboard-fallback-url-header;
      }
      #urlContainer {
        text-align: center;
      }
      #url {
        display: inline-block;
        padding: 4px 12px;
        border-bottom: 1px solid rgba(128, 128, 128, .5);
        text-decoration: none;
        max-width: calc(100% - 72px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--clipboard-fallback-url-color, #ff6d00);
        @apply --clipboard-fallback-url;
      }
      #url:hover, #url:focus {
        text-decoration: underline;
      }
    </style>

    <paper-toast id="copySuccess" text="[[copySuccessText]]"></paper-toast>
    <paper-dialog id="copyDialog" entry-animation="scale-up-animation" exit-animation="scale-down-animation" with-backdrop="[[!withoutBackdrop]]">
      <div id="urlHeader">[[copyFailedText]]</div>
      <div id="urlContainer">
        <a href$="[[url]]" id="url">[[url]]</a>
      </div>
    </paper-dialog>

    <paper-dialog id="shareDialog" entry-animation="scale-up-animation" exit-animation="scale-down-animation" with-backdrop="[[!withoutBackdrop]]">
      <h2 id="dialogTitle">[[dialogTitle]]</h2>
      <paper-dialog-scrollable id="shareButtons">

        <dom-if if="[[_isEnabledServices(enabledServices, 'clipboard')]]">
          <template>
            <div class="social" title="Copy to clipboard">
              <paper-icon-button
                  icon="social:clipboard"
                  class="icon"
                  id="clipboard"
                  data-clipboard-text$="[[_fullText]]">
              </paper-icon-button>
              <div hidden$="[[hideLabels]]">Clipboard</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'facebook')]]">
          <template>
            <div class="social" title="Facebook">
              <paper-icon-button class="icon" icon="social:facebook" style="background-color: #3b5998;" id="facebook"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Facebook</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'twitter')]]">
          <template>
            <div class="social" title="Twitter">
              <paper-icon-button class="icon" icon="social:twitter" style="background-color: #1da1f2;" id="twitter"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Twitter</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'whatsapp')]]">
          <template>
            <div class="social" title="WhatsApp">
              <paper-icon-button class="icon" icon="social:whatsapp" style="background-color: #25d366;" id="whatsapp"></paper-icon-button>
              <div hidden$="[[hideLabels]]">WhatsApp</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'telegram')]]">
          <template>
            <div class="social" title="Telegram">
              <paper-icon-button class="icon" icon="social:telegram" style="background-color: #0088cc;" id="telegram"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Telegram</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'linkedin')]]">
          <template>
            <div class="social" title="LinkedIn">
              <paper-icon-button class="icon" icon="social:linkedin" style="background-color: #0077b5;" id="linkedin"></paper-icon-button>
              <div hidden$="[[hideLabels]]">LinkedIn</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'gplus')]]">
          <template>
            <div class="social" title="Google+">
              <paper-icon-button class="icon" icon="social:gplus" style="background-color: #dd4b39;" id="gplus"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Google+</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'pinterest')]]">
          <template>
            <div class="social" title="Pinterest" hidden$="[[!_urlIsImage]]">
              <paper-icon-button class="icon" icon="social:pinterest" style="background-color: #bd081c;" id="pinterest"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Pinterest</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'tumblr')]]">
          <template>
            <div class="social" title="Tumblr">
              <paper-icon-button class="icon" icon="social:tumblr" style="background-color: #35465c;" id="tumblr"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Tumblr</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'reddit')]]">
          <template>
            <div class="social" title="Reddit">
              <paper-icon-button class="icon" icon="social:reddit" style="background-color: #ff4500;" id="reddit"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Reddit</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'vk')]]">
          <template>
            <div class="social" title="VK">
              <paper-icon-button class="icon" icon="social:vk" style="background-color: #45668e;" id="vk"></paper-icon-button>
              <div hidden$="[[hideLabels]]">VK</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'skype')]]">
          <template>
            <div class="social" title="Skype">
              <paper-icon-button class="icon" icon="social:skype" style="background-color: #00aff0;" id="skype"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Skype</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'viber')]]">
          <template>
            <div class="social" title="Viber">
              <paper-icon-button class="icon" icon="social:viber" style="background-color: #59267c;" id="viber"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Viber</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'line')]]">
          <template>
            <div class="social" title="Line">
              <paper-icon-button class="icon" icon="social:line" style="background-color: #00c300;" id="line"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Line</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'qzone')]]">
          <template>
            <div class="social" title="Qzone">
              <paper-icon-button class="icon" icon="social:qzone" style="background-color: #ffce00;" id="qzone"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Qzone</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'wordpress')]]">
          <template>
            <div class="social" title="WordPress">
              <paper-icon-button class="icon" icon="social:wordpress" style="background-color: #0087be;" id="wordpress"></paper-icon-button>
              <div hidden$="[[hideLabels]]">WordPress</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'blogger')]]">
          <template>
            <div class="social" title="Blogger">
              <paper-icon-button class="icon" icon="social:blogger" style="background-color: #f57d00;" id="blogger"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Blogger</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'flipboard')]]">
          <template>
            <div class="social" title="Flipboard">
              <paper-icon-button class="icon" icon="social:flipboard" style="background-color: #e12828;" id="flipboard"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Flipboard</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'evernote')]]">
          <template>
            <div class="social" title="Evernote">
              <paper-icon-button class="icon" icon="social:evernote" style="background-color: #2dbe60;" id="evernote"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Evernote</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'myspace')]]">
          <template>
            <div class="social" title="Myspace">
              <paper-icon-button class="icon" icon="social:myspace" style="background-color: black;" id="myspace"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Myspace</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'pocket')]]">
          <template>
            <div class="social" title="Pocket">
              <paper-icon-button class="icon" icon="social:pocket" style="background-color: #ef4056;" id="pocket"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Pocket</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'livejournal')]]">
          <template>
            <div class="social" title="LiveJournal">
              <paper-icon-button class="icon" icon="social:livejournal" style="background-color: #004359;" id="livejournal"></paper-icon-button>
              <div hidden$="[[hideLabels]]">LiveJournal</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'instapaper')]]">
          <template>
            <div class="social" title="Instapaper">
              <paper-icon-button class="icon" icon="social:instapaper" style="background-color: black;" id="instapaper"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Instapaper</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'baidu')]]">
          <template>
            <div class="social" title="Baidu">
              <paper-icon-button class="icon" icon="social:baidu" style="background-color: #2529d8;" id="baidu"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Baidu</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'okru')]]">
          <template>
            <div class="social" title="OK.ru">
              <paper-icon-button class="icon" icon="social:okru" style="background-color: #ee8208;" id="okru"></paper-icon-button>
              <div hidden$="[[hideLabels]]">OK.ru</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'xing')]]">
          <template>
            <div class="social" title="XING">
              <paper-icon-button class="icon" icon="social:xing" style="background-color: #026466;" id="xing"></paper-icon-button>
              <div hidden$="[[hideLabels]]">XING</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'delicious')]]">
          <template>
            <div class="social" title="Delicious">
              <paper-icon-button class="icon" icon="social:delicious" style="background-color: #3399ff;" id="delicious"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Delicious</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'buffer')]]">
          <template>
            <div class="social" title="Buffer">
              <paper-icon-button class="icon" icon="social:buffer" style="background-color: #323b43;" id="buffer"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Buffer</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'digg')]]">
          <template>
            <div class="social" title="Digg">
              <paper-icon-button class="icon" icon="social:digg" style="background-color: #005be2;" id="digg"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Digg</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'douban')]]">
          <template>
            <div class="social" title="Douban">
              <paper-icon-button class="icon" icon="social:douban" style="background-color: #007610;" id="douban"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Douban</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'stumbleupon')]]">
          <template>
            <div class="social" title="StumbleUpon">
              <paper-icon-button class="icon" icon="social:stumbleupon" style="background-color: #eb4924;" id="stumbleupon"></paper-icon-button>
              <div hidden$="[[hideLabels]]">StumbleUpon</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'renren')]]">
          <template>
            <div class="social" title="Renren">
              <paper-icon-button class="icon" icon="social:renren" style="background-color: #005baa;" id="renren"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Renren</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'weibo')]]">
          <template>
            <div class="social" title="Weibo">
              <paper-icon-button class="icon" icon="social:weibo" style="background-color: #df2029;" id="weibo"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Weibo</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'print')]]">
          <template>
            <div class="social" title="Print">
              <paper-icon-button class="icon" icon="social:print" style="background-color: #425563;" id="print"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Print</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'translate')]]">
          <template>
            <div class="social" title="Translate">
              <paper-icon-button class="icon" icon="social:translate" style="background-color: #4285f4;" id="translate"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Translate</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'yahoo')]]">
          <template>
            <div class="social" title="Yahoo!">
              <paper-icon-button class="icon" icon="social:yahoo" style="background-color: #410093;" id="yahoo"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Yahoo!</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'sms')]]">
          <template>
            <div class="social" title="SMS">
              <paper-icon-button class="icon" icon="social:sms" style="background-color: #43695b;" id="sms"></paper-icon-button>
              <div hidden$="[[hideLabels]]">SMS</div>
            </div>
          </template>
        </dom-if> 
        <dom-if if="[[_isEnabledServices(enabledServices, 'email')]]">
          <template>
            <div class="social" title="Email">
              <paper-icon-button class="icon" icon="social:email" style="background-color: #ffa930;" id="email"></paper-icon-button>
              <div hidden$="[[hideLabels]]">Email</div>
            </div>
          </template>
        </dom-if> 
      </paper-dialog-scrollable>
    </paper-dialog>

  </template>

  <script>
    /**
     * `share-menu` is a complete and simple to use share menu for Polymer 2 that uses
     * [Web Share API](https://developers.google.com/web/updates/2016/10/navigator-share) when possible,
     * with a fallback to a nice share menu that tries to emulate the experience of the native one.
     *
     * -----------------------------------------------------------------------------------------------------------------
     *
     * Here you can see the list of the supported socials, as well as the limitations that each one gives:
     *
     * - Baidu - _URL and title only_
     * - Blogger
     * - Buffer - _URL and title only_
     * - Copy to clipboard
     * - Delicious - _URL and title only_
     * - Digg - _URL and title only_
     * - Douban - _URL and title only_
     * - Email
     * - Evernote - _URL only_
     * - Facebook - _URL only if not using a Facebook App with the `facebook-app-id` parameter_
     * - FlipBoard - _URL and title only_
     * - Google+ - _URL only_
     * - Instapaper
     * - Line - _URL only_
     * - LinkedIn
     * - LiveJournal
     * - Myspace
     * - Odnoklassniki (OK.ru) - _URL and title only_
     * - Pinterest - _Will only be visible if the URL is an image. Look for the `isImage` parameter on the API docs for more info_
     * - Pocket - _URL only_
     * - Print - _Only prints the page at the given URL_
     * - QZone - _URL only_
     * - Reddit - _Shares an URL if there is no text provided, otherwise a text with the URL appended at the end will be shared._
     * - RenRen - _Currently disabled because it does not seem to work
     * - Skype - _URL only_
     * - SMS
     * - StumbleUpon - _URL and title only_
     * - Telegram
     * - Translate - _Only translates the page at the given URL_
     * - Tumblr
     * - Twitter
     * - Viber
     * - VKontakte - _URL only_
     * - Weibo
     * - WhatsApp
     * - WordPress
     * - Xing - _URL only_
     * - Yahoo
     *
     * _The `via` parameter will only be used by Delicious, LinkedIn and Twitter._
     *
     * -----------------------------------------------------------------------------------------------------------------
     *
     * Example usage:
     * ```html
     * <share-menu title="Ohai!" text="Hello, World!" url="https://www.example.com/"></share-menu>
     * ```
     *
     * -----------------------------------------------------------------------------------------------------------------
     *
     * _Browse the [API docs](https://www.webcomponents.org/element/Dabolus/share-menu) for a fully working example._
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ShareMenu extends Polymer.GestureEventListeners(Polymer.Element) {
      static get is() {
        return 'share-menu';
      }

      static get properties() {
        return {
          /**
           * The title of the content you want to share.
           */
          title: {
            type: String,
            value: document.title,
            reflectToAttribute: true,
          },
          /**
           * The body of the content you want to share.
           */
          text: {
            type: String,
            // So we avoid that ugly 'undefined' value
            value: '',
            reflectToAttribute: true,
          },
          /**
           * The URL of the content you want to share.
           */
          url: {
            type: String,
            value: () => {
              const canonical = document.querySelector('link[rel=canonical]');
              if (canonical && canonical.href)
                return canonical.href;
              return window.location.href;
            },
            observer: '_urlChanged',
            reflectToAttribute: true,
          },
          /**
           * The title of the dialog displayed if the user browser does not support the Web Share API.
           */
          dialogTitle: {
            type: String,
            value: 'Share',
          },
          /**
           * The text displayed in the toast when the content is successfully copied to clipboard.
           */
          copySuccessText: {
            type: String,
            value: 'Copied to clipboard',
          },
          /**
           * The header of the dialog displayed when the automatic copying to clipboard fails.
           */
          copyFailedText: {
            type: String,
            value: 'Unable to automatically copy to clipboard. Please, copy your link manually:',
          },
          /**
           * Your Facebook App ID. Use it if you want to give the final user a better experience
           * when he tries to share the content on Facebook.
           *
           * You can get one [here](https://developers.facebook.com/apps/).
           */
          facebookAppId: String,
          /**
           * The provider of the content.
           * For Twitter, this should be the tag of your/your application account.
           */
          via: {
            type: String,
            value: '',
            reflectToAttribute: true,
          },
          /**
           * Used to tell if the URL is an image or not.
           * It can have three different values:
           *
           * - "no"|false|0  _(default)_ - the URL is not an image (or it should be considered as a normal URL even if it is an image)
           * - "yes"|true|1 - the URL **IS** an image, so it will always be treated as such
           * - "auto" - autodetect whether the URL is an image or not. This may cause a lot of extra network traffic, so **only use it if really necessary**.
           */
          isImage: {
            type: String,
            value: 'no',
            observer: '_isImageChanged',
            reflectToAttribute: true,
          },
          /**
           * Set to true if you want to hide the socials' labels from the fallback menu.
           */
          hideLabels: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
          },
          /**
           * Set to true if you want to hide the fallback dialogs' backdrop.
           */
          withoutBackdrop: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
          },
          /**
           * Array of enabled service id
           */
          enabledServices: {
            type: Array,
            value: () => [],
          },
          _fullText: {
            type: String,
            readOnly: true,
            computed: '_computeFullText(title, text, url)',
          },
          _nativeShare: {
            type: Boolean,
            readOnly: true,
            value: navigator.share !== undefined,
          },
          _secureContext: {
            type: Boolean,
            readOnly: true,
            value: window.isSecureContext || window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.hostname === '[::1]',
          },
          _urlIsImage: {
            type: Boolean,
            value: false,
          },
        };
      }

      connectedCallback() {
        super.connectedCallback();

        if (!this._nativeShare || !this._secureContext) {
          if (this.facebookAppId) {
            const appId = this.facebookAppId;
            window.fbAsyncInit = function() {
              FB.init({
                appId            : appId,
                autoLogAppEvents : true,
                xfbml            : true,
                version          : 'v2.10'
              });
              FB.AppEvents.logPageView();
            };
            (function(d, s, id){
              let js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) {return;}
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));


            if (this._isEnabledServices(this.enabledServices, 'twitter')) {
              // Twitter script
              const twitterScript = document.createElement('script');
              twitterScript.src = 'https://platform.twitter.com/widgets.js';
              twitterScript.async = 'async';
              twitterScript.defer = 'defer';
              document.head.appendChild(twitterScript);
            }
          }

          if (this._isEnabledServices(this.enabledServices, 'clipboard')) {
            // Setup the copy to clipboard
            Polymer.dom.flush();
            const copySuccess = this.shadowRoot.querySelector('#copySuccess');
            const copyDialog = this.shadowRoot.querySelector('#copyDialog');
            const clipboard = new Clipboard(this.shadowRoot.querySelector('#clipboard'));
            clipboard.on('success', () => {
              copySuccess.open();
            });
            clipboard.on('error', e => {
              console.error(e);
              copyDialog.open();
            });
          }
          const socials = this.shadowRoot.querySelectorAll('.social > paper-icon-button');
          for (let social of socials) {
            if (social.id !== 'clipboard')
              Polymer.Gestures.addListener(social, 'tap', () => this[`_${social.id}Tap`]())
          }
        }
      }

      /**
       * Displays the share dialog with the `title`, `text`, and `url` provided as parameters.
       */
      share() {
        if (this._nativeShare && this._secureContext) {
          navigator.share({
            title: this.title,
            text: this.text,
            url: this.url,
          }).catch(error => console.error);
        } else
          this.$.shareDialog.open();
      }

      _baiduTap() {
        ShareMenu._openWindow(`http://cang.baidu.com/do/add?it=${encodeURIComponent(this.title)}&iu=${encodeURIComponent(this.url)}`);
      }

      _bloggerTap() {
        ShareMenu._openWindow(`https://www.blogger.com/blog-this.g?u=${encodeURIComponent(this.url)}&n=${encodeURIComponent(this.title)}&t=${encodeURIComponent(this.text)}`);
      }

      _bufferTap() {
        ShareMenu._openWindow(`https://buffer.com/add?text=${encodeURIComponent(this.title)}&url=${encodeURIComponent(this.url)}`);
      }

      _deliciousTap() {
        ShareMenu._openWindow(`https://del.icio.us/save?v=5&provider=${encodeURIComponent(this.via)}&noui&jump=close&url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _diggTap() {
        ShareMenu._openWindow(`https://digg.com/submit?url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _doubanTap() {
        ShareMenu._openWindow(`https://www.douban.com/recommend/?url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _emailTap() {
        window.open(`mailto:?subject=${encodeURIComponent(this.title)}&body=${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`, '_self');
      }

      _evernoteTap() {
        ShareMenu._openWindow(`https://www.evernote.com/clip.action?url=${encodeURIComponent(this.url)}`);
      }

      _facebookTap() {
        if (FB)
          FB.ui({
            method: 'share',
            quote: this.text,
            href: this.url,
            mobile_iframe: true,
          });
        else
          ShareMenu._openWindow(`https://www.facebook.com/sharer.php?u=${encodeURIComponent(this.url)}&description=${encodeURIComponent(this.title)}%0A%0A${encodeURIComponent(this.text)}`);
      }

      _flipboardTap() {
        ShareMenu._openWindow(`https://share.flipboard.com/bookmarklet/popout?v=2&title=${encodeURIComponent(this.title)}&url=${encodeURIComponent(this.url)}`);
      }

      _gplusTap() {
        ShareMenu._openWindow(`https://plus.google.com/share?url=${encodeURIComponent(this.url)}`);
      }

      _instapaperTap() {
        ShareMenu._openWindow(`https://www.instapaper.com/edit?url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}&description=${encodeURIComponent(this.text)}`);
      }

      _lineTap() {
        ShareMenu._openWindow(`https://lineit.line.me/share/ui?url=${encodeURIComponent(this.url)}`);
      }

      _linkedinTap() {
        ShareMenu._openWindow(`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}&summary=${encodeURIComponent(this.text)}&source=${encodeURIComponent(this.via)}`);
      }

      _livejournalTap() {
        ShareMenu._openWindow(`http://www.livejournal.com/update.bml?subject=${encodeURIComponent(this.title)}&event=${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`);
      }

      _myspaceTap() {
        ShareMenu._openWindow(`https://myspace.com/post?u=${encodeURIComponent(this.url)}&t=${encodeURIComponent(this.title)}&c=${encodeURIComponent(this.text)}`);
      }

      _okruTap() {
        ShareMenu._openWindow(`https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _pinterestTap() {
        // Kinda hacky
        const button = document.createElement('button');
        button.onclick = () => {
          const script = document.createElement('script');
          script.src = `https://assets.pinterest.com/js/pinmarklet.js?r=${Math.random()*99999999}`;
          document.body.appendChild(script);
        };
        button.style.display = 'none';
        const img = document.createElement('img');
        img.src = this.url;
        img.alt = this.text;
        img.title = this.title;
        img.style.width = '400px';
        img.style.height = 'auto';
        button.appendChild(img);
        document.body.appendChild(button);
        button.click();
      }

      _pocketTap() {
        ShareMenu._openWindow(`https://getpocket.com/save?url=${encodeURIComponent(this.url)}`);
      }

      _printTap() {
        ShareMenu._openWindow(this.url).print();
      }

      _qzoneTap() {
        ShareMenu._openWindow(`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(this.url)}`);
      }

      _redditTap() {
        if (this.text)
          ShareMenu._openWindow(`https://reddit.com/submit?text=${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
        else
          ShareMenu._openWindow(`https://reddit.com/submit?url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _renrenTap() {
        ShareMenu._openWindow(`http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}%0A${encodeURIComponent(this.text)}`);
      }

      _skypeTap() {
        ShareMenu._openWindow(`https://web.skype.com/share?url=${encodeURIComponent(this.url)}`);
      }

      _smsTap() {
        let separator = '?';
        // iOS uses two different separators, so we have to check the iOS version and use the proper one
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
          const v = (navigator.appVersion).match(/OS (\d+)/);
          separator = parseInt(v[1], 10) < 8 ? ';' : '&';
        }
        window.open(`sms:${separator}body=${encodeURIComponent(this.title)}%0A%0A${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`, '_self');
      }

      _stumbleuponTap() {
        ShareMenu._openWindow(`https://www.stumbleupon.com/submit?url=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}`);
      }

      _telegramTap() {
        ShareMenu._openWindow(`https://t.me/share/url?url=${encodeURIComponent(this.url)}&text=**${encodeURIComponent(this.title)}**%0A${encodeURIComponent(this.text)}`);
      }

      _translateTap() {
        const userLang = (navigator.language || navigator.userLanguage).substr(0, 2);
        ShareMenu._openWindow(`https://translate.google.it/translate?hl=${userLang}&sl=auto&u=${encodeURIComponent(this.url)}`);
      }

      _tumblrTap() {
        ShareMenu._openWindow(`https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(this.url)}&title=${encodeURIComponent(this.title)}&caption=${encodeURIComponent(this.text)}`);
      }

      _twitterTap() {
        ShareMenu._openWindow(`https://twitter.com/intent/tweet?text=${encodeURIComponent(this.title)}%0A${encodeURIComponent(this.text)}&url=${encodeURIComponent(this.url)}&via=${encodeURIComponent(this.via)}`);
        // Alternative method
        //window.open(`twitter://post?text=${encodeURIComponent(this.title)}%0A${encodeURIComponent(this.text)}+${encodeURIComponent(this.url)}+via+%40${encodeURIComponent(this.via)}`, '_self');
      }

      _viberTap() {
        window.open(`viber://forward?text=${encodeURIComponent(this.title)}%0A%0A${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`, '_self');
      }

      _vkTap() {
        ShareMenu._openWindow(`https://vk.com/share.php?url=${encodeURIComponent(this.url)}`);
      }

      _weiboTap() {
        ShareMenu._openWindow(`http://service.weibo.com/share/share.php?url=${encodeURIComponent(this.url)}&appkey=&title=${encodeURIComponent(this.title)}%0A%0A${encodeURIComponent(this.text)}&pic=&ralateUid=`);
      }

      _whatsappTap() {
        const windowWeb = window.open(`https://web.whatsapp.com://send?text=*${encodeURIComponent(this.title)}*%0A%0A${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`, "whatsappWeb");
         if (windowWeb.location.href == "about:blank") {
           const windowApp = window.open(`whatsapp://send?text=*${encodeURIComponent(this.title)}*%0A%0A${encodeURIComponent(this.text)}%0A%0A${encodeURIComponent(this.url)}`, "whatsappApp");
         }
      }

      _wordpressTap() {
        const img = this._urlIsImage ? `&i=${encodeURIComponent(this.url)}` : '';
        ShareMenu._openWindow(`https://wordpress.com/press-this.php?u=${encodeURIComponent(window.location.href)}&t=${encodeURIComponent(this.title)}&s=${encodeURIComponent(this.text)}${img}`);
      }

      _xingTap() {
        ShareMenu._openWindow(`https://www.xing.com/app/user?op=share&url=${encodeURIComponent(this.url)}`);
      }

      _yahooTap() {
        ShareMenu._openWindow(`https://compose.mail.yahoo.com/?body=${encodeURIComponent(this.title)}%0A%0A${encodeURIComponent(this.text)}%0A%0A%${encodeURIComponent(this.url)}`);
      }

      static _openWindow(url) {
        return window.open(
          url,
          '_blank',
          `width=${screen.width/2},height=${screen.height/2},left=${screen.width/4},top=${screen.height/4},menubar=0,status=0,titlebar=0,toolbar=0`,
          false
        );
      }

      _computeFullText(title, text, url) {
        return `${title}\n\n${text}\n\n${url}`;
      }

      _urlChanged(newUrl, oldUrl) {
        if (this.isImage !== 'auto' || newUrl === oldUrl)
          return;
        const img = new Image();
        img.addEventListener('load', () => this._urlIsImage = true);
        img.addEventListener('error', () => this._urlIsImage = false);
        img.src = newUrl;
      }

      _isImageChanged(newValue, oldValue) {
        switch (newValue) {
          case oldValue:
            break;
          case 'yes':
          case 'true':
          case '1':
            this._urlIsImage = true;
            break;
          case 'no':
          case 'false':
          case '0':
            this._urlIsImage = false;
            break;
          default:
            this.isImage = 'auto';
            break;
        }
      }

      _isEnabledServices(enabledServices, id) {
        if (enabledServices && (enabledServices.length === 0 || enabledServices.indexOf(id) !== -1)) {
          return true;
        }
        return false;
      }
    }

    window.customElements.define(ShareMenu.is, ShareMenu);
  </script>
</dom-module>