parsley/app/assets/javascripts/recipes.js

(function($) {

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

  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'
      }
    });

    $("#step-list")
        .on("cocoon:after-insert", function(e, item) {
          reorder($(this));
        })
        .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) {
          console.log("changed");
          ingredientNameChange($(evt.target), ingredientSearchEngine);
        })
        .on("typeahead:select", function(evt, value) {
          console.log("selected");
          ingredientItemPicked($(evt.target), value);
        })
        .on("typeahead:autocomplete", function(evt, value) {
          console.log("autocomplete");
          ingredientItemPicked($(evt.target), value);
        });
  });


})(jQuery);