symphony/assets/js/src/symphony.collapsible.js - Code Metrics - Inspection of "Docs review" - symphonycms/symphony-2 - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#2835)

unknown

created 2018-05-09 20:36 UTC

symphony/assets/js/src/symphony.collapsible.js C

↳ Parent: Project

Complexity

Total Complexity	57
Complexity/F	1.84

Size

Lines of Code	304
Function Count	31

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	0
c	0
b	0
f	0
nc	1152
dl	0
loc	304
rs	5.7222
wmc	57
mnd	2
bc	49
fnc	31
bpm	1.5806
cpm	1.8387
noi	2

2 Functions

Rating	Name	Duplication	Size	Complexity
B	$.fn.symphonyCollapsible	0	264	1
A	symphony.collapsible.js ➔ save	0	11	2

How to fix Complexity

/**
 * @package assets
 */

(function($, Symphony) {
	'use strict';

	// Saves the value into the local storage at the specified storage key.
	var save = function (storage, value) {
		// Put in a try/catch in case something goes wrong (no space, privileges etc)
		// Always put try/catches into their own function to prevent callers from
		// going into un-optimized hell
		try {
			window.localStorage[storage] = value;
		}
		catch(e) {
			window.onerror(e.message);
		}
	};

	/**
	 * Create collapsible elements.
	 *
	 * @name $.symphonyCollapsible
	 * @class
	 *
	 * @param {Object} options An object specifying containing the attributes specified below
	 * @param {String} [options.items='.instance'] Selector to find collapsible items within the container
	 * @param {String} [options.handles='.header:first'] Selector to find clickable handles to trigger interaction
	 * @param {String} [options.content='.content'] Selector to find hideable content area
	 * @param {Boolean} [options.save_state=true] Stores states of instances using local storage
	 * @param {String} [options.storage='symphony.collapsible.area.page.id'] Namespace used for local storage
	 * @param {Integer} [options.delay=250] Time delay for animations
	 *
	 * @example

			var collapsible = $('#duplicator').symphonyCollapsible({
				items:		'.instance',
				handles:	'.header span'
			});
			collapsible.collapseAll();
	 */
	$.fn.symphonyCollapsible = function(options) {
		var objects = this,
			settings = {
				items: '.instance',
				handles: '.frame-header',
				content: '.content',
				ignore: '.ignore',
				save_state: true,
				storage: 'symphony.collapsible.' + Symphony.Context.get('context-id'),
				delay: 250
			};

		$.extend(settings, options);

	/*-----------------------------------------------------------------------*/

		objects.each(function collapsible(index) {
			var object = $(this),
				storage = settings.storage + '.' + index + '.collapsed';

			var getDuration = function (duration) {
				return $.isNumeric(duration) ? duration : settings.delay;
			};

		/*---------------------------------------------------------------------
			Events
		---------------------------------------------------------------------*/

			var collapseItem = function collapse(item, duration) {
				var heightMin = 0;

				// Customization point
				item.trigger('collapsebefore.collapsible', settings);

				heightMin = item.data('heightMin');

				// Check duration
				if(duration !== 0) {
					item.addClass('js-animate');
					item.trigger('collapsestart.collapsible');
				}

				// Collapse item
				item.addClass('collapsed');
				item.css('max-height', heightMin);

				if(duration !== 0) {
					setTimeout(function() {
						item.trigger('animationend.collapsible');
						item.trigger('animationend.duplicator');
					}, duration);
				}
			};

			// Collapse item
			object.on('collapse.collapsible', settings.items, function collapse(event, duration) {
				var item = $(this);
				collapseItem(item, getDuration(duration));
			});

			// Collapse all items
			object.on('collapseall.collapsible', function collapseAll() {
				var items = object.find(settings.items + ':not(.collapsed)'),
					visibles = Symphony.Utilities.inSight(items),
					invisibles = $(),
					scrollTop = $(window).scrollTop(),
					visibleIndex = visibles.eq(0).index(),
					visibleCollapsedHeight = 0;

				// Find items that will be visible after collapse
				while (visibleIndex < items.length && visibleCollapsedHeight < window.innerHeight) {
					var currentItem = items.eq(visibleIndex);
					visibles = visibles.add(currentItem);
					visibleCollapsedHeight += currentItem.data('heightMin');
					visibleIndex++;
				}
				visibles.each(function () { collapseItem($(this), settings.delay); });

				setTimeout(function collapseAllInvisibleEnd() {
					var first = visibles.eq(0);
					var firstOffset = !first.length ? 0 : first.offset().top;
					// update invisible accordingly
					invisibles = items.not(visibles);
					invisibles.each(function () { collapseItem($(this), 0); });
					if (firstOffset > 0 && scrollTop > object.offset().top) {
						// scroll back to where we were,
						// which is last scroll position + delta of first visible item
						$(window).scrollTop(scrollTop + (first.offset().top - firstOffset));
					}
					invisibles.trigger('animationend.collapsible');
				}, settings.delay + 100);
			});

			// Expand item
			var expandItem = function (item, duration) {
				var heightMax = 0;

				// Customization point
				item.trigger('expandbefore.collapsible', settings);

				heightMax = item.data('heightMax');

				// Check duration
				if(duration !== 0) {
					item.addClass('js-animate');
					item.trigger('expandstart.collapsible');
				}

				// Collapse item
				item.removeClass('collapsed');
				item.css('max-height', heightMax);

				if(duration !== 0) {
					setTimeout(function() {
						item.trigger('animationend.collapsible');
					}, duration);
				}
			};

			object.on('expand.collapsible', settings.items, function expand(event, duration) {
				var item = $(this);
				expandItem(item, getDuration(duration));
			});

			// Expand all items
			object.on('expandall.collapsible', function expandAll() {
				var items = object.find(settings.items + '.collapsed'),
					visibles = Symphony.Utilities.inSight(items).filter('*:lt(4)'),
					invisibles = items.not(visibles),
					scrollTop = $(window).scrollTop();

				visibles.addClass('js-animate-all'); // prevent focus
				visibles.each(function () { expandItem($(this), settings.delay); });
				setTimeout(function expandAllInvisible() {
					var first = visibles.eq(0);
					var firstOffset = !first.length ? 0 : first.offset().top;
					invisibles.addClass('js-animate-all'); // prevent focus
					invisibles.each(function () { expandItem($(this), 0); });
					invisibles.trigger('animationend.collapsible');
					// if we are past the first item
					if (firstOffset > 0 && scrollTop > object.offset().top) {
						// scroll back to where we were,
						// which is last scroll position + delta of first visible item
						$(window).scrollTop(scrollTop + (first.offset().top - firstOffset));
					}
				}, settings.delay + 100);
			});

			// Finish animations
			object.on('animationend.collapsible', settings.items, function finish() {
				var item = $(this);

				// Trigger events
				if(item.is('.collapsed')) {
					item.trigger('collapsestop.collapsible');
				}
				else {
					item.trigger('expandstop.collapsible');
				}

				// clean up
				item.removeClass('js-animate js-animate-all');
			});

			// Toggle single item
			object.on('click.collapsible', settings.handles, function toggle(event) {
				var handle = $(this),
					item = handle.closest(settings.items);

				if(!handle.is(settings.ignore) && !$(event.target).is(settings.ignore) && !item.is('.locked')) {

					// Expand
					if(item.is('.collapsed')) {
						expandItem(item, settings.delay);
					}

					// Collapse
					else {
						collapseItem(item, settings.delay);
					}
				}
			});

			// Save states
			var saveTimer = 0;
			object.on('collapsestop.collapsible expandstop.collapsible store.collapsible', settings.items, function saveState() {
				if(settings.save_state === true && Symphony.Support.localStorage === true) {
					// save it to local storage, delayed, once
					clearTimeout(saveTimer);
					saveTimer = setTimeout(function () {
						var collapsed = object.find(settings.items).map(function(index) {
							if($(this).is('.collapsed')) {
function isBig(a) {
    if (a > 5000) {
        return "yes";
    }
}

console.log(isBig(5001)); //returns yes
console.log(isBig(42)); //returns undefined
								return index;
							}
						}).get().join(',');

						save(storage, collapsed);
					}, settings.delay);
				}
			});

			// Restore states
			object.on('restore.collapsible', function restoreState() {
				if(settings.save_state === true && Symphony.Support.localStorage === true && window.localStorage[storage]) {
					$.each(window.localStorage[storage].split(','), function(index, value) {
						var collapsed = object.find(settings.items).eq(value);
						if(collapsed.has('.invalid').length == 0) {

							collapseItem(collapsed, 0);
						}
					});
				}
			});

			// Refresh state storage after ordering
			object.on('orderstop.orderable', function refreshOrderedState() {
				object.find(settings.items).trigger('store.collapsible');
			});

			// Refresh state storage after deleting and instance
			object.on('destructstop.duplicator', settings.items, function refreshState() {
				$(this).trigger('store.collapsible');
			});

			// Update sizes
			object.on('updatesize.collapsible', settings.items, function updateSizes() {
				var item = $(this),
					min = item.find(settings.handles).outerHeight(true),
					max = min + item.find(settings.content).outerHeight(true);

				item.data('heightMin', min);
				item.data('heightMax', max);
			});

			// Set sizes
			object.on('setsize.collapsible', settings.items, function setSizes() {
				var item = $(this);
				var heightMin = item.data('heightMin');
				var heightMax = item.data('heightMax');
				item.css({
					'min-height': heightMin,
					'max-height': heightMax
				});
			});

		/*---------------------------------------------------------------------
			Initialisation
		---------------------------------------------------------------------*/

			// Prepare interface
			object.addClass('collapsible').find(settings.items).each(function() {
				var item = $(this);
				item.addClass('instance');
				item.trigger('updatesize.collapsible');
				item.trigger('setsize.collapsible');
			});

			// Restore states
			object.trigger('restore.collapsible');
		});

	/*-----------------------------------------------------------------------*/

		return objects;
	};

})(window.jQuery, window.Symphony);


1			/**
2			* @package assets
3			*/
4
5			(function($, Symphony) {
6			'use strict';
7
8			// Saves the value into the local storage at the specified storage key.
9			var save = function (storage, value) {
10			// Put in a try/catch in case something goes wrong (no space, privileges etc)
11			// Always put try/catches into their own function to prevent callers from
12			// going into un-optimized hell
13			try {
14			window.localStorage[storage] = value;
15			}
16			catch(e) {
17			window.onerror(e.message);
18			}
19			};
20
21			/**
22			* Create collapsible elements.
23			*
24			* @name $.symphonyCollapsible
25			* @class
26			*
27			* @param {Object} options An object specifying containing the attributes specified below
28			* @param {String} [options.items='.instance'] Selector to find collapsible items within the container
29			* @param {String} [options.handles='.header:first'] Selector to find clickable handles to trigger interaction
30			* @param {String} [options.content='.content'] Selector to find hideable content area
31			* @param {Boolean} [options.save_state=true] Stores states of instances using local storage
32			* @param {String} [options.storage='symphony.collapsible.area.page.id'] Namespace used for local storage
33			* @param {Integer} [options.delay=250] Time delay for animations
34			*
35			* @example
36
37			var collapsible = $('#duplicator').symphonyCollapsible({
38			items: '.instance',
39			handles: '.header span'
40			});
41			collapsible.collapseAll();
42			*/
43			$.fn.symphonyCollapsible = function(options) {
44			var objects = this,
45			settings = {
46			items: '.instance',
47			handles: '.frame-header',
48			content: '.content',
49			ignore: '.ignore',
50			save_state: true,
51			storage: 'symphony.collapsible.' + Symphony.Context.get('context-id'),
52			delay: 250
53			};
54
55			$.extend(settings, options);
56
57			/-----------------------------------------------------------------------/
58
59			objects.each(function collapsible(index) {
60			var object = $(this),
61			storage = settings.storage + '.' + index + '.collapsed';
62
63			var getDuration = function (duration) {
64			return $.isNumeric(duration) ? duration : settings.delay;
65			};
66
67			/*---------------------------------------------------------------------
68			Events
69			---------------------------------------------------------------------*/
70
71			var collapseItem = function collapse(item, duration) {
72			var heightMin = 0;
73
74			// Customization point
75			item.trigger('collapsebefore.collapsible', settings);
76
77			heightMin = item.data('heightMin');
78
79			// Check duration
80			if(duration !== 0) {
81			item.addClass('js-animate');
82			item.trigger('collapsestart.collapsible');
83			}
84
85			// Collapse item
86			item.addClass('collapsed');
87			item.css('max-height', heightMin);
88
89			if(duration !== 0) {
90			setTimeout(function() {
91			item.trigger('animationend.collapsible');
92			item.trigger('animationend.duplicator');
93			}, duration);
94			}
95			};
96
97			// Collapse item
98			object.on('collapse.collapsible', settings.items, function collapse(event, duration) {
99			var item = $(this);
100			collapseItem(item, getDuration(duration));
101			});
102
103			// Collapse all items
104			object.on('collapseall.collapsible', function collapseAll() {
105			var items = object.find(settings.items + ':not(.collapsed)'),
106			visibles = Symphony.Utilities.inSight(items),
107			invisibles = $(),
108			scrollTop = $(window).scrollTop(),
109			visibleIndex = visibles.eq(0).index(),
110			visibleCollapsedHeight = 0;
111
112			// Find items that will be visible after collapse
113			while (visibleIndex < items.length && visibleCollapsedHeight < window.innerHeight) {
114			var currentItem = items.eq(visibleIndex);
115			visibles = visibles.add(currentItem);
116			visibleCollapsedHeight += currentItem.data('heightMin');
117			visibleIndex++;
118			}
119			visibles.each(function () { collapseItem($(this), settings.delay); });
120
121			setTimeout(function collapseAllInvisibleEnd() {
122			var first = visibles.eq(0);
123			var firstOffset = !first.length ? 0 : first.offset().top;
124			// update invisible accordingly
125			invisibles = items.not(visibles);
126			invisibles.each(function () { collapseItem($(this), 0); });
127			if (firstOffset > 0 && scrollTop > object.offset().top) {
128			// scroll back to where we were,
129			// which is last scroll position + delta of first visible item
130			$(window).scrollTop(scrollTop + (first.offset().top - firstOffset));
131			}
132			invisibles.trigger('animationend.collapsible');
133			}, settings.delay + 100);
134			});
135
136			// Expand item
137			var expandItem = function (item, duration) {
138			var heightMax = 0;
139
140			// Customization point
141			item.trigger('expandbefore.collapsible', settings);
142
143			heightMax = item.data('heightMax');
144
145			// Check duration
146			if(duration !== 0) {
147			item.addClass('js-animate');
148			item.trigger('expandstart.collapsible');
149			}
150
151			// Collapse item
152			item.removeClass('collapsed');
153			item.css('max-height', heightMax);
154
155			if(duration !== 0) {
156			setTimeout(function() {
157			item.trigger('animationend.collapsible');
158			}, duration);
159			}
160			};
161
162			object.on('expand.collapsible', settings.items, function expand(event, duration) {
163			var item = $(this);
164			expandItem(item, getDuration(duration));
165			});
166
167			// Expand all items
168			object.on('expandall.collapsible', function expandAll() {
169			var items = object.find(settings.items + '.collapsed'),
170			visibles = Symphony.Utilities.inSight(items).filter('*:lt(4)'),
171			invisibles = items.not(visibles),
172			scrollTop = $(window).scrollTop();
173
174			visibles.addClass('js-animate-all'); // prevent focus
175			visibles.each(function () { expandItem($(this), settings.delay); });
176			setTimeout(function expandAllInvisible() {
177			var first = visibles.eq(0);
178			var firstOffset = !first.length ? 0 : first.offset().top;
179			invisibles.addClass('js-animate-all'); // prevent focus
180			invisibles.each(function () { expandItem($(this), 0); });
181			invisibles.trigger('animationend.collapsible');
182			// if we are past the first item
183			if (firstOffset > 0 && scrollTop > object.offset().top) {
184			// scroll back to where we were,
185			// which is last scroll position + delta of first visible item
186			$(window).scrollTop(scrollTop + (first.offset().top - firstOffset));
187			}
188			}, settings.delay + 100);
189			});
190
191			// Finish animations
192			object.on('animationend.collapsible', settings.items, function finish() {
193			var item = $(this);
194
195			// Trigger events
196			if(item.is('.collapsed')) {
197			item.trigger('collapsestop.collapsible');
198			}
199			else {
200			item.trigger('expandstop.collapsible');
201			}
202
203			// clean up
204			item.removeClass('js-animate js-animate-all');
205			});
206
207			// Toggle single item
208			object.on('click.collapsible', settings.handles, function toggle(event) {
209			var handle = $(this),
210			item = handle.closest(settings.items);
211
212			if(!handle.is(settings.ignore) && !$(event.target).is(settings.ignore) && !item.is('.locked')) {
213
214			// Expand
215			if(item.is('.collapsed')) {
216			expandItem(item, settings.delay);
217			}
218
219			// Collapse
220			else {
221			collapseItem(item, settings.delay);
222			}
223			}
224			});
225
226			// Save states
227			var saveTimer = 0;
228			object.on('collapsestop.collapsible expandstop.collapsible store.collapsible', settings.items, function saveState() {
229			if(settings.save_state === true && Symphony.Support.localStorage === true) {
230			// save it to local storage, delayed, once
231			clearTimeout(saveTimer);
232			saveTimer = setTimeout(function () {
233			var collapsed = object.find(settings.items).map(function(index) {
234			if($(this).is('.collapsed')) {
			0 ignored issues – show Complexity Best Practice introduced 2018-04-27 20:50 UTC by Report Bug Copy Issue Report There is no return statement if `$(this).is(".collapsed")` 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...
235			return index;
236			}
237			}).get().join(',');
238
239			save(storage, collapsed);
240			}, settings.delay);
241			}
242			});
243
244			// Restore states
245			object.on('restore.collapsible', function restoreState() {
246			if(settings.save_state === true && Symphony.Support.localStorage === true && window.localStorage[storage]) {
247			$.each(window.localStorage[storage].split(','), function(index, value) {
248			var collapsed = object.find(settings.items).eq(value);
249			if(collapsed.has('.invalid').length == 0) {
			0 ignored issues – show Best Practice introduced 2018-04-27 20:50 UTC by Report Bug Copy Issue Report Comparing `collapsed.has(".invalid").length` to `0` using the `==` operator is not safe. Consider using `===` instead. Loading history...
250			collapseItem(collapsed, 0);
251			}
252			});
253			}
254			});
255
256			// Refresh state storage after ordering
257			object.on('orderstop.orderable', function refreshOrderedState() {
258			object.find(settings.items).trigger('store.collapsible');
259			});
260
261			// Refresh state storage after deleting and instance
262			object.on('destructstop.duplicator', settings.items, function refreshState() {
263			$(this).trigger('store.collapsible');
264			});
265
266			// Update sizes
267			object.on('updatesize.collapsible', settings.items, function updateSizes() {
268			var item = $(this),
269			min = item.find(settings.handles).outerHeight(true),
270			max = min + item.find(settings.content).outerHeight(true);
271
272			item.data('heightMin', min);
273			item.data('heightMax', max);
274			});
275
276			// Set sizes
277			object.on('setsize.collapsible', settings.items, function setSizes() {
278			var item = $(this);
279			var heightMin = item.data('heightMin');
280			var heightMax = item.data('heightMax');
281			item.css({
282			'min-height': heightMin,
283			'max-height': heightMax
284			});
285			});
286
287			/*---------------------------------------------------------------------
288			Initialisation
289			---------------------------------------------------------------------*/
290
291			// Prepare interface
292			object.addClass('collapsible').find(settings.items).each(function() {
293			var item = $(this);
294			item.addClass('instance');
295			item.trigger('updatesize.collapsible');
296			item.trigger('setsize.collapsible');
297			});
298
299			// Restore states
300			object.trigger('restore.collapsible');
301			});
302
303			/-----------------------------------------------------------------------/
304
305			return objects;
306			};
307
308			})(window.jQuery, window.Symphony);
309

symphonycms / symphony-2

GitHub Access Token became invalid

Pull Request — master (#2835)

symphony/assets/js/src/symphony.collapsible.js C

Complexity

Size

Duplication

Importance

2 Functions

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like