JSFiddle - React, Tailwind, and code Playground

by niden

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<script src="https://raw.github.com/makeusabrew/bootbox/v1.1.0/bootbox.js"></script>
<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<div class='demo' ng:app ng:controller="DocsCtrl">
    <ul class="media-grid">
      <li>
        <a ng:click="select_image({ url: 'http://implicationswheel.com/images/buttons/toolbox_icon.png' })">
        <img src="http://implicationswheel.com/images/buttons/toolbox_icon.png" alt="" />
        </a>
      </li>
      <li>
        <a ng:click="select_image({ url: 'http://implicationswheel.com/images/buttons/lightbulb_icon.png' })">
        <img src="http://implicationswheel.com/images/buttons/lightbulb_icon.png" alt="" />
        </a>
      </li>
    </ul>
    <h3>Data:</h3>
    <div>URL: {{doc.url}}</div>
    <div>Title: {{doc.title}}</div>
    <div>Description: {{doc.description}}</div>
</div>

CSS

.demo {
    padding: 10px;
}

JavaScript

DocsCtrl = function() {
  var scope;
  scope = this;
  scope.helper = new AssetCollectorHelpers();
  scope.select_image = function(image_data) {
    return bootbox.dialog(scope.helper.collection_form(image_data), [
        {
        'label': 'Cancel'
        },
        {
        'label': 'Save',
        'class': 'success',
        'callback': function() {
          return scope.save_asset(scope.helper.form_data_to_object());
        }
      }
    ]);
  };
  scope.save_asset = function(doc_data) {
      scope.doc = doc_data;
      // scope.$eval(function(scope) { scope.doc = doc_data; });
      scope.$apply();
  };
};

AssetCollectorHelpers = (function() {

  AssetCollectorHelpers.url = null;

  function AssetCollectorHelpers() {}

  AssetCollectorHelpers.prototype.collection_form = function(selected_image_data) {
    var html;
    this.url = selected_image_data.url;
    html = '<div id="collection_form">';
    html += "<img src=\"" + this.url + "\" alt=\"preview\" />";
    html += '<form class="form-stacked">';
    html += '<label for="asset-title">Title</label>';
    html += '<input type="text" id="asset-title" name="title" value="" />';
    html += '<label for="asset-description">Description</label>';
    html += '<textarea id="asset-description" name="description"></textarea>';
    html += '</form>';
    return html += '</div>';
  };

  AssetCollectorHelpers.prototype.form_data_to_object = function() {
    return {
      url: this.url,
      title: $('#collection_form #asset-title').val(),
      description: $('#collection_form #asset-description').val()
    };
  };

  return AssetCollectorHelpers;

})();