https://carlsbergmalaysia.com.my/assets/scripts/components/custom-select.js

1$(document).ready(function() {
2
3	// Trim polyfill
4	if(!String.prototype.trim) {
5		String.prototype.trim = function () {
6			return this.replace(/^\s+|\s+$/g,'');
7		};
8	}
9
10	var carlsbergGroupCustomSelect = (function() {
11 
12		// 'Private' variables
13		var toggleSpeed = 200;															// Duration of slideToggle animation
14		var selectorInlineInput = '.custom-inline-input';								// CSS selector for the main element acting as the custom selector
15		var selectorMainElement = '.custom-select';										// CSS selector for the main element acting as the custom selector
16		var selectorSlideToggle = '.custom-select__options-container-inner';			// CSS selector for the element which is toggled open/closed
17		var selectorDefaultValueContainer = '.custom-select__selected-value-container';	// CSS selector for the click target to initiate the drop-down
18		var selectorDefaultValue = '.custom-select__selected-value';					// CSS selector for the element which holds the default value, visible in the UI
19		var selectorScrollContainer = '.custom-select__scroll';							// CSS selector for the container of the scrollable options
20		var openClassName = 'custom-select--open';										// Class name (not selector!) added to the container to identify its state
21		var selectedLabelClassName = 'custom-select__label--checked';					// Class name (not selector!) added to label upon option being checked
22		var dropDownOpenedwithKeypress = false;
23		var oldIE = $('html').hasClass('lt-ie9') ? true : false;						// Check whether we're dealing with < IE9
24		
25		// 'Private' functions
26		function init(){
27			scrollOptions();	// Initiate scrollbars for drop-down options
28			bindSelects();		// Bind the behaviour of each select drop-down
29			//bindInlineInput();	// Bind custom inline inputs
30			bindClose();		// Bind the document click event to close select drop-downs
31			bindClear();		// Bind the 'clear form values' button
32			bindClearTag();		// Binds the tag-close button
33		}
34
35		function scrollOptions(){
36			if(!oldIE){
37				$(selectorScrollContainer).perfectScrollbar({
38					suppressScrollX: true
39				});
40			}
41		}
42
43		function updateScroll(){
44			if(!oldIE){
45				$(selectorScrollContainer).perfectScrollbar('update');
46			}
47		}
48
49		function bindSelects() {
50			$(selectorMainElement).each(function(){
51				var _this = $(this);
52				var defaultContainerTarget = $(selectorDefaultValueContainer, _this);
53				var defaultContainer = $(selectorDefaultValue, _this);
54				var inputType = getType(_this, defaultContainer);
55
56				// If not radio or checkbox, abort
57				if(inputType != 'radio' && inputType != 'checkbox'){
58					return;
59				}
60
61				// Open drop-down on click
62				bindDropDowns(_this, defaultContainerTarget);
63
64				if(inputType == 'radio'){
65					bindSelectSingle(_this, defaultContainer);
66					setInitialValue(_this, defaultContainer);
67				}else{
68					bindSelectMulti(_this, defaultContainer);
69				}
70			});
71		}
72
73		function getType(_this, defaultContainer){
74			// Get type of first input, to inform behaviour of this module (radio button infers single-selection, checkbox infers multi-selection
75			var firstInput = $('input', _this).first();
76
77			// If no input or default value container, something's wrong
78			if(!firstInput || !defaultContainer) {
79				return;
80			}
81
82			return firstInput.attr('type');
83		}
84
85		function bindSelectSingle(_this, defaultContainer){
86			$('.custom-select__input', _this).change(function(){
87				onSelectSingle(_this, $(this), defaultContainer)
88									
89				if (dropDownOpenedwithKeypress == false) {
90					closeAllOpen();
91				}
92
93			});
94		}
95
96		function setInitialValue(_this, defaultContainer){
97			var checkedElement = $('.custom-select__input:checked', _this);
98			if(checkedElement.length){
99				var selectedLabel = checkedElement.closest('label');
100				defaultContainer.text(selectedLabel.text());
101			}
102		}
103
104		function bindSelectMulti(_this, defaultContainer){
105			$('.custom-select__input', _this).change(function(){
106				onSelectMulti(_this, $(this), defaultContainer)
107			});
108		}
109
110		function onSelectSingle(_this, checkedElement, defaultContainer){
111			var selectedLabel = checkedElement.closest('label');
112			$('label',_this).removeClass(selectedLabelClassName);
113			selectedLabel.addClass(selectedLabelClassName);
114			defaultContainer.text(selectedLabel.text());
115
116			var closestForm = _this.closest('form');
117			
118			if(closestForm.hasClass('js-submit-on-update')){
119				closestForm.submit();
120			}
121		}
122
123		function onSelectMulti(_this, checkedElement, defaultContainer){
124			checkedElement.closest('label').toggleClass(selectedLabelClassName);
125		}
126
127		function bindDropDowns(_this, defaultContainerTarget){
128			defaultContainerTarget.click(function(){
129				_this.toggleClass(openClassName);
130				$(selectorSlideToggle, _this).slideToggle(toggleSpeed);
131				dropDownOpenedwithKeypress = false;
132				updateScroll();
133			});
134			defaultContainerTarget.keydown(function(e){

135				if (e.which == 13) {
136					_this.toggleClass(openClassName);
137					$(selectorSlideToggle, _this).slideToggle(toggleSpeed).focus();
138					dropDownOpenedwithKeypress = true;
139					updateScroll();
140				}
141			});
142		}
143
144		function closeThis(_this){
145			$(selectorSlideToggle, _this).slideToggle(0);
146		}
147
148		function closeAllOpen(exceptElement){
149			var openDropDowns = $('.' + openClassName);
150			if(exceptElement){
151				openDropDowns = openDropDowns.not(exceptElement);
152			}
153			openDropDowns.each(function(){
154				$(this).removeClass(openClassName);
155				closeThis($(this));
156			});
157		}
158
159		function bindClose(){
160			$(document).click(function(e) { 
161				var dropDownClicked = $(e.target).closest(selectorMainElement);
162				closeAllOpen(dropDownClicked);
163			});
164			$(document).keydown(function(e) { 
165				if (e.which == 13) {
166					var dropDownClicked = $(e.target).closest(selectorMainElement);
167					closeAllOpen(dropDownClicked);
168				}
169				
170			});
171		}
172
173		function bindClear(){
174			$('.js-clear-form').click(function(e){
175				e.preventDefault;
176				var _this = $(this);
177				var _module = _this.closest('.module');
178				var _form = $('form', _module);
179
180				// Clear text inputs
181				$('input[type="text"]', _form).val('');
182
183				// Clear custom select inputs
184				$('.custom-select', _form).each(function(){
185					var thisCustomSelect = $(this);
186					var defaultContainer = $(selectorDefaultValue, thisCustomSelect);
187
188					$('input[type="checkbox"], input[type="radio"]', thisCustomSelect)
189						.prop('checked', false)
190						.closest('label')
191						.removeClass('custom-select__label--checked');
192
193					// Restore default values
194					var inputType = getType(thisCustomSelect, defaultContainer);
195
196					if(inputType == 'radio'){
197						var checkedElement = $('[data-default="true"]', thisCustomSelect);
198						checkedElement.prop('checked', true);
199						onSelectSingle(thisCustomSelect, checkedElement, defaultContainer)
200					}
201
202					if(inputType == 'checkbox'){
203						var checkedElement = $('[data-default="true"]', thisCustomSelect);
204						checkedElement.prop('checked', true);
205						onSelectMulti(thisCustomSelect, checkedElement, defaultContainer)
206					}
207					
208				});
209
210			})
211		}
212
213		function bindInlineInput() {
214			$(selectorInlineInput).each(function(){
215				var _this = $(this);
216				if(_this.hasClass('custom-inline-input--checkbox')){
217					bindInlineCheckbox(_this);
218				}
219				if(_this.hasClass('custom-inline-input--radio')){
220					bindInlineRadio(_this);
221				}
222			});
223		}
224
225		function bindInlineCheckbox(container){
226			var input = container.find(input);
227			input.change(function(){
228				//container.
229			});
230		}
231
232		function bindInlineRadio(container){
233		}
234
235		function bindClearTag(){
236			$('.tag-close_button').click(function(){
237				var tagValue = $(this).parent().text().trim();
238				var closestForm = $(this).closest('form');
239				
240				// Get checkboxes which have value of tag being cleared
241				var labelsToClear = $('label:contains(' + tagValue + ')', closestForm);
242
243				// Uncheck checkboxes and clear checked styling
244				labelsToClear.each(function(){
245					var _this = $(this);
246					_this.find('input:checkbox').removeAttr('checked');
247					_this.removeClass('custom-select__label--checked');
248				});
249				closestForm.submit();
250			});
251		}
252
253		// 'Public'
254		return {
255			init: init
256		};
257
258	})();
259 
260	carlsbergGroupCustomSelect.init();
261});