| "use strict"; |
| |
| /* |
| Used for the newcustomimage_modal actions |
| |
| The .data('recipe') value on the outer element determines which |
| recipe ID is used as the basis for the new custom image recipe created via |
| this modal. |
| |
| Use newCustomImageModalSetRecipes() to set the recipes available as a base |
| for the new custom image. This will manage the addition of radio buttons |
| to select the base image (or remove the radio buttons, if there is only a |
| single base image available). |
| */ |
| |
| function newCustomImageModalInit(){ |
| |
| var newCustomImgBtn = $("#create-new-custom-image-btn"); |
| var imgCustomModal = $("#new-custom-image-modal"); |
| var invalidNameHelp = $("#invalid-name-help"); |
| var invalidRecipeHelp = $("#invalid-recipe-help"); |
| var nameInput = imgCustomModal.find('input'); |
| |
| var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; |
| var duplicateNameMsg = "A recipe with this name already exists. Image names must be unique."; |
| var duplicateImageInProjectMsg = "An image with this name already exists in this project." |
| var invalidBaseRecipeIdMsg = "Please select an image to customise."; |
| |
| // capture clicks on radio buttons inside the modal; when one is selected, |
| // set the recipe on the modal |
| imgCustomModal.on("click", "[name='select-image']", function (e) { |
| clearRecipeError(); |
| |
| var recipeId = $(e.target).attr('data-recipe'); |
| imgCustomModal.data('recipe', recipeId); |
| }); |
| |
| newCustomImgBtn.click(function(e){ |
| e.preventDefault(); |
| |
| var baseRecipeId = imgCustomModal.data('recipe'); |
| |
| if (!baseRecipeId) { |
| showRecipeError(invalidBaseRecipeIdMsg); |
| return; |
| } |
| |
| if (nameInput.val().length > 0) { |
| libtoaster.createCustomRecipe(nameInput.val(), baseRecipeId, |
| function(ret) { |
| if (ret.error !== "ok") { |
| console.warn(ret.error); |
| if (ret.error === "invalid-name") { |
| showNameError(invalidNameMsg); |
| return; |
| } else if (ret.error === "recipe-already-exists") { |
| showNameError(duplicateNameMsg); |
| return; |
| } else if (ret.error === "image-already-exists") { |
| showNameError(duplicateImageInProjectMsg); |
| return; |
| } |
| } else { |
| imgCustomModal.modal('hide'); |
| window.location.replace(ret.url + '?notify=new'); |
| } |
| }); |
| } |
| }); |
| |
| function showNameError(text){ |
| invalidNameHelp.text(text); |
| invalidNameHelp.show(); |
| nameInput.parent().addClass('error'); |
| } |
| |
| function showRecipeError(text){ |
| invalidRecipeHelp.text(text); |
| invalidRecipeHelp.show(); |
| } |
| |
| function clearRecipeError(){ |
| invalidRecipeHelp.hide(); |
| } |
| |
| nameInput.on('keyup', function(){ |
| if (nameInput.val().length === 0){ |
| newCustomImgBtn.prop("disabled", true); |
| return |
| } |
| |
| if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ |
| showNameError(invalidNameMsg); |
| newCustomImgBtn.prop("disabled", true); |
| nameInput.parent().addClass('error'); |
| } else { |
| invalidNameHelp.hide(); |
| newCustomImgBtn.prop("disabled", false); |
| nameInput.parent().removeClass('error'); |
| } |
| }); |
| } |
| |
| // Set the image recipes which can used as the basis for the custom |
| // image recipe the user is creating |
| // |
| // baseRecipes: a list of one or more recipes which can be |
| // used as the base for the new custom image recipe in the format: |
| // [{'id': <recipe ID>, 'name': <recipe name>'}, ...] |
| // |
| // if recipes is a single recipe, just show the text box to set the |
| // name for the new custom image; if recipes contains multiple recipe objects, |
| // show a set of radio buttons so the user can decide which to use as the |
| // basis for the new custom image |
| function newCustomImageModalSetRecipes(baseRecipes) { |
| var imgCustomModal = $("#new-custom-image-modal"); |
| var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]'); |
| var imageSelectRadiosContainer = $('#new-custom-image-modal [data-role="image-selector-radios"]'); |
| |
| // remove any existing radio buttons + labels |
| imageSelector.remove('[data-role="image-radio"]'); |
| |
| if (baseRecipes.length === 1) { |
| // hide the radio button container |
| imageSelector.hide(); |
| |
| // set the single recipe ID on the modal as it's the only one |
| // we can build from |
| imgCustomModal.data('recipe', baseRecipes[0].id); |
| } |
| else { |
| // add radio buttons; note that the handlers for the radio buttons |
| // are set in newCustomImageModalInit via event delegation |
| for (var i = 0; i < baseRecipes.length; i++) { |
| var recipe = baseRecipes[i]; |
| imageSelectRadiosContainer.append( |
| '<label class="radio" data-role="image-radio">' + |
| recipe.name + |
| '<input type="radio" class="form-control" name="select-image" ' + |
| 'data-recipe="' + recipe.id + '">' + |
| '</label>' |
| ); |
| } |
| |
| // show the radio button container |
| imageSelector.show(); |
| } |
| } |