parsley/app/assets/javascripts/recipes.js

(function($) {

  function reorder($container) {
    $container.find("div.nested-fields").each(function(idx, editor) {
      var $editor = $(editor);
      $editor.find('input.sort_order').val(idx + 1).trigger("changed");
    })
  }

  function initializeStepEditor($container) {
    // $container is either an element that contains many editors, or a single editor.
    var $editors = $container.find("textarea.step").closest(".step-editor");

    $editors.each(function(idx, elem) {
      var $editor = $(elem);
      var $step = $editor.find("textarea.step");
      autosize($step);

      setTimeout(function() { autosize.update($step); }, 250);
    });
  }

  function initializeIngredientEditor($container, ingredientSearchEngine) {
    // $container is either an element that contains many editors, or a single editor.
    var $editors = $container.find(".ingredient-typeahead").closest(".nested-fields");

    $editors.each(function(idx, elem) {
      var $editor = $(elem);
      var $ingredientId = $editor.find("input.ingredient_id");
      var $customDensity = $editor.find("input.custom_density");
      var $group = $editor.find("div.typeahead-group");

      $editor.find(".ingredient-typeahead").typeahead({},
          {
            name: 'ingredients',
            source: ingredientSearchEngine,
            display: function(datum) {
              return datum.name;
            }
          });

      if ($ingredientId.val().length) {
        $customDensity.prop('disabled', true);
        $group.addClass("has-success");
      }
    });
  }

  function ingredientItemPicked($typeahead, datum) {
    var $container = $typeahead.closest(".nested-fields");
    var $ingredientId = $container.find("input.ingredient_id");
    var $customDensity = $container.find("input.custom_density");
    var $group = $container.find("div.typeahead-group");

    $ingredientId.val(datum.id);
    $typeahead.typeahead('val', datum.name);
    $customDensity.val(datum.density).prop('disabled', true);
    $group.addClass("has-success");
  }

  function ingredientNameChange($typeahead, ingredientSearchEngine) {
    var $container = $typeahead.closest(".nested-fields");
    var $ingredientId = $container.find("input.ingredient_id");
    var $customDensity = $container.find("input.custom_density");
    var $group = $container.find("div.typeahead-group");

    var id = $ingredientId.val();
    var value = $typeahead.typeahead('val');

    if (id && id.length) {
      var found = ingredientSearchEngine.get([id]);
      if (found && found[0] && found[0].name != value) {
        // User has chosen something custom
        $ingredientId.val('');
        $customDensity.val('').prop('disabled', false);

        $group.removeClass("has-success");
      }
    }
  }

  $(document).on("ready page:load", function() {

    var ingredientSearchEngine = new Bloodhound({
      datumTokenizer: function(datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      identify: function(datum) { return datum.id; },
      sorter: function(a, b) {
        if (a.name < b.name) {
          return -1;
        } else if (b.name < a.name) {
          return 1;
        } else {
          return 0;
        }
      },
      prefetch: {
        url: '/ingredients/prefetch.json',
        cache: false
      },
      remote: {
        url: '/ingredients/search.json?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    var $stepList = $("#step-list");

    initializeStepEditor($stepList);

    $stepList
        .on("cocoon:after-insert", function(e, item) {
          reorder($(this));
          initializeStepEditor(item);
        })
        .on("cocoon:after-remove", function(e, item) {
          reorder($(this));
        })
        .on('changed', 'input.sort_order', function() {
          var $this = $(this);
          var $span = $this.closest(".nested-fields").find(".sort-order-display");
          $span.html($this.val());
        });

    var $ingredientList = $("#ingredient-list");

    initializeIngredientEditor($ingredientList, ingredientSearchEngine);

    $ingredientList
        .on("cocoon:after-insert", function(e, item) {
          reorder($ingredientList);
          initializeIngredientEditor(item, ingredientSearchEngine);
        })
        .on("cocoon:after-remove", function(e, item) {
          reorder($ingredientList);
        })
        .on("typeahead:change", function(evt, value) {
          ingredientNameChange($(evt.target), ingredientSearchEngine);
        })
        .on("typeahead:select", function(evt, value) {
          ingredientItemPicked($(evt.target), value);
        })
        .on("typeahead:autocomplete", function(evt, value) {
          ingredientItemPicked($(evt.target), value);
        })
        .on("click", "button.ingredient_convert_btn", function(evt) {

        });

    $('#convert_modal')
      .on('show.bs.modal', function (event) {
        var $button = $(event.relatedTarget);
        var $modal = $(this);

        var $editor = $button.closest(".ingredient-editor");

        $modal.data('ingredient-editor', $editor);

        var $quantity = $editor.find("input.quantity");
        var $units = $editor.find("input.units");
        var $ingredientId = $editor.find("input.ingredient_id");

        var $modalQuantity = $modal.find("input.quantity");
        var $modalUnits = $modal.find("input.units");
        var $modalIngredientId = $modal.find("input.ingredient_id");

        $modalQuantity.val($quantity.val());
        $modalUnits.val($units.val());
        $modalIngredientId.val($ingredientId.val());
      })
      .on("ajax:success", "form", function(evt, data, status, xhr) {
        var $modal = $("#convert_modal");
        var $editor = $modal.data('ingredient-editor');

        if (data.success) {
          var $quantity = $editor.find("input.quantity");
          var $units = $editor.find("input.units");

          var $modalOutUnits = $modal.find("input.output_units");

          $quantity.val(data.output_quantity);
          if ($modalOutUnits.val().length) {
            $units.val($modalOutUnits.val());
          }

          $modal.modal('hide');
        } else {

        }

        $("#modal_form_container").replaceWith($(data.form_html));
      });
  });


})(jQuery);