dev-chiefworks
747 lines
22 KiB
JavaScript
747 lines
22 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # jQuery UI forms
|
|
*
|
|
* Demo JS code for jqueryui_forms.html page
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Setup module
|
|
// ------------------------------
|
|
|
|
var JqueryUiForms = function() {
|
|
|
|
|
|
//
|
|
// Setup module components
|
|
//
|
|
|
|
// Datepicker
|
|
var _componentUiDatepicker = function() {
|
|
if (!$().datepicker) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Default functionality
|
|
$('.datepicker').datepicker({
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Dates in other months
|
|
$('.datepicker-dates').datepicker({
|
|
showOtherMonths: true,
|
|
selectOtherMonths: true,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Button bar
|
|
$('.datepicker-button-bar').datepicker({
|
|
showButtonPanel: true,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Month and year menu
|
|
$('.datepicker-menus').datepicker({
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Multiple months
|
|
$('.datepicker-multiple').datepicker({
|
|
numberOfMonths: 3,
|
|
showButtonPanel: true,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Icon trigger
|
|
$('.datepicker-icon').datepicker({
|
|
showOn: 'button',
|
|
buttonImage: '../../../../global_assets/images/ui/datepicker_trigger.png',
|
|
buttonImageOnly: true,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Populate alternate field
|
|
$('.datepicker-alternate').datepicker({
|
|
altField: '#alternate',
|
|
altFormat: 'DD, d MM, yy',
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Restrict date range
|
|
$('.datepicker-restrict').datepicker({
|
|
minDate: -20,
|
|
maxDate: '+1M +10D',
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Show week number
|
|
$('.datepicker-weeks').datepicker({
|
|
showWeek: true,
|
|
firstDay: 1,
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
|
|
//
|
|
// Date range
|
|
//
|
|
|
|
// From
|
|
$('#range-from').datepicker({
|
|
defaultDate: '+1w',
|
|
numberOfMonths: 3,
|
|
onClose: function( selectedDate ) {
|
|
$( '#range-to' ).datepicker( 'option', 'minDate', selectedDate );
|
|
},
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// To
|
|
$('#range-to').datepicker({
|
|
defaultDate: '+1w',
|
|
numberOfMonths: 3,
|
|
onClose: function( selectedDate ) {
|
|
$( '#range-from' ).datepicker( 'option', 'maxDate', selectedDate );
|
|
},
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
|
|
//
|
|
// Format date
|
|
//
|
|
|
|
// Initialize
|
|
$('.datepicker-format').datepicker({
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Format date on change
|
|
$('#format').on('change', function() {
|
|
$('.datepicker-format').datepicker('option', 'dateFormat', $(this).val());
|
|
});
|
|
|
|
|
|
//
|
|
// Format date
|
|
//
|
|
|
|
// Initialize
|
|
$('.datepicker-animation').datepicker({
|
|
isRTL: $('html').attr('dir') == 'rtl' ? true : false
|
|
});
|
|
|
|
// Animate picker on change
|
|
$('#anim').on('change', function() {
|
|
$('.datepicker-animation').datepicker('option', 'showAnim', $(this).val());
|
|
});
|
|
};
|
|
|
|
// Autiocomplete
|
|
var _componentUiAutocomplete = function() {
|
|
if (!$().autocomplete) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Add demo data
|
|
var availableTags = [
|
|
'ActionScript',
|
|
'AppleScript',
|
|
'Asp',
|
|
'BASIC',
|
|
'C',
|
|
'C++',
|
|
'Clojure',
|
|
'COBOL',
|
|
'ColdFusion',
|
|
'Erlang',
|
|
'Fortran',
|
|
'Groovy',
|
|
'Haskell',
|
|
'Java',
|
|
'JavaScript',
|
|
'Lisp',
|
|
'Perl',
|
|
'PHP',
|
|
'Python',
|
|
'Ruby',
|
|
'Scala',
|
|
'Scheme'
|
|
];
|
|
|
|
// Basic example
|
|
$('#ac-basic').autocomplete({
|
|
source: availableTags
|
|
});
|
|
|
|
|
|
//
|
|
// Accent folding
|
|
//
|
|
|
|
// Add data
|
|
var names = ['Jörn Zaefferer', 'Scott González', 'John Resig'];
|
|
|
|
// Map
|
|
var accentMap = {
|
|
'á': 'a',
|
|
'ö': 'o'
|
|
};
|
|
|
|
// Normalize
|
|
var normalize = function(term) {
|
|
var ret = '';
|
|
for (var i = 0; i < term.length; i++) {
|
|
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
|
|
}
|
|
return ret;
|
|
};
|
|
|
|
// Init autocomplete
|
|
$('#ac-folding').autocomplete({
|
|
source: function(request, response) {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
|
|
response($.grep(names, function(value) {
|
|
value = value.label || value.value || value;
|
|
return matcher.test(value) || matcher.test(normalize(value));
|
|
}));
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Categories
|
|
//
|
|
|
|
// Custom widget
|
|
$.widget('custom.catcomplete', $.ui.autocomplete, {
|
|
_create: function() {
|
|
this._super();
|
|
this.widget().menu('option', 'items', '> :not(.ui-autocomplete-category)');
|
|
},
|
|
_renderMenu: function(ul, items) {
|
|
var that = this,
|
|
currentCategory = '';
|
|
|
|
$.each( items, function(index, item) {
|
|
var li;
|
|
if (item.category != currentCategory) {
|
|
ul.append('<li class="ui-autocomplete-category">' + item.category + '</li>');
|
|
currentCategory = item.category;
|
|
}
|
|
li = that._renderItemData(ul, item);
|
|
if (item.category) {
|
|
li.attr('aria-label', item.category + ' : ' + item.label);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Demo data
|
|
var data = [
|
|
{label: 'anders', category: ''},
|
|
{label: 'andreas', category: ''},
|
|
{label: 'antal', category: ''},
|
|
{label: 'annhhx10', category: 'Products'},
|
|
{label: 'annk K12', category: 'Products'},
|
|
{label: 'annttop C13', category: 'Products'},
|
|
{label: 'anders andersson', category: 'People'},
|
|
{label: 'andreas andersson', category: 'People'},
|
|
{label: 'andreas johnson', category: 'People'}
|
|
];
|
|
|
|
// Initialize autocomplete
|
|
$( '#ac-categories' ).catcomplete({
|
|
delay: 0,
|
|
source: data
|
|
});
|
|
|
|
|
|
//
|
|
// Custom data and display
|
|
//
|
|
|
|
// Demo data
|
|
var projects = [
|
|
{
|
|
label: 'Limitless',
|
|
desc: 'responsive web application kit'
|
|
},
|
|
{
|
|
label: 'Londinium',
|
|
desc: 'responsive bootstrap 3 admin template'
|
|
},
|
|
{
|
|
label: 'It\'s Brain',
|
|
desc: 'Bootstrap based premium admin template'
|
|
}
|
|
];
|
|
|
|
// Initialize autocomplete
|
|
$('#ac-custom').autocomplete({
|
|
minLength: 0,
|
|
source: projects,
|
|
focus: function( event, ui ) {
|
|
$('#ac-custom').val(ui.item.label);
|
|
return false;
|
|
},
|
|
select: function( event, ui ) {
|
|
$('#ac-custom').val(ui.item.label);
|
|
return false;
|
|
}
|
|
})
|
|
.autocomplete('instance')._renderItem = function(ul, item) {
|
|
return $('<li>').append('<span class="font-weight-semibold pb-0">' + item.label + '</span>' + '<div class="text-muted font-size-sm pt-0">' + item.desc + '</div>').appendTo(ul);
|
|
};
|
|
|
|
|
|
//
|
|
// Custom data and display
|
|
//
|
|
|
|
// Split values
|
|
function split(val) {
|
|
return val.split(/,\s*/);
|
|
}
|
|
|
|
// Extract the last term
|
|
function extractLast(term) {
|
|
return split(term).pop();
|
|
}
|
|
|
|
// Configure and initialize
|
|
$('#ac-multiple').bind('keydown', function(event) {
|
|
if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete('instance').menu.active) {
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
.autocomplete({
|
|
minLength: 0,
|
|
source: function(request, response) {
|
|
|
|
// Delegate back to autocomplete, but extract the last term
|
|
response( $.ui.autocomplete.filter(
|
|
availableTags, extractLast( request.term ) ) );
|
|
},
|
|
focus: function() {
|
|
|
|
// Prevent value inserted on focus
|
|
return false;
|
|
},
|
|
select: function(event, ui) {
|
|
var terms = split(this.value);
|
|
|
|
// Remove the current input
|
|
terms.pop();
|
|
|
|
// Add the selected item
|
|
terms.push(ui.item.value);
|
|
|
|
// Add placeholder to get the comma-and-space at the end
|
|
terms.push('');
|
|
this.value = terms.join('', '');
|
|
return false;
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Remote data
|
|
//
|
|
|
|
// Remote data
|
|
$('#ac-remote').autocomplete({
|
|
minLength: 2,
|
|
source: '../../../../global_assets/demo_data/jquery_ui/autocomplete.php',
|
|
search: function() {
|
|
$(this).parent().addClass('ui-autocomplete-processing');
|
|
},
|
|
open: function() {
|
|
$(this).parent().removeClass('ui-autocomplete-processing');
|
|
}
|
|
});
|
|
|
|
// Remote data with caching
|
|
var cache = {};
|
|
$('#ac-caching').autocomplete({
|
|
minLength: 2,
|
|
source: function(request, response) {
|
|
var term = request.term;
|
|
if (term in cache) {
|
|
response(cache[term]);
|
|
return;
|
|
}
|
|
|
|
$.getJSON('../../../../global_assets/demo_data/jquery_ui/autocomplete.php', request, function(data, status, xhr) {
|
|
cache[ term ] = data;
|
|
response(data);
|
|
});
|
|
},
|
|
search: function() {
|
|
$(this).parent().addClass('ui-autocomplete-processing');
|
|
},
|
|
open: function() {
|
|
$(this).parent().removeClass('ui-autocomplete-processing');
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Combo box
|
|
//
|
|
|
|
// Configure custom widget
|
|
$.widget('custom.combobox', {
|
|
_create: function() {
|
|
this.wrapper = $('<div>').addClass('custom-combobox input-group').insertAfter(this.element);
|
|
this.element.hide();
|
|
this._createAutocomplete();
|
|
this._createShowAllButton();
|
|
},
|
|
_createAutocomplete: function() {
|
|
var selected = this.element.children(':selected'),
|
|
value = selected.val() ? selected.text() : '';
|
|
|
|
var input = this.input = $('<input>')
|
|
.appendTo(this.wrapper)
|
|
.val(value)
|
|
.attr('title', '')
|
|
.attr('placeholder', 'Search')
|
|
.addClass('form-control')
|
|
.autocomplete({
|
|
delay: 0,
|
|
minLength: 0,
|
|
source: $.proxy(this, '_source')
|
|
});
|
|
|
|
this._on(this.input, {
|
|
autocompleteselect: function( event, ui ) {
|
|
ui.item.option.selected = true;
|
|
this._trigger('select', event, {
|
|
item: ui.item.option
|
|
});
|
|
},
|
|
|
|
autocompletechange: '_removeIfInvalid'
|
|
});
|
|
},
|
|
_createShowAllButton: function() {
|
|
var input = this.input,
|
|
wasOpen = false;
|
|
|
|
// Append fonr control icon
|
|
this.wrapper.append('<div class="form-control-feedback"><i class="icon-search4 font-size-base"></i></div>');
|
|
|
|
// Add input group button
|
|
var wrapper2 = $('<span>').attr('class', 'input-group-append').appendTo(this.wrapper);
|
|
|
|
|
|
// Link
|
|
$( '<a>' )
|
|
.attr( 'tabIndex', -1 )
|
|
.appendTo( wrapper2 )
|
|
.button({
|
|
icons: {
|
|
primary: 'icon-arrow-down12'
|
|
},
|
|
text: false
|
|
})
|
|
.removeClass('')
|
|
.on('mousedown', function() {
|
|
wasOpen = input.autocomplete('widget').is(':visible');
|
|
})
|
|
.on('click', function() {
|
|
input.focus();
|
|
|
|
// Close if already visible
|
|
if (wasOpen) {
|
|
return;
|
|
}
|
|
|
|
// Pass empty string as value to search for, displaying all results
|
|
input.autocomplete('search', '');
|
|
});
|
|
},
|
|
_source: function( request, response ) {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
|
|
response( this.element.children('option').map(function() {
|
|
var text = $(this).text();
|
|
if (this.value && (!request.term || matcher.test(text)))
|
|
return {
|
|
label: text,
|
|
value: text,
|
|
option: this
|
|
};
|
|
})
|
|
);
|
|
},
|
|
_removeIfInvalid: function( event, ui ) {
|
|
|
|
// Selected an item, nothing to do
|
|
if (ui.item) {
|
|
return;
|
|
}
|
|
|
|
// Search for a match (case-insensitive)
|
|
var value = this.input.val(),
|
|
valueLowerCase = value.toLowerCase(),
|
|
valid = false;
|
|
|
|
this.element.children('option').each(function() {
|
|
if ($(this).text().toLowerCase() === valueLowerCase) {
|
|
this.selected = valid = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Found a match, nothing to do
|
|
if (valid) {
|
|
return;
|
|
}
|
|
|
|
// Remove invalid value
|
|
this.input.val('').attr('title', value + ' didn\'t match any item');
|
|
|
|
this.element.val('');
|
|
this._delay(function() {
|
|
this.input.tooltip('close').attr('title', '');
|
|
}, 2500);
|
|
this.input.autocomplete('instance').term = '';
|
|
},
|
|
_destroy: function() {
|
|
this.wrapper.remove();
|
|
this.element.show();
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$('#ac-combo').combobox();
|
|
};
|
|
|
|
// Selectmenu
|
|
var _componentUiSelectmenu = function() {
|
|
if (!$().selectmenu) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Basic select
|
|
$('.select-basic').selectmenu({
|
|
width: '100%'
|
|
});
|
|
|
|
// Optgroups example
|
|
$('#select-optgroups').selectmenu({
|
|
width: '100%'
|
|
});
|
|
|
|
// Default width
|
|
$('#select-width').selectmenu({
|
|
width: 200
|
|
});
|
|
|
|
// Disabled select
|
|
$('#select-disabled').selectmenu({
|
|
width: '100%',
|
|
disabled: true
|
|
});
|
|
|
|
|
|
//
|
|
// Select with icons
|
|
//
|
|
|
|
// Custom widget configuration
|
|
$.widget('custom.iconselectmenu', $.ui.selectmenu, {
|
|
_renderItem: function(ul, item) {
|
|
var li = $('<li>'),
|
|
wrapper = $('<div>', { text: item.label });
|
|
|
|
if (item.disabled) {
|
|
li.addClass('ui-state-disabled');
|
|
}
|
|
|
|
$('<i>', {
|
|
style: item.element.attr('data-style'),
|
|
'class': 'ui-icon ' + item.element.attr('data-icon')
|
|
}).prependTo(wrapper);
|
|
|
|
// return li.appendTo(ul);
|
|
return li.append( wrapper ).appendTo( ul );
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$('#select-icons').iconselectmenu({width: '100%'}).iconselectmenu('menuWidget');
|
|
|
|
|
|
//
|
|
// Select with images
|
|
//
|
|
|
|
// Custom widget configuration
|
|
$.widget('custom.imageselectmenu', $.ui.selectmenu, {
|
|
_renderItem: function(ul, item) {
|
|
var li = $('<li>'),
|
|
wrapper = $('<div>', { text: item.label });
|
|
|
|
if (item.disabled) {
|
|
li.addClass('ui-state-disabled');
|
|
}
|
|
|
|
$('<span>', {
|
|
style: item.element.attr('data-style'),
|
|
'class': item.element.attr('data-class')
|
|
}).prependTo(wrapper);
|
|
|
|
// return li.appendTo(ul);
|
|
return li.append( wrapper ).appendTo( ul );
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$('#select-images').imageselectmenu({width: '100%'}).imageselectmenu('menuWidget').addClass('ui-selectmenu-images');
|
|
};
|
|
|
|
// Spinner
|
|
var _componentUiSpinner = function() {
|
|
if (!$().spinner) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Basic spinner
|
|
$('#spinner-basic').spinner();
|
|
|
|
// Disabled spinner
|
|
$('#spinner-disabled').spinner({
|
|
disabled: true
|
|
});
|
|
|
|
// Spinner min/max limits
|
|
$('#spinner-limits').spinner({
|
|
min: 90,
|
|
max: 110,
|
|
start: 100
|
|
});
|
|
|
|
// Spinner step
|
|
$('#spinner-step').spinner({
|
|
step: 20,
|
|
start: 500
|
|
});
|
|
|
|
// Spinner overflow
|
|
$('#spinner-overflow').spinner({
|
|
spin: function(event, ui) {
|
|
if (ui.value > 10) {
|
|
$(this).spinner('value', -10);
|
|
return false;
|
|
}
|
|
else if (ui.value < -10) {
|
|
$(this).spinner('value', 10);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Currency spinner
|
|
//
|
|
|
|
// Culture
|
|
$('#spinner-currency-culture').on('selectmenuchange', function() {
|
|
$('#spinner-currency').spinner('option', 'culture', $(this).val());
|
|
});
|
|
|
|
// Initialize
|
|
$('#spinner-currency').spinner({
|
|
start: 1000,
|
|
numberFormat: 'C'
|
|
});
|
|
|
|
|
|
//
|
|
// Decimal spinner
|
|
//
|
|
|
|
// Culture
|
|
$( '#spinner-decimal-culture' ).on('selectmenuchange', function() {
|
|
var current = $('#spinner-decimal').spinner('value');
|
|
Globalize.culture( $(this).val() );
|
|
$('#spinner-decimal').spinner('value', current);
|
|
});
|
|
|
|
// Initialize
|
|
$('#spinner-decimal').spinner({
|
|
step: 0.01,
|
|
numberFormat: 'n'
|
|
});
|
|
|
|
|
|
//
|
|
// Time spinner
|
|
//
|
|
|
|
// Configure custom widget
|
|
$.widget('ui.timespinner', $.ui.spinner, {
|
|
options: {
|
|
step: 60 * 1000, // seconds
|
|
page: 60 // hours
|
|
},
|
|
_parse: function(value) {
|
|
if (typeof value === 'string') {
|
|
|
|
// Already a timestamp
|
|
if (Number(value) == value) {
|
|
return Number(value);
|
|
}
|
|
return +Globalize.parseDate(value);
|
|
}
|
|
return value;
|
|
},
|
|
_format: function(value) {
|
|
return Globalize.format(new Date(value), 't');
|
|
}
|
|
});
|
|
|
|
// Culture
|
|
$('#spinner-time-culture').on('selectmenuchange', function() {
|
|
var current = $('#spinner-time').timespinner('value');
|
|
Globalize.culture($(this).val());
|
|
$('#spinner-time').timespinner('value', current);
|
|
});
|
|
|
|
// Initialize
|
|
$('#spinner-time').timespinner();
|
|
};
|
|
|
|
|
|
//
|
|
// Return objects assigned to module
|
|
//
|
|
|
|
return {
|
|
init: function() {
|
|
_componentUiDatepicker();
|
|
_componentUiAutocomplete();
|
|
_componentUiSelectmenu();
|
|
_componentUiSpinner();
|
|
}
|
|
}
|
|
}();
|
|
|
|
|
|
// Initialize module
|
|
// ------------------------------
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
JqueryUiForms.init();
|
|
});
|