first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,355 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # 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();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user