first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,258 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Floating labels
|
||||
*
|
||||
* Demo JS code for form_floating_labels.html page
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var FloatingLabels = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Floating labels config
|
||||
var _componentFloatingLabels = function() {
|
||||
|
||||
// Variables
|
||||
var showClass = 'is-visible',
|
||||
animateClass = 'animate',
|
||||
labelWrapperClass = 'form-group-float',
|
||||
labelClass = 'form-group-float-label';
|
||||
|
||||
// Setup
|
||||
$('input:not(.token-input):not(.bootstrap-tagsinput > input), textarea, select').on('checkval change', function () {
|
||||
|
||||
// Define label
|
||||
var label = $(this).parents('.' + labelWrapperClass).children('.' + labelClass);
|
||||
|
||||
// Toggle label
|
||||
if (this.value !== '') {
|
||||
label.addClass(showClass);
|
||||
}
|
||||
else {
|
||||
label.removeClass(showClass).addClass(animateClass);
|
||||
}
|
||||
|
||||
}).on('keyup', function () {
|
||||
$(this).trigger('checkval');
|
||||
}).trigger('checkval').trigger('change');
|
||||
|
||||
|
||||
// Remove animation on page load
|
||||
$(window).on('load', function() {
|
||||
$('.' + labelWrapperClass).find('.' + showClass).removeClass(animateClass);
|
||||
});
|
||||
};
|
||||
|
||||
// Tokenfield
|
||||
var _componentTokenfield = function() {
|
||||
if (!$().tokenfield) {
|
||||
console.warn('Warning - tokenfield.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic initialization
|
||||
$('.token-field').tokenfield();
|
||||
|
||||
// Configure labels
|
||||
$('.token-field').on('tokenfield:createdtoken tokenfield:removedtoken change', function (e) {
|
||||
if($(this).parent().children().hasClass('token')) {
|
||||
$(this).parent().find('.token-input').attr('placeholder', '');
|
||||
}
|
||||
else {
|
||||
$(this).parent().find('.token-input').attr('placeholder', '- Tokenfield');
|
||||
}
|
||||
}).trigger('change');
|
||||
};
|
||||
|
||||
// Tags input
|
||||
var _componentTagsinput = function() {
|
||||
if (!$().tagsinput) {
|
||||
console.warn('Warning - tagsinput.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic initialization
|
||||
$('.tags-input').tagsinput();
|
||||
|
||||
// Configure labels
|
||||
var tagsinputClass = 'bootstrap-tagsinput';
|
||||
$('.tags-input').on('itemAdded itemRemoved change', function (e) {
|
||||
if($(this).parent().find('.' + tagsinputClass).children().hasClass('label')) {
|
||||
$(this).parent().find('.' + tagsinputClass).children('input[type=text]').attr('placeholder', '');
|
||||
}
|
||||
else {
|
||||
$(this).parent().find('.' + tagsinputClass).children('input[type=text]').attr('placeholder', '- Bootstrap tags input');
|
||||
}
|
||||
}).trigger('change');
|
||||
};
|
||||
|
||||
// Typeahead
|
||||
var _componentTypeahead = function() {
|
||||
if (!$().typeahead) {
|
||||
console.warn('Warning - typeahead.bundle.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Substring matches
|
||||
var substringMatcher = function(strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substringRegex;
|
||||
|
||||
// an array that will be populated with substring matches
|
||||
matches = [];
|
||||
|
||||
// regex used to determine if a string contains the substring `q`
|
||||
substrRegex = new RegExp(q, 'i');
|
||||
|
||||
// iterate through the pool of strings and for any string that
|
||||
// contains the substring `q`, add it to the `matches` array
|
||||
$.each(strs, function(i, str) {
|
||||
if (substrRegex.test(str)) {
|
||||
|
||||
// the typeahead jQuery plugin expects suggestions to a
|
||||
// JavaScript object, refer to typeahead docs for more info
|
||||
matches.push({ value: str });
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
// Add data
|
||||
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
|
||||
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
|
||||
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
|
||||
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
|
||||
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
|
||||
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
|
||||
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
|
||||
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
|
||||
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
|
||||
];
|
||||
|
||||
// Initialize
|
||||
$('.typeahead-basic').typeahead(
|
||||
{
|
||||
hint: true,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
displayKey: 'value',
|
||||
source: substringMatcher(states)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Touchspin
|
||||
var _componentTouchspin = function() {
|
||||
if (!$().TouchSpin) {
|
||||
console.warn('Warning - touchspin.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic initialization
|
||||
$('.touchspin-basic').TouchSpin({
|
||||
postfix: '<i class="icon-paragraph-justify2"></i>'
|
||||
});
|
||||
};
|
||||
|
||||
// Input formatter
|
||||
var _componentFormatter = function() {
|
||||
if (!$().formatter) {
|
||||
console.warn('Warning - formatter.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Date format
|
||||
$('[name="format-date"]').formatter({
|
||||
pattern: '{{99}}/{{99}}/{{9999}}'
|
||||
});
|
||||
};
|
||||
|
||||
// Maxlength
|
||||
var _componentMaxlength = function() {
|
||||
if (!$().maxlength) {
|
||||
console.warn('Warning - maxlength.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic example
|
||||
$('.form-control-maxlength').maxlength();
|
||||
};
|
||||
|
||||
// Uniform
|
||||
var _componentUniform = function() {
|
||||
if (!$().uniform) {
|
||||
console.warn('Warning - uniform.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
$('.form-control-uniform').uniform({
|
||||
fileButtonClass: 'action btn bg-pink-400'
|
||||
});
|
||||
};
|
||||
|
||||
// Multiselect
|
||||
var _componentMultiselect = function() {
|
||||
if (!$().multiselect) {
|
||||
console.warn('Warning - bootstrap-multiselect.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic initialization
|
||||
$('.form-control-multiselect').multiselect({
|
||||
nonSelectedText: 'Bootstrap multiselect'
|
||||
});
|
||||
};
|
||||
|
||||
// Select2
|
||||
var _componentSelect2 = function() {
|
||||
if (!$().select2) {
|
||||
console.warn('Warning - select2.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic select
|
||||
$('.form-control-select2').select2();
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_componentFloatingLabels();
|
||||
_componentTokenfield();
|
||||
_componentTagsinput();
|
||||
_componentTypeahead();
|
||||
_componentTouchspin();
|
||||
_componentFormatter();
|
||||
_componentMaxlength();
|
||||
_componentUniform();
|
||||
_componentMultiselect();
|
||||
_componentSelect2();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
FloatingLabels.init();
|
||||
});
|
||||
Reference in New Issue
Block a user