A simple editable doclet

# A simple editable doclet - show a (vertical) list of doclets - start / stop edit mode - add/move/remove a doclet - save to new url or current url - add/edit host scripts ## show a list of doclets A doclet is just an iframe with a name and a url. So a list of doclets is just a number of iframes after each other. But you must be able to: 1. add a doclet at the end 2. insert a doclet before another doclet 3. move a doclet 4. delete a doclet So each doclet must have space to add a UI. You can't do it with `::before` and `::after` CSS selectors, as these are added _inside_ the container. So they aren't visible in the case of an iframe. To do this each iframe must have an extra container element. As it is a list, why not use an `ul` and `li` combination? ``` <ul data-hope-list="doclets"> <li> <iframe name="x" src="..."></iframe> </li> </ul> ``` Now we can add a CSS `::before` marker on each `li`, and an `::after` marker on the `ul`. ## toggle edit mode The simplest way is to add an attribute to the `<html>` tag, and apply CSS on it. But we must remove it before saving, or a document will always be opened in edit mode. Alternatively you could always open a document in edit mode and make the UI almost invisible. Only on save() would you check access. This avoids toggling state and adding a UI for that. If edit mode is always on, each doclet must have a `dirty` status that is set to true when something has changed. (Or another method of keeping track of changes.) When a host doclet is saved, it may pass on the save message and each child doclet with changes may then trigger a save action as well. ## add/move/remove a doclet The `ul::after` marker has only one job: allow you to add a new doclet. So when pressed open a dialog that allows you to enter/select a url and a name. Then add a new `li` with that `iframe`. Moving a doclet can be done by swapping `li` items. But the nicest UI would be to actually drag and drop the doclets. The problem is that the dragstart event is captured by the iframe, so the host doclet can't respond. The added marker on `li::before` is in the host doclet though. If we make sure it is always on top, you can use that as a drag handle. To remove or insert a doclet, we can use the same marker as the UI starting point. Open a context menu by clicking on it, with the options `insert` and `remove`. ## Save to current or new location The host doclet needs a UI to save the entire doclet. As the doclets are always opened in edit mode, the UI needs to be minimal and non-intrusive. The most invisible UI is a keyboard shortcut. But this won't work on mobile, so there must at least be an alternative. An option is to add a single button on a fixed position, e.g. top-right. This also allows for some kind of branding which may come in handy later. This button may interfere with some specific doclets though. It should only be visible in the host doclet, that will prevent most problems, I think. When/if we need multiple UI elements, we can turn this single button into a popup menu. For the first demo a single save button is fine. But this doesn't allow you to make a copy. So later on we need at least a 'save as' feature. This should open a dialog allowing you to select where you want to save the doclet, by selecting one of a list of configured subsystems. This list can be tied to your local browser, or to a personal account that is synchronized across browsers. ## add or edit host scripts The hope inspector solves this for now. As we save the entire document, any scripts added by the inspector `hope.script()` command is automatically saved. We can add a UI element to add/show/edit scripts in the host popup save menu. So that host menu needs these features: - save - save as - scripts - {list of scripts} - edit - remove - add script The inspector script editor should be extended to autocomplete calls to doclets and doclet api's. Perhaps it should have a sidebar with a list of all scripts in the current doclet, or even the doclet tree. ###### tags: `hope` `doclets`