Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / js / jquery.uniform.js @ f932b578

History | View | Annotate | Download (19.1 kB)

1
/*
2

3
Uniform v1.7.5
4
Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC
5
http://pixelmatrixdesign.com
6

7
Requires jQuery 1.4 or newer
8

9
Much thanks to Thomas Reynolds and Buck Wilson for their help and advice on this
10

11
Disabling text selection is made possible by Mathias Bynens <http://mathiasbynens.be/>
12
and his noSelect plugin. <http://github.com/mathiasbynens/noSelect-jQuery-Plugin>
13

14
Also, thanks to David Kaneda and Eugene Bond for their contributions to the plugin
15

16
License:
17
MIT License - http://www.opensource.org/licenses/mit-license.php
18

19
Enjoy!
20

21
*/
22

    
23
(function($) {
24
  $.uniform = {
25
    options: {
26
      selectClass:   'selector',
27
      radioClass: 'radio',
28
      checkboxClass: 'checker',
29
      fileClass: 'uploader',
30
      filenameClass: 'filename',
31
      fileBtnClass: 'action',
32
      fileDefaultText: 'No file selected',
33
      fileBtnText: 'Choose File',
34
      checkedClass: 'checked',
35
      focusClass: 'focus',
36
      disabledClass: 'disabled',
37
      buttonClass: 'button',
38
      activeClass: 'active',
39
      hoverClass: 'hover',
40
      useID: true,
41
      idPrefix: 'uniform',
42
      resetSelector: false,
43
      autoHide: true
44
    },
45
    elements: []
46
  };
47

    
48
  if($.browser.msie && $.browser.version < 7){
49
    $.support.selectOpacity = false;
50
  }else{
51
    $.support.selectOpacity = true;
52
  }
53

    
54
  $.fn.uniform = function(options) {
55

    
56
    options = $.extend($.uniform.options, options);
57

    
58
    var el = this;
59
    //code for specifying a reset button
60
    if(options.resetSelector != false){
61
      $(options.resetSelector).mouseup(function(){
62
        function resetThis(){
63
          $.uniform.update(el);
64
        }
65
        setTimeout(resetThis, 10);
66
      });
67
    }
68
    
69
    function doInput(elem){
70
      $el = $(elem);
71
      $el.addClass($el.attr("type"));
72
      storeElement(elem);
73
    }
74
    
75
    function doTextarea(elem){
76
      $(elem).addClass("uniform");
77
      storeElement(elem);
78
    }
79
    
80
    function doButton(elem){
81
      var $el = $(elem);
82
      
83
      var divTag = $("<div>"),
84
          spanTag = $("<span>");
85
      
86
      divTag.addClass(options.buttonClass);
87
      
88
      if(options.useID && $el.attr("id") != "") divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
89
      
90
      var btnText;
91
      
92
      if($el.is("a") || $el.is("button")){
93
        btnText = $el.text();
94
      }else if($el.is(":submit") || $el.is(":reset") || $el.is("input[type=button]")){
95
        btnText = $el.attr("value");
96
      }
97
      
98
      btnText = btnText == "" ? $el.is(":reset") ? "Reset" : "Submit" : btnText;
99
      
100
      spanTag.html(btnText);
101
      
102
      $el.css("opacity", 0);
103
      $el.wrap(divTag);
104
      $el.wrap(spanTag);
105
      
106
      //redefine variables
107
      divTag = $el.closest("div");
108
      spanTag = $el.closest("span");
109
      
110
      if($el.is(":disabled")) divTag.addClass(options.disabledClass);
111
      
112
      divTag.bind({
113
        "mouseenter.uniform": function(){
114
          divTag.addClass(options.hoverClass);
115
        },
116
        "mouseleave.uniform": function(){
117
          divTag.removeClass(options.hoverClass);
118
          divTag.removeClass(options.activeClass);
119
        },
120
        "mousedown.uniform touchbegin.uniform": function(){
121
          divTag.addClass(options.activeClass);
122
        },
123
        "mouseup.uniform touchend.uniform": function(){
124
          divTag.removeClass(options.activeClass);
125
        },
126
        "click.uniform touchend.uniform": function(e){
127
          if($(e.target).is("span") || $(e.target).is("div")){    
128
            if(elem[0].dispatchEvent){
129
              var ev = document.createEvent('MouseEvents');
130
              ev.initEvent( 'click', true, true );
131
              elem[0].dispatchEvent(ev);
132
            }else{
133
              elem[0].click();
134
            }
135
          }
136
        }
137
      });
138
      
139
      elem.bind({
140
        "focus.uniform": function(){
141
          divTag.addClass(options.focusClass);
142
        },
143
        "blur.uniform": function(){
144
          divTag.removeClass(options.focusClass);
145
        }
146
      });
147
      
148
      $.uniform.noSelect(divTag);
149
      storeElement(elem);
150
      
151
    }
152

    
153
    function doSelect(elem){
154
      var $el = $(elem);
155
      
156
      var divTag = $('<div />'),
157
          spanTag = $('<span />');
158
      
159
      if(!$el.css("display") == "none" && options.autoHide){
160
        divTag.hide();
161
      }
162

    
163
      divTag.addClass(options.selectClass);
164

    
165
      if(options.useID && elem.attr("id") != ""){
166
        divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
167
      }
168
      
169
      var selected = elem.find(":selected:first");
170
      if(selected.length == 0){
171
        selected = elem.find("option:first");
172
      }
173
      spanTag.html(selected.html());
174
      
175
      elem.css('opacity', 0);
176
      elem.wrap(divTag);
177
      elem.before(spanTag);
178

    
179
      //redefine variables
180
      divTag = elem.parent("div");
181
      spanTag = elem.siblings("span");
182

    
183
      elem.bind({
184
        "change.uniform": function() {
185
          spanTag.text(elem.find(":selected").html());
186
          divTag.removeClass(options.activeClass);
187
        },
188
        "focus.uniform": function() {
189
          divTag.addClass(options.focusClass);
190
        },
191
        "blur.uniform": function() {
192
          divTag.removeClass(options.focusClass);
193
          divTag.removeClass(options.activeClass);
194
        },
195
        "mousedown.uniform touchbegin.uniform": function() {
196
          divTag.addClass(options.activeClass);
197
        },
198
        "mouseup.uniform touchend.uniform": function() {
199
          divTag.removeClass(options.activeClass);
200
        },
201
        "click.uniform touchend.uniform": function(){
202
          divTag.removeClass(options.activeClass);
203
        },
204
        "mouseenter.uniform": function() {
205
          divTag.addClass(options.hoverClass);
206
        },
207
        "mouseleave.uniform": function() {
208
          divTag.removeClass(options.hoverClass);
209
          divTag.removeClass(options.activeClass);
210
        },
211
        "keyup.uniform": function(){
212
          spanTag.text(elem.find(":selected").html());
213
        }
214
      });
215
      
216
      //handle disabled state
217
      if($(elem).attr("disabled")){
218
        //box is checked by default, check our box
219
        divTag.addClass(options.disabledClass);
220
      }
221
      $.uniform.noSelect(spanTag);
222
      
223
      storeElement(elem);
224

    
225
    }
226

    
227
    function doCheckbox(elem){
228
      var $el = $(elem);
229
      
230
      var divTag = $('<div />'),
231
          spanTag = $('<span />');
232
      
233
      if(!$el.css("display") == "none" && options.autoHide){
234
        divTag.hide();
235
      }
236
      
237
      divTag.addClass(options.checkboxClass);
238

    
239
      //assign the id of the element
240
      if(options.useID && elem.attr("id") != ""){
241
        divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
242
      }
243

    
244
      //wrap with the proper elements
245
      $(elem).wrap(divTag);
246
      $(elem).wrap(spanTag);
247

    
248
      //redefine variables
249
      spanTag = elem.parent();
250
      divTag = spanTag.parent();
251

    
252
      //hide normal input and add focus classes
253
      $(elem)
254
      .css("opacity", 0)
255
      .bind({
256
        "focus.uniform": function(){
257
          divTag.addClass(options.focusClass);
258
        },
259
        "blur.uniform": function(){
260
          divTag.removeClass(options.focusClass);
261
        },
262
        "click.uniform touchend.uniform": function(){
263
          if(!$(elem).attr("checked")){
264
            //box was just unchecked, uncheck span
265
            spanTag.removeClass(options.checkedClass);
266
          }else{
267
            //box was just checked, check span.
268
            spanTag.addClass(options.checkedClass);
269
          }
270
        },
271
        "mousedown.uniform touchbegin.uniform": function() {
272
          divTag.addClass(options.activeClass);
273
        },
274
        "mouseup.uniform touchend.uniform": function() {
275
          divTag.removeClass(options.activeClass);
276
        },
277
        "mouseenter.uniform": function() {
278
          divTag.addClass(options.hoverClass);
279
        },
280
        "mouseleave.uniform": function() {
281
          divTag.removeClass(options.hoverClass);
282
          divTag.removeClass(options.activeClass);
283
        }
284
      });
285
      
286
      //handle defaults
287
      if($(elem).attr("checked")){
288
        //box is checked by default, check our box
289
        spanTag.addClass(options.checkedClass);
290
      }
291

    
292
      //handle disabled state
293
      if($(elem).attr("disabled")){
294
        //box is checked by default, check our box
295
        divTag.addClass(options.disabledClass);
296
      }
297

    
298
      storeElement(elem);
299
    }
300

    
301
    function doRadio(elem){
302
      var $el = $(elem);
303
      
304
      var divTag = $('<div />'),
305
          spanTag = $('<span />');
306
          
307
      if(!$el.css("display") == "none" && options.autoHide){
308
        divTag.hide();
309
      }
310

    
311
      divTag.addClass(options.radioClass);
312

    
313
      if(options.useID && elem.attr("id") != ""){
314
        divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
315
      }
316

    
317
      //wrap with the proper elements
318
      $(elem).wrap(divTag);
319
      $(elem).wrap(spanTag);
320

    
321
      //redefine variables
322
      spanTag = elem.parent();
323
      divTag = spanTag.parent();
324

    
325
      //hide normal input and add focus classes
326
      $(elem)
327
      .css("opacity", 0)
328
      .bind({
329
        "focus.uniform": function(){
330
          divTag.addClass(options.focusClass);
331
        },
332
        "blur.uniform": function(){
333
          divTag.removeClass(options.focusClass);
334
        },
335
        "click.uniform touchend.uniform": function(){
336
          if(!$(elem).attr("checked")){
337
            //box was just unchecked, uncheck span
338
            spanTag.removeClass(options.checkedClass);
339
          }else{
340
            //box was just checked, check span
341
            var classes = options.radioClass.split(" ")[0];
342
            $("." + classes + " span." + options.checkedClass + ":has([name='" + $(elem).attr('name') + "'])").removeClass(options.checkedClass);
343
            spanTag.addClass(options.checkedClass);
344
          }
345
        },
346
        "mousedown.uniform touchend.uniform": function() {
347
          if(!$(elem).is(":disabled")){
348
            divTag.addClass(options.activeClass);
349
          }
350
        },
351
        "mouseup.uniform touchbegin.uniform": function() {
352
          divTag.removeClass(options.activeClass);
353
        },
354
        "mouseenter.uniform touchend.uniform": function() {
355
          divTag.addClass(options.hoverClass);
356
        },
357
        "mouseleave.uniform": function() {
358
          divTag.removeClass(options.hoverClass);
359
          divTag.removeClass(options.activeClass);
360
        }
361
      });
362

    
363
      //handle defaults
364
      if($(elem).attr("checked")){
365
        //box is checked by default, check span
366
        spanTag.addClass(options.checkedClass);
367
      }
368
      //handle disabled state
369
      if($(elem).attr("disabled")){
370
        //box is checked by default, check our box
371
        divTag.addClass(options.disabledClass);
372
      }
373

    
374
      storeElement(elem);
375

    
376
    }
377

    
378
    function doFile(elem){
379
      //sanitize input
380
      var $el = $(elem);
381

    
382
      var divTag = $('<div />'),
383
          filenameTag = $('<span>'+options.fileDefaultText+'</span>'),
384
          btnTag = $('<span>'+options.fileBtnText+'</span>');
385
      
386
      if(!$el.css("display") == "none" && options.autoHide){
387
        divTag.hide();
388
      }
389

    
390
      divTag.addClass(options.fileClass);
391
      filenameTag.addClass(options.filenameClass);
392
      btnTag.addClass(options.fileBtnClass);
393

    
394
      if(options.useID && $el.attr("id") != ""){
395
        divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
396
      }
397

    
398
      //wrap with the proper elements
399
      $el.wrap(divTag);
400
      $el.after(btnTag);
401
      $el.after(filenameTag);
402

    
403
      //redefine variables
404
      divTag = $el.closest("div");
405
      filenameTag = $el.siblings("."+options.filenameClass);
406
      btnTag = $el.siblings("."+options.fileBtnClass);
407

    
408
      //set the size
409
      if(!$el.attr("size")){
410
        var divWidth = divTag.width();
411
        //$el.css("width", divWidth);
412
        $el.attr("size", divWidth/10);
413
      }
414

    
415
      //actions
416
      var setFilename = function()
417
      {
418
        var filename = $el.val();
419
        if (filename === '')
420
        {
421
          filename = options.fileDefaultText;
422
        }
423
        else
424
        {
425
          filename = filename.split(/[\/\\]+/);
426
          filename = filename[(filename.length-1)];
427
        }
428
        filenameTag.text(filename);
429
      };
430

    
431
      // Account for input saved across refreshes
432
      setFilename();
433

    
434
      $el
435
      .css("opacity", 0)
436
      .bind({
437
        "focus.uniform": function(){
438
          divTag.addClass(options.focusClass);
439
        },
440
        "blur.uniform": function(){
441
          divTag.removeClass(options.focusClass);
442
        },
443
        "mousedown.uniform": function() {
444
          if(!$(elem).is(":disabled")){
445
            divTag.addClass(options.activeClass);
446
          }
447
        },
448
        "mouseup.uniform": function() {
449
          divTag.removeClass(options.activeClass);
450
        },
451
        "mouseenter.uniform": function() {
452
          divTag.addClass(options.hoverClass);
453
        },
454
        "mouseleave.uniform": function() {
455
          divTag.removeClass(options.hoverClass);
456
          divTag.removeClass(options.activeClass);
457
        }
458
      });
459

    
460
      // IE7 doesn't fire onChange until blur or second fire.
461
      if ($.browser.msie){
462
        // IE considers browser chrome blocking I/O, so it
463
        // suspends tiemouts until after the file has been selected.
464
        $el.bind('click.uniform.ie7', function() {
465
          setTimeout(setFilename, 0);
466
        });
467
      }else{
468
        // All other browsers behave properly
469
        $el.bind('change.uniform', setFilename);
470
      }
471

    
472
      //handle defaults
473
      if($el.attr("disabled")){
474
        //box is checked by default, check our box
475
        divTag.addClass(options.disabledClass);
476
      }
477
      
478
      $.uniform.noSelect(filenameTag);
479
      $.uniform.noSelect(btnTag);
480
      
481
      storeElement(elem);
482

    
483
    }
484
    
485
    $.uniform.restore = function(elem){
486
      if(elem == undefined){
487
        elem = $($.uniform.elements);
488
      }
489
      
490
      $(elem).each(function(){
491
        if($(this).is(":checkbox")){
492
          //unwrap from span and div
493
          $(this).unwrap().unwrap();
494
        }else if($(this).is("select")){
495
          //remove sibling span
496
          $(this).siblings("span").remove();
497
          //unwrap parent div
498
          $(this).unwrap();
499
        }else if($(this).is(":radio")){
500
          //unwrap from span and div
501
          $(this).unwrap().unwrap();
502
        }else if($(this).is(":file")){
503
          //remove sibling spans
504
          $(this).siblings("span").remove();
505
          //unwrap parent div
506
          $(this).unwrap();
507
        }else if($(this).is("button, :submit, :reset, a, input[type='button']")){
508
          //unwrap from span and div
509
          $(this).unwrap().unwrap();
510
        }
511
        
512
        //unbind events
513
        $(this).unbind(".uniform");
514
        
515
        //reset inline style
516
        $(this).css("opacity", "1");
517
        
518
        //remove item from list of uniformed elements
519
        var index = $.inArray($(elem), $.uniform.elements);
520
        $.uniform.elements.splice(index, 1);
521
      });
522
    };
523

    
524
    function storeElement(elem){
525
      //store this element in our global array
526
      elem = $(elem).get();
527
      if(elem.length > 1){
528
        $.each(elem, function(i, val){
529
          $.uniform.elements.push(val);
530
        });
531
      }else{
532
        $.uniform.elements.push(elem);
533
      }
534
    }
535
    
536
    //noSelect v1.0
537
    $.uniform.noSelect = function(elem) {
538
      function f() {
539
       return false;
540
      };
541
      $(elem).each(function() {
542
       this.onselectstart = this.ondragstart = f; // Webkit & IE
543
       $(this)
544
        .mousedown(f) // Webkit & Opera
545
        .css({ MozUserSelect: 'none' }); // Firefox
546
      });
547
     };
548

    
549
    $.uniform.update = function(elem){
550
      if(elem == undefined){
551
        elem = $($.uniform.elements);
552
      }
553
      //sanitize input
554
      elem = $(elem);
555

    
556
      elem.each(function(){
557
        //do to each item in the selector
558
        //function to reset all classes
559
        var $e = $(this);
560

    
561
        if($e.is("select")){
562
          //element is a select
563
          var spanTag = $e.siblings("span");
564
          var divTag = $e.parent("div");
565

    
566
          divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
567

    
568
          //reset current selected text
569
          spanTag.html($e.find(":selected").html());
570

    
571
          if($e.is(":disabled")){
572
            divTag.addClass(options.disabledClass);
573
          }else{
574
            divTag.removeClass(options.disabledClass);
575
          }
576

    
577
        }else if($e.is(":checkbox")){
578
          //element is a checkbox
579
          var spanTag = $e.closest("span");
580
          var divTag = $e.closest("div");
581

    
582
          divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
583
          spanTag.removeClass(options.checkedClass);
584

    
585
          if($e.is(":checked")){
586
            spanTag.addClass(options.checkedClass);
587
          }
588
          if($e.is(":disabled")){
589
            divTag.addClass(options.disabledClass);
590
          }else{
591
            divTag.removeClass(options.disabledClass);
592
          }
593

    
594
        }else if($e.is(":radio")){
595
          //element is a radio
596
          var spanTag = $e.closest("span");
597
          var divTag = $e.closest("div");
598

    
599
          divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
600
          spanTag.removeClass(options.checkedClass);
601

    
602
          if($e.is(":checked")){
603
            spanTag.addClass(options.checkedClass);
604
          }
605

    
606
          if($e.is(":disabled")){
607
            divTag.addClass(options.disabledClass);
608
          }else{
609
            divTag.removeClass(options.disabledClass);
610
          }
611
        }else if($e.is(":file")){
612
          var divTag = $e.parent("div");
613
          var filenameTag = $e.siblings(options.filenameClass);
614
          btnTag = $e.siblings(options.fileBtnClass);
615

    
616
          divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
617

    
618
          filenameTag.text($e.val());
619

    
620
          if($e.is(":disabled")){
621
            divTag.addClass(options.disabledClass);
622
          }else{
623
            divTag.removeClass(options.disabledClass);
624
          }
625
        }else if($e.is(":submit") || $e.is(":reset") || $e.is("button") || $e.is("a") || elem.is("input[type=button]")){
626
          var divTag = $e.closest("div");
627
          divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
628
          
629
          if($e.is(":disabled")){
630
            divTag.addClass(options.disabledClass);
631
          }else{
632
            divTag.removeClass(options.disabledClass);
633
          }
634
          
635
        }
636
        
637
      });
638
    };
639

    
640
    return this.each(function() {
641
      if($.support.selectOpacity){
642
        var elem = $(this);
643

    
644
        if(elem.is("select")){
645
          //element is a select
646
          if(elem.attr("multiple") != true){
647
            //element is not a multi-select
648
            if(elem.attr("size") == undefined || elem.attr("size") <= 1){
649
              doSelect(elem);
650
            }
651
          }
652
        }else if(elem.is(":checkbox")){
653
          //element is a checkbox
654
          doCheckbox(elem);
655
        }else if(elem.is(":radio")){
656
          //element is a radio
657
          doRadio(elem);
658
        }else if(elem.is(":file")){
659
          //element is a file upload
660
          doFile(elem);
661
        }else if(elem.is(":text, :password, input[type='email']")){
662
          doInput(elem);
663
        }else if(elem.is("textarea")){
664
          doTextarea(elem);
665
        }else if(elem.is("a") || elem.is(":submit") || elem.is(":reset") || elem.is("button") || elem.is("input[type=button]")){
666
          doButton(elem);
667
        }
668
          
669
      }
670
    });
671
  };
672
})(jQuery);