JSFiddle - React, Tailwind, and code Playground

Fliplet Share URL

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://api.fliplet.com/sdk.js?packages=fliplet-communicate"></script>
<div class="trigger-holder">
  <p><span class="btn btn-default trigger">Trigger</span></p>
  <p><textarea class="form-control" placeholder="Paste clipboard content here to test"></textarea></p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  background: url('http://media.idownloadblog.com/wp-content/uploads/2018/01/Facebook-iOS-11-Wallpaper-3.jpeg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.trigger-holder {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  text-align: center;
}

textarea.form-control {
  width: 90%;
  margin: 0 auto;
}

/**
 * Share URL
 * --------------------------------------------------
 */

.share-backdrop {
  -webkit-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #333;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  perspective: 650px;
}

.share-backdrop.active {
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: all;
}

.android .share-backdrop.active {
  background-color: rgba(0, 0, 0, 0.2);
}

.share-wrapper {
  -webkit-transform: translate3d(0, -50%, 0) scale(1.3);
  -ms-transform: translate3d(0, -50%, 0) scale(1.3);
  transform: translate3d(0, -50%, 0) scale(1.3);
  -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 300ms;
  -ms-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 300ms;
  transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 300ms;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 15px;
  height: 72px;
  perspective: 850px;
}

@media screen and (min-width:640px) {
 ...

JavaScript

Fliplet.Navigator.copyToClipboard = function (str) {
  var dummy = document.createElement("input");
  document.body.appendChild(dummy);
  dummy.setAttribute('id', 'dummy_id');
  document.getElementById('dummy_id');
  document.getElementById('dummy_id').value = str;
  dummy.select();

  if (Modernizr.ios) {
    dummy.contentEditable = true;
    dummy.readOnly = false;

    var range = document.createRange();
    range.selectNodeContents(dummy);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    dummy.setSelectionRange(0, str.length);
  } else {
    dummy.select();
  }

  document.execCommand('copy');
  document.body.removeChild(dummy);
};


/*
 * Share content using Cordova SocialShare plugin
 * https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
 * @param {Object} options - A map of options for the function
 */
Fliplet.Communicate.share = function (options) {
  options = options || {};

  if (typeof plugins !== 'object' || typeof plugins.socialsharing === 'undefined') {
    return;
  }

  if (options.target) {
    var targetRect = target.getBoundingClientRect();
    var targetBounds = [
      targetRect.left,
      targetRect.top,
      targetRect.width,
      targetRect.height
    ].join(',');
    var opt = {
      message: options.message || '',
      subject: options.subject || '',
      files: options.files || [],
      url: options.url || '',
      chooserTitle: options.chooserTitle || ''
    };

    plugins.socialsharing.setIPadPopupCoordinates(targetBounds);
  }

  return new Promise(function (resolve, reject) {
    plugins.socialsharing.shareWithOptions(opt, resolve, reject);
  });
};

/*
 * Share a URL with 
 * @param {Object} options - A map of options for the function
 */
Fliplet.Communicate.shareURL = function (options) {
  if (typeof options === 'string') {
    options = { url: options };
  }

  options = options || {};

  if (!options.url) {
    throw new Error('A URL must be...