https://urbane-gaerten.de//components/com_mymaplocations/assets/js/jquery-labelauty.js

1/*!
2 * LABELAUTY jQuery Plugin
3 *
4 * @file: jquery-labelauty.js
5 * @author: Francisco Neves (@fntneves)
6 * @site: www.francisconeves.com
7 * @license: MIT License
8 */
9
10(function( $ ){
11
12	$.fn.labelauty = function( options )
13	{
14		/*
15		 * Our default settings
16		 * Hope you don't need to change anything, with these settings
17		 */
18		var settings = $.extend(
19		{
20			// Development Mode
21			// This will activate console debug messages
22			development: false,
23
24			// Trigger Class
25			// This class will be used to apply styles
26			class: "labelauty",
27
28			// Use text label ?
29			// If false, then only an icon represents the input
30			label: true,
31
32			// Separator between labels' messages
33			// If you use this separator for anything, choose a new one
34			separator: "|",
35
36			// Default Checked Message
37			// This message will be visible when input is checked
38			checked_label: "Checked",
39
40			// Default UnChecked Message
41			// This message will be visible when input is unchecked
42			unchecked_label: "Unchecked",
43
44			// Force random ID's
45			// Replace original ID's with random ID's,
46			force_random_id: false,
47
48			// Minimum Label Width
49			// This value will be used to apply a minimum width to the text labels
50			minimum_width: false,
51
52			// Use the greatest width between two text labels ?
53			// If this has a true value, then label width will be the greatest between labels
54			same_width: true
55		}, options);
56
57		/*
58		 * Let's create the core function
59		 * It will try to cover all settings and mistakes of using
60		 */
61		return this.each(function()
62		{
63			var $object = $( this );
64			var use_labels = true;
65			var labels;
66			var labels_object;
67			var input_id;
68
69			// Test if object is a check input
70			// Don't mess me up, come on
71			if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )
72				return this;
73
74			// Add "labelauty" class to all checkboxes
75			// So you can apply some custom styles
76			$object.addClass( settings.class );
77
78			// Get the value of "data-labelauty" attribute
79			// Then, we have the labels for each case (or not, as we will see)
80			labels = $object.attr( "data-labelauty" );
81
82			use_labels = settings.label;
83
84			// It's time to check if it's going to the right way
85			// Null values, more labels than expected or no labels will be handled here
86			if( use_labels === true )
87			{
88				if( labels == null || labels.length === 0 )
89				{
90					// If attribute has no label and we want to use, then use the default labels
91					labels_object = new Array();
92					labels_object[0] = settings.unchecked_label;
93					labels_object[1] = settings.checked_label;
94				}
95				else
96				{
97					// Ok, ok, it's time to split Checked and Unchecked labels
98					// We split, by the "settings.separator" option
99					labels_object = labels.split( settings.separator );
100
101					// Now, let's check if exist _only_ two labels
102					// If there's more than two, then we do not use labels :(
103					// Else, do some additional tests
104					if( labels_object.length > 2 )
105					{
106						use_labels = false;
107						debug( settings.development, "There's more than two labels. LABELAUTY will not use labels." );
108					}
109					else
110					{
111						// If there's just one label (no split by "settings.separator"), it will be used for both cases
112						// Here, we have the possibility of use the same label for both cases
113						if( labels_object.length === 1 )
114							debug( settings.development, "There's just one label. LABELAUTY will use this one for both cases." );
115					}
116				}
117			}
118
119			/*
120			 * Let's begin the beauty
121			 */
122
123			// Start hiding ugly checkboxes
124			// Obviously, we don't need native checkboxes :O
125			$object.css({ display : "none" });
126
127			// We don't need more data-labelauty attributes!
128			// Ok, ok, it's just for beauty improvement
129			$object.removeAttr( "data-labelauty" );
130
131			// Now, grab checkbox ID Attribute for "label" tag use
132			// If there's no ID Attribute, then generate a new one
133			input_id = $object.attr( "id" );
134
135			if( settings.force_random_id || input_id == null || input_id.trim() === "")
136			{
137				var input_id_number = 1 + Math.floor( Math.random() * 1024000 );
138				input_id = "labelauty-" + input_id_number;
139
140				// Is there any element with this random ID ?
141				// If exists, then increment until get an unused ID
142				while( $( input_id ).length !== 0 )
143				{
144					input_id_number++;
145					input_id = "labelauty-" + input_id_number;
146					debug( settings.development, "Holy crap, between 1024 thousand numbers, one raised a conflict. Trying again." );
147				}
148
149				$object.attr( "id", input_id );
150			}
151
152			// Now, add necessary tags to make this work
153			// Here, we're going to test some control variables and act properly
154			$object.after( create( input_id, labels_object, use_labels ) );
155
156			// Now, add "min-width" to label
157			// Let's say the truth, a fixed width is more beautiful than a variable width
158			if( settings.minimum_width !== false )
159				$object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });
160
161			// Now, add "min-width" to label
162			// Let's say the truth, a fixed width is more beautiful than a variable width
163			if( settings.same_width != false && settings.label == true )
164			{
165				var label_object = $object.next( "label[for=" + input_id + "]" );

166				var unchecked_width = getRealWidth(label_object.find( "span.labelauty-unchecked" ));
167				var checked_width = getRealWidth(label_object.find( "span.labelauty-checked" ));
168
169				if( unchecked_width > checked_width )
170					label_object.find( "span.labelauty-checked" ).width( unchecked_width );
171				else
172					label_object.find( "span.labelauty-unchecked" ).width( checked_width );
173			}
174		});
175	};
176
177	/*
178	 * Tricky code to work with hidden elements, like tabs.
179	 * Note: This code is based on jquery.actual plugin.
180	 * https://github.com/dreamerslab/jquery.actual
181	 */
182	function getRealWidth( element )
183	{
184		var width = 0;
185		var $target = element;
186		var style = 'position: absolute !important; top: -1000 !important; ';
187
188		$target = $target.clone().attr('style', style).appendTo('body');
189		width = $target.width(true);
190		$target.remove();
191
192		return width;
193	}
194
195	function debug( debug, message )
196	{
197		if( debug && window.console && window.console.log )
198			window.console.log( "jQuery-LABELAUTY: " + message );
199	};
200
201	function create( input_id, messages_object, label )
202	{
203		var block;
204		var unchecked_message;
205		var checked_message;
206
207		if( messages_object == null )
208			unchecked_message = checked_message = "";
209		else
210		{
211			unchecked_message = messages_object[0];
212
213			// If checked message is null, then put the same text of unchecked message
214			if( messages_object[1] == null )
215				checked_message = unchecked_message;
216			else
217				checked_message = messages_object[1];
218		}
219
220		if( label == true )
221		{
222			block = '<label for="' + input_id + '">' +
223						'<span class="labelauty-unchecked-image"></span>' +
224						'<span class="labelauty-unchecked">' + unchecked_message + '</span>' +
225						'<span class="labelauty-checked-image"></span>' +
226						'<span class="labelauty-checked">' + checked_message + '</span>' +
227					'</label>';
228		}
229		else
230		{
231			block = '<label for="' + input_id + '">' +
232						'<span class="labelauty-unchecked-image"></span>' +
233						'<span class="labelauty-checked-image"></span>' +
234					'</label>';
235		}
236
237		return block;
238	};
239
240}( jQuery ));