Stateful Sizing #385
Description
In short: EpicEditor sets its size statefully, at init, in pixels, and I think this is wrong.
I am trying to use EpicEditor for a progressive enhancement over a textarea. If javascript is missing, the textarea should work. If javascript is available, EpicEditor should load, with options = {textarea: "post_content"}.
Since EpicEditor generates a separate iframe instead of styling the textarea, I have both but hide the EpicEditor div unless javascript exists to flip it:
<form id="editor_form">
<textarea id="post_content" name="post_content" style="width: 100%; height: 80%">{{post_content}}</textarea>
<div id="epiceditor" style="width: 100%; height: 80%; display: none"></div>
</form>
Then I use this javascript to linkup the two:
$(document).ready(function() {
var editor = new EpicEditor({
textarea: 'post_content',
}).load();
// on (i.e. just before) submit, sync the EpicEditor with the original <textarea>
$("#editor_form").submit(function() {
$("#post_content").val(editor.exportFile());
});
// If we hava Javascript, enable EpicEditor instead of the plain textarea
$("#post_content").css("display", "none");
$("#epiceditor").css("display", "");
});
</script>
But this doesn't work, because EpicEditor seems to be interpreting "display: none" as "width: 0px; height: 0px", and it does it like turtles all the way down:
<div id="epiceditor" style="width: 100%; height: 0px; display: none;">
<iframe style="width: 0px; height: 0px;" scrolling="no" id="epiceditor-7725" frameborder="0">
#document
<html>
<body style="height: 0px;"><div style="position: relative;" id="epiceditor-wrapper" class="epiceditor-edit-mode"><iframe style="width: 0px; height: 0px; position: absolute;" id="epiceditor-editor-frame" frameborder="0"></iframe><iframe style="width: 0px; height: 0px; position: absolute; left: -999999px;" id="epiceditor-previewer-frame" frameborder="0"></iframe><div id="epiceditor-utilbar"><button title="Toggle Preview Mode" class="epiceditor-toggle-btn epiceditor-toggle-preview-btn"></button> <button title="Toggle Edit Mode" class="epiceditor-toggle-btn epiceditor-toggle-edit-btn"></button> <button title="Enter Fullscreen" class="epiceditor-fullscreen-btn"></button></div></div></body>
</html>
</iframe></div>
There are at least four tags there that have been zapped to zero size.
When
$("#epiceditor").css("display","");
happens, EpicEditor sets #epiceditor { width: 100%; } but ignores height, and even if it didn't it would have to find all the subelements that it zapped and undo their zappiness.
I can work around this to get progressive enhancement working, but the bigger issue is that state gets recorded by the script instead of just letting CSS rules handle it. Is there a reason percentage-sizing is a bad idea?