JSFiddle - React, Tailwind, and code Playground

Native app action input

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
      <label class="label-control">Select an app</label>
      <select class="form-control" id="app">
        <option value="gdrive">Google Drive</option>
        <option value="fb">Facebook</option>
      </select>
      </div>
      <div class="form-group" id="actions-gdrive">
      <label class="label-control">Action</label>
        <p class="form-control-static">Open a folder</p>
      </div>
      <div class="form-group" id="actions-fb">
      <label class="label-control">Select an action</label>
      <select class="form-control">
        <option>Open group page</option>
        <option>Open page</option>
        <option>Open profile</option>
        <option value="new-post">New post</option>
      </select>
      </div>
      <div class="form-group" id="url">
        <label class="label-control">Paste a URL</label>
        <input type="url" class="form-control" id="url" />
        <div class="alert" id="debug"></div>
      </div>
      <div class="form-group" id="post">
        <label class="label-control">Enter post content</label>
        <textarea class="form-control"></textarea>
      </div>
    </div>
  </div>
</div>

CSS

#debug:empty {
  display: none;
}

JavaScript

var validUrlForAction = false;

$('#app').on('change', function() {
	$('#url').show();
  $('#post').hide();
  $('#debug').html('');

  if ($(this).val() === 'gdrive') {
  	$('#actions-gdrive').show();
    $('#actions-fb').hide();
  }

  if ($(this).val() === 'fb') {
    $('#actions-gdrive').hide();
    $('#actions-fb').show();
  }
}).change();

$('#actions-fb select').on('change', function(){
  if ($(this).val() === 'new-post') {
  	$('#url').hide();
    $('#post').show();
    return;
  }
  
  $('#url').show();
  $('#post').hide();
});

$('#url').on('change input', function(){
	if (!validUrlForAction) {
    $('#debug').html('URL isn\'t a valid '+$('#app option:selected').text()+' action. Your app will open this URL with the system browser instead.');
    return;
  }
  
  $('#debug').html('✅ URL is valid');
});