meta add div

The project is a completely client side wysiwyg web page editor.

The editor can be set up to create a particular kind of page. This is done by creating a custom html file, the page, or framework. This is then opened with a browser. The framework then displays controls with which the user can add and edit content. At the end of a session the user can copy a page string from the page and save the page string as text. At a later time, the framework can be reloaded, and the saved page string can be loaded into it, at which point all the added content will display. Additional changes can be made, which will be applied to the DOM, and thus to the displayed content, and to the page string, which will thus update, with each session concluding as described.

Some questions are coming up which make me think this could be more of a development exercise than a final product, but I want to explore the concept a bit as it stands.

In the editing process, interactive elements that call JavaScript functions can be added, but the JavaScript functions themselves can only be added when editing the framework separately, so I am thinking about a list of essential functions to include in the framework. What they are would depend on the kind of page the framework is intended to produce. One possibility produces a simple single page, or frame, into which assorted content can be introduced, or across which content can be distributed, and a means can be provided for enlarging one or another portion of that frame, so that the content could be quite small in one view and full size in another. This might be the simplest option, and it could be a useful one. One problem the system is designed to address is that of adding a large number of elements to a screen in such a way that all of them can be seen at once, amounting to a map of all the content, and them particular parts of the content can be inspected closely. The problem is mainly that of adding a large number of elements to a single HTML document, as that document will become difficult to read and work with. The editor ought to operate as an interface to the HTML, and considerably assist the process. The other main problem is then that of enlarging specific elements or groups of elements.

The idea of a page string is employed above as a way to save changes between sessions, without relying on a server, but it is not actually essential for that purpose. The HTML for the page could easily be saved - it would be a string, let's call it the HTML string, but of a different type - and loaded again to begin a new session. The real purpose of what I'm calling the page string is to facilitate undo operations, that is, to maintain a history of the page's construction and navigation of that history. Perhaps I'm getting sidetracked a little here, but the page string is something I do want to include from the start ... so that history is always preserved. I've failed to implement this in the past, even though I knew I should be doing so, but I'm seeing my way to implementing it, now, and I don't want to fail in this regard again.

Sacrosanct conventions seem to require that an HTML file include all sorts of niceties which seem, for our purposes, to serve no purpose. I say we can begin as follows:

<script>
our JavaScript
</script>

The above is called a script tag.

Then we need to write some JavaScript.

I am kind of obsessing, at the moment, about the system for enlarging content. I think I might start with some functions for that purpose.

Imagine that our content frame is the equivalent of a page, or sheet of paper, which, initially, we see in its entirety, in our browser window. We might now want to inspect part of it more closely, so we could say that part is one quarter of the page. We could create a control which allows us to select one quarter of the page to show in more detail, either the top left quarter, the top right quarter, the bottom left quarter, or the bottom right quarter. This, however, would be somewhat unsatisfactory as content in the middle part of the page would never be centered in the browser window. I therefore propose a control which offers views of quarters of the page, but of, in addition to the already listed quarters, the middle left quarter, the middle right quarter, the top center quarter, the bottom center quarter, and the center quarter.

First, though, we need to create our content frame, as this must float behind any controls. This give us an opportunity to demonstrate addition of elements.

our JavaScript, then:

var cframe = '<div id="cframe"'
var cframestyle0 = ' style="position:fixed;
var cframestyle1 = 'left:0px;top:0px;width:0px;height:0px;font-size:0px;'
var cframestyle2 = 'color:lightgrey;background-color:pink;display:inline"'
var cframestyle = cframestyle0 + cframestyle1 + cframestyle2
cframe = cframe + cframestyle + '></div>'
window.document.body.innerHTML = window.document.innerHTML + cframe

The script tag with our JavaScript in it is now the entirety of our HTML. Save that HTML as an html file, open it with a browser, and you should see ... well ... nothing.

We can begin to explore the problem of showing portions of content either larger or smaller by fitting the cframe to the window.

cframe = document.getElementById("cframe")
cframeratio = 3/2