You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
9.6 KiB
355 lines
9.6 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # 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(); |
|
} |
|
}); |
|
|
|
});
|
|
|