Added drag and drop reordering of plugins. Started pulling out admin area's js into elgg.admin JS object.

git-svn-id: http://code.elgg.org/elgg/trunk@8056 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 98 insertions, 47 deletions

diff --git a/views/default/admin/components/plugin.php b/views/default/admin/components/plugin.php
index acbe42e84..229dd8c57 100644
--- a/views/default/admin/components/plugin.php
+++ b/views/default/admin/components/plugin.php
@@ -152,7 +152,7 @@ $license = elgg_view('output/text', array('value' => $plugin->manifest->getLicen
 
 ?>
 
-<div class="plugin_details <?php echo $active_class ?>">
+<div id="elgg-plugin-<?php echo $plugin->guid; ?>" class="elgg-state-draggable plugin_details <?php echo $active_class ?>">
 	<div class="admin_plugin_reorder">
 	<?php echo "$links"; ?>
 	</div><div class="clearfloat"></div>
@@ -166,7 +166,7 @@ if (elgg_view_exists($settings_view)) {
 	$settings_link = "<a class='plugin_settings small link' href='$link'>[" . elgg_echo('settings') . "]</a>";
 }
 ?>
-	<h3><?php echo $plugin->manifest->getName() . " $version $settings_link"; ?></h3>
+	<h3 class="elgg-head"><?php echo $plugin->manifest->getName() . " $version $settings_link"; ?></h3>
 		<div class="plugin_description"><?php echo $description; ?></div>
 		<p class="plugin_author"><?php echo $author . ' - ' . $website; ?></p>
 
diff --git a/views/default/admin/plugins/advanced.php b/views/default/admin/plugins/advanced.php
index b83bee87f..05754e4c7 100644
--- a/views/default/admin/plugins/advanced.php
+++ b/views/default/admin/plugins/advanced.php
@@ -78,6 +78,8 @@ $buttons .= $category_form;
 	<div class="content-header-options"><?php echo $buttons ?></div>
 </div>
 <br />
+
+<div id="elgg-plugin-list">
 <?php
 
 // Display list of plugins
@@ -88,48 +90,4 @@ foreach ($installed_plugins as $plugin) {
 	));
 }
 ?>
-
-<script type="text/javascript">
-	$(document).ready(function() {
-		$('a.manifest_details.link').click(function() {
-			elgg_slide_toggle($(this), '.plugin_details', '.manifest_file');
-		});
-
-
-		$('.elgg-plugin-screenshot a').click(function(e) {
-			e.preventDefault();
-			var lb = $('.elgg-plugin-screenshot-lightbox');
-
-			if (lb.length < 1) {
-				$('body').append('<div class="elgg-plugin-screenshot-lightbox"></div>');
-				lb = $('.elgg-plugin-screenshot-lightbox');
-
-				lb.click(function() {
-					lb.hide();
-				});
-
-				$(document).click(function(e) {
-					var target = $(e.target);
-					if (target.is('a') && target.hasClass('elgg-plugin-screenshot-lightbox')) {
-						lb.hide();
-						e.preventDefault();
-					}
-				});
-			}
-
-			var html = '<img class="pas" src="' + $(this).attr('href') + '">';
-			var desc = $(this).find('img').attr('alt');
-
-			if (desc) {
-				html = '<h2 class="pam">' + desc + '</h2>' + html;
-			}
-
-			lb.html(html);
-
-			top_pos = $(window).scrollTop() + 10 + 'px';
-			left_pos = $(window).scrollLeft() + 5 + 'px';
-
-			lb.css('top', top_pos).css('left', left_pos).show();
-		});
-	});
-</script>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/views/default/js/admin.php b/views/default/js/admin.php
new file mode 100644
index 000000000..46e82c71b
--- /dev/null
+++ b/views/default/js/admin.php
@@ -0,0 +1,93 @@
+<?php
+/**
+ * Admin-area specific javascript functions.
+ *
+ * @since 1.8
+ */
+?>
+elgg.provide('elgg.admin');
+
+elgg.admin.init = function () {
+	// display manifest info
+	$('a.manifest_details.link').click(function() {
+		elgg_slide_toggle($(this), '.plugin_details', '.manifest_file');
+	});
+
+	$('.elgg-plugin-screenshot a').click(elgg.admin.displayPluginScreenshot);
+
+	// draggable plugin reordering
+	$('#elgg-plugin-list').sortable({
+		items:                'div.elgg-state-draggable',
+		handle:               'h3.elgg-head',
+		forcePlaceholderSize: true,
+		placeholder:          'elgg-widget-placeholder',
+		opacity:              0.8,
+		revert:               500,
+		stop:                 elgg.admin.movePlugin
+	});
+}
+
+/**
+ * Save the plugin order after a move event.
+ *
+ * @param {Object} e  Event object.
+ * @param {Object} ui jQueryUI object
+ * @return void
+ */
+elgg.admin.movePlugin = function(e, ui) {
+	// get guid from id like elgg-plugin-<guid>
+	var pluginGuid = ui.item.closest('.plugin_details').attr('id');
+	pluginGuid = pluginGuid.replace('elgg-plugin-', '');
+
+	elgg.action('admin/plugins/set_priority', {
+		data: {
+				plugin_guid: pluginGuid,
+				// we start at priority 1
+				priority: ui.item.index() + 1
+			}
+	});
+};
+
+/**
+ * Display a plugin screenshot.
+ *
+ * @param {Object} e The event object.
+ * @return void
+ */
+elgg.admin.displayPluginScreenshot = function(e) {
+	e.preventDefault();
+	var lb = $('.elgg-plugin-screenshot-lightbox');
+
+	if (lb.length < 1) {
+		$('body').append('<div class="elgg-plugin-screenshot-lightbox"></div>');
+		lb = $('.elgg-plugin-screenshot-lightbox');
+
+		lb.click(function() {
+			lb.hide();
+		});
+
+		$(document).click(function(e) {
+			var target = $(e.target);
+			if (target.is('a') && target.hasClass('elgg-plugin-screenshot-lightbox')) {
+				lb.hide();
+				e.preventDefault();
+			}
+		});
+	}
+
+	var html = '<img class="pas" src="' + $(this).attr('href') + '">';
+	var desc = $(this).find('img').attr('alt');
+
+	if (desc) {
+		html = '<h2 class="pam">' + desc + '</h2>' + html;
+	}
+
+	lb.html(html);
+
+	top_pos = $(window).scrollTop() + 10 + 'px';
+	left_pos = $(window).scrollLeft() + 5 + 'px';
+
+	lb.css('top', top_pos).css('left', left_pos).show();
+};
+
+elgg.register_event_handler('init', 'system', elgg.admin.init);
\ No newline at end of file