dev-chiefworks
356 lines
9.6 KiB
JavaScript
356 lines
9.6 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Alpaca - Basic inputs
|
|
*
|
|
* Specific JS code additions for alpaca_basic.html page
|
|
*
|
|
* Version: 1.0
|
|
* Latest update: Mar 10, 2016
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
$(function() {
|
|
|
|
|
|
// Text input
|
|
// ------------------------------
|
|
|
|
// Basic example
|
|
$("#alpaca-basic").alpaca({
|
|
"data": "I Love Alpaca Ice Cream!",
|
|
"options": {
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Display only view
|
|
$("#alpaca-static").alpaca({
|
|
"data": "I Love Alpaca Ice Cream!",
|
|
"schema": {
|
|
"type": "string"
|
|
},
|
|
"view": "bootstrap-display"
|
|
});
|
|
|
|
|
|
// Input field label
|
|
$("#alpaca-input-label").alpaca({
|
|
"data": "I Love Alpaca Ice Cream!",
|
|
"options": {
|
|
"label": "Input label",
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Static input label
|
|
$("#alpaca-static-label").alpaca({
|
|
"data": "I Love Alpaca Ice Cream!",
|
|
"schema": {
|
|
"type": "string"
|
|
},
|
|
"options": {
|
|
"label": "Input label"
|
|
},
|
|
"view": "bootstrap-display"
|
|
});
|
|
|
|
|
|
// Validation
|
|
$("#alpaca-validation").alpaca({
|
|
"data": "Mint",
|
|
"schema": {
|
|
"minLength": 3,
|
|
"maxLength": 5
|
|
},
|
|
"options": {
|
|
"label": "Ice Cream",
|
|
"helper": "Your favorite ice cream?",
|
|
"size": 30,
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Validation with predefined value
|
|
$("#alpaca-validation-predefined").alpaca({
|
|
"data": "Mint Chocolate",
|
|
"schema": {
|
|
"minLength": 3,
|
|
"maxLength": 5
|
|
},
|
|
"options": {
|
|
"label": "Ice Cream",
|
|
"helper": "Please tell us the kind of ice cream you love most!",
|
|
"size": 30,
|
|
"focus": false,
|
|
"placeholder": "Enter an ice cream flavor"
|
|
}
|
|
});
|
|
|
|
|
|
// Disallow empty spaces
|
|
$("#alpaca-disallow-empty").alpaca({
|
|
"schema": {
|
|
"type": "string"
|
|
},
|
|
"options": {
|
|
"type": "lowercase",
|
|
"label": "User Name",
|
|
"disallowEmptySpaces": true,
|
|
"helper": "Type something with empty space",
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Disallow values
|
|
$("#alpaca-disallow-values").alpaca({
|
|
"data": "Mickey Mantle",
|
|
"schema": {
|
|
"type": "string",
|
|
"disallow": ["Mickey Mantle", "Mickey"]
|
|
},
|
|
"options": {
|
|
"label": "Name",
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Typeahead integration
|
|
$("#alpaca-typeahead").alpaca({
|
|
"schema": {
|
|
"type": "string"
|
|
},
|
|
"options": {
|
|
"type": "text",
|
|
"label": "Company Name",
|
|
"helper": "Select the name of a computing company",
|
|
"placeholder": "Enter 'a'",
|
|
"focus": false,
|
|
"typeahead": {
|
|
"config": {
|
|
"autoselect": true,
|
|
"highlight": true,
|
|
"hint": true,
|
|
"minLength": 1
|
|
},
|
|
"datasets": {
|
|
"type": "local",
|
|
"source": function(query) {
|
|
var companies = ["Google", "Amazon", "Microsoft", "Apple", "Spotify", "Alpaca", "Another company", "Facebook"];
|
|
var results = [];
|
|
for (var i = 0; i < companies.length; i++) {
|
|
var add = true;
|
|
if (query) {
|
|
add = (companies[i].indexOf(query) === 0);
|
|
}
|
|
if (add) {
|
|
results.push({
|
|
"value": companies[i]
|
|
});
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Maxlength integration
|
|
$("#alpaca-maxlength").alpaca({
|
|
"schema": {
|
|
"type": "string",
|
|
"minLength": 3,
|
|
"maxLength": 25
|
|
},
|
|
"options": {
|
|
"type": "text",
|
|
"label": "What is your name?",
|
|
"constrainMaxLength": true,
|
|
"constrainMinLength": true,
|
|
"showMaxLengthIndicator": true,
|
|
"focus": false
|
|
},
|
|
"data": "Jackie Robinson"
|
|
});
|
|
|
|
|
|
|
|
// Textareas
|
|
// ------------------------------
|
|
|
|
// Basic textarea
|
|
$("#alpaca-textarea").alpaca({
|
|
"data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
|
|
"options": {
|
|
"type": "textarea",
|
|
"label": "Receipt",
|
|
"helper": "Receipt for Best Homemade Ice Cream",
|
|
"rows": 4,
|
|
"cols": 80,
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// With placeholder
|
|
$("#alpaca-textarea-placeholder").alpaca({
|
|
"options": {
|
|
"type": "textarea",
|
|
"label": "Receipt",
|
|
"helper": "Receipt for Best Homemade Ice Cream",
|
|
"placeholder": "Enter your favorite ice cream here...",
|
|
"rows": 4,
|
|
"cols": 80,
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// Display mode
|
|
$("#alpaca-textarea-static").alpaca({
|
|
"data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
|
|
"options": {
|
|
"type": "textarea",
|
|
"label": "Receipt",
|
|
"rows": 6,
|
|
"cols": 80,
|
|
"focus": false
|
|
},
|
|
"view": "bootstrap-display"
|
|
});
|
|
|
|
|
|
// Single field render
|
|
$("#alpaca-textarea-override").alpaca({
|
|
"data": "My name is Dr. Jacobian and I am a neuroscientist from the Cornell University. I've perfected a DNA transcription process which makes it possible for the first time to use DNA nucleotides to store pedabytes of information in real-time.",
|
|
"schema": {
|
|
"type": "string"
|
|
},
|
|
"options": {
|
|
"type": "textarea",
|
|
"label": "Tell us about yourself",
|
|
"view": "bootstrap-display"
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// Selects
|
|
// ------------------------------
|
|
|
|
// Basic select
|
|
$("#alpaca-select").alpaca({
|
|
"data": "coffee",
|
|
"schema": {
|
|
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
|
|
},
|
|
"options": {
|
|
"label": "Ice cream",
|
|
"helper": "What flavor of ice cream do you prefer?",
|
|
"focus": false
|
|
}
|
|
});
|
|
|
|
|
|
// External data source
|
|
$("#alpaca-select-external").alpaca({
|
|
"options": {
|
|
"label": "Ice cream",
|
|
"helper": "Guess my favorite ice cream?",
|
|
"type": "select",
|
|
"focus": false,
|
|
"dataSource": "../default/assets/demo_data/alpaca/selects.json"
|
|
}
|
|
});
|
|
|
|
|
|
// Select2 select
|
|
$("#alpaca-select2").alpaca({
|
|
"data": "coffee",
|
|
"schema": {
|
|
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
|
|
},
|
|
"options": {
|
|
"label": "Ice cream",
|
|
"helper": "What flavor of ice cream do you prefer?",
|
|
"id": "select2-basic",
|
|
"focus": false
|
|
},
|
|
"postRender": function(control) {
|
|
$('#select2-basic').select2({
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
// Select2 select with search
|
|
$("#alpaca-select2-search").alpaca({
|
|
"data": "coffee",
|
|
"schema": {
|
|
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
|
|
},
|
|
"options": {
|
|
"label": "Ice cream",
|
|
"helper": "What flavor of ice cream do you prefer?",
|
|
"id": "select2-search",
|
|
"focus": false
|
|
},
|
|
"postRender": function(control) {
|
|
$('#select2-search').select2();
|
|
}
|
|
});
|
|
|
|
|
|
// Multiselect
|
|
$("#alpaca-multiselect").alpaca({
|
|
"data": ["Vanilla", "Chocolate"],
|
|
"schema": {
|
|
"type": "array",
|
|
"items": {
|
|
"title": "Ice Cream",
|
|
"type": "string",
|
|
"enum": ["Vanilla", "Chocolate", "Strawberry", "Mint"],
|
|
"minItems": 2,
|
|
"maxItems": 3
|
|
}
|
|
},
|
|
"options": {
|
|
"label": "Ice cream",
|
|
"helper": "Guess my favorite ice cream?",
|
|
"type": "select",
|
|
"size": 5,
|
|
"id": "multiselect",
|
|
"focus": false
|
|
},
|
|
"postRender": function(control) {
|
|
$("#multiselect").parent().find("input[type=checkbox]").uniform();
|
|
}
|
|
});
|
|
|
|
|
|
// Multiselect with remote data
|
|
$("#alpaca-multiselect-remote").alpaca({
|
|
"options": {
|
|
"label": "Select your favorite flavor of ice cream",
|
|
"type": "select",
|
|
"multiple": true,
|
|
"helper": "Guess my favorite ice cream?",
|
|
"size": 3,
|
|
"focus": false,
|
|
"id": "multiselect-remote",
|
|
"dataSource": "../default/assets/demo_data/alpaca/selects.json"
|
|
},
|
|
"postRender": function(control) {
|
|
$("#multiselect-remote").parent().find("input[type=checkbox]").uniform();
|
|
}
|
|
});
|
|
|
|
});
|