https://shop.siriusxm.com/scripts/html_ui.js

1// put user-interface (wrt an HTML page) JavaScript functions here
2
3/**
4 * good for auto-tabbing to the next input field once the max length of the current field is reached
5 */
6function moveOnMax(field, nextFieldID) {
7	if (field.value.length >= field.maxLength) {
8		document.getElementById(nextFieldID).focus();
9	}
10}
11
12/**
13 * good for OPTIONALLY clearing the value so long as it only contains the given value
14 */
15function clear_value_on_match(selector, value) {
16	if ($(selector).val() == value) {
17		$(selector).val('');
18	}
19}
20
21/**
22 * @deprecated replaced with jQuery plugin "html_ui_attachCharLimit"
23 */
24function char_limit_check(limit_field_id, limit, countdown_id) {
25	if ($(limit_field_id).value.length > limit) {
26		$(limit_field_id).value = $(limit_field_id).value.substring(0, limit);
27	} else {
28		if ($(countdown_id)) {
29			$(countdown_id).innerHTML = limit - $(limit_field_id).value.length;
30		}
31	}
32}
33
34/**
35 * @deprecated replaced with jQuery plugin "html_ui_attachCharLimit"
36 */
37function char_limit_check_jquery(limit_field_id, limit, countdown_id) {
38	if ($('#' + limit_field_id).val().length > limit) {
39		$('#' + limit_field_id).val($('#' + limit_field_id).val().substring(0, limit));
40	} else {
41		if ($('#' + countdown_id)) {
42			$('#' + countdown_id).innerHTML = limit - $('#' + limit_field_id).val().length;
43		}
44	}
45}
46
47/**
48 * @deprecated replaced with jQuery plugin "html_ui_attachCharLimit"
49 * @param on_selector
50 * @param target_selector
51 * @param limit
52 * @param counter_selector
53 * @returns
54 */
55function attachCharLimit(on_selector, target_selector, limit, counter_selector) {
56	$(on_selector).on('keydown keyup', target_selector, function(event) {
57		$target = $(event.target);
58		// console.log('here ' + $target.val().length);
59
60		if ($target.val().length > limit) {
61			$target.val($target.val().substring(0, limit));
62		} else {
63			$(counter_selector).html($target.val().length);
64		}
65	});
66}
67
68(function($) {
69
70	// replaces attachCharLimit()
71	$.fn.html_ui_attachCharLimit = function(options) {
72		var settings = $.extend({
73			limit : 300,
74			counter_selector : null
75		}, options);
76
77		this.on('keydown keyup', function(event) {
78			var $this = $(this);
79
80			if ($this.val().length > settings.limit) {
81				$this.val($this.val().substring(0, settings.limit));
82			}
83
84			if (settings.counter_selector != null) {
85				$(settings.counter_selector).html($this.val().length);
86			}
87		});
88	};
89}(jQuery));
90
91function goToTopOfPage() {
92	window.scrollTo(0, 0);
93}
94
95function disable_if_unchecked(checkbox_id, element_ids, enable_if_checked) {
96	if ($('#' + checkbox_id).is(':checked')) {
97		if (enable_if_checked) {
98			for (var i = 0; i < element_ids.length; i++) {
99				$('#' + element_ids[i]).attr('disabled', false);
100			}
101		}
102	} else {
103		for (var i = 0; i < element_ids.length; i++) {
104			$('#' + element_ids[i]).attr('disabled', true);
105		}
106	}
107}
108
109function uncheck_if_unchecked(checkbox_id, element_ids, check_if_checked) {
110	if ($('#' + checkbox_id).is(':checked')) {
111		if (check_if_checked) {
112			for (var i = 0; i < element_ids.length; i++) {
113				$('#' + element_ids[i]).attr('checked', true);
114			}
115		}
116	} else {
117		for (var i = 0; i < element_ids.length; i++) {
118			$('#' + element_ids[i]).attr('checked', false);
119		}
120	}
121}
122
123/**
124 * @deprecated obsoleted by html_ui_checkIfChecked()
125 * @param checkbox_id
126 * @param element_ids
127 */
128function check_if_checked(checkbox_id, element_ids) {
129	if ($('#' + checkbox_id).is(':checked')) {
130		for (var i = 0; i < element_ids.length; i++) {
131			$('#' + element_ids[i]).attr('checked', true);
132		}
133	}
134}
135
136function enable_if_checked(checkbox_id, element_ids) {
137	if ($('#' + checkbox_id).is(':checked')) {
138		for (var i = 0; i < element_ids.length; i++) {
139			$('#' + element_ids[i]).attr('disabled', false);
140		}
141	}
142}
143
144function integerConstraint(jquery_selector) {
145	$(jquery_selector).keydown(function(event) {
146
147		// Allow: backspace, delete, tab, escape, and enter
148		if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
149
150		// Allow: Ctrl+A
151		(event.keyCode == 65 && event.ctrlKey === true) ||
152
153		// Allow: home, end, left, right
154		(event.keyCode >= 35 && event.keyCode <= 39)) {
155
156			// let it happen, don't do anything
157			return;
158		} else {
159
160			// Ensure that it is a number and stop the keypress
161			if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
162				event.preventDefault();
163			}
164		}
165	});
166}
167
168/**

169 * @param container_selector some container that contains the input field, incrementor, and decrementor
170 * @param field_selector must be INSIDE container_selector
171 * @param inc_selector must be INSIDE container_selector
172 * @param dec_selector must be INSIDE container_selector
173 * @param min
174 * @param max
175 * @param callback with args old value, new value, target
176 */
177function integerIncrementorDecrementor(container_selector, field_selector, inc_selector, dec_selector, min, max, callback) {
178	$(container_selector).each(function() {
179		var $this = $(this);
180
181		$this.find(dec_selector).on('click', function(e) {
182			e.preventDefault();
183			var $field = $this.find(field_selector);
184			var old_val = $field.val();
185
186			if (old_val <= min) {
187				$field.val(min);
188			} else {
189				$field.val(old_val - 1);
190			}
191
192			if (old_val != $field.val() && typeof callback !== 'undefined' && callback != null) {
193				callback(old_val, $field.val(), $(e.target));
194			}
195		});
196
197		$this.find(inc_selector).on('click', function(e) {
198			e.preventDefault();
199			var $field = $this.find(field_selector);
200			var old_val = $field.val();
201
202			if (old_val >= max) {
203				$field.val(max);
204			} else {
205				$field.val(parseInt(old_val) + 1);
206			}
207
208			if (old_val != $field.val() && typeof callback !== 'undefined' && callback != null) {
209				callback(old_val, $field.val(), $(e.target));
210			}
211		});
212	});
213}
214
215/**
216 * @param selector click listener
217 * @parma target_selector change the name to one of the names
218 * @param names array of names
219 */
220function html_ui_toggleNameAttribute(selector, target_selector, names, prevent_default) {
221	$(selector).on('click', function(event) {
222		if (prevent_default) {
223			event.preventDefault();
224		}
225
226		var needle = $(target_selector).attr('name');
227		var idx = names.indexOf(needle);
228
229		if (idx < 0) {
230			console.log("couldn't find " + needle + " in " + names);
231		} else {
232			idx++;
233
234			if (idx == names.length) {
235				idx = 0;
236			}
237
238			console.log('next name ' + names[idx]);
239			$(target_selector).attr('name', names[idx]);
240		}
241	});
242}
243
244/**
245 * @param selector click listener
246 * @param array of functions
247 */
248function html_ui_toggleFunction(selector, fns, prevent_default) {
249	$(selector).on('click', function(event) {
250		if (prevent_default) {
251			event.preventDefault();
252		}
253
254		var $target = $(event.target);
255		var idx = $target.data('toggle-function-idx');
256
257		if (typeof idx === 'undefined' || idx == null) {
258
259			// if the selector doesn't have the data, we assume that it was
260			// never toggled.
261			// which means we will call the FIRST function.
262			idx = 0;
263		} else {
264			idx = parseInt(idx);
265			idx++;
266
267			if (idx == fns.length) {
268				idx = 0;
269			}
270		}
271
272		$target.data('toggle-function-idx', idx);
273		console.log('going to call fn ' + idx);
274		fns[idx](event);
275	});
276}
277
278/**
279 * if you click on something, all OTHER elements will match their 'checked' attribute as the target
280 */
281function html_ui_checkIfChecked(on_selector, selector, callback) {
282	$(on_selector).on('click', selector, function(event) {
283		var $target = $(event.target);
284		var checked = $target.is(':checked');
285		console.log('target is checked? ' + checked);
286
287		$(selector).each(function(idx, el) {
288			var $el = $(el);
289
290			if (!$target.is($el)) {
291				$el.attr('checked', checked);
292				console.log(checked ? 'checked' : 'unchecked', $el);
293			}
294		});
295
296		if (typeof callback !== 'undefined') {
297			callback(checked);
298		}
299	});
300}
301
302/**
303 * if checked, calls checked. if not checked, calls unchecked
304 * 
305 * @param on_selector
306 * @param selector
307 * @param checked
308 * @param unchecked
309 */
310function html_ui_checkedFunctions(on_selector, selector, checked, unchecked) {
311	$(on_selector).on('click', selector, function(event) {
312		var $target = $(event.target);
313		var c = $target.is(':checked');
314		console.log('target is checked? ' + c);
315
316		if (c) {
317			checked();
318		} else {
319			unchecked();
320		}
321	});
322
323	var $selector = $(selector);
324	
325	if ($selector.length) {
326		if ($selector.is(':checked')) {
327			checked();
328		} else {
329			unchecked();
330		}
331	}
332}
333
334/**
335 * "if this then that"
336 * 
337 * @param on_selector
338 * @param selector
339 * @param fn_map
340 */
341function html_ui_ifttt(on_selector, selector, fn_map) {
342	$(on_selector).on('click change', selector, function(event) {
343		var $target = $(event.target);
344		fn($target);
345	});
346	
347	var fn = function($el) {
348		var val = $el.val();
349		
350		// value of a checkbox is the same whether it's checked or not, so....

351		if ($el.is('[type=checkbox]')) {
352			if ($el.is(':checked')) {
353				val = 'checked';
354			} else {
355				val = 'notchecked';
356			}
357		}
358
359		for (key in fn_map) {
360			if (fn_map.hasOwnProperty(key) && key == val) {
361				fn_map[key](val);
362				break;
363			}
364		}
365	}
366
367	fn($(on_selector + ' ' + selector));
368}