/public/assets/pages/scripts/components-form-tools.js
JavaScript | 253 lines | 204 code | 42 blank | 7 comment | 11 complexity | ce34c9582cb799a5fd4b21a09d7b423f MD5 | raw file
- var ComponentsFormTools = function () {
- var handleBootstrapMaxlength = function() {
- $('#maxlength_defaultconfig').maxlength({
- limitReachedClass: "label label-danger",
- })
-
- $('#maxlength_thresholdconfig').maxlength({
- limitReachedClass: "label label-danger",
- threshold: 20
- });
- $('#maxlength_alloptions').maxlength({
- alwaysShow: true,
- warningClass: "label label-success",
- limitReachedClass: "label label-danger",
- separator: ' out of ',
- preText: 'You typed ',
- postText: ' chars available.',
- validate: true
- });
- $('#maxlength_textarea').maxlength({
- limitReachedClass: "label label-danger",
- alwaysShow: true
- });
- $('#maxlength_placement').maxlength({
- limitReachedClass: "label label-danger",
- alwaysShow: true,
- placement: App.isRTL() ? 'top-right' : 'top-left'
- });
- }
-
- var handleInputMasks = function () {
-
- $("#mask_date").inputmask("d/m/y", {
- autoUnmask: true
- }); //direct mask
- $("#mask_date1").inputmask("d/m/y", {
- "placeholder": "*"
- }); //change the placeholder
- $("#mask_date2").inputmask("d/m/y", {
- "placeholder": "dd/mm/yyyy"
- }); //multi-char placeholder
- $("#mask_phone").inputmask("mask", {
- "mask": "(999) 999-9999"
- }); //specifying fn & options
- $("#mask_tin").inputmask({
- "mask": "99-9999999",
- placeholder: "" // remove underscores from the input mask
- }); //specifying options only
- $("#mask_number").inputmask({
- "mask": "9",
- "repeat": 10,
- "greedy": false
- }); // ~ mask "9" or mask "99" or ... mask "9999999999"
- $("#mask_decimal").inputmask('decimal', {
- rightAlignNumerics: false
- }); //disables the right alignment of the decimal input
- $("#mask_currency").inputmask('€ 999.999.999,99', {
- numericInput: true
- }); //123456 => € ___.__1.234,56
- $("#mask_currency2").inputmask('€ 999,999,999.99', {
- numericInput: true,
- rightAlignNumerics: false,
- greedy: false
- }); //123456 => € ___.__1.234,56
- $("#mask_ssn").inputmask("999-99-9999", {
- placeholder: " ",
- clearMaskOnLostFocus: true
- }); //default
- }
- var handleIPAddressInput = function () {
- $('#input_ipv4').ipAddress();
- $('#input_ipv6').ipAddress({
- v: 6
- });
- }
- var handlePasswordStrengthChecker = function () {
- var initialized = false;
- var input = $("#password_strength");
- input.keydown(function () {
- if (initialized === false) {
- // set base options
- input.pwstrength({
- raisePower: 1.4,
- minChar: 8,
- verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
- scores: [17, 26, 40, 50, 60]
- });
- // add your own rule to calculate the password strength
- input.pwstrength("addRule", "demoRule", function (options, word, score) {
- return word.match(/[a-z].[0-9]/) && score;
- }, 10, true);
- // set as initialized
- initialized = true;
- }
- });
- }
- var handleUsernameAvailabilityChecker1 = function () {
- var input = $("#username1_input");
- $("#username1_checker").click(function (e) {
- var pop = $(this);
- if (input.val() === "") {
- input.closest('.form-group').removeClass('has-success').addClass('has-error');
- pop.popover('destroy');
- pop.popover({
- 'placement': (App.isRTL() ? 'left' : 'right'),
- 'html': true,
- 'container': 'body',
- 'content': 'Please enter a username to check its availability.',
- });
- // add error class to the popover
- pop.data('bs.popover').tip().addClass('error');
- // set last poped popover to be closed on click(see App.js => handlePopovers function)
- App.setLastPopedPopover(pop);
- pop.popover('show');
- e.stopPropagation(); // prevent closing the popover
- return;
- }
- var btn = $(this);
- btn.attr('disabled', true);
- input.attr("readonly", true).
- attr("disabled", true).
- addClass("spinner");
- $.post('../demo/username_checker.php', {
- username: input.val()
- }, function (res) {
- btn.attr('disabled', false);
- input.attr("readonly", false).
- attr("disabled", false).
- removeClass("spinner");
- if (res.status == 'OK') {
- input.closest('.form-group').removeClass('has-error').addClass('has-success');
- pop.popover('destroy');
- pop.popover({
- 'html': true,
- 'placement': (App.isRTL() ? 'left' : 'right'),
- 'container': 'body',
- 'content': res.message,
- });
- pop.popover('show');
- pop.data('bs.popover').tip().removeClass('error').addClass('success');
- } else {
- input.closest('.form-group').removeClass('has-success').addClass('has-error');
- pop.popover('destroy');
- pop.popover({
- 'html': true,
- 'placement': (App.isRTL() ? 'left' : 'right'),
- 'container': 'body',
- 'content': res.message,
- });
- pop.popover('show');
- pop.data('bs.popover').tip().removeClass('success').addClass('error');
- App.setLastPopedPopover(pop);
- }
- }, 'json');
- });
- }
- var handleUsernameAvailabilityChecker2 = function () {
- $("#username2_input").change(function () {
- var input = $(this);
- if (input.val() === "") {
- input.closest('.form-group').removeClass('has-error').removeClass('has-success');
- $('.fa-check, fa-warning', input.closest('.form-group')).remove();
- return;
- }
- input.attr("readonly", true).
- attr("disabled", true).
- addClass("spinner");
- $.post('../demo/username_checker.php', {
- username: input.val()
- }, function (res) {
- input.attr("readonly", false).
- attr("disabled", false).
- removeClass("spinner");
- // change popover font color based on the result
- if (res.status == 'OK') {
- input.closest('.form-group').removeClass('has-error').addClass('has-success');
- $('.fa-warning', input.closest('.form-group')).remove();
- input.before('<i class="fa fa-check"></i>');
- input.data('bs.popover').tip().removeClass('error').addClass('success');
- } else {
- input.closest('.form-group').removeClass('has-success').addClass('has-error');
- $('.fa-check', input.closest('.form-group')).remove();
- input.before('<i class="fa fa-warning"></i>');
- input.popover('destroy');
- input.popover({
- 'html': true,
- 'placement': (App.isRTL() ? 'left' : 'right'),
- 'container': 'body',
- 'content': res.message,
- });
- input.popover('show');
- input.data('bs.popover').tip().removeClass('success').addClass('error');
- App.setLastPopedPopover(input);
- }
- }, 'json');
- });
- }
- return {
- //main function to initiate the module
- init: function () {
- handleBootstrapMaxlength();
- handleIPAddressInput();
- handlePasswordStrengthChecker();
- handleUsernameAvailabilityChecker1();
- handleUsernameAvailabilityChecker2();
- handleInputMasks();
- }
- };
- }();
- if (App.isAngularJsApp() === false) {
- jQuery(document).ready(function() {
- ComponentsFormTools.init(); // init metronic core componets
- });
- }