Commits

Luke Plant committed 299a0c0

Improved preview mechanism

  • Participants
  • Parent commits 8845c48

Comments (0)

Files changed (2)

File semanticeditor/media/semanticeditor/javascript/wymeditor/plugins/semantic/wymeditor.semantic.js

     var headingsbox_id = id_prefix + 'headings';
     var optsbox_id = id_prefix + 'optsbox';
     var headingsfilter_id = id_prefix + 'headingsfilter';
-    var layoutpreview_id = id_prefix + 'layoutpreview';
+    var previewbutton_id = id_prefix + 'previewbutton';
+    var previewbox_id = id_prefix + 'previewbox';
     var refresh_id = id_prefix + 'refresh';
     var self = this;
 
 	"<td width=\"50%\"><div class=\"prescontroloptsboxcont\">Presentation choices:<div class=\"prescontroloptsbox\" id=\"" + optsbox_id + "\"></div></div></td></tr></table>" +
 	"<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>" +
 	    "<td><input type=\"submit\" value=\"Refresh structure\" id=\"" + refresh_id + "\" /></td>" +
-	    "<td><input type=\"submit\" value=\"Preview (click then hover)\" id=\"" + layoutpreview_id + "\" /></td>" +
+	    "<td><input type=\"submit\" value=\"Preview\" id=\"" + previewbutton_id + "\" /></td>" +
             "<td width=\"100%\"><div class=\"prescontrolerror\" id=\"" + id_prefix + "errorbox" + "\"></div></td></tr></table>" +
         "</div>");
 
+    jQuery("body").append("<div style=\"position: absolute; display: none\" class=\"previewbox\" id=\"" + previewbox_id + "\">");
+
     this.optsbox = jQuery('#' + optsbox_id);
     this.headingscontrol = jQuery('#' + headingsbox_id);
     this.headingsfilter = jQuery('#' + headingsfilter_id);
     this.errorbox = jQuery('#' + id_prefix + "errorbox");
-    this.layoutpreview = jQuery('#' + layoutpreview_id);
+    this.previewbutton = jQuery('#' + previewbutton_id);
+    this.previewbox = jQuery('#' + previewbox_id);
     this.refreshbutton = jQuery('#' + refresh_id);
     this.optsbox.css('height', this.headingscontrol.get(0).clientHeight.toString() + "px");
 
 				 self.headingscontrol.get(0).focus();
 				 return false;
 			     });
-    this.layoutpreview.click(function(event) {
-				 self.show_layout_preview();
+    this.previewbutton.toggle(function(event) {
+				 self.show_preview();
 				 return false;
-			     });
+			      },
+			      function(event) {
+				  self.previewbox.hide();
+			      });
     this.headingsfilter.change(function(event) {
 				   self.update_active_heading_list();
 				   self.update_headingbox();
     this.optsbox.find("input").removeAttr("disabled");
 };
 
-PresentationControls.prototype.show_layout_preview = function() {
+PresentationControls.prototype.show_preview = function() {
     var self = this;
     jQuery.post(this.opts.preview_url, { 'html': self.wym.xhtml(),
 					 'presentation': JSON.stringify(this.presentation_info)
 		function(data) {
 		    self.with_good_data(data,
 			function(value) {
-			    jQuery(".orbitaltooltip-previewbox").remove();
-			    self.layoutpreview.orbitaltooltip({
-				orbitalPosition: 0,
-				spacing:         8,
-				tooltipClass: 	 'orbitaltooltip-previewbox',
-				html:            value.html
-			    });
+			    var btn = self.previewbutton;
+			    var box = self.previewbox;
+			    var pos = btn.offset();
+			    box.html(value.html);
+			    var height = box.height() + parseInt(box.css('padding-top')) + parseInt(box.css('padding-bottom')) +
+				parseInt(box.css('border-top-width')) + parseInt(box.css('border-bottom-width'));
+			    box.css("top", pos.top - height).css("left", pos.left);
+			    box.show();
 			});
 		}, "json");
     return false;

File semanticeditor/media/semanticeditor/javascript/wymeditor/skins/semanticeditor/skin.css

 	    padding: 2px;
 	}
 
-
-	.orbitaltooltip-previewbox {
+/* PREVIEW */
+	.previewbox {
 	    background: #fff;
 	    width: 400px;
 	    height: 400px;
 	    padding: 4px;
 	}
 
-	.orbitaltooltip-previewbox .structural {
+	.previewbox .structural {
 	    border: 2px solid #888;
 	    margin: 2px;
 	}
 
-	.orbitaltooltip-previewbox .tagh1,
-	.orbitaltooltip-previewbox .tagh2,
-	.orbitaltooltip-previewbox .tagh3,
-	.orbitaltooltip-previewbox .tagh4,
-	.orbitaltooltip-previewbox .tagh5,
-	.orbitaltooltip-previewbox .tagh6 {
+	.previewbox .tagh1,
+	.previewbox .tagh2,
+	.previewbox .tagh3,
+	.previewbox .tagh4,
+	.previewbox .tagh5,
+	.previewbox .tagh6 {
 	    font-weight: bold;
 	}
 
-	.orbitaltooltip-previewbox .row1col,
-	.orbitaltooltip-previewbox .row2col,
-	.orbitaltooltip-previewbox .row3col,
-	.orbitaltooltip-previewbox .row4col
+	.previewbox .row1col,
+	.previewbox .row2col,
+	.previewbox .row3col,
+	.previewbox .row4col
 	{
 	    clear: left;
 	    border: 1px solid red;
 	    margin-bottom: 3px;
 	}
 
-	.orbitaltooltip-previewbox .rowclear
+	.previewbox .rowclear
 	{
 	    clear: left;
 	}
 
-	.orbitaltooltip-previewbox .row2col .col {
+	.previewbox .row2col .col {
 	    float: left;
 	    width: 50%;
 	}
-	.orbitaltooltip-previewbox .row3col .col {
+
+	.previewbox .row3col .col {
 	    float: left;
 	    width: 32%;
 	}
-	.orbitaltooltip-previewbox .row4col .col {
+	.previewbox .row4col .col {
 	    float: left;
 	    width: 25%;
 	}