Permalink
Browse files

made easy remix dialog show a much more accurate preview that inherit…

…s the CSS of the original page.
  • Loading branch information...
1 parent c3ccd29 commit 83768a8ac39b090d572bd5dc8da8fb62ebdb50ef @toolness toolness committed Jun 8, 2011
View
4 src/input.js
@@ -55,7 +55,9 @@
case keys.E:
mixMaster.replaceFocusedElementWithDialog(
self,
- jQuery.webxraySettings.baseURI + "easy-remix-dialog/"
+ jQuery.webxraySettings.baseURI + "easy-remix-dialog/",
+ undefined,
+ true
);
return true;
View
102 src/mix-master.js
@@ -345,7 +345,8 @@
return wasAnythingChanged;
},
- replaceFocusedElementWithDialog: function(input, dialogURL, body) {
+ replaceFocusedElementWithDialog: function(input, dialogURL, body,
+ sendFullDocument) {
var MAX_HTML_LENGTH = 5000;
var focusedElement = focused.getPrimaryElement();
if (!focusedElement)
@@ -380,52 +381,65 @@
jQuery.warn("imprintCSSInline() failed", e);
}
- focused.unfocus();
- $(focusedElement).addClass('webxray-hidden');
+ if (sendFullDocument) {
+ $(document).uprootIgnoringWebxray(function (html, head, body) {
+ begin({
+ head: head,
+ body: body,
+ selector: $(document.body).pathTo(focused.getPrimaryElement())
+ });
+ });
+ } else
+ begin(focusedHTML);
+
+ function begin(startHTML) {
+ focused.unfocus();
+ $(focusedElement).addClass('webxray-hidden');
- jQuery.morphElementIntoDialog({
- input: input,
- body: body,
- url: dialogURL + "#dialog",
- element: focusedElement,
- onLoad: function(dialog) {
- dialog.iframe.get(0).contentWindow.postMessage(JSON.stringify({
- title: "Compose A Replacement",
- instructions: "<span>When you're done composing your " +
- "replacement HTML, press the " +
- "<strong>Ok</strong> button.",
- startHTML: focusedHTML,
- baseURI: document.location.href
- }), "*");
- dialog.iframe.fadeIn();
- dialog.iframe.bind("message", function onMessage(event, data) {
- if (data && data.length && data[0] == '{') {
- var data = JSON.parse(data);
- if (data.msg == "ok") {
- // The dialog may have decided to replace all our spaces
- // with non-breaking ones, so we'll undo that.
- var html = data.endHTML.replace(/\u00a0/g, " ");
- var newContent = self.replaceElement(focusedElement, html);
+ jQuery.morphElementIntoDialog({
+ input: input,
+ body: body,
+ url: dialogURL + "#dialog",
+ element: focusedElement,
+ onLoad: function(dialog) {
+ dialog.iframe.get(0).contentWindow.postMessage(JSON.stringify({
+ title: "Compose A Replacement",
+ instructions: "<span>When you're done composing your " +
+ "replacement HTML, press the " +
+ "<strong>Ok</strong> button.",
+ startHTML: startHTML,
+ baseURI: document.location.href
+ }), "*");
+ dialog.iframe.fadeIn();
+ dialog.iframe.bind("message", function onMessage(event, data) {
+ if (data && data.length && data[0] == '{') {
+ var data = JSON.parse(data);
+ if (data.msg == "ok") {
+ // The dialog may have decided to replace all our spaces
+ // with non-breaking ones, so we'll undo that.
+ var html = data.endHTML.replace(/\u00a0/g, " ");
+ var newContent = self.replaceElement(focusedElement, html);
- newContent.addClass('webxray-hidden');
- $(focusedElement).removeClass('webxray-hidden');
- jQuery.morphDialogIntoElement({
- dialog: dialog,
- input: input,
- element: newContent,
- onDone: function() {
- newContent.removeClass('webxray-hidden');
- }
- });
- } else {
- // TODO: Re-focus previously focused elements?
- $(focusedElement).removeClass('webxray-hidden');
- dialog.close();
+ newContent.addClass('webxray-hidden');
+ $(focusedElement).removeClass('webxray-hidden');
+ jQuery.morphDialogIntoElement({
+ dialog: dialog,
+ input: input,
+ element: newContent,
+ onDone: function() {
+ newContent.removeClass('webxray-hidden');
+ }
+ });
+ } else {
+ // TODO: Re-focus previously focused elements?
+ $(focusedElement).removeClass('webxray-hidden');
+ dialog.close();
+ }
}
- }
- });
- }
- });
+ });
+ }
+ });
+ }
}
};
return self;
View
4 static-files/easy-remix-dialog/blank.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title></title>
+<div></div>
View
124 static-files/easy-remix-dialog/index.html
@@ -1,9 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="hierarchic-source-code.css">
-<link rel="stylesheet" href="../webxray.css">
+<link rel="stylesheet" id="webxray" href="../webxray.css">
<title>Easy Remix Dialog</title>
<script src="../jquery.min.js"></script>
+<script src="../jquery.scrollTo-min.js"></script>
<script src="render-dom.js"></script>
<script src="edit-dom.js"></script>
<script src="../src/utils.js"></script>
@@ -33,6 +34,13 @@
margin-left: 2em;
}
+#preview {
+ position: fixed;
+ border: none;
+ width: 480px;
+ height: 400px;
+}
+
.button {
float: right;
padding: 0.5em;
@@ -84,23 +92,13 @@
</div>
<div id="preview-column">
<h2>Preview</h2>
- <div id="preview"></div>
+ <iframe id="preview" scrolling="no" src="blank.html"></iframe>
</div>
<div id="samples" style="display: none;">
<div class="sample-link"><a href="http://wikipedia.org/">Here is a sample link.</div>
<div class="sample-list"><ul><li>Item one</li><li>Item two</li></ul></div>
</div>
-<div id="sample" style="display: none;">
- <div>
- <p>Here is starting <em>HTML</em>.</p>
- <img src="../github-ribbon.png">
- <ul class="sample-list" id="sample-id">
- <li class="areallyreallyreallyreallyreallyridiculouslylongclassname">List item one</li>
- </ul>
- </div>
-</div>
<script>
-// TODO: add firefox/opera/safari support
// TODO: consider automatically absolutifying src and href URLs.
// TODO: add infinite undo/redo.
// TODO: make it possible to create/delete attributes.
@@ -278,15 +276,82 @@
return;
isStarted = true;
- var base = document.createElement('base');
- base.setAttribute('href', data.baseURI);
- $(document.head).append(base);
$("#header h1").text(data.title);
- $("#preview").append(data.startHTML);
- var rendered = $('#preview').children().renderDom();
+
+ var previewDoc = $("#preview").contents();
+ var stylesheet = $('<link rel="stylesheet"></link>');
+
+ // TODO: We need to be able to set the doctype too,
+ // for full fidelity to the original page.
+ previewDoc.find("head").html(data.startHTML.head);
+ stylesheet.attr('href', $("link#webxray").get(0).href);
+ previewDoc.find("head").append(stylesheet);
+ previewDoc.find("body").html(data.startHTML.body);
+
+ // The selector has to be relative to the body element;
+ // for some reason, the nth-of-type CSS selector doesn't
+ // work for html and body elements in iframes.
+ var selected = previewDoc.find("body").find(data.startHTML.selector);
+ var stayVisible = selected.find("*");
+ stayVisible = stayVisible.add(selected.parents()).add(selected);
+ previewDoc.find("*").not(stayVisible).hide();
+
+ function setZoom(zoom) {
+ $("#preview").contents().find("html").css({
+ '-webkit-transform': 'scale(' + zoom + ')',
+ '-webkit-transform-origin': 'top left',
+ '-moz-transform': 'scale(' + zoom + ')',
+ '-moz-transform-origin': 'top left'
+ });
+ }
+
+ function scaleAndPan(isInstant) {
+ var contentWidth = selected.outerWidth(true);
+ var frameWidth = $("#preview").width();
+ var zoom = 1.0;
+ if (contentWidth > frameWidth) {
+ zoom = frameWidth / contentWidth;
+ }
+ setZoom(1.0);
+ var originalOffset = selected.offset();
+ setZoom(zoom);
+ var offset = selected.offset();
+
+ // Firefox doesn't apply transformations to
+ // offset coordinates, so we'll need to do it
+ // manually.
+ if (zoom != 1.0 && offset.top == originalOffset.top) {
+ offset.top *= zoom;
+ offset.left *= zoom;
+ }
+ var options = {};
+
+ if (!isInstant)
+ options.duration = 1000;
+
+ $("#preview").scrollTo({
+ top: offset.top,
+ left: offset.left
+ }, options);
+ }
+
+ setInterval(scaleAndPan, 500);
+ scaleAndPan(true);
+
+ var rendered = previewDoc.find(data.startHTML.selector).renderDom();
var focused = jQuery.focusedOverlay();
+ $("#ok.button").click(function() {
+ if (!responseSent) {
+ sendMessage({
+ msg: 'ok',
+ endHTML: selected.outerHtml()
+ });
+ responseSent = true;
+ }
+ });
+
rendered = rendered.wrap('<div></div>').parent();
rendered.mouseover(function(event) {
@@ -348,11 +413,20 @@
window.parent.postMessage(JSON.stringify(data), "*");
}
} else {
- onMessage({
- title: "Easy Remix Dialog",
- instructions: "Here are instructions.",
- startHTML: $("#sample").html(),
- baseURI: document.baseURI
+ var iframe = $('<iframe src="sample.html"></iframe>');
+ $(document.body).append(iframe);
+ iframe.hide();
+ iframe.load(function() {
+ var doc = iframe.contents();
+ onMessage({
+ title: "Easy Remix Dialog",
+ instructions: "Here are instructions.",
+ startHTML: {
+ selector: "#sample",
+ head: doc.find("head").html(),
+ body: doc.find("body").html()
+ }
+ });
});
sendMessage = function fakeSendMessage(data) {
@@ -367,11 +441,5 @@
responseSent = true;
}
});
- $("#ok.button").click(function() {
- if (!responseSent) {
- sendMessage({msg: 'ok', endHTML: $("#preview").html()});
- responseSent = true;
- }
- });
});
</script>
View
27 static-files/easy-remix-dialog/sample.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Sample Remix HTML</title>
+<style>
+html, body {
+ font-family: Helvetica;
+ width: 40em;
+}
+
+#sample {
+ margin-left: 3em;
+}
+
+#sample img {
+ float: left;
+}
+</style>
+<h1>Sample Remix HTML</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<div id="sample">
+ <p>Here is starting <em>HTML</em>.</p>
+ <img src="../github-ribbon.png"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <ul class="sample-list" id="sample-id">
+ <li class="areallyreallyreallyreallyreallyridiculouslylongclassname">List item one</li>
+ </ul>
+</div>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

0 comments on commit 83768a8

Please sign in to comment.