Demo #1: Zen live DOM editor
Brief background: Zen is a small framework being developed to help bring web application authoring to the masses. Perhaps someday it will become an important tool in the IndieWeb movement. For more information, visit the About page. This demo: Follow the instructions below in green letters (beginning "Press one of ..."). Being an alpha prototype, the demo still has bugs and does not yet work in Explorer or mobile browsers.
- What is a DOM?
- When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. The DOM is basically just a tree of text objects and element objects like DIVs (divisions of the page), paragraphs, headers, articles, sections, blockquotes, links, lists, interactive components (like buttons and forms), and many more. The DOM defines the structure of the page by defining which of the page's elements are inside, i.e. nested within, which other page elements.
- What is a live DOM editor?
- A live DOM editor is a program or application in a web page that changes the relative positions, and possibly attributes and properties, of DOM elements on the fly, that is, without requiring the page to be refreshed or updated from the web server. A useful live DOM editor should also probably be able to add and delete DOM elements. A useful DOM editor will likely be able to persist these changes by saving them locally or on the web server.
- What is this demo of live DOM editing?
- This page, containing the alpha prototype of the Zen live DOM editor, is a demonstration of a very clear and simple way to program a complex GUI (graphical user interface). Being an alpha prototype, it still has bugs and does not yet work in Explorer or mobile browsers. In case you do not find the operation of this DOM editor to be obvious, there are instructions at the bottom of the page.
How to use this prototype DOM editor
This DOM editor prompts you in large green text. It will instruct you to choose a tool. Currently, "Copy-insert", "Copy-before", "Move-insert", and "Move-before" are the only tools that work. Clicking on any other tool will produce the message "Unimplemented operation." Currently there is a bug that prevents elements contained in a custom element from being copied.
The program will eventually implement 4 rules for insertions and moves:- Branches of the DOM will be designatable as draggable and other branches of the DOM will be designatable as not draggable. However, currently just one branch can be designated as draggable at startup. That branch currently comprises the elements in the large gray block.
- Branches of the DOM will be designatable as valid drop targets and other branches of the DOM will be designatable as not valid drop targets.
- The HTML Content Model places restrictions upon what elements are allowed to be nested inside which other elements. The program will implement rules to enforce these restrcitions. (Refer to the relevant sections of whatwg.org and w3.org. A good but simple explanation can be found on ClearlyDecoded.com.)
- An element cannot be moved into itself, nor into a descendent of itself. For example, if a "Move-insert" operation is attempted and an element around for awhile then dropped at its original position, the operation is invalid. Likewise, if a "Move-before" operation is attempted and an element is dropped on its own child element or its child's child element, the operation is invalid. Invalid operations will produce no change to the DOM structure.
So far, only the 4th rule is implemented. The 1st rule is partially implemented. The demo will be improved as time permits.
The BiwaScheme code can be downloaded at in-browser-gui.scm, browser-util.scm, and mini-framework.scm. There is other experimental code here. This website can be cloned. See the project on GitHub.
If you like this project or want to see more about it, please visit Mashweb.Club.
Copyright © 2020, 2021, Thomas Elam, Mashweb.Club. All rights reserved.