UI updates
This commit is contained in:
parent
205a29ce77
commit
0cc568344e
36
app/assets/javascripts/checkable.js
Normal file
36
app/assets/javascripts/checkable.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
(function($) {
|
||||||
|
|
||||||
|
var pluginName = "checkable";
|
||||||
|
|
||||||
|
var defaultOptions = {
|
||||||
|
childrenSelector: "li",
|
||||||
|
selectedClass: "checked"
|
||||||
|
};
|
||||||
|
|
||||||
|
var methods = {
|
||||||
|
initialize: function (opts, sources) {
|
||||||
|
|
||||||
|
return this.each(function() {
|
||||||
|
var options = $.extend({}, defaultOptions, opts);
|
||||||
|
$(this).on("click", options.childrenSelector, function(evt) {
|
||||||
|
$(evt.currentTarget).toggleClass(options.selectedClass);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var privateMethods = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn[pluginName] = function (method) {
|
||||||
|
if (methods[method]) {
|
||||||
|
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||||
|
} else if (typeof method === 'object' || ! method) {
|
||||||
|
return methods.initialize.apply(this, arguments);
|
||||||
|
} else {
|
||||||
|
$.error('Method ' + method + ' does not exist on jQuery.' + pluginName);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
375
app/assets/javascripts/recipe_editor.js
Normal file
375
app/assets/javascripts/recipe_editor.js
Normal file
@ -0,0 +1,375 @@
|
|||||||
|
(function($) {
|
||||||
|
|
||||||
|
var ingredientSearchEngine = new Bloodhound({
|
||||||
|
initialize: false,
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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 $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('');
|
||||||
|
|
||||||
|
$group.removeClass("has-success");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addIngredient(quantity, units, name, ingredient_id) {
|
||||||
|
$("#ingredient-list").one("cocoon:before-insert", function(e, $container) {
|
||||||
|
var $ingredientId = $container.find("input.ingredient_id");
|
||||||
|
var $name = $container.find("input.custom_name");
|
||||||
|
var $quantity = $container.find("input.quantity");
|
||||||
|
var $units = $container.find("input.units");
|
||||||
|
|
||||||
|
$ingredientId.typeahead("val", name);
|
||||||
|
$name.val(name);
|
||||||
|
$units.val(units);
|
||||||
|
$quantity.val(quantity);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#addIngredientButton").trigger("click");
|
||||||
|
}
|
||||||
|
|
||||||
|
function addStep(step) {
|
||||||
|
$("#step-list").one("cocoon:before-insert", function(e, $container) {
|
||||||
|
var $step = $container.find("textarea.step");
|
||||||
|
$step.val(step);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#addStepButton").trigger("click");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).on("ready page:load", function() {
|
||||||
|
|
||||||
|
var $ingredientList = $("#ingredient-list");
|
||||||
|
var $stepList = $("#step-list");
|
||||||
|
|
||||||
|
if ($ingredientList.length) {
|
||||||
|
ingredientSearchEngine.initialize(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
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());
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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));
|
||||||
|
});
|
||||||
|
|
||||||
|
var $bulkIngredientsModal = $("#bulk_ingredients_modal");
|
||||||
|
var $ingredientBulkInput = $("#ingredient_bulk_input");
|
||||||
|
var $ingredientBulkList = $("#ingredient_bulk_parsed_list");
|
||||||
|
autosize($ingredientBulkInput);
|
||||||
|
|
||||||
|
$bulkIngredientsModal
|
||||||
|
.on('show.bs.modal', function (event) {
|
||||||
|
$ingredientBulkInput.val('');
|
||||||
|
$ingredientBulkList.empty();
|
||||||
|
autosize.update($ingredientBulkInput);
|
||||||
|
});
|
||||||
|
|
||||||
|
$ingredientBulkInput.on('keyup', function() {
|
||||||
|
var data = $ingredientBulkInput.val();
|
||||||
|
$ingredientBulkList.empty();
|
||||||
|
|
||||||
|
var parsed = [];
|
||||||
|
var x;
|
||||||
|
|
||||||
|
var lines = data.replace("\r", "").split("\n");
|
||||||
|
|
||||||
|
var regex = /^(?:([\d\/.]+(?:\s+[\d\/]+)?)\s+)?(?:([\w-]+)(?:\s+of)?\s+)?(\w[\w ,\-\(\)\/'"]*)$/i;
|
||||||
|
|
||||||
|
var magicFunc = function(str) {
|
||||||
|
if (str == "-") {
|
||||||
|
return "";
|
||||||
|
} else {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for (x = 0; x < lines.length; x++) {
|
||||||
|
var line = lines[x].trim();
|
||||||
|
if (line.length == 0) { continue; }
|
||||||
|
|
||||||
|
var match = line.match(regex);
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
parsed.push({quantity: magicFunc(match[1]), units: magicFunc(match[2]), name: magicFunc(match[3])});
|
||||||
|
} else {
|
||||||
|
parsed.push(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$bulkIngredientsModal.data("bulkData", parsed);
|
||||||
|
|
||||||
|
for (x = 0; x < parsed.length; x++) {
|
||||||
|
var item = parsed[x];
|
||||||
|
if (item != null) {
|
||||||
|
$ingredientBulkList.append(
|
||||||
|
$("<tr />")
|
||||||
|
.append($("<td />").addClass("quantity").text(item.quantity))
|
||||||
|
.append($("<td />").addClass("units").text(item.units))
|
||||||
|
.append($("<td />").addClass("name").text(item.name))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
$ingredientBulkList.append(
|
||||||
|
$("<tr />")
|
||||||
|
.append($("<td />").attr("colspan", "3").text("<Cannot Parse>"))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#bulkIngredientAddSubmit").on("click", function() {
|
||||||
|
var parsed = $bulkIngredientsModal.data("bulkData");
|
||||||
|
var x;
|
||||||
|
|
||||||
|
if (parsed && parsed.length) {
|
||||||
|
for (x = 0; x < parsed.length; x++) {
|
||||||
|
var item = parsed[x];
|
||||||
|
if (item) {
|
||||||
|
addIngredient(item.quantity, item.units, item.name, item.ingredient_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$bulkIngredientsModal.modal('hide')
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ===========================================
|
||||||
|
// ===========================================
|
||||||
|
|
||||||
|
|
||||||
|
var $bulkStepsModal = $("#bulk_steps_modal");
|
||||||
|
var $stepBulkInput = $("#step_bulk_input");
|
||||||
|
var $stepBulkList = $("#step_bulk_parsed_list");
|
||||||
|
autosize($stepBulkInput);
|
||||||
|
|
||||||
|
$bulkStepsModal
|
||||||
|
.on('show.bs.modal', function (event) {
|
||||||
|
$stepBulkInput.val('');
|
||||||
|
$stepBulkList.empty();
|
||||||
|
autosize.update($stepBulkInput);
|
||||||
|
});
|
||||||
|
|
||||||
|
$stepBulkInput.on('keyup', function() {
|
||||||
|
var data = $stepBulkInput.val();
|
||||||
|
$stepBulkList.empty();
|
||||||
|
|
||||||
|
var parsed = [];
|
||||||
|
var x;
|
||||||
|
|
||||||
|
var lines = data.replace("\r", "").split("\n\n");
|
||||||
|
|
||||||
|
for (x = 0; x < lines.length; x++) {
|
||||||
|
var line = lines[x].trim().replace(/^\d+\./, "").trim();
|
||||||
|
if (line.length == 0) { continue; }
|
||||||
|
|
||||||
|
parsed.push(line);
|
||||||
|
}
|
||||||
|
|
||||||
|
$bulkStepsModal.data("bulkData", parsed);
|
||||||
|
|
||||||
|
for (x = 0; x < parsed.length; x++) {
|
||||||
|
var item = parsed[x];
|
||||||
|
if (item != null) {
|
||||||
|
$stepBulkList.append(
|
||||||
|
$("<tr />")
|
||||||
|
.append($("<td />").addClass("step").text(x + 1))
|
||||||
|
.append($("<td />").addClass("direction").text(item))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
$stepBulkList.append(
|
||||||
|
$("<tr />")
|
||||||
|
.append($("<td />").attr("colspan", "2").text("<Cannot Parse>"))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#bulkStepAddSubmit").on("click", function() {
|
||||||
|
var parsed = $bulkStepsModal.data("bulkData");
|
||||||
|
var x;
|
||||||
|
|
||||||
|
if (parsed && parsed.length) {
|
||||||
|
for (x = 0; x < parsed.length; x++) {
|
||||||
|
var item = parsed[x];
|
||||||
|
if (item) {
|
||||||
|
addStep(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$bulkStepsModal.modal('hide')
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
@ -1,375 +1,8 @@
|
|||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
var ingredientSearchEngine = new Bloodhound({
|
|
||||||
initialize: false,
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
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 $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('');
|
|
||||||
|
|
||||||
$group.removeClass("has-success");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addIngredient(quantity, units, name, ingredient_id) {
|
|
||||||
$("#ingredient-list").one("cocoon:before-insert", function(e, $container) {
|
|
||||||
var $ingredientId = $container.find("input.ingredient_id");
|
|
||||||
var $name = $container.find("input.custom_name");
|
|
||||||
var $quantity = $container.find("input.quantity");
|
|
||||||
var $units = $container.find("input.units");
|
|
||||||
|
|
||||||
$ingredientId.typeahead("val", name);
|
|
||||||
$name.val(name);
|
|
||||||
$units.val(units);
|
|
||||||
$quantity.val(quantity);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addIngredientButton").trigger("click");
|
|
||||||
}
|
|
||||||
|
|
||||||
function addStep(step) {
|
|
||||||
$("#step-list").one("cocoon:before-insert", function(e, $container) {
|
|
||||||
var $step = $container.find("textarea.step");
|
|
||||||
$step.val(step);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#addStepButton").trigger("click");
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on("ready page:load", function() {
|
$(document).on("ready page:load", function() {
|
||||||
|
$(".recipe-view ul.ingredients").checkable();
|
||||||
var $ingredientList = $("#ingredient-list");
|
$(".recipe-view ol.steps").checkable();
|
||||||
var $stepList = $("#step-list");
|
|
||||||
|
|
||||||
if ($ingredientList.length) {
|
|
||||||
ingredientSearchEngine.initialize(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
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());
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
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));
|
|
||||||
});
|
|
||||||
|
|
||||||
var $bulkIngredientsModal = $("#bulk_ingredients_modal");
|
|
||||||
var $ingredientBulkInput = $("#ingredient_bulk_input");
|
|
||||||
var $ingredientBulkList = $("#ingredient_bulk_parsed_list");
|
|
||||||
autosize($ingredientBulkInput);
|
|
||||||
|
|
||||||
$bulkIngredientsModal
|
|
||||||
.on('show.bs.modal', function (event) {
|
|
||||||
$ingredientBulkInput.val('');
|
|
||||||
$ingredientBulkList.empty();
|
|
||||||
autosize.update($ingredientBulkInput);
|
|
||||||
});
|
|
||||||
|
|
||||||
$ingredientBulkInput.on('keyup', function() {
|
|
||||||
var data = $ingredientBulkInput.val();
|
|
||||||
$ingredientBulkList.empty();
|
|
||||||
|
|
||||||
var parsed = [];
|
|
||||||
var x;
|
|
||||||
|
|
||||||
var lines = data.replace("\r", "").split("\n");
|
|
||||||
|
|
||||||
var regex = /^(?:([\d\/.]+(?:\s+[\d\/]+)?)\s+)?(?:([\w-]+)(?:\s+of)?\s+)?(\w[\w ,\-\(\)\/'"]*)$/i;
|
|
||||||
|
|
||||||
var magicFunc = function(str) {
|
|
||||||
if (str == "-") {
|
|
||||||
return "";
|
|
||||||
} else {
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
for (x = 0; x < lines.length; x++) {
|
|
||||||
var line = lines[x].trim();
|
|
||||||
if (line.length == 0) { continue; }
|
|
||||||
|
|
||||||
var match = line.match(regex);
|
|
||||||
|
|
||||||
if (match) {
|
|
||||||
parsed.push({quantity: magicFunc(match[1]), units: magicFunc(match[2]), name: magicFunc(match[3])});
|
|
||||||
} else {
|
|
||||||
parsed.push(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$bulkIngredientsModal.data("bulkData", parsed);
|
|
||||||
|
|
||||||
for (x = 0; x < parsed.length; x++) {
|
|
||||||
var item = parsed[x];
|
|
||||||
if (item != null) {
|
|
||||||
$ingredientBulkList.append(
|
|
||||||
$("<tr />")
|
|
||||||
.append($("<td />").addClass("quantity").text(item.quantity))
|
|
||||||
.append($("<td />").addClass("units").text(item.units))
|
|
||||||
.append($("<td />").addClass("name").text(item.name))
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
$ingredientBulkList.append(
|
|
||||||
$("<tr />")
|
|
||||||
.append($("<td />").attr("colspan", "3").text("<Cannot Parse>"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#bulkIngredientAddSubmit").on("click", function() {
|
|
||||||
var parsed = $bulkIngredientsModal.data("bulkData");
|
|
||||||
var x;
|
|
||||||
|
|
||||||
if (parsed && parsed.length) {
|
|
||||||
for (x = 0; x < parsed.length; x++) {
|
|
||||||
var item = parsed[x];
|
|
||||||
if (item) {
|
|
||||||
addIngredient(item.quantity, item.units, item.name, item.ingredient_id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$bulkIngredientsModal.modal('hide')
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// ===========================================
|
|
||||||
// ===========================================
|
|
||||||
|
|
||||||
|
|
||||||
var $bulkStepsModal = $("#bulk_steps_modal");
|
|
||||||
var $stepBulkInput = $("#step_bulk_input");
|
|
||||||
var $stepBulkList = $("#step_bulk_parsed_list");
|
|
||||||
autosize($stepBulkInput);
|
|
||||||
|
|
||||||
$bulkStepsModal
|
|
||||||
.on('show.bs.modal', function (event) {
|
|
||||||
$stepBulkInput.val('');
|
|
||||||
$stepBulkList.empty();
|
|
||||||
autosize.update($stepBulkInput);
|
|
||||||
});
|
|
||||||
|
|
||||||
$stepBulkInput.on('keyup', function() {
|
|
||||||
var data = $stepBulkInput.val();
|
|
||||||
$stepBulkList.empty();
|
|
||||||
|
|
||||||
var parsed = [];
|
|
||||||
var x;
|
|
||||||
|
|
||||||
var lines = data.replace("\r", "").split("\n\n");
|
|
||||||
|
|
||||||
for (x = 0; x < lines.length; x++) {
|
|
||||||
var line = lines[x].trim().replace(/^\d+\./, "").trim();
|
|
||||||
if (line.length == 0) { continue; }
|
|
||||||
|
|
||||||
parsed.push(line);
|
|
||||||
}
|
|
||||||
|
|
||||||
$bulkStepsModal.data("bulkData", parsed);
|
|
||||||
|
|
||||||
for (x = 0; x < parsed.length; x++) {
|
|
||||||
var item = parsed[x];
|
|
||||||
if (item != null) {
|
|
||||||
$stepBulkList.append(
|
|
||||||
$("<tr />")
|
|
||||||
.append($("<td />").addClass("step").text(x + 1))
|
|
||||||
.append($("<td />").addClass("direction").text(item))
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
$stepBulkList.append(
|
|
||||||
$("<tr />")
|
|
||||||
.append($("<td />").attr("colspan", "2").text("<Cannot Parse>"))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#bulkStepAddSubmit").on("click", function() {
|
|
||||||
var parsed = $bulkStepsModal.data("bulkData");
|
|
||||||
var x;
|
|
||||||
|
|
||||||
if (parsed && parsed.length) {
|
|
||||||
for (x = 0; x < parsed.length; x++) {
|
|
||||||
var item = parsed[x];
|
|
||||||
if (item) {
|
|
||||||
addStep(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$bulkStepsModal.modal('hide')
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|||||||
@ -1,2 +1,4 @@
|
|||||||
|
|
||||||
$brand-primary: darken(#93C54B, 10%);
|
$brand-primary: darken(#93C54B, 10%);
|
||||||
|
$text-color: #3E3F3A;
|
||||||
|
|
||||||
|
|||||||
@ -64,4 +64,8 @@ div.recipe-view {
|
|||||||
.steps div {
|
.steps div {
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li.checked {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -8,12 +8,14 @@
|
|||||||
<p>No Ingredients</p>
|
<p>No Ingredients</p>
|
||||||
<% else %>
|
<% else %>
|
||||||
|
|
||||||
<table class="table">
|
<table class="table table-condensed table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
|
<th>USDA NDBN</th>
|
||||||
|
<th>KCal per 100g</th>
|
||||||
<th>Density</th>
|
<th>Density</th>
|
||||||
<th colspan="3"></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@ -21,8 +23,14 @@
|
|||||||
<% @ingredients.each do |ingredient| %>
|
<% @ingredients.each do |ingredient| %>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%= link_to ingredient.name, edit_ingredient_path(ingredient) %></td>
|
<td><%= link_to ingredient.name, edit_ingredient_path(ingredient) %></td>
|
||||||
|
<td><%= ingredient.ndbn %></td>
|
||||||
|
<td><%= ingredient.kcal %></td>
|
||||||
<td><%= ingredient.density %></td>
|
<td><%= ingredient.density %></td>
|
||||||
<td><%= link_to 'Destroy', ingredient, method: :delete, data: { confirm: 'Are you sure?' } %></td>
|
<td>
|
||||||
|
<%= link_to ingredient, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-danger' do %>
|
||||||
|
<span class="glyphicon glyphicon-remove"></span>
|
||||||
|
<% end %>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="recipe-view">
|
<div class="recipe-view">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-10">
|
<div class="col-xs-12">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>
|
<h1>
|
||||||
<%= @recipe.name %>
|
<%= @recipe.name %>
|
||||||
@ -15,19 +15,6 @@
|
|||||||
<%= @recipe.description %>
|
<%= @recipe.description %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-2">
|
|
||||||
<div class="dropdown">
|
|
||||||
<button id="scaleLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
Scale
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="scaleLabel">
|
|
||||||
<% ['1/4', '1/3', '1/2', '2/3', '3/4', '1', '1 1/2', '2', '3', '4'].each do |scale| %>
|
|
||||||
<li><%= link_to scale, scale_recipe_path(@recipe, scale) %></li>
|
|
||||||
<% end %>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -55,7 +42,27 @@
|
|||||||
<div class="col-xs-12 col-sm-5 col-md-4">
|
<div class="col-xs-12 col-sm-5 col-md-4">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title">Ingredients</h3>
|
|
||||||
|
<div class="row">
|
||||||
|
<h3 class="panel-title col-xs-7">Ingredients</h3>
|
||||||
|
<div class="dropdown col-xs-5">
|
||||||
|
<button id="scaleLabel" type="button" class="pull-right btn btn-xs btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Scale
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="scaleLabel">
|
||||||
|
<% ['1/4', '1/3', '1/2', '2/3', '3/4', '1', '1 1/2', '2', '3', '4'].each do |scale| %>
|
||||||
|
<% if scale == '1' %>
|
||||||
|
<li><%= link_to scale, @recipe %></li>
|
||||||
|
<% else %>
|
||||||
|
<li><%= link_to scale, scale_recipe_path(@recipe, scale) %></li>
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<ul class="ingredients">
|
<ul class="ingredients">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user