Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 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 (App.isRTL()) {
24
          $('#typeahead_example_1').attr("dir", "rtl");
25
        }
26
        $('#typeahead_example_1').typeahead(null, {
27
          displayKey: 'num',
28
          hint: (App.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 (App.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: (App.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 (App.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: (App.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 (App.isRTL()) {
109
          $('#typeahead_example_4').attr("dir", "rtl");
110
        }
111
        $('#typeahead_example_4').typeahead({
112
          hint: (App.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 (App.isRTL()) {
155
          $('#typeahead_example_modal_1').attr("dir", "rtl");
156
        }
157
        $('#typeahead_example_modal_1').typeahead(null, {
158
          displayKey: 'num',
159
          hint: (App.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 (App.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: (App.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 (App.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: (App.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: (App.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: App.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
 
370
        $("#mask_date").inputmask("d/m/y", {
371
            autoUnmask: true
372
        }); //direct mask
373
        $("#mask_date1").inputmask("d/m/y", {
374
            "placeholder": "*"
375
        }); //change the placeholder
376
        $("#mask_date2").inputmask("d/m/y", {
377
            "placeholder": "dd/mm/yyyy"
378
        }); //multi-char placeholder
379
        $("#mask_phone").inputmask("mask", {
380
            "mask": "(999) 999-9999"
381
        }); //specifying fn & options
382
        $("#mask_tin").inputmask({
383
            "mask": "99-9999999",
384
            placeholder: "" // remove underscores from the input mask
385
        }); //specifying options only
386
        $("#mask_number").inputmask({
387
            "mask": "9",
388
            "repeat": 10,
389
            "greedy": false
390
        }); // ~ mask "9" or mask "99" or ... mask "9999999999"
391
        $("#mask_decimal").inputmask('decimal', {
392
            rightAlignNumerics: false
393
        }); //disables the right alignment of the decimal input
394
        $("#mask_currency").inputmask('€ 999.999.999,99', {
395
            numericInput: true
396
        }); //123456  =>  € ___.__1.234,56
397
 
398
        $("#mask_currency2").inputmask('€ 999,999,999.99', {
399
            numericInput: true,
400
            rightAlignNumerics: false,
401
            greedy: false
402
        }); //123456  =>  € ___.__1.234,56
403
        $("#mask_ssn").inputmask("999-99-9999", {
404
            placeholder: " ",
405
            clearMaskOnLostFocus: true
406
        }); //default
407
    }
408
 
409
    var handleIPAddressInput = function () {
410
        $('#input_ipv4').ipAddress();
411
        $('#input_ipv6').ipAddress({
412
            v: 6
413
        });
414
    }
415
 
416
    var handlePasswordStrengthChecker = function () {
417
        var initialized = false;
418
        var input = $("#password_strength");
419
 
420
        input.keydown(function () {
421
            if (initialized === false) {
422
                // set base options
423
                input.pwstrength({
424
                    raisePower: 1.4,
425
                    minChar: 8,
426
                    verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
427
                    scores: [17, 26, 40, 50, 60]
428
                });
429
 
430
                // add your own rule to calculate the password strength
431
                input.pwstrength("addRule", "demoRule", function (options, word, score) {
432
                    return word.match(/[a-z].[0-9]/) && score;
433
                }, 10, true);
434
 
435
                // set as initialized
436
                initialized = true;
437
            }
438
        });
439
    }
440
 
441
    var handleUsernameAvailabilityChecker1 = function () {
442
        var input = $("#username1_input");
443
 
444
        $("#username1_checker").click(function (e) {
445
            var pop = $(this);
446
 
447
            if (input.val() === "") {
448
                input.closest('.form-group').removeClass('has-success').addClass('has-error');
449
 
450
                pop.popover('destroy');
451
                pop.popover({
452
                    'placement': (App.isRTL() ? 'left' : 'right'),
453
                    'html': true,
454
                    'container': 'body',
455
                    'content': 'Please enter a username to check its availability.',
456
                });
457
                // add error class to the popover
458
                pop.data('bs.popover').tip().addClass('error');
459
                // set last poped popover to be closed on click(see App.js => handlePopovers function)
460
                App.setLastPopedPopover(pop);
461
                pop.popover('show');
462
                e.stopPropagation(); // prevent closing the popover
463
 
464
                return;
465
            }
466
 
467
            var btn = $(this);
468
 
469
            btn.attr('disabled', true);
470
 
471
            input.attr("readonly", true).
472
            attr("disabled", true).
473
            addClass("spinner");
474
 
475
            $.post('../demo/username_checker.php', {
476
                username: input.val()
477
            }, function (res) {
478
                btn.attr('disabled', false);
479
 
480
                input.attr("readonly", false).
481
                attr("disabled", false).
482
                removeClass("spinner");
483
 
484
                if (res.status == 'OK') {
485
                    input.closest('.form-group').removeClass('has-error').addClass('has-success');
486
 
487
                    pop.popover('destroy');
488
                    pop.popover({
489
                        'html': true,
490
                        'placement': (App.isRTL() ? 'left' : 'right'),
491
                        'container': 'body',
492
                        'content': res.message,
493
                    });
494
                    pop.popover('show');
495
                    pop.data('bs.popover').tip().removeClass('error').addClass('success');
496
                } else {
497
                    input.closest('.form-group').removeClass('has-success').addClass('has-error');
498
 
499
                    pop.popover('destroy');
500
                    pop.popover({
501
                        'html': true,
502
                        'placement': (App.isRTL() ? 'left' : 'right'),
503
                        'container': 'body',
504
                        'content': res.message,
505
                    });
506
                    pop.popover('show');
507
                    pop.data('bs.popover').tip().removeClass('success').addClass('error');
508
                    App.setLastPopedPopover(pop);
509
                }
510
 
511
            }, 'json');
512
 
513
        });
514
    }
515
 
516
    var handleUsernameAvailabilityChecker2 = function () {
517
        $("#username2_input").change(function () {
518
            var input = $(this);
519
 
520
            if (input.val() === "") {
521
                input.closest('.form-group').removeClass('has-error').removeClass('has-success');
522
                $('.fa-check, fa-warning', input.closest('.form-group')).remove();
523
 
524
                return;
525
            }
526
 
527
            input.attr("readonly", true).
528
            attr("disabled", true).
529
            addClass("spinner");
530
 
531
            $.post('../demo/username_checker.php', {
532
                username: input.val()
533
            }, function (res) {
534
                input.attr("readonly", false).
535
                attr("disabled", false).
536
                removeClass("spinner");
537
 
538
                // change popover font color based on the result
539
                if (res.status == 'OK') {
540
                    input.closest('.form-group').removeClass('has-error').addClass('has-success');
541
                    $('.fa-warning', input.closest('.form-group')).remove();
542
                    input.before('<i class="fa fa-check"></i>');
543
                    input.data('bs.popover').tip().removeClass('error').addClass('success');
544
                } else {
545
                    input.closest('.form-group').removeClass('has-success').addClass('has-error');
546
                    $('.fa-check', input.closest('.form-group')).remove();
547
                    input.before('<i class="fa fa-warning"></i>');
548
 
549
                    input.popover('destroy');
550
                    input.popover({
551
                        'html': true,
552
                        'placement': (App.isRTL() ? 'left' : 'right'),
553
                        'container': 'body',
554
                        'content': res.message,
555
                    });
556
                    input.popover('show');
557
                    input.data('bs.popover').tip().removeClass('success').addClass('error');
558
 
559
                    App.setLastPopedPopover(input);
560
                }
561
 
562
            }, 'json');
563
 
564
        });
565
    }
566
 
567
    return {
568
        //main function to initiate the module
569
        init: function () {
570
            handleTwitterTypeahead();
571
            handleTwitterTypeaheadModal();
572
 
573
            handleBootstrapSwitch();
574
            handleBootstrapTouchSpin();
575
            handleBootstrapMaxlength();
576
            handleSpinners();
577
            handleTagsInput();
578
            handleInputMasks();
579
            handleIPAddressInput();
580
            handlePasswordStrengthChecker();
581
            handleUsernameAvailabilityChecker1();
582
            handleUsernameAvailabilityChecker2();
583
        }
584
    };
585
 
586
}();