JSFiddle - React, Tailwind, and code Playground

Fliplet Native 2 override for Fliplet Studio 1 apps' links

by tonytlwu

HTML

<h2>1. Testing <code>navigateTo()</code> override</h2>
<p>1.1. Open http://google.com</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('http://google.com')">Run</a></p>
<p>1.2. Open https://google.com</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('https://google.com')">Run</a></p>
<p>1.3. Call Tony</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('tel:07900000798')">Run</a></p>
<p>1.4. Text Tony</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('sms:07900000798')">Run</a></p>
<p>1.5. Send email to 1 email address</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('mailto:[email protected]')">Run</a></p>
<p>1.6. Send email to 2 email addresses with predefined subject (including space character), 2 CC addresses, 1 BCC and email body with line breaks</p>
<p><a class="btn btn-primary" href="#" onclick="navigateTo('mailto:[email protected],[email protected]?subject=Join%20me%20now&[email protected];[email protected]&[email protected]&body=Line%201&body=&body=Line%203')">Run</a></p>
<h2>2. Testing plain <code>&lt;a&gt;</code> links</h2>
<p>2.1. Do nothing (# link)</p>
<p><a class="btn btn-primary" href="#">Run</a></p>
<p>2.2. Open http://google.com</p>
<p><a class="btn btn-primary" href="http://google.com">Run</a></p>
<p>2.3. Open https://google.com</p>
<p><a class="btn btn-primary" href="https://google.com">Run</a></p>
<p>2.4. Call Tony</p>
<p><a class="btn btn-primary" href="tel:07900000798">Run</a></p>
<p>2.5. Text Tony</p>
<p><a class="btn btn-primary" href="sms:07900000798">Run</a></p>
<p>2.6. Send email to 1 email address</p>
<p><a class="btn btn-primary" href="mailto:[email protected]">Run</a></p>
<p>2.7. Send email to 2 email addresses with predefined subject (including space character), 2 CC addresses, 1 BCC and email body with line breaks</p>
<p><a class="btn btn-primary"...

CSS

</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>

JavaScript

// See gist at https://gist.github.com/tonytlwu/d134b6ee8d0e7fab901f6d4e9b6af90e

(function(){

  var mailtoUrlToMailtoObj = function(mailtoUrl){
		var parameters = {};
    var to = '';
  	if (mailtoUrl.indexOf('?') > -1) {
    	to = mailtoUrl.substring(mailtoUrl.indexOf(':')+1,mailtoUrl.indexOf('?'))
    	parameters = mailtoUrl.substring(mailtoUrl.indexOf('?')+1);
      parameters = parameters.split('&');
      var obj = {};
      for (var i = 0, l = parameters.length; i < l; i++) {
        if (parameters[i].indexOf('=') > -1) {
        	var key = parameters[i].split('=')[0];
          var value = decodeURIComponent(parameters[i].split('=')[1]);
          if (obj.hasOwnProperty(key)) {
          	if (obj[key].constructor.name !== 'Array') {
            	obj[key] = [obj[key]];
            }
            obj[key].push(value);
          } else {
            obj[key] = value;
          }
        } else {
        	obj[parameters[i]] = true;
        }
      }
      parameters = obj;
    } else {
    	to = mailtoUrl.substring(mailtoUrl.indexOf(':')+1);
    }

    var mailtoObj = {
      to:          to.split(','), // email addresses for TO field
      cc:          parameters.hasOwnProperty('cc') ? parameters.cc.split(';') : [], // email addresses for CC field
      bcc:         parameters.hasOwnProperty('bcc') ? parameters.bcc.split(';') : [], // email addresses for BCC field
      attachments: [], // file paths or base64 data streams
      subject:    parameters.hasOwnProperty('subject') ? parameters.subject : '', // subject of the email
      body:       parameters.hasOwnProperty('body') ? ( parameters.body.constructor.name === 'Array' ? parameters.body.join('\n') : parameters.body ) : '', // email body (for HTML, set isHtml to true)
      isHtml:    Boolean, // indicats if the body is HTML or plain text
    };

    return mailtoObj;
  }

	var email = function(mailtoUrl, callback, scope){
  	var mailtoObj = mailtoUrlToMailtoObj(mailtoUrl);
   ...