VanillaFilter.triggerFilter - Code Metrics - Inspection of "test(callback): Added tests for callback functiona..." - dverleg/vanillafilter - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 51c604...39cb39 )

by Dennis

created 2017-06-14 14:17 UTC

VanillaFilter.triggerFilter B

↳ Parent: src/scripts/vanillafilter.js

Complexity

Conditions	4
Paths	24

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Code Coverage

Tests	10
CRAP Score	8.9734

Importance

Changes	6
Bugs	2	Features	4

Metric	Value
cc	4
c	6
b	2
f	4
nc	24
nop	1
dl	0
loc	79
ccs	10
cts	31
cp	0.3226
crap	8.9734
rs	8.5646

How to fix Long Method

(function() {
	/**
	 * Create VanillaFilter instance
	 */
	this.VanillaFilter = function() {
		/**
		 * Default options for filtering
		 * @type {Object}
		 */
		this.options = {
			debug: false,
			vanillaTrigger: 'vanillatrigger',
			vanillaTarget: 'vanillatarget',
			vanillaDisplayType: 'block',
			vanillaFallbackSelector: '.vanilla-no-results',
			vanillaCallbackFunction: function() {}
		}

		/**
		 * Override defaults by settings from user
		 * @param  {Object}
		 */
		if (arguments[0] && typeof arguments[0] === "object") {
			this.options = _extendDefaults(this.options, arguments[0]);
		}

		if(this.options.debug === true) {
			console.log('vanillafilter: Found options: [', this.options ,']');

		}

		/**
		 * Get all the filterTrigger elements to trigger filtering
		 * @type {Elements Object} | {Element}
		 */
		this.vanillaFallback = document.querySelectorAll(this.options.vanillaFallbackSelector);
		this.filterTrigger = document.querySelectorAll('[data-' + this.options.vanillaTrigger + ']');
		this.filterValues = [];

		/**
		 * Check if we have any filterTrigger instances
		 * @param  {Elements Object} | {Element}
		 */
		if (this.filterTrigger) {
			var _ = this;

			Object.keys(_.filterTrigger).map(function(index) {
				return _.bind(_.filterTrigger[index], _getTriggerHandler(_.filterTrigger[index]));
			});
		}

		/**
		 * If we have a fallback element, hide it on init
		 * @param  {Element} element
		 */
		if(this.vanillaFallback) {
			if(this.options.debug === true) {
				console.log('vanillafilter: Found fallback element(s): [', this.vanillaFallback ,'], hiding it on initialisation');

			}

			this.fallback(false);
		}
	}

	/**
	 * Bind the filter logic to a filterTrigger element
	 * @param  {Element} element
	 * @param  {String} handler
	 */
	VanillaFilter.prototype.bind = function(element, handler) {

		if(this.options.debug === true) {
			console.log('vanillafilter: Bound filterTrigger to our vanillafilter: [', element ,'] with handler: [', handler ,']');

		}

		return element.addEventListener(handler, this.triggerFilter.bind(this), true);
	}

	/**
	 * Filter logic to show/hide elements based on their value
	 */
	VanillaFilter.prototype.triggerFilter = function(event) {

		event.preventDefault();

		var _ = this,
			activeFilter = event.target;

		if(_.options.debug === true) {
			console.log('vanillafilter: triggerFilter called for: [', activeFilter ,']. Added to activeFilters');

		}

		/**
		 * Set the correct active filters
		 */
		_.filterValues = _getFilterValues(activeFilter, _.options.vanillaTrigger, _.filterValues);

		/**
		 * Get all the targets to filter on
		 */
		var allTargets = Object.keys(document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')).map(function(index) {
			return document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')[index];
		});

		/**
		 * Filter the correct results and show/hide them
		 * @param  {Element} item
		 */
		var results = [],
			hide = [];

		allTargets.filter(function(targetElement, index) {
			var shouldShowTargetItem = false;

			if(_.filterValues.length === 0) {
				if(_.options.debug === true && index === 0) {
					console.log('vanillafilter: No filter values found, triggering display: [', _.options.vanillaDisplayType ,'] for all targets');

				}

				targetElement.style.display = _.options.vanillaDisplayType;
			} else {
				_.filterValues.filter(function(activeFilter) {
					var targetValues = _getTargetValues(targetElement, _.options.vanillaTarget);

					if(!shouldShowTargetItem) {
						shouldShowTargetItem = targetValues.includes(activeFilter);
					}
				});

				/**
				 * Check if we should show the item or not, if true, push it to our results array
				 * @param  {Boolean} should we show the target item?
				 */
				if(shouldShowTargetItem) {
					if(_.options.debug === true) {
						console.log('vanillafilter: Set display: [', _.options.vanillaDisplayType ,'] for targetElement: [', targetElement ,']. Pushing to results: [', results ,']');

					}

					targetElement.style.display = _.options.vanillaDisplayType;
					results.push(targetElement);

					_vanillaCallback(_.options.vanillaCallbackFunction, targetElement, _.options.debug);
				} else {
					targetElement.style.display = 'none';
					hide.push(targetElement);
				}
			}
		});

		if(_.options.debug === true) {
			console.log('vanillafilter: Hiding target elements: [', hide ,']');
		}

		/**
		 * Trigger the fallback function on every filter change
		 * and show a fallback element if there are 0 results
		 */
		if(this.vanillaFallback.length) {
			this.fallback(_.filterValues.length && !results.length);
		}
	}

	/**
	 * Show a fallback element when we have active filters, but no results are returned.
	 */
	VanillaFilter.prototype.fallback = function(show) {

		var _ = this,
			display = (show ? 'block' : 'none');

		Object.keys(_.vanillaFallback).map(function(index) {
			_.vanillaFallback[index].style.display = display;
		});
	}

	/**
	 * Extend default options by user input options
	 * @param  {Object} options
	 * @param  {Object} overrides
	 */
	_extendDefaults = function(options, overrides) {

		for (var option in overrides) {
			if (overrides.hasOwnProperty(option)) {
				options[option] = overrides[option];
			}
		}

		return options;
	}

	/**
	 * Get the correct handler for the clicked filter trigger
	 * @param  {Element} element
	 */
	_getTriggerHandler = function(element) {

		var handler = ['SELECT', 'INPUT'].includes(element.tagName) ? 'change' : 'click';

		return handler;
	}

	/**
	 * Get the currenct active filter values from filter triggers to filter on
	 * @param  {Element} filterElem
	 * @param  {String} filterTriggerValue
	 */
	_getFilterValues = function(filterElem, filterTriggerValue, currentFilters) {

		var value,
			newFilters = currentFilters;

		if(['SELECT', 'INPUT'].includes(filterElem.tagName)) {
			value = filterElem.value;
		} else {
			value = filterElem.dataset[filterTriggerValue];
		}

		if(value === "") {
			newFilters = [];
		} else {
			if(['SELECT'].includes(filterElem.tagName)) {
				newFilters = [];
				newFilters.push(value);
			} else {
				if(currentFilters.includes(value)) {
					newFilters.splice(newFilters.indexOf(value), 1);
				} else {
					newFilters.push(value);
				}
			}
		}

		return newFilters;
	}

	/**
	 * Get the filter values from a target element that should be filtered
	 * @param  {Element} targetElement
	 * @param  {String} targetFilterValue
	 */
	_getTargetValues = function(targetElement, targetFilterValue) {

		var targetValues = targetElement.dataset[targetFilterValue],
			trimmedTargetValues = targetValues.replace(/\s/g, ''),
			separateTrimmedTargetValues = trimmedTargetValues.split(',');

		return separateTrimmedTargetValues.filter(Boolean);
	}

	/**
	 * If a callback function is set, call it for this targetElement
	 * @param  {Function} callback function to trigger

	 */
	_vanillaCallback = function(callbackFunction, targetElement, debug) {

		if(typeof callbackFunction === 'function') {
function isBig(a) {
    if (a > 5000) {
        return "yes";
    }
}

console.log(isBig(5001)); //returns yes
console.log(isBig(42)); //returns undefined
			if(debug === true) {
				console.log('vanillafilter: vanillaCallbackFunction called for element: [', targetElement ,']');

			}

			return callbackFunction(targetElement);
		}
	}

})();


1	1	(function() {
2		/**
3		* Create VanillaFilter instance
4		*/
5	1	this.VanillaFilter = function() {
6		/**
7		* Default options for filtering
8		* @type {Object}
9		*/
10	7	this.options = {
11		debug: false,
12		vanillaTrigger: 'vanillatrigger',
13		vanillaTarget: 'vanillatarget',
14		vanillaDisplayType: 'block',
15		vanillaFallbackSelector: '.vanilla-no-results',
16		vanillaCallbackFunction: function() {}
17		}
18
19		/**
20		* Override defaults by settings from user
21		* @param {Object}
22		*/
23	7	if (arguments[0] && typeof arguments[0] === "object") {
24	1	this.options = _extendDefaults(this.options, arguments[0]);
25		}
26
27	7	if(this.options.debug === true) {
28		console.log('vanillafilter: Found options: [', this.options ,']');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
29		}
30
31		/**
32		* Get all the filterTrigger elements to trigger filtering
33		* @type {Elements Object} \| {Element}
34		*/
35	7	this.vanillaFallback = document.querySelectorAll(this.options.vanillaFallbackSelector);
36	7	this.filterTrigger = document.querySelectorAll('[data-' + this.options.vanillaTrigger + ']');
37	7	this.filterValues = [];
38
39		/**
40		* Check if we have any filterTrigger instances
41		* @param {Elements Object} \| {Element}
42		*/
43	7	if (this.filterTrigger) {
44	7	var _ = this;
45
46	7	Object.keys(_.filterTrigger).map(function(index) {
47		return _.bind(_.filterTrigger[index], _getTriggerHandler(_.filterTrigger[index]));
48		});
49		}
50
51		/**
52		* If we have a fallback element, hide it on init
53		* @param {Element} element
54		*/
55	7	if(this.vanillaFallback) {
56	7	if(this.options.debug === true) {
57		console.log('vanillafilter: Found fallback element(s): [', this.vanillaFallback ,'], hiding it on initialisation');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
58		}
59
60	7	this.fallback(false);
61		}
62		}
63
64		/**
65		* Bind the filter logic to a filterTrigger element
66		* @param {Element} element
67		* @param {String} handler
68		*/
69	1	VanillaFilter.prototype.bind = function(element, handler) {
		0 ignored issues – show Bug introduced 2017-05-18 10:58 UTC by Report Bug Copy Issue Report The variable `VanillaFilter` seems to be never declared. If this is a global, consider adding a `/** global: VanillaFilter */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
70	2	if(this.options.debug === true) {
71		console.log('vanillafilter: Bound filterTrigger to our vanillafilter: [', element ,'] with handler: [', handler ,']');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
72		}
73
74		return element.addEventListener(handler, this.triggerFilter.bind(this), true);
75		}
76
77		/**
78		* Filter logic to show/hide elements based on their value
79		*/
80	1	VanillaFilter.prototype.triggerFilter = function(event) {
		0 ignored issues – show Bug introduced 2017-05-18 10:58 UTC by Report Bug Copy Issue Report The variable `VanillaFilter` seems to be never declared. If this is a global, consider adding a `/** global: VanillaFilter */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
81		event.preventDefault();
82
83		var _ = this,
84		activeFilter = event.target;
85
86	2	if(_.options.debug === true) {
87		console.log('vanillafilter: triggerFilter called for: [', activeFilter ,']. Added to activeFilters');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
88		}
89
90		/**
91		* Set the correct active filters
92		*/
93		_.filterValues = _getFilterValues(activeFilter, _.options.vanillaTrigger, _.filterValues);
94
95		/**
96		* Get all the targets to filter on
97		*/
98		var allTargets = Object.keys(document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')).map(function(index) {
99		return document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')[index];
100		});
101
102		/**
103		* Filter the correct results and show/hide them
104		* @param {Element} item
105		*/
106		var results = [],
107		hide = [];
108
109		allTargets.filter(function(targetElement, index) {
110		var shouldShowTargetItem = false;
111
112	2	if(_.filterValues.length === 0) {
113	4	if(_.options.debug === true && index === 0) {
114		console.log('vanillafilter: No filter values found, triggering display: [', _.options.vanillaDisplayType ,'] for all targets');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
115		}
116
117		targetElement.style.display = _.options.vanillaDisplayType;
118		} else {
119		_.filterValues.filter(function(activeFilter) {
120		var targetValues = _getTargetValues(targetElement, _.options.vanillaTarget);
121
122	2	if(!shouldShowTargetItem) {
123		shouldShowTargetItem = targetValues.includes(activeFilter);
124		}
125		});
126
127		/**
128		* Check if we should show the item or not, if true, push it to our results array
129		* @param {Boolean} should we show the target item?
130		*/
131	2	if(shouldShowTargetItem) {
132	2	if(_.options.debug === true) {
133		console.log('vanillafilter: Set display: [', _.options.vanillaDisplayType ,'] for targetElement: [', targetElement ,']. Pushing to results: [', results ,']');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
134		}
135
136		targetElement.style.display = _.options.vanillaDisplayType;
137		results.push(targetElement);
138
139		_vanillaCallback(_.options.vanillaCallbackFunction, targetElement, _.options.debug);
140		} else {
141		targetElement.style.display = 'none';
142		hide.push(targetElement);
143		}
144		}
145		});
146
147	2	if(_.options.debug === true) {
148		console.log('vanillafilter: Hiding target elements: [', hide ,']');
149		}
150
151		/**
152		* Trigger the fallback function on every filter change
153		* and show a fallback element if there are 0 results
154		*/
155	2	if(this.vanillaFallback.length) {
156	2	this.fallback(_.filterValues.length && !results.length);
157		}
158		}
159
160		/**
161		* Show a fallback element when we have active filters, but no results are returned.
162		*/
163	1	VanillaFilter.prototype.fallback = function(show) {
		0 ignored issues – show Bug introduced 2017-06-09 12:46 UTC by Report Bug Copy Issue Report The variable `VanillaFilter` seems to be never declared. If this is a global, consider adding a `/** global: VanillaFilter */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
164	7	var _ = this,
165		display = (show ? 'block' : 'none');
166
167	7	Object.keys(_.vanillaFallback).map(function(index) {
168		_.vanillaFallback[index].style.display = display;
169		});
170		}
171
172		/**
173		* Extend default options by user input options
174		* @param {Object} options
175		* @param {Object} overrides
176		*/
177	1	_extendDefaults = function(options, overrides) {
		0 ignored issues – show Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The variable `_extendDefaults` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window._extendDefaults`. Loading history...
178	1	for (var option in overrides) {
179	2	if (overrides.hasOwnProperty(option)) {
180	1	options[option] = overrides[option];
181		}
182		}
183
184	1	return options;
185		}
186
187		/**
188		* Get the correct handler for the clicked filter trigger
189		* @param {Element} element
190		*/
191	1	_getTriggerHandler = function(element) {
		0 ignored issues – show Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The variable `_getTriggerHandler` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window._getTriggerHandler`. Loading history...
192	2	var handler = ['SELECT', 'INPUT'].includes(element.tagName) ? 'change' : 'click';
193
194		return handler;
195		}
196
197		/**
198		* Get the currenct active filter values from filter triggers to filter on
199		* @param {Element} filterElem
200		* @param {String} filterTriggerValue
201		*/
202	1	_getFilterValues = function(filterElem, filterTriggerValue, currentFilters) {
		0 ignored issues – show Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The variable `_getFilterValues` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window._getFilterValues`. Loading history...
203		var value,
204		newFilters = currentFilters;
205
206	2	if(['SELECT', 'INPUT'].includes(filterElem.tagName)) {
207		value = filterElem.value;
208		} else {
209		value = filterElem.dataset[filterTriggerValue];
210		}
211
212	2	if(value === "") {
213		newFilters = [];
214		} else {
215	2	if(['SELECT'].includes(filterElem.tagName)) {
216		newFilters = [];
217		newFilters.push(value);
218		} else {
219	2	if(currentFilters.includes(value)) {
220		newFilters.splice(newFilters.indexOf(value), 1);
221		} else {
222		newFilters.push(value);
223		}
224		}
225		}
226
227		return newFilters;
228		}
229
230		/**
231		* Get the filter values from a target element that should be filtered
232		* @param {Element} targetElement
233		* @param {String} targetFilterValue
234		*/
235	1	_getTargetValues = function(targetElement, targetFilterValue) {
		0 ignored issues – show Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The variable `_getTargetValues` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window._getTargetValues`. Loading history...
236		var targetValues = targetElement.dataset[targetFilterValue],
237		trimmedTargetValues = targetValues.replace(/\s/g, ''),
238		separateTrimmedTargetValues = trimmedTargetValues.split(',');
239
240		return separateTrimmedTargetValues.filter(Boolean);
241		}
242
243		/**
244		* If a callback function is set, call it for this targetElement
245		* @param {Function} callback function to trigger
		0 ignored issues – show Documentation Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The parameter `callback` does not exist. Did you maybe mean `callbackFunction` instead? Loading history...
246		*/
247	1	_vanillaCallback = function(callbackFunction, targetElement, debug) {
		0 ignored issues – show Bug introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report The variable `_vanillaCallback` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window._vanillaCallback`. Loading history...
248	2	if(typeof callbackFunction === 'function') {
		0 ignored issues – show Complexity Best Practice introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report There is no return statement if `typeof callbackFunction === "function"` is `false`. Are you sure this is correct? If so, consider adding `return;` explicitly. This check looks for functions where a `return` statement is found in some execution paths, but not in all. Consider this little piece of code function isBig(a) { if (a > 5000) { return "yes"; } } console.log(isBig(5001)); //returns yes console.log(isBig(42)); //returns undefined The function `isBig` will only return a specific value when its parameter is bigger than 5000. In any other case, it will implicitly return `undefined`. This behaviour may not be what you had intended. In any case, you can add a `return undefined` to the other execution path to make the return value explicit. Loading history...
249	2	if(debug === true) {
250		console.log('vanillafilter: vanillaCallbackFunction called for element: [', targetElement ,']');
		0 ignored issues – show Debugging Code introduced 2017-06-14 14:19 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
251		}
252
253		return callbackFunction(targetElement);
254		}
255		}
256
257		})();
258

dverleg / vanillafilter

GitHub Access Token became invalid

Push — master ( 51c604...39cb39 )

VanillaFilter.triggerFilter B

Complexity

Size

Duplication

Code Coverage

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like