public-offering
/
pad.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove editor iframes, first step

iframes-must-die
Peter 'Pita' Martischka 2015-04-12 16:37:38 +01:00
parent e3f95d0c9c
commit 99a6e2ab8f
5 changed files with 47 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/static/css/iframe_editor.css
View File

@ -119,10 +119,8 @@ body.doesWrap > div{
} }
#innerdocbody { #innerdocbody {
padding-top: 1px; /* important for some reason? */ position: absolute;
padding-right: 10px; top: 8px;
padding-bottom: 8px;
padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */;
overflow: hidden; overflow: hidden;
/* blank 1x1 gif, so that IE8 doesn't consider the body transparent */ /* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);

10
src/static/css/pad.css
View File

@ -16,9 +16,6 @@ body,
textarea { textarea {
font-family: Helvetica, Arial, sans-serif font-family: Helvetica, Arial, sans-serif
} }
iframe {
position: absolute
}
.readonly .acl-write { .readonly .acl-write {
display: none; display: none;
} }
@ -217,13 +214,6 @@ li[data-key=showusers] > a #online_count {
bottom: 0px; bottom: 0px;
z-index: 1; z-index: 1;
} }
#editorcontainer iframe {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
left: 0; /* Required for safari fixes RTL */
}
#editorloadingbox { #editorloadingbox {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;

125
src/static/js/ace.js
View File

@ -200,7 +200,6 @@ function Ace2Editor()
editor.init = function(containerId, initialCode, doneFunc) editor.init = function(containerId, initialCode, doneFunc)
{ {
editor.importText(initialCode); editor.importText(initialCode);
info.onEditorReady = function() info.onEditorReady = function()
@ -210,126 +209,10 @@ function Ace2Editor()
doneFunc(); doneFunc();
}; };
(function() var Ace2Inner = require("ep_etherpad-lite/static/js/ace2_inner");
{ var editorId = info.id;
var doctype = "<!doctype html>"; var editorInfo = Ace2Editor.registry[editorId];
Ace2Inner.init(editorInfo);
var iframeHTML = [];
iframeHTML.push(doctype);
iframeHTML.push("<html><head>");
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
// and compressed, putting the compressed code from the named file directly into the
// source here.
// these lines must conform to a specific format because they are passed by the build script:
var includedCSS = [];
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
$$INCLUDE_CSS("../static/css/iframe_editor.css");
$$INCLUDE_CSS("../static/css/pad.css");
$$INCLUDE_CSS("../static/custom/pad.css");
var additionalCSS = _(hooks.callAll("aceEditorCSS")).map(function(path){ return '../static/plugins/' + path });
includedCSS = includedCSS.concat(additionalCSS);
pushStyleTagsFor(iframeHTML, includedCSS);
if (!Ace2Editor.EMBEDED && Ace2Editor.EMBEDED[KERNEL_SOURCE]) {
// Remotely src'd script tag will not work in IE; it must be embedded, so
// throw an error if it is not.
throw new Error("Require kernel could not be found.");
}
iframeHTML.push(scriptTag(
Ace2Editor.EMBEDED[KERNEL_SOURCE] + '\n\
require.setRootURI("../javascripts/src");\n\
require.setLibraryURI("../javascripts/lib");\n\
require.setGlobalKeyPath("require");\n\
\n\
var hooks = require("ep_etherpad-lite/static/js/pluginfw/hooks");\n\
var plugins = require("ep_etherpad-lite/static/js/pluginfw/client_plugins");\n\
hooks.plugins = plugins;\n\
plugins.adoptPluginsFromAncestorsOf(window);\n\
\n\
$ = jQuery = require("ep_etherpad-lite/static/js/rjquery").jQuery; // Expose jQuery #HACK\n\
var Ace2Inner = require("ep_etherpad-lite/static/js/ace2_inner");\n\
\n\
plugins.ensure(function () {\n\
Ace2Inner.init();\n\
});\n\
'));
iframeHTML.push('<style type="text/css" title="dynamicsyntax"></style>');
hooks.callAll("aceInitInnerdocbodyHead", {
iframeHTML: iframeHTML
});
iframeHTML.push('</head><body id="innerdocbody" role="application" class="syntax" spellcheck="false">&nbsp;</body></html>');
// Expose myself to global for my child frame.
var thisFunctionsName = "ChildAccessibleAce2Editor";
(function () {return this}())[thisFunctionsName] = Ace2Editor;
var outerScript = '\
editorId = ' + JSON.stringify(info.id) + ';\n\
editorInfo = parent[' + JSON.stringify(thisFunctionsName) + '].registry[editorId];\n\
window.onload = function () {\n\
window.onload = null;\n\
setTimeout(function () {\n\
var iframe = document.createElement("IFRAME");\n\
iframe.name = "ace_inner";\n\
iframe.title = "pad";\n\
iframe.scrolling = "no";\n\
var outerdocbody = document.getElementById("outerdocbody");\n\
iframe.frameBorder = 0;\n\
iframe.allowTransparency = true; // for IE\n\
outerdocbody.insertBefore(iframe, outerdocbody.firstChild);\n\
iframe.ace_outerWin = window;\n\
readyFunc = function () {\n\
editorInfo.onEditorReady();\n\
readyFunc = null;\n\
editorInfo = null;\n\
};\n\
var doc = iframe.contentWindow.document;\n\
doc.open();\n\
var text = (' + JSON.stringify(iframeHTML.join('\n')) + ');\n\
doc.write(text);\n\
doc.close();\n\
}, 0);\n\
}';
var outerHTML = [doctype, '<html><head>']
var includedCSS = [];
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
$$INCLUDE_CSS("../static/css/iframe_editor.css");
$$INCLUDE_CSS("../static/css/pad.css");
$$INCLUDE_CSS("../static/custom/pad.css");
var additionalCSS = _(hooks.callAll("aceEditorCSS")).map(function(path){ return '../static/plugins/' + path });
includedCSS = includedCSS.concat(additionalCSS);
pushStyleTagsFor(outerHTML, includedCSS);
// bizarrely, in FF2, a file with no "external" dependencies won't finish loading properly
// (throbs busy while typing)
outerHTML.push('<style type="text/css" title="dynamicsyntax"></style>', '<link rel="stylesheet" type="text/css" href="data:text/css,"/>', scriptTag(outerScript), '</head><body id="outerdocbody"><div id="sidediv"><!-- --></div><div id="linemetricsdiv">x</div></body></html>');
var outerFrame = document.createElement("IFRAME");
outerFrame.name = "ace_outer";
outerFrame.frameBorder = 0; // for IE
outerFrame.title = "Ether";
info.frame = outerFrame;
document.getElementById(containerId).appendChild(outerFrame);
var editorDocument = outerFrame.contentWindow.document;
editorDocument.open();
editorDocument.write(outerHTML.join(''));
editorDocument.close();
})();
}; };
return editor; return editor;

67
src/static/js/ace2_inner.js
View File

@ -47,7 +47,7 @@ var isNodeText = Ace2Common.isNodeText,
noop = Ace2Common.noop; noop = Ace2Common.noop;
var hooks = require('./pluginfw/hooks'); var hooks = require('./pluginfw/hooks');
function Ace2Inner(){ function Ace2Inner(editorInfo){
var makeChangesetTracker = require('./changesettracker').makeChangesetTracker; var makeChangesetTracker = require('./changesettracker').makeChangesetTracker;
var colorutils = require('./colorutils').colorutils; var colorutils = require('./colorutils').colorutils;
@ -80,13 +80,9 @@ function Ace2Inner(){
var thisAuthor = ''; var thisAuthor = '';
var disposed = false; var disposed = false;
var editorInfo = parent.editorInfo; var sideDiv = $('#sidediv')[0];
var lineMetricsDiv = $('#linemetricsdiv')[0];
var iframe = window.frameElement; var innerdocbody = $('#innerdocbody')[0];
var outerWin = iframe.ace_outerWin;
iframe.ace_outerWin = null; // prevent IE 6 memory leak
var sideDiv = iframe.nextSibling;
var lineMetricsDiv = sideDiv.nextSibling;
initLineNumbers(); initLineNumbers();
var outsideKeyDown = noop; var outsideKeyDown = noop;
@ -961,7 +957,7 @@ function Ace2Inner(){
setClassPresence(sideDiv, "sidedivhidden", !hasLineNumbers); setClassPresence(sideDiv, "sidedivhidden", !hasLineNumbers);
fixView(); fixView();
}, },
grayedout: setClassPresenceNamed(outerWin.document.body, "grayedout"), grayedout: setClassPresenceNamed(window.document.body, "grayedout"),
dmesg: function(){ dmesg = window.dmesg = value; }, dmesg: function(){ dmesg = window.dmesg = value; },
userauthor: function(value){ userauthor: function(value){
thisAuthor = String(value); thisAuthor = String(value);
@ -3263,7 +3259,7 @@ function Ace2Inner(){
function getViewPortTopBottom() function getViewPortTopBottom()
{ {
var theTop = getScrollY(); var theTop = getScrollY();
var doc = outerWin.document; var doc = window.document;
var height = doc.documentElement.clientHeight; var height = doc.documentElement.clientHeight;
return { return {
top: theTop, top: theTop,
@ -3809,7 +3805,7 @@ function Ace2Inner(){
//scrollSelectionIntoView(); //scrollSelectionIntoView();
scheduler.setTimeout(function() scheduler.setTimeout(function()
{ {
outerWin.scrollBy(-100, 0); window.scrollBy(-100, 0);
}, 0); }, 0);
specialHandled = true; specialHandled = true;
} }
@ -4721,6 +4717,7 @@ function Ace2Inner(){
function fixView() function fixView()
{ {
//return; // TODO: look into this later
// calling this method repeatedly should be fast // calling this method repeatedly should be fast
if (getInnerWidth() === 0 || getInnerHeight() === 0) if (getInnerWidth() === 0 || getInnerHeight() === 0)
{ {
@ -4740,7 +4737,7 @@ function Ace2Inner(){
if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH; if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH;
iframePadLeft = EDIT_BODY_PADDING_LEFT; iframePadLeft = EDIT_BODY_PADDING_LEFT;
if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT; if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT;
setIfNecessary(iframe.style, "left", iframePadLeft + "px"); setIfNecessary(innerdocbody.style, "left", iframePadLeft + "px");
setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px"); setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px");
for (var i = 0; i < 2; i++) for (var i = 0; i < 2; i++)
@ -4752,11 +4749,11 @@ function Ace2Inner(){
if (newHeight < viewHeight) if (newHeight < viewHeight)
{ {
newHeight = viewHeight; newHeight = viewHeight;
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto'); if (browser.msie) setIfNecessary(window.document.documentElement.style, 'overflowY', 'auto');
} }
else else
{ {
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll'); if (browser.msie) setIfNecessary(window.document.documentElement.style, 'overflowY', 'scroll');
} }
if (doesWrap) if (doesWrap)
{ {
@ -4766,8 +4763,8 @@ function Ace2Inner(){
{ {
if (newWidth < viewWidth) newWidth = viewWidth; if (newWidth < viewWidth) newWidth = viewWidth;
} }
setIfNecessary(iframe.style, "height", newHeight + "px"); setIfNecessary(innerdocbody.style, "height", newHeight + "px");
setIfNecessary(iframe.style, "width", newWidth + "px"); setIfNecessary(innerdocbody.style, "width", newWidth + "px");
setIfNecessary(sideDiv.style, "height", newHeight + "px"); setIfNecessary(sideDiv.style, "height", newHeight + "px");
} }
if (browser.firefox) if (browser.firefox)
@ -4792,7 +4789,7 @@ function Ace2Inner(){
// if near edge, scroll to edge // if near edge, scroll to edge
var scrollX = getScrollX(); var scrollX = getScrollX();
var scrollY = getScrollY(); var scrollY = getScrollY();
var win = outerWin; var win = window;
var r = 20; var r = 20;
enforceEditability(); enforceEditability();
@ -4802,8 +4799,8 @@ function Ace2Inner(){
function getScrollXY() function getScrollXY()
{ {
var win = outerWin; var win = window;
var odoc = outerWin.document; var odoc = window.document;
if (typeof(win.pageYOffset) == "number") if (typeof(win.pageYOffset) == "number")
{ {
return { return {
@ -4833,17 +4830,17 @@ function Ace2Inner(){
function setScrollX(x) function setScrollX(x)
{ {
outerWin.scrollTo(x, getScrollY()); window.scrollTo(x, getScrollY());
} }
function setScrollY(y) function setScrollY(y)
{ {
outerWin.scrollTo(getScrollX(), y); window.scrollTo(getScrollX(), y);
} }
function setScrollXY(x, y) function setScrollXY(x, y)
{ {
outerWin.scrollTo(x, y); window.scrollTo(x, y);
} }
var _teardownActions = []; var _teardownActions = [];
@ -5077,7 +5074,7 @@ function Ace2Inner(){
function getPageHeight() function getPageHeight()
{ {
var win = outerWin; var win = window;
var odoc = win.document; var odoc = win.document;
if (win.innerHeight && win.scrollMaxY) return win.innerHeight + win.scrollMaxY; if (win.innerHeight && win.scrollMaxY) return win.innerHeight + win.scrollMaxY;
else if (odoc.body.scrollHeight > odoc.body.offsetHeight) return odoc.body.scrollHeight; else if (odoc.body.scrollHeight > odoc.body.offsetHeight) return odoc.body.scrollHeight;
@ -5086,7 +5083,7 @@ function Ace2Inner(){
function getPageWidth() function getPageWidth()
{ {
var win = outerWin; var win = window;
var odoc = win.document; var odoc = win.document;
if (win.innerWidth && win.scrollMaxX) return win.innerWidth + win.scrollMaxX; if (win.innerWidth && win.scrollMaxX) return win.innerWidth + win.scrollMaxX;
else if (odoc.body.scrollWidth > odoc.body.offsetWidth) return odoc.body.scrollWidth; else if (odoc.body.scrollWidth > odoc.body.offsetWidth) return odoc.body.scrollWidth;
@ -5095,7 +5092,7 @@ function Ace2Inner(){
function getInnerHeight() function getInnerHeight()
{ {
var win = outerWin; var win = window;
var odoc = win.document; var odoc = win.document;
var h; var h;
if (browser.opera) h = win.innerHeight; if (browser.opera) h = win.innerHeight;
@ -5109,7 +5106,7 @@ function Ace2Inner(){
function getInnerWidth() function getInnerWidth()
{ {
var win = outerWin; var win = window;
var odoc = win.document; var odoc = win.document;
return odoc.documentElement.clientWidth; return odoc.documentElement.clientWidth;
} }
@ -5119,8 +5116,8 @@ function Ace2Inner(){
// requires element (non-text) node; // requires element (non-text) node;
// if node extends above top of viewport or below bottom of viewport (or top of scrollbar), // if node extends above top of viewport or below bottom of viewport (or top of scrollbar),
// scroll it the minimum distance needed to be completely in view. // scroll it the minimum distance needed to be completely in view.
var win = outerWin; var win = window;
var odoc = outerWin.document; var odoc = window.document;
var distBelowTop = node.offsetTop + iframePadTop - win.scrollY; var distBelowTop = node.offsetTop + iframePadTop - win.scrollY;
var distAboveBottom = win.scrollY + getInnerHeight() - (node.offsetTop + iframePadTop + node.offsetHeight); var distAboveBottom = win.scrollY + getInnerHeight() - (node.offsetTop + iframePadTop + node.offsetHeight);
@ -5136,8 +5133,8 @@ function Ace2Inner(){
function scrollXHorizontallyIntoView(pixelX) function scrollXHorizontallyIntoView(pixelX)
{ {
var win = outerWin; var win = window;
var odoc = outerWin.document; var odoc = window.document;
pixelX += iframePadLeft; pixelX += iframePadLeft;
var distInsideLeft = pixelX - win.scrollX; var distInsideLeft = pixelX - win.scrollX;
var distInsideRight = win.scrollX + getInnerWidth() - pixelX; var distInsideRight = win.scrollX + getInnerWidth() - pixelX;
@ -5331,7 +5328,7 @@ function Ace2Inner(){
{ {
lineNumbersShown = 1; lineNumbersShown = 1;
sideDiv.innerHTML = '<table border="0" cellpadding="0" cellspacing="0" align="right"><tr><td id="sidedivinner"><div>1</div></td></tr></table>'; sideDiv.innerHTML = '<table border="0" cellpadding="0" cellspacing="0" align="right"><tr><td id="sidedivinner"><div>1</div></td></tr></table>';
sideDivInner = outerWin.document.getElementById("sidedivinner"); sideDivInner = window.document.getElementById("sidedivinner");
} }
function updateLineNumbers() function updateLineNumbers()
@ -5377,7 +5374,7 @@ function Ace2Inner(){
if (newNumLines != lineNumbersShown) if (newNumLines != lineNumbersShown)
{ {
var container = sideDivInner; var container = sideDivInner;
var odoc = outerWin.document; var odoc = window.document;
var fragment = odoc.createDocumentFragment(); var fragment = odoc.createDocumentFragment();
while (lineNumbersShown < newNumLines) while (lineNumbersShown < newNumLines)
{ {
@ -5457,7 +5454,7 @@ function Ace2Inner(){
scheduler.setTimeout(function() scheduler.setTimeout(function()
{ {
parent.readyFunc(); // defined in code that sets up the inner iframe editorInfo.onEditorReady(); // defined in code that sets up the inner iframe
}, 0); }, 0);
isSetUp = true; isSetUp = true;
@ -5466,7 +5463,7 @@ function Ace2Inner(){
} }
exports.init = function () { exports.init = function (editorInfo) {
var editor = new Ace2Inner() var editor = new Ace2Inner(editorInfo)
editor.init(); editor.init();
}; };

10
src/templates/pad.html
View File

@ -41,6 +41,8 @@
<% e.begin_block("styles"); %> <% e.begin_block("styles"); %>
<link href="../static/css/pad.css" rel="stylesheet"> <link href="../static/css/pad.css" rel="stylesheet">
<link href="../static/css/iframe_editor.css" rel="stylesheet">
<link href="../static/custom/pad.css" rel="stylesheet">
<% e.begin_block("customStyles"); %> <% e.begin_block("customStyles"); %>
<link href="../static/custom/pad.css" rel="stylesheet"> <link href="../static/custom/pad.css" rel="stylesheet">
@ -100,7 +102,13 @@
</div> </div>
<div id="editorcontainerbox"> <div id="editorcontainerbox">
<div id="editorcontainer"></div> <div id="editorcontainer">
<div id="outerdocbody">
<div id="sidediv"><!-- --></div>
<div id="linemetricsdiv">x</div>
</div>
<div id="innerdocbody" role="application" class="syntax" spellcheck="false">&nbsp;</div>
</div>
<div id="editorloadingbox"> <div id="editorloadingbox">
<div id="passwordRequired"> <div id="passwordRequired">
<p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p> <p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>