https://www.doellken-profiles.com/_assets/a5894937a3dd8d302ffa2d20…/jquery.decorFinder.js?1784812926

1(function($) {
2	$.fn.optionVisible = function(show) {
3		if(show) {
4			this.filter('span > option').unwrap();
5		} else {
6			this.filter(':not(span > option)').wrap('<span>').parent().hide();
7		}
8		return this;
9	};
10
11	$.fn.decorFinder = function() {
12		return this.each(function() {
13			var activeDecors;
14			var currentPage;
15			var listContainer = $('[data-decorfilterlist]');
16			var decors = listContainer.find('[data-decor]');
17			var decorsPerPage = listContainer.data('decorsfilterlist-itemsperpage') || 12;
18			var filterContainer = $(this);
19			var inputBrightnesses = filterContainer.find('[data-input-brightnesses]');
20			var inputCollection = filterContainer.find('[data-input-collection]').hide();
21			var inputColors = filterContainer.find('[data-input-colors]');
22			var inputDecorNumber = filterContainer.find('[data-input-decornumber]');
23			var inputProducer = filterContainer.find('[data-input-producer]');
24			var inputProduct = filterContainer.find('[data-input-product]');
25			var inputStructures = filterContainer.find('[data-input-structures]');
26			var images = listContainer.find('img[data-src]');
27			var lazyImages = images.lazy({
28				bind:'event',
29				chainable: false,
30				defaultImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbsAAACsCAIAAABtr5XeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDEwQ0MwMDMxM0ZCMTFFNUJBRENFOTkwOEQxOEYzNjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDEwQ0MwMDQxM0ZCMTFFNUJBRENFOTkwOEQxOEYzNjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTBDQzAwMTEzRkIxMUU1QkFEQ0U5OTA4RDE4RjM2NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTBDQzAwMjEzRkIxMUU1QkFEQ0U5OTA4RDE4RjM2NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoEgAUwAAAHVSURBVHja7NQxAQAACMMwwL/nYYGTI5HQo52kADgYCQAcE8AxARwTwDEBHBPAMQFwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBPAMQFwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBPAMQFwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBPAMQFwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBPAMQFwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBMAxwRwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBMAxwRwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBMAxwRwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBMAxwRwTADHBHBMAMcEcEwAxwTAMQEcE8AxARwTwDEBHBMAxwRwTADHBHBMAMcEcEwAx5QAwDEBHBPAMQEcE8AxARwTAMcEcEwAxwRwTADHBHBMABwTwDEBHBPAMQEcE8AxARwTAMcEcEwAxwRwTADHBHBMABwTwDEBHBPAMQEcE8AxARwTAMcEcEwAxwRwTADHBHBMABwTwDEBHBPggRVgAOjMBFXuWsgYAAAAAElFTkSuQmCC',
31				threshold: 10000,
32				visibleOnly: true
33			});
34			var pagebrowserContainer = listContainer.find('[data-paging]');
35			var pagebrowserPagePrototype = pagebrowserContainer.find('[data-pageprototype]').hide();
36			var pagebrowserNextLink = pagebrowserContainer.find('[data-next]');
37			var pagebrowserPrevLink = pagebrowserContainer.find('[data-prev]');
38			var resetButton = filterContainer.find('[data-resetbutton]');
39			var chosen = $('body').find('[data-chosen]');
40			var lightboxDecorNumbers = listContainer.find('[data-lightbox-decornumber]');
41			var lightboxProducers = listContainer.find('[data-lightbox-producer]');
42
43			var applyFilter = function() {
44				decors.removeAttr('data-excludedByFilter');
45				decors.each(function() {
46					var decor = $(this);
47					var excludeConditions = {
48						decorNumberNotMatching: false,
49						producerNotMatching: false,
50						collectionNotMatching: false,
51						colorNotMatching: false,
52						structureNotMatching: false,
53						brightnessNotMatching: false,
54						productNotMatching: false
55					};
56					// decor
57					var inputDecorValue = String(inputDecorNumber.val());
58					if (inputDecorValue !== '' && String(decor.data('decornumbers')).split(',').indexOf(inputDecorValue) == -1) {
59						excludeConditions.decorNumberNotMatching = true;
60					}
61					// producer
62					var inputProducerValue = String(inputProducer.find('option:selected').val());
63					if(inputProducerValue != '' && String(decor.data('producers')).split(',').indexOf(inputProducerValue) == -1) {
64						excludeConditions.producerNotMatching = true;
65					}
66					// collection
67					var inputCollectionValue = String(inputCollection.find('option:selected').val());
68					if(inputCollectionValue != '' && String(decor.data('collections')).split(',').indexOf(inputCollectionValue) == -1) {
69						excludeConditions.collectionNotMatching = true;
70					}
71					// product
72					var inputProductValue = String(inputProduct.val());
73					if(inputProductValue != '' && String(decor.data('products')).split(',').indexOf(inputProductValue) == -1) {
74						excludeConditions.productNotMatching = true;
75					}
76
77					// colors, brightnesses
78					var tileFields = {
79						brightness: inputBrightnesses,
80						color: inputColors
81					};
82					for (var field in tileFields) {
83						if (!tileFields.hasOwnProperty(field)) {
84							continue;
85						}
86						var selectedTiles = $(tileFields[field]).find('[data-selected="true"]');
87						if(selectedTiles.length) {
88							var matches = false;

89							selectedTiles.each(function() {
90								var fieldsName = field + 's';
91								if(field == 'brightness') {
92									fieldsName = field + 'es'
93								}
94								if(String(decor.data(fieldsName)).split(',').indexOf(String($(this).data(field))) != -1) {
95									matches = true;
96								}
97							});
98							excludeConditions[field + 'NotMatching'] = !matches;
99						}
100					}
101
102					// structures
103					var inputStructuresValue = String(inputStructures.val());
104					if(inputStructuresValue != '' && String(decor.data('structures')).split(',').indexOf(inputStructuresValue) == -1) {
105						excludeConditions.productNotMatching = true;
106					}
107
108					for (var key in excludeConditions) {
109						if (excludeConditions.hasOwnProperty(key) && excludeConditions[key]) {
110							decor.attr('data-excludedByFilter', 'true');
111							break;
112						}
113					}
114				});
115
116				showprint();
117
118				chosen.hide();
119				var selectedProducerName = String(inputProducer.find('option:selected').text());
120				var selectedCollectionName = String(inputCollection.find('option:selected').text());
121				if(selectedProducerName != '' || selectedCollectionName != '') {
122					chosen.find('[data-producerfield]').text(selectedProducerName);
123					chosen.find('[data-collectionfield]').text(selectedCollectionName);
124					chosen.show();
125				}
126
127				// filter decorNumbers in lightboxes
128				var filterDecorNumbers = String(inputDecorNumber.val());
129				if (!filterDecorNumbers) {
130					filterDecorNumbers = String(inputCollection.find('option:selected').data('decor-numbers'));
131				}
132				if (filterDecorNumbers == 'undefined') {
133					filterDecorNumbers = String(inputProducer.find('option:selected').data('decor-numbers'));
134				}
135				if (filterDecorNumbers !== 'undefined') {
136					lightboxDecorNumbers.hide().attr('data-active', 'false');
137					var filterDecorNumbersArray = filterDecorNumbers.split(',');
138					for (var i in filterDecorNumbersArray) {
139						if(filterDecorNumbersArray.hasOwnProperty(i)) {
140							lightboxDecorNumbers.filter('[data-lightbox-decornumber="' + filterDecorNumbersArray[i] + '"]').show().attr('data-active', 'true');
141						}
142					}
143				} else {
144					lightboxDecorNumbers.show().attr('data-active', 'true');
145				}
146
147				// filter producers in lightbox
148				var filterProducers = [];
149
150				// filter via producer-input
151				if(inputProducer.find('option:selected').val()) {
152					filterProducers.push(inputProducer.find('option:selected').val());
153				}
154
155				// filter via decor number
156				var inputDecorValue = inputDecorNumber.val();
157				if(inputDecorValue) {
158					var producers = $('[data-input-producer]').find('[data-decor-numbers]');
159					producers.each(function() {
160						var producer = $(this);
161						var producerDecorNumbers = producer.data('decor-numbers').split(',');
162
163						if(producerDecorNumbers.indexOf(inputDecorValue) != -1) {
164							filterProducers.push(producer.val());
165						}
166					});
167				}
168
169				// do filter
170				if(filterProducers.length > 0) {
171					lightboxProducers.hide().attr('data-active', 'false');
172					for (var j in filterProducers) {
173						if(filterProducers.hasOwnProperty(j)) {
174							lightboxProducers.filter('[data-lightbox-producer="' + filterProducers[j] + '"]').show().attr('data-active', 'true');
175						}
176					}
177				} else {
178					lightboxProducers.show().attr('data-active', 'true');
179				}
180
181				// show the first decor number and producer in decor list
182				decors.each(function() {
183					var decor = $(this);
184
185					// filter out producers from each decor if a decor number was entered
186					if (
187						inputDecorValue &&
188						matchingColorNumbersDecorNumbersAndProducers &&
189						matchingColorNumbersDecorNumbersAndProducers[decor.data('colornumbers')] &&
190						matchingColorNumbersDecorNumbersAndProducers[decor.data('colornumbers')][inputDecorValue]
191					) {
192						decor.find('[data-lightbox-producer]').hide().attr('data-active', 'false').filter('[data-lightbox-producer="' + matchingColorNumbersDecorNumbersAndProducers[decor.data('colornumbers')][inputDecorValue] + '"]').show().attr('data-active', 'true');
193					}
194
195					decor.find('[data-lightbox-firstdecornumber]').html(
196						decor.find('[data-lightbox-decornumber]').filter('[data-active="true"]').first().text()
197					);
198
199					decor.find('[data-lightbox-firstproducer]').html(
200						decor.find('[data-lightbox-producer]').filter('[data-active="true"]').first().text()
201					);
202				});
203
204				initPagebrowser();
205			};
206
207			var showprint = function() {
208				var breadcrumbsAdditional = $('body').find('.breadcrumbs').find('.additional').html('');
209
210				if(decors.not('[data-excludedByFilter]').length > 0 && inputProducer.val() != '' && inputCollection.val() != '' && inputProduct.val() != '') {
211					var decorfilters = '&decornumber=' + String(inputDecorNumber.val()) + '&producer=' + String(inputProducer.find('option:selected').val()) + '&collection=' + String(inputCollection.find('option:selected').val()) + '&product=' + String(inputProduct.val());
212
213					var brightnesses = [];
214					var colors = [];
215					var structures = [];
216
217					$(inputBrightnesses).find('[data-selected="true"]').each(function() {
218						brightnesses.push($(this).data('brightness'));
219					});
220

221					decorfilters += '&brightnesses=' + brightnesses.join(',');
222
223					$(inputColors).find('[data-selected="true"]').each(function() {
224						colors.push($(this).data('color'));
225					});
226
227					decorfilters += '&colors=' + colors.join(',');
228
229					$(inputStructures).find('[data-selected="true"]').each(function() {
230						structures.push($(this).data('structure'));
231					});
232
233					decorfilters += '&structures=' + structures.join(',');
234
235					var pdflink = $('<a />').addClass('print').attr('target', '_blank').attr('href', filterContainer.data('pdfuri') + decorfilters).text(filterContainer.data('printlabel'));
236
237					breadcrumbsAdditional.html(pdflink);
238				}
239			};
240
241			inputDecorNumber.on('input', function() {
242				// changing the decord number resets all other fields
243				inputCollection.add(inputProducer).add(inputProduct).prop('selectedIndex', 0);
244				inputColors.add(inputBrightnesses).add(inputStructures).find('[data-selected]').removeAttr('data-selected');
245				applyFilter();
246			});
247
248			inputProducer.on('change keyup', function() {
249				// changing the producer filters the options of the collections select box
250				var producerValue = $(this).val();
251				var collectionOptions = inputCollection.prop('selectedIndex', 0).find('option[data-producer]').optionVisible(true);
252				if (producerValue) {
253					collectionOptions.not('[data-producer="' + producerValue + '"]').optionVisible(false);
254				}
255				inputDecorNumber.val('');
256				inputCollection.hide();
257				if(inputProducer.find('option:selected').val()) {
258					inputCollection.show();
259				}
260				applyFilter();
261			});
262
263			inputCollection
264				.add(inputProduct)
265				.add(inputStructures)
266				.on('input change', function() {
267					inputDecorNumber.val('');
268					applyFilter();
269				});
270
271			inputColors
272				.add(inputBrightnesses)
273				.find('a').on('click', function(e) {
274					e.preventDefault();
275					var tile = $(this);
276					if(tile.attr('data-selected')){
277						tile.removeAttr('data-selected');
278					} else {
279						tile.attr('data-selected', true);
280					}
281					inputDecorNumber.val('');
282					applyFilter();
283				});
284
285			var initPagebrowser = function() {
286				decors.hide();
287				activeDecors = decors.not('[data-excludedByFilter]');
288				currentPage = 1;
289				var numberOfPages = Math.ceil(activeDecors.length / decorsPerPage);
290				pagebrowserContainer.find('[data-page]').remove();
291				for (var i = 1; i <= numberOfPages; i++) {
292					pagebrowserPagePrototype
293						.clone()
294						.removeAttr('data-pageprototype')
295						.show()
296						.attr('data-page', i)
297						.text(i)
298						.insertBefore(pagebrowserNextLink)
299						.on('click', function(e){
300							e.preventDefault();
301							currentPage = $(this).data('page');
302							setPagebrowserPage();
303						});
304				}
305				pagebrowserPrevLink.unbind('click').on('click', function(e) {
306					e.preventDefault();
307					if (currentPage > 1) {
308						currentPage--;
309						setPagebrowserPage();
310					}
311				});
312				pagebrowserNextLink.unbind('click').on('click', function(e) {
313					e.preventDefault();
314					if (currentPage < numberOfPages) {
315						currentPage++;
316						setPagebrowserPage();
317					}
318				});
319				setPagebrowserPage();
320			};
321
322			var setPagebrowserPage = function() {
323				pagebrowserContainer.find('[data-page]').removeClass('active').filter('[data-page="' + currentPage + '"]').addClass('active');
324				activeDecors.hide();
325				for (var i = 0; i < activeDecors.length; i++) {
326					if (i >= decorsPerPage * (currentPage-1) && i < decorsPerPage * currentPage) {
327						$(activeDecors[i]).show();
328					}
329				}
330				lazyImages.update();
331			};
332
333			var newOptions = inputStructures.find('option').clone().sort(function(a, b) {
334				if ($(a).text() > $(b).text()) return 1;
335				else if ($(a).text() < $(b).text()) return -1;
336				else return 0
337			});
338
339			inputStructures.find('option').remove();
340			inputStructures.append(newOptions);
341
342			resetButton.on('click', function(e) {
343				e.preventDefault();
344				inputCollection.add(inputProducer).add(inputProduct).add(inputStructures).prop('selectedIndex', 0);
345				inputColors.add(inputBrightnesses).find('[data-selected]').removeAttr('data-selected');
346				inputCollection.prop('selectedIndex', 0).find('option[data-producer]').optionVisible(true);
347				inputDecorNumber.val('');
348				inputCollection.hide();
349				applyFilter();
350			});
351
352			initPagebrowser();
353		});
354	};
355
356	$(function() {
357		$('[data-decorfinderfilter]').decorFinder();
358	});
359
360}(jQuery));