Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
var ComponentsFormTools = function () {
2
 
3
    var handleTwitterTypeahead = function() {
4
 
5
        // Example #1
6
        // instantiate the bloodhound suggestion engine
7
        var numbers = new Bloodhound({
8
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
9
          queryTokenizer: Bloodhound.tokenizers.whitespace,
10
          local: [
11
            { num: 'metronic' },
12
            { num: 'keenthemes' },
13
            { num: 'metronic theme' },
14
            { num: 'metronic template' },
15
            { num: 'keenthemes team' }
16
          ]
17
        });
18
 
19
        // initialize the bloodhound suggestion engine
20
        numbers.initialize();
21
 
22
        // instantiate the typeahead UI
23
        if (Metronic.isRTL()) {
24
          $('#typeahead_example_1').attr("dir", "rtl");  
25
        }
26
        $('#typeahead_example_1').typeahead(null, {
27
          displayKey: 'num',
28
          hint: (Metronic.isRTL() ? false : true),
29
          source: numbers.ttAdapter()
30
        });
31
 
32
        // Example #2
33
        var countries = new Bloodhound({
34
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
35
          queryTokenizer: Bloodhound.tokenizers.whitespace,
36
          limit: 10,
37
          prefetch: {
38
            url: 'demo/typeahead_countries.json',
39
            filter: function(list) {
40
              return $.map(list, function(country) { return { name: country }; });
41
            }
42
          }
43
        });
44
 
45
        countries.initialize();
46
 
47
        if (Metronic.isRTL()) {
48
          $('#typeahead_example_2').attr("dir", "rtl");  
49
        }
50
        $('#typeahead_example_2').typeahead(null, {
51
          name: 'typeahead_example_2',
52
          displayKey: 'name',
53
          hint: (Metronic.isRTL() ? false : true),
54
          source: countries.ttAdapter()
55
        });
56
 
57
        // Example #3
58
        var custom = new Bloodhound({
59
          datumTokenizer: function(d) { return d.tokens; },
60
          queryTokenizer: Bloodhound.tokenizers.whitespace,
61
          remote: 'demo/typeahead_custom.php?query=%QUERY'
62
        });
63
 
64
        custom.initialize();
65
 
66
        if (Metronic.isRTL()) {
67
          $('#typeahead_example_3').attr("dir", "rtl");  
68
        }  
69
        $('#typeahead_example_3').typeahead(null, {
70
          name: 'datypeahead_example_3',
71
          displayKey: 'value',
72
          source: custom.ttAdapter(),
73
          hint: (Metronic.isRTL() ? false : true),
74
          templates: {
75
            suggestion: Handlebars.compile([
76
              '<div class="media">',
77
                    '<div class="pull-left">',
78
                        '<div class="media-object">',
79
                            '<img src="{{img}}" width="50" height="50"/>',
80
                        '</div>',
81
                    '</div>',
82
                    '<div class="media-body">',
83
                        '<h4 class="media-heading">{{value}}</h4>',
84
                        '<p>{{desc}}</p>',
85
                    '</div>',
86
              '</div>',
87
            ].join(''))
88
          }
89
        });
90
 
91
        // Example #4
92
 
93
        var nba = new Bloodhound({
94
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
95
          queryTokenizer: Bloodhound.tokenizers.whitespace,
96
          prefetch: 'demo/typeahead_nba.json'
97
        });
98
 
99
        var nhl = new Bloodhound({
100
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
101
          queryTokenizer: Bloodhound.tokenizers.whitespace,
102
          prefetch: 'demo/typeahead_nhl.json'
103
        });
104
 
105
        nba.initialize();
106
        nhl.initialize();
107
 
108
        if (Metronic.isRTL()) {
109
          $('#typeahead_example_4').attr("dir", "rtl");  
110
        }
111
        $('#typeahead_example_4').typeahead({
112
          hint: (Metronic.isRTL() ? false : true),
113
          highlight: true
114
        },
115
        {
116
          name: 'nba',
117
          displayKey: 'team',
118
          source: nba.ttAdapter(),
119
          templates: {
120
                header: '<h3>NBA Teams</h3>'
121
          }
122
        },
123
        {
124
          name: 'nhl',
125
          displayKey: 'team',
126
          source: nhl.ttAdapter(),
127
          templates: {
128
                header: '<h3>NHL Teams</h3>'
129
          }
130
        });
131
 
132
    }
133
 
134
    var handleTwitterTypeaheadModal = function() {
135
 
136
        // Example #1
137
        // instantiate the bloodhound suggestion engine
138
        var numbers = new Bloodhound({
139
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
140
          queryTokenizer: Bloodhound.tokenizers.whitespace,
141
          local: [
142
            { num: 'metronic' },
143
            { num: 'keenthemes' },
144
            { num: 'metronic theme' },
145
            { num: 'metronic template' },
146
            { num: 'keenthemes team' }
147
          ]
148
        });
149
 
150
        // initialize the bloodhound suggestion engine
151
        numbers.initialize();
152
 
153
        // instantiate the typeahead UI
154
        if (Metronic.isRTL()) {
155
          $('#typeahead_example_modal_1').attr("dir", "rtl");  
156
        }
157
        $('#typeahead_example_modal_1').typeahead(null, {
158
          displayKey: 'num',
159
          hint: (Metronic.isRTL() ? false : true),
160
          source: numbers.ttAdapter()
161
        });
162
 
163
        // Example #2
164
        var countries = new Bloodhound({
165
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
166
          queryTokenizer: Bloodhound.tokenizers.whitespace,
167
          limit: 10,
168
          prefetch: {
169
            url: 'demo/typeahead_countries.json',
170
            filter: function(list) {
171
              return $.map(list, function(country) { return { name: country }; });
172
            }
173
          }
174
        });
175
 
176
        countries.initialize();
177
 
178
        if (Metronic.isRTL()) {
179
          $('#typeahead_example_modal_2').attr("dir", "rtl");  
180
        }
181
        $('#typeahead_example_modal_2').typeahead(null, {
182
          name: 'typeahead_example_modal_2',
183
          displayKey: 'name',
184
          hint: (Metronic.isRTL() ? false : true),
185
          source: countries.ttAdapter()
186
        });
187
 
188
        // Example #3
189
        var custom = new Bloodhound({
190
          datumTokenizer: function(d) { return d.tokens; },
191
          queryTokenizer: Bloodhound.tokenizers.whitespace,
192
          remote: 'demo/typeahead_custom.php?query=%QUERY'
193
        });
194
 
195
        custom.initialize();
196
 
197
        if (Metronic.isRTL()) {
198
          $('#typeahead_example_modal_3').attr("dir", "rtl");  
199
        }
200
        $('#typeahead_example_modal_3').typeahead(null, {
201
          name: 'datypeahead_example_modal_3',
202
          displayKey: 'value',
203
          hint: (Metronic.isRTL() ? false : true),
204
          source: custom.ttAdapter(),
205
          templates: {
206
            suggestion: Handlebars.compile([
207
              '<div class="media">',
208
                    '<div class="pull-left">',
209
                        '<div class="media-object">',
210
                            '<img src="{{img}}" width="50" height="50"/>',
211
                        '</div>',
212
                    '</div>',
213
                    '<div class="media-body">',
214
                        '<h4 class="media-heading">{{value}}</h4>',
215
                        '<p>{{desc}}</p>',
216
                    '</div>',
217
              '</div>',
218
            ].join(''))
219
          }
220
        });
221
 
222
        // Example #4
223
 
224
        var nba = new Bloodhound({
225
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
226
          queryTokenizer: Bloodhound.tokenizers.whitespace,
227
          limit: 3,
228
          prefetch: 'demo/typeahead_nba.json'
229
        });
230
 
231
        var nhl = new Bloodhound({
232
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.team); },
233
          queryTokenizer: Bloodhound.tokenizers.whitespace,
234
          limit: 3,
235
          prefetch: 'demo/typeahead_nhl.json'
236
        });
237
 
238
        nba.initialize();
239
        nhl.initialize();
240
 
241
        $('#typeahead_example_modal_4').typeahead({
242
            hint: (Metronic.isRTL() ? false : true),
243
            highlight: true
244
        },
245
        {
246
          name: 'nba',
247
          displayKey: 'team',
248
          source: nba.ttAdapter(),
249
          templates: {
250
                header: '<h3>NBA Teams</h3>'
251
          }
252
        },
253
        {
254
          name: 'nhl',
255
          displayKey: 'team',
256
          source: nhl.ttAdapter(),
257
          templates: {
258
                header: '<h3>NHL Teams</h3>'
259
          }
260
        });
261
 
262
    }
263
 
264
    var handleBootstrapSwitch = function() {
265
 
266
        $('.switch-radio1').on('switch-change', function () {
267
            $('.switch-radio1').bootstrapSwitch('toggleRadioState');
268
        });
269
 
270
        // or
271
        $('.switch-radio1').on('switch-change', function () {
272
            $('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
273
        });
274
 
275
        // or
276
        $('.switch-radio1').on('switch-change', function () {
277
            $('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
278
        });
279
 
280
    }
281
 
282
    var handleBootstrapTouchSpin = function() {
283
 
284
        $("#touchspin_demo1").TouchSpin({          
285
            buttondown_class: 'btn green',
286
            buttonup_class: 'btn green',
287
            min: -1000000000,
288
            max: 1000000000,
289
            stepinterval: 50,
290
            maxboostedstep: 10000000,
291
            prefix: '$'
292
        });
293
 
294
        $("#touchspin_demo2").TouchSpin({
295
            buttondown_class: 'btn blue',
296
            buttonup_class: 'btn blue',
297
            min: 0,
298
            max: 100,
299
            step: 0.1,
300
            decimals: 2,
301
            boostat: 5,
302
            maxboostedstep: 10,
303
            postfix: '%'
304
        });        
305
 
306
        $("#touchspin_demo3").TouchSpin({          
307
            buttondown_class: 'btn green',
308
            buttonup_class: 'btn green',
309
            prefix: "$",
310
            postfix: "%"
311
        });
312
    }
313
 
314
    var handleBootstrapMaxlength = function() {
315
        $('#maxlength_defaultconfig').maxlength({
316
            limitReachedClass: "label label-danger",
317
        })
318
 
319
        $('#maxlength_thresholdconfig').maxlength({
320
            limitReachedClass: "label label-danger",
321
            threshold: 20
322
        });
323
 
324
        $('#maxlength_alloptions').maxlength({
325
            alwaysShow: true,
326
            warningClass: "label label-success",
327
            limitReachedClass: "label label-danger",
328
            separator: ' out of ',
329
            preText: 'You typed ',
330
            postText: ' chars available.',
331
            validate: true
332
        });
333
 
334
        $('#maxlength_textarea').maxlength({
335
            limitReachedClass: "label label-danger",
336
            alwaysShow: true
337
        });
338
 
339
        $('#maxlength_placement').maxlength({
340
            limitReachedClass: "label label-danger",
341
            alwaysShow: true,
342
            placement: Metronic.isRTL() ? 'top-right' : 'top-left'
343
        });
344
    }
345
 
346
    var handleSpinners = function () {
347
        $('#spinner1').spinner();
348
        $('#spinner2').spinner({disabled: true});
349
        $('#spinner3').spinner({value:0, min: 0, max: 10});
350
        $('#spinner4').spinner({value:0, step: 5, min: 0, max: 200});
351
    }
352
 
353
    var handleTagsInput = function () {
354
        if (!jQuery().tagsInput) {
355
            return;
356
        }
357
        $('#tags_1').tagsInput({
358
            width: 'auto',
359
            'onAddTag': function () {
360
                //alert(1);
361
            },
362
        });
363
        $('#tags_2').tagsInput({
364
            width: 300
365
        });
366
    }
367
 
368
    var handleInputMasks = function () {
369
        $.extend($.inputmask.defaults, {
370
            'autounmask': true
371
        });
372
 
373
        $("#mask_date").inputmask("d/m/y", {
374
            autoUnmask: true
375
        }); //direct mask        
376
        $("#mask_date1").inputmask("d/m/y", {
377
            "placeholder": "*"
378
        }); //change the placeholder
379
        $("#mask_date2").inputmask("d/m/y", {
380
            "placeholder": "dd/mm/yyyy"
381
        }); //multi-char placeholder
382
        $("#mask_phone").inputmask("mask", {
383
            "mask": "(999) 999-9999"
384
        }); //specifying fn & options
385
        $("#mask_tin").inputmask({
386
            "mask": "99-9999999",
387
            placeholder: "" // remove underscores from the input mask
388
        }); //specifying options only
389
        $("#mask_number").inputmask({
390
            "mask": "9",
391
            "repeat": 10,
392
            "greedy": false
393
        }); // ~ mask "9" or mask "99" or ... mask "9999999999"
394
        $("#mask_decimal").inputmask('decimal', {
395
            rightAlignNumerics: false
396
        }); //disables the right alignment of the decimal input
397
        $("#mask_currency").inputmask('€ 999.999.999,99', {
398
            numericInput: true
399
        }); //123456  =>  â‚¬ ___.__1.234,56
400
 
401
        $("#mask_currency2").inputmask('€ 999,999,999.99', {
402
            numericInput: true,
403
            rightAlignNumerics: false,
404
            greedy: false
405
        }); //123456  =>  â‚¬ ___.__1.234,56
406
        $("#mask_ssn").inputmask("999-99-9999", {
407
            placeholder: " ",
408
            clearMaskOnLostFocus: true
409
        }); //default
410
    }
411
 
412
    var handleIPAddressInput = function () {
413
        $('#input_ipv4').ipAddress();
414
        $('#input_ipv6').ipAddress({
415
            v: 6
416
        });
417
    }
418
 
419
    var handlePasswordStrengthChecker = function () {
420
        var initialized = false;
421
        var input = $("#password_strength");
422
 
423
        input.keydown(function () {
424
            if (initialized === false) {
425
                // set base options
426
                input.pwstrength({
427
                    raisePower: 1.4,
428
                    minChar: 8,
429
                    verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
430
                    scores: [17, 26, 40, 50, 60]
431
                });
432
 
433
                // add your own rule to calculate the password strength
434
                input.pwstrength("addRule", "demoRule", function (options, word, score) {
435
                    return word.match(/[a-z].[0-9]/) && score;
436
                }, 10, true);
437
 
438
                // set as initialized 
439
                initialized = true;
440
            }
441
        });
442
    }
443
 
444
    var handleUsernameAvailabilityChecker1 = function () {
445
        var input = $("#username1_input");
446
 
447
        $("#username1_checker").click(function (e) {
448
            var pop = $(this);
449
 
450
            if (input.val() === "") {
451
                input.closest('.form-group').removeClass('has-success').addClass('has-error');
452
 
453
                pop.popover('destroy');
454
                pop.popover({
455
                    'placement': (Metronic.isRTL() ? 'left' : 'right'),
456
                    'html': true,
457
                    'container': 'body',
458
                    'content': 'Please enter a username to check its availability.',
459
                });
460
                // add error class to the popover
461
                pop.data('bs.popover').tip().addClass('error');
462
                // set last poped popover to be closed on click(see Metronic.js => handlePopovers function)     
463
                Metronic.setLastPopedPopover(pop);
464
                pop.popover('show');
465
                e.stopPropagation(); // prevent closing the popover
466
 
467
                return;
468
            }
469
 
470
            var btn = $(this);
471
 
472
            btn.attr('disabled', true);
473
 
474
            input.attr("readonly", true).
475
            attr("disabled", true).
476
            addClass("spinner");
477
 
478
            $.post('demo/username_checker.php', {
479
                username: input.val()
480
            }, function (res) {
481
                btn.attr('disabled', false);
482
 
483
                input.attr("readonly", false).
484
                attr("disabled", false).
485
                removeClass("spinner");
486
 
487
                if (res.status == 'OK') {
488
                    input.closest('.form-group').removeClass('has-error').addClass('has-success');
489
 
490
                    pop.popover('destroy');
491
                    pop.popover({
492
                        'html': true,
493
                        'placement': (Metronic.isRTL() ? 'left' : 'right'),
494
                        'container': 'body',
495
                        'content': res.message,
496
                    });
497
                    pop.popover('show');
498
                    pop.data('bs.popover').tip().removeClass('error').addClass('success');
499
                } else {
500
                    input.closest('.form-group').removeClass('has-success').addClass('has-error');
501
 
502
                    pop.popover('destroy');
503
                    pop.popover({
504
                        'html': true,
505
                        'placement': (Metronic.isRTL() ? 'left' : 'right'),
506
                        'container': 'body',
507
                        'content': res.message,
508
                    });
509
                    pop.popover('show');
510
                    pop.data('bs.popover').tip().removeClass('success').addClass('error');
511
                    Metronic.setLastPopedPopover(pop);
512
                }
513
 
514
            }, 'json');
515
 
516
        });
517
    }
518
 
519
    var handleUsernameAvailabilityChecker2 = function () {
520
        $("#username2_input").change(function () {
521
            var input = $(this);
522
 
523
            if (input.val() === "") {
524
                input.closest('.form-group').removeClass('has-error').removeClass('has-success');
525
                $('.fa-check, fa-warning', input.closest('.form-group')).remove();
526
 
527
                return;
528
            }
529
 
530
            input.attr("readonly", true).
531
            attr("disabled", true).
532
            addClass("spinner");
533
 
534
            $.post('demo/username_checker.php', {
535
                username: input.val()
536
            }, function (res) {
537
                input.attr("readonly", false).
538
                attr("disabled", false).
539
                removeClass("spinner");
540
 
541
                // change popover font color based on the result
542
                if (res.status == 'OK') {
543
                    input.closest('.form-group').removeClass('has-error').addClass('has-success');
544
                    $('.fa-warning', input.closest('.form-group')).remove();
545
                    input.before('<i class="fa fa-check"></i>');
546
                    input.data('bs.popover').tip().removeClass('error').addClass('success');
547
                } else {
548
                    input.closest('.form-group').removeClass('has-success').addClass('has-error');
549
                    $('.fa-check', input.closest('.form-group')).remove();
550
                    input.before('<i class="fa fa-warning"></i>');
551
 
552
                    input.popover('destroy');
553
                    input.popover({
554
                        'html': true,
555
                        'placement': (Metronic.isRTL() ? 'left' : 'right'),
556
                        'container': 'body',
557
                        'content': res.message,
558
                    });
559
                    input.popover('show');
560
                    input.data('bs.popover').tip().removeClass('success').addClass('error');
561
 
562
                    Metronic.setLastPopedPopover(input);
563
                }
564
 
565
            }, 'json');
566
 
567
        });
568
    }
569
 
570
    return {
571
        //main function to initiate the module
572
        init: function () {
573
            handleTwitterTypeahead();
574
            handleTwitterTypeaheadModal();
575
 
576
            handleBootstrapSwitch();
577
            handleBootstrapTouchSpin();
578
            handleBootstrapMaxlength();
579
            handleSpinners();
580
            handleTagsInput();
581
            handleInputMasks();
582
            handleIPAddressInput();
583
            handlePasswordStrengthChecker();
584
            handleUsernameAvailabilityChecker1();
585
            handleUsernameAvailabilityChecker2();
586
        }
587
    };
588
 
589
}();