Beginnings of embed modal web-services interfacing improvements.

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

2 files changed, 44 insertions, 9 deletions

diff --git a/mod/ecml/views/default/ecml/admin/css.php b/mod/ecml/views/default/ecml/admin/css.php
index e6cd7cfb2..07c8311dc 100644
--- a/mod/ecml/views/default/ecml/admin/css.php
+++ b/mod/ecml/views/default/ecml/admin/css.php
@@ -23,4 +23,22 @@
 }
 .ecml_restricted {
 	color: #555;
+}
+
+
+/* ecml embed web services list */
+.ecml_web_service_list {
+	margin:0;
+	padding:0;
+}
+.ecml_web_service_list li {
+	list-style: none;
+	margin:0 20px 0 0;
+	padding:0;
+	display:inline;
+}
+h2.embed_content_section {
+	margin:0 0 10px 0;
+	padding:10px 0;
+	border-bottom:1px solid #cccccc;
 }
\ No newline at end of file
diff --git a/mod/ecml/views/default/embed/web_services/content.php b/mod/ecml/views/default/embed/web_services/content.php
index 0f3fa330d..0a65a851f 100644
--- a/mod/ecml/views/default/embed/web_services/content.php
+++ b/mod/ecml/views/default/embed/web_services/content.php
@@ -15,7 +15,7 @@ $keywords = ecml_get_keywords();
 elgg_sort_3d_array_by_value($keywords, 'name');
 
 $keyword_js_array = array();
-$keyword_html = '<ul>';
+$keywords_html = "<ul class='ecml_web_service_list'>";
 // include support for standard ECML so you can get previews and validation.
 //$keyword_html = '<li class="ecml_web_service"><a class="ecml">Generic ECML</a></li>';
 
@@ -29,10 +29,10 @@ foreach ($keywords as $i => $v) {
 	$class = str_replace(array('.', ','), '_', $i);
 	$keyword_js_array[] = $class;
 	
-	$keywords_html .= "<li class=\"ecml_web_service\"><a class=\"$class\">{$v['name']}</a></li>";
+	$keywords_html .= "<li class='ecml_web_service'><a class=\"$class link\">{$v['name']}</a></li>";
 }
 
-$keywords_html .= '</ul>';
+$keywords_html .= "</ul>";
 
 $keywords_js = json_encode($keyword_js_array);
 
@@ -45,23 +45,38 @@ $embed = elgg_view('input/button', array(
 	'internalid' => 'embed_submit',
 	'type' => 'button',
 	'value' => elgg_echo('embed:embed'),
-	'class' => 'embed_disabled',
+	'class' => 'submit_button embed_disabled',
 	'disabled' => TRUE
 ));
 
 echo '<p>' . elgg_echo('ecml:embed:instructions') . '</p>';
-echo '<div id="embed_ecml_keyword_help"></div>';
-echo $input;
-echo '<p>ECML: <span id="ecml_code"></span></p>';
+
 echo $keywords_html;
+
+echo "<h2 class='embed_content_section instructions hidden'><a class='ecml_embed_instructions link'>Instructions</a></h2><div id='embed_ecml_keyword_help' class='hidden'></div>";
+
+echo "<h2 class='embed_content_section'>URL</h2><div id='embed_ecml_url'>".$input."</div>";
+
+echo "<p>ECML: <span id='ecml_code'></span></p>";
+
+echo "<h2 class='embed_content_section preview hidden'><a class='ecml_embed_preview link'>Preview</a></h2><div id='ecml_preview' class='hidden'></div>";
+
 echo $embed;
 
 ?>
-<h2>Preview</h2>
-<div id="ecml_preview"></div>
 
 <script type="text/javascript">
 
+$(document).ready(function() {
+	$('a.ecml_embed_instructions.link').click(function() {
+		elgg_slide_toggle($(this), '#facebox', '#embed_ecml_keyword_help');
+	});
+	
+	$('a.ecml_embed_preview.link').click(function() {
+		elgg_slide_toggle($(this), '#facebox', '#ecml_preview');
+	});
+});
+
 $(function() {
 	var keywords = <?php echo $keywords_js; ?>;
 	var selected_service = '';
@@ -122,6 +137,7 @@ $(function() {
 
 		// fire off a preview attempt
 		if (selected_service) {
+			$('.embed_content_section.preview').removeClass('hidden'); // reveal preview link/panel
 			rest_timeout_id = setTimeout(generate_ecml, rest_min_time);
 		}
 	};
@@ -134,6 +150,7 @@ $(function() {
 		selected_service = service;
 		$('.ecml_web_service a').removeClass('selected');
 		$('.ecml_web_service a.' + service).addClass('selected');
+		$('.embed_content_section.instructions').removeClass('hidden'); // reveal instructions link/panel
 	}
 
 	// pings back core to generate the ecml.