https://www.taegrt.hu/theme/taeg/js/label.js

1/*!
2 * Label v1.0, https://github.com/brendenpalmer/label/tree/1.x
3 * ===================================
4 * Label is a simple jQuery plugin that adds labels for easy HTML5 markup
5 *
6 * Copyright (c) 2015 Brenden Palmer, http://www.brendenpalmer.com
7 * MIT Licensed
8 */
9
10;(function( $ ) {
11 
12    $.fn.label = function(options) {
13 		'use strict';
14        var settings = $.extend({
15            // These are the defaults.
16            mode: 'default', //default OR placeholder OR inline
17            color: '#666',
18            parentClass: 'input-parent',
19            labelClass: 'label',
20            fontSize: '0.9rem',
21            alignText: 'left', //left, center, or right
22            show: 'default' //default, keyup, focus
23        }, options );
24 		
25 		function Label(input){
26 			this.input = input;
27 			this.init();
28 		}
29 		
30 		Label.prototype.wrapInput = function(){
31 			var $input = $(this.input);
32 			$input.wrap('<div class="'+settings.parentClass+'" style="position:relative;"></div>');
33 		};
34 		
35 		Label.prototype.createLabel = function(){
36 			var $input = $(this.input), label;
37 			switch (settings.mode){
38 				case 'placeholder':
39 					if ($input.val().length > 0)
40						label = '<label class="placeholder-label show"';
41					else
42						label = '<label class="placeholder-label"';
43					label = label + ' style="font-size:'+$input.css('font-size')+';color:'+settings.color+';';
44					label = label + 'text-align:'+settings.alignText+';"';
45					label = label + '>'+$input.data('label');+'</label>';
46					break;
47				case 'inline':
48					label = '<label class="'+settings.labelClass+' inline"';
49					label = label + ' style="color:'+settings.color+';text-align:'+settings.alignText+';"';
50					label = label + '>'+$input.data('label');+'</label>';
51					break;
52				default:
53 					label = '<label class="'+settings.labelClass+'"';
54					label = label + ' style="color:'+settings.color+';text-align:'+settings.alignText+';"';
55					label = label + '>'+$input.data('label');+'</label>';
56					break;
57 			}
58			return label;
59 		};
60 		
61 		Label.prototype.showLabel = function(){
62 			var $input = $(this.input);
63 			switch (settings.show){
64 				case 'focus':
65 					$input.focus(function(){
66						$input.parent().find('label').addClass('show').css('font-size',settings.fontSize);
67					});
68					break;
69				case 'keyup':
70					$input.keyup(function(){
71						if ($input.val().length > 0)
72							$input.parent().find('label').addClass('show').css('font-size',settings.fontSize);;
73					});
74					break;
75				default:
76					if (settings.mode === 'placeholder'){
77						$input.focus(function(){
78							$input.parent().find('label').addClass('show');
79						});
80					} else {
81						$input.parent().find('label').addClass('show').css('font-size',settings.fontSize);
82					}
83 					break;
84 			}
85 		};
86 		
87 		Label.prototype.init = function(){
88 			var $input = $(this.input);
89 			if ($input.data('label') !== undefined && $input.data('label').length > 0){
90				this.wrapInput();
91				$input.parent().prepend(this.createLabel());
92				this.showLabel();
93 			}
94 		};
95 		
96 		if (settings.mode === 'placeholder'){
97 			$(document).on('click', '.placeholder-label', function(e){
98 				e.preventDefault();
99 				$(this).next().focus();
100 			});
101 		}
102 		
103 		return this.each(function(){
104 			var label = new Label(this);
105 		});
106 		
107    };
108 
109}( jQuery ));