Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/global/js/demo_pages/alpaca_basic.js
+395
View File
@@ -0,0 +1,395 @@
/* ------------------------------------------------------------------------------
*
* # Alpaca - Basic inputs
*
* Demo JS code for alpaca_basic.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var AlpacaBasic = function() {
//
// Setup module components
//
// Alpaca examples
var _componentAlpaca = function() {
if (!$().alpaca) {
console.warn('Warning - alpaca.min.js is not loaded.');
return;
}
// 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: {
highlight: true,
hint: true,
minLength: 1
},
datasets: {
type: 'local',
displayKey: 'value',
source: ['Google', 'Amazon', 'Microsoft', 'Apple', 'Spotify', 'Alpaca', 'Another company', 'Facebook']
}
}
}
});
// [RTL] Typeahead integration
$('#alpaca-typeahead-rtl').alpaca({
schema: {
type: 'string'
},
options: {
type: 'text',
label: 'Company Name',
helper: 'Select the name of a computing company',
placeholder: 'Enter "a"',
focus: false,
fieldClass: 'typeahead-rtl',
typeahead: {
config: {
highlight: true,
hint: true,
minLength: 1
},
datasets: {
type: 'local',
displayKey: 'value',
source: ['Google', 'Amazon', 'Microsoft', 'Apple', 'Spotify', 'Alpaca', 'Another company', 'Facebook']
}
}
},
postRender: function() {
$('.typeahead-rtl').find('.form-control').attr('dir', 'rtl');
}
});
// 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: '../../../../global_assets/demo_data/alpaca/selects.json'
}
});
};
// Alpaca with Select2
var _componentAlpacaSelect2 = function() {
if (!$().alpaca || !$().select2) {
console.warn('Warning - alpaca.min.js and/or select2.min.js is not loaded.');
return;
}
// 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();
}
});
};
// Alpaca with Multiselect
var _componentAlpacaMultiselect = function() {
if (!$().alpaca || !$().multiselect) {
console.warn('Warning - alpaca.min.js and/or bootstrap-multiselect.js is not loaded.');
return;
}
// 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
}
});
// 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: '../../../../global_assets/demo_data/alpaca/selects.json'
}
});
};
//
// Return objects assigned to module
//
return {
init: function() {
_componentAlpaca();
_componentAlpacaSelect2();
_componentAlpacaMultiselect();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
AlpacaBasic.init();
});