1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
"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 = "An image with this name already exists. Image names must be unique.";
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 === "already-exists") {
showNameError(duplicateNameMsg);
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"]');
if (baseRecipes.length === 1) {
// hide the radio button container
imageSelector.hide();
// remove any radio buttons + labels
imageSelector.remove('[data-role="image-radio"]');
// 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();
}
}
|
