Luke Plant avatar Luke Plant committed f46e51e

Changed preview box to have explicit close, rather than act as a toggle

Comments (0)

Files changed (2)

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

     var previewButtonId = idPrefix + 'previewbutton';
     var showStylesButtonId = idPrefix + 'showstyles';
     var previewBoxId = idPrefix + 'previewbox';
+    var hidePreviewButtonId = idPrefix + 'hidepreviewbutton';
     var cleanHtmlButtonId = idPrefix + 'cleanhtmlbutton';
     var self = this;
 
             "<div class=\"prescontrolerror\" id=\"" + idPrefix + "errorbox" + "\"></div>" +
         "</div>");
 
-    jQuery("body").append("<div style=\"position: absolute; display: none\" class=\"previewbox\" id=\"" + previewBoxId + "\">");
+    jQuery("body").append("<div style=\"position: absolute; display: none\" class=\"previewbox\" id=\"" +  previewBoxId + "\">" +
+                          "<div class=\"closebar\">" +
+                          "<input type=\"submit\" value=\"Close\" id=\"" + hidePreviewButtonId + "\">" +
+                          "</div>" +
+                          "<div class=\"content\"></div>" +
+                          "</div>");
 
     this.classList = jQuery(this.wym._options.classesSelector).find("ul");
     this.commandList = jQuery(this.wym._options.layoutCommandsSelector).find("ul");
     this.errorBox = jQuery('#' + idPrefix + "errorbox");
     this.previewButton = jQuery('#' + previewButtonId);
     this.previewBox = jQuery('#' + previewBoxId);
+    this.hidePreviewButton = jQuery('#' + hidePreviewButtonId);
     this.showStylesButton = jQuery('#' + showStylesButtonId);
     this.cleanHtmlButton = jQuery('#' + cleanHtmlButtonId);
 
     this.retrieveStyles(); // async=False
     this.separatePresentation();
 
-    this.previewButton.toggle(function(event) {
+    this.previewButton.click(function(event) {
                                  self.showPreview();
                                  return false;
-                              },
-                              function(event) {
-                                  self.previewBox.hide();
                               });
+    this.hidePreviewButton.click(function(event) {
+                                     self.previewBox.hide();
+                                     return false;
+                                 });
     // start with styles hidden
     this.showStyles(false);
     this.showStylesButton.toggle(function(event) {
                             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.find(".content").html(value.html);
+                            var height = box.outerHeight();
+                            box.css("top", pos.top - height - 20).css("left", pos.left);
                             box.show();
                         });
                 }, "json");

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

 /* PREVIEW */
 	.previewbox {
 	    background: #fff;
+	    border: 2px solid #808080;
+	}
+
+        .previewbox .closebar {
+            text-align: right;
+        }
+
+        .previewbox .closebar * {
+            margin: 0px;
+        }
+
+        .previewbox .content {
+	    padding: 4px;
 	    width: 400px;
 	    height: 400px;
 	    overflow-y: scroll;
 	    overflow-x: hidden;
-	    border: 2px solid #008000;
-	    padding: 4px;
-	}
+        }
 
 	.previewbox .structural {
 	    border: 2px solid #888;
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.