Revert changes by infopanel, and introduce flexpanel, which extends infopanel funcionality.

e107_web/js/core/admin.flexpanel.js

@@ -0,0 +1,96 @@
+var e107 = e107 || {'settings': {}, 'behaviors': {}};
+
+(function ($)
+{
+	'use strict';
+
+	e107.callbacks = e107.callbacks || {};
+
+	e107.settings.flexPanel = {
+		selector: '.draggable-panels',
+		items: '> .panel'
+	};
+
+	/**
+	 * Behavior to initialize draggable panels on the dashboard.
+	 *
+	 * @type {{attach: e107.behaviors.flexPanelDraggablePanels.attach}}
+	 */
+	e107.behaviors.flexPanelDraggablePanels = {
+		attach: function (context, settings)
+		{
+			var selector = e107.settings.flexPanel.selector;
+			var onceKey = 'admin-dashboard-draggable-panels';
+
+			$(context).find(selector).once(onceKey).each(function ()
+			{
+				var $panel = $(this);
+
+				$panel.sortable({
+					connectWith: selector,
+					items: e107.settings.flexPanel.items,
+					handle: '.panel-heading',
+					accept: e107.settings.flexPanel.selector,
+					cursor: 'move',
+					placeholder: 'draggable-placeholder',
+					forcePlaceholderSize: true,
+					helper: 'clone',
+					forceHelperSize: true,
+					opacity: 0.4,
+					tolerance: 'pointer',
+					start: function (event, ui)
+					{
+						var $placeholders = $('.draggable-placeholder');
+						var $draggablePanels = $(e107.settings.flexPanel.selector);
+
+						$placeholders.css('margin', '15px');
+						$placeholders.css('background-color', '#337ab7');
+
+						$draggablePanels.css('min-height', '20px');
+						$draggablePanels.css('border', '1px dashed #CCCCCC');
+						$draggablePanels.css('margin-bottom', '30px');
+
+						$panel.sortable("refreshPositions");
+					},
+					stop: function (event, ui)
+					{
+						var $draggablePanels = $(e107.settings.flexPanel.selector);
+						$draggablePanels.css('min-height', '0');
+						$draggablePanels.css('border', 'none');
+						$draggablePanels.css('margin-bottom', '0');
+
+						e107.callbacks.flexPanelSavePanelOrder();
+					}
+				});
+			});
+		}
+	};
+
+	e107.callbacks.flexPanelSavePanelOrder = function ()
+	{
+		var selector = e107.settings.flexPanel.selector;
+		var NewOrder = [];
+
+		$(selector).each(function ()
+		{
+			var $this = $(this);
+			var key = $this.attr('id');
+
+			if(key)
+			{
+				NewOrder[key] = [];
+
+				$('#' + key + ' ' + e107.settings.flexPanel.items).each(function ()
+				{
+					var $item = $(this);
+					var title = $item.find('.panel-title').eq(0).text();
+
+					NewOrder[key].push(title);
+				});
+			}
+		});
+
+		console.log(NewOrder);
+	};
+
+})(jQuery);