/* ------------------------------------------------------------------------------ * * # Alpaca - Advanced examples * * Demo JS code for alpaca_advanced.html page * * ---------------------------------------------------------------------------- */ // Setup module // ------------------------------ var AlpacaAdvanced = function() { // // Setup module components // // Alpaca examples var _componentAlpacaAdvanced = function() { if (!$().alpaca) { console.warn('Warning - alpaca.min.js is not loaded.'); return; } // Option trees // ------------------------------ // Option tree field $('#alpaca-option-tree').alpaca({ schema: { type: 'number', title: 'What number would like for your sports jersey?' }, options: { type: 'optiontree', tree: { selectors: { sport: { schema: { type: 'string' }, options: { type: 'select', noneLabel: 'Pick a Sport...' } }, team: { schema: { type: 'string' }, options: { type: 'select', noneLabel: 'Pick a Team...' } }, player: { schema: { type: 'string' }, options: { type: 'select', noneLabel: 'Pick a Player...' } } }, order: ['sport', 'team', 'player'], data: [{ value: 23, attributes: { sport: 'Basketball', team: 'Chicago Bulls', player: 'Michael Jordan' } }, { value: 33, attributes: { sport: 'Basketball', team: 'Chicago Bulls', player: 'Scotty Pippen' } }, { value: 4, attributes: { sport: 'Football', team: 'Green Bay Packers', player: 'Brett Favre' } }, { value: 19, attributes: { sport: 'Baseball', team: 'Milwaukee Brewers', player: 'Robin Yount' } }, { value: 99, attributes: { sport: 'Hockey', player: 'Wayne Gretzky' } }], horizontal: true }, focus: false } }); // Using connector $('#alpaca-option-tree-connector').alpaca({ schemaSource: '../../../../global_assets/demo_data/alpaca/optiontree-custom-schema.json', optionsSource: '../../../../global_assets/demo_data/alpaca/optiontree-custom-options.json', options: { focus: false } }); // Input types // ------------------------------ // Lowercase $('#alpaca-lowercase').alpaca({ data: 'Ice cream is wonderful.', schema: { format: 'lowercase' }, options: { focus: false } }); // Uppercase $('#alpaca-uppercase').alpaca({ data: 'Ice cream is wonderful.', schema: { format: 'uppercase' }, options: { focus: false } }); // Search type $('#alpaca-search').alpaca({ data: 'Where for art thou Romeo?', schema: { type: 'string' }, options: { type: 'search', focus: false, label: 'Search' } }); // Integer type $('#alpaca-integer').alpaca({ data: 20, options: { type: 'integer', label: 'Age:', focus: false }, schema: { minimum: 18, maximum: 25, exclusiveMinimum: true, exclusiveMaximum: true, divisibleBy: 2 } }); // Password type $('#alpaca-password').alpaca({ data: 'password', schema: { format: 'password' }, options: { focus: false } }); // Email type $('#alpaca-email').alpaca({ data: 'support', schema: { format: 'email' }, options: { focus: false } }); // IP address type $('#alpaca-ipv4').alpaca({ data: '100.60', schema: { format: 'ip-address' }, options: { focus: false } }); // URL type $('#alpaca-url').alpaca({ data: 'http://www.alpacajs.org', options: { type: 'url', focus: false }, schema: { format: 'uri' } }); // Currency type $('#alpaca-currency').alpaca({ options: { type: 'currency', focus: false } }); // Personal name type $('#alpaca-name').alpaca({ data: 'Oscar Zoroaster Phadrig Isaac Norman Henkel Emmannuel Ambroise Diggs', options: { type: 'personalname', focus: false } }); // File inputs // ------------------------------ // Basic file input $('#alpaca-file').alpaca({ data: '', options: { type: 'file', label: 'Ice Cream Photo:', helper: 'Pick your favorite ice cream picture.', focus: false }, schema: { type: 'string', format: 'uri' } }); // Static mode $('#alpaca-file-static').alpaca({ data: '/abc.html', options: { type: 'file', label: 'Ice Cream Photo:', helper: 'Pick your favorite ice cream picture.', focus: false }, schema: { type: 'string', format: 'uri' }, view: 'bootstrap-display' }); // Selector helpers // ------------------------------ // Country selector $('#alpaca-country').alpaca({ options: { type: 'country', focus: false } }); // State selector $('#alpaca-state').alpaca({ options: { type: 'state', focus: false } }); // CKEditor // ------------------------------ // DOM elements var $alpacaEditorLTR = $('#alpaca-ckeditor-full'), $alpacaEditorRTL = $('#alpaca-ckeditor-full-rtl'); // Full featured CKEditor if (!$alpacaEditorLTR.length == 0) { $alpacaEditorLTR.alpaca({ data: '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 flavors.', options: { type: 'ckeditor' } }); } // [RTL] Full featured CKEditor if (!$alpacaEditorRTL.length == 0) { $alpacaEditorRTL.alpaca({ data: '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 flavors.', options: { type: 'ckeditor', ckeditor: { customConfig: 'config_rtl.js' } } }); } }; // Alpaca with Select2 var _componentAlpacaAdvancedSelect2 = function() { if (!$().alpaca || !$().select2) { console.warn('Warning - alpaca.min.js and/or select2.min.js is not loaded.'); return; } // Searchable country selector $('#alpaca-country-search').alpaca({ options: { type: 'country', id: 'country-search', focus: false }, postRender: function() { $('#country-search').select2(); } }); // Searchable state selector $('#alpaca-state-search').alpaca({ options: { type: 'state', id: 'state-search', focus: false }, postRender: function() { $('#state-search').select2(); } }); }; // Alpaca with Uniform var _componentAlpacaAdvancedUniform = function() { if (!$().alpaca || !$().uniform) { console.warn('Warning - alpaca.min.js and/or uniform.min.js is not loaded.'); return; } // Styled file input $('#alpaca-file-styled').alpaca({ data: '', options: { type: 'file', label: 'Ice Cream Photo:', helper: 'Pick your favorite ice cream picture.', id: 'file-styled', focus: false }, schema: { type: 'string', format: 'uri' }, postRender: function() { $('#file-styled').uniform({ fileButtonClass: 'action btn bg-blue' }); } }); // Disabled file input $('#alpaca-file-disabled').alpaca({ data: '', options: { type: 'file', label: 'Ice Cream Photo:', helper: 'Pick your favorite ice cream picture.', disabled: true, id: 'file-styled-disabled', focus: false }, schema: { type: 'string', format: 'uri' }, postRender: function() { $('#file-styled-disabled').uniform({ fileButtonClass: 'action btn bg-blue' }); } }); }; // // Return objects assigned to module // return { init: function() { _componentAlpacaAdvanced(); _componentAlpacaAdvancedSelect2(); _componentAlpacaAdvancedUniform(); } } }(); // Initialize module // ------------------------------ document.addEventListener('DOMContentLoaded', function() { AlpacaAdvanced.init(); });