Hope IDE UI - HackMD

--- tags: hope --- # Hope IDE UI Hope needs a simple UI to allow anyone to build hopde doclets by combining existing doclets and wiring them together. This UI should be simple enough that users that today use office software are able to build similar documents using Hope. So let's describe a possible UI for Hope. A user opens a Hope doclet by entering a URL in the browser. (Or clicking on a link somewhere). The doclet is not in editmode yet, but there is an icon that is faintly visible, say in the top right corner. This icon is only visible in the host doclet. The user can click this icon and a dropdown menu shows an edit option. Click that and, if the user is authorized, the doclet will turn on the editmode features of that specific doclet. Each doclet must define its own editing features. So here I'll describe a doclet that only allows you to add, move and remove other doclets. And ofcourse write scripts to connect them. The list doclet has html, css and javascript code that shows an empty page at first. In edit mode it shows a (+) icon on the left. If you click that, it will show a popup menu with a list of favourite doclets, as well as one or more doclet marketplaces where you can select other doclets. You can also add a doclet marketplace. A doclet marketplace is just a URL. When selected this URL opens in an iframe, as it is also a doclet. The marketplace doclet can call methods in the host to add a favourite to the 'add doclet' menu, or to remove itself, or to add a doclet to the host document. So you select a doclet, which is just a URL, and the host document asks for a name. It then adds a new iframe with that URL and the name to the host document. When you save the host document, the host sends a save() command to all doclets inside it. They can either save to their current URL, or ask for a new storage location if they can't store their changes in the loaded URL, or they can ignore the save() command if there are no changes. If the host doclet has a storage system that supports it, it can assign a storage URL automatically. A host doclet may have a root URL, in which the host doclet is stored as e.g. 'index.html'. Any subdoclet may then be saved as '{doclet-name}/index.html' below that root. Each doclet is simply listed below the previous one, with a button next to it. You can drag a doclet through this button upwards or downwards. You can also click this button and a popup menu shows, with the option to remove the doclet. Or to inspect the doclet. The inspector opens with a list of available doclets, with the selected doclet open. This doclet may contain other doclets, but it also has a list of API's. You can select an API, and it will show a list of methods in that API. You can call a method and it will show the result in a console. You can create a new script, enter a name, and a code editor will open with code prefilled that connects to that doclet and API. e.g. ``` let api = hope.doclets.log.api('/x/log/'); ``` You can then add your own code here. It will autocomplete your code with the information available in the doclet. So if you want to connect to another doclet, it will autocomplete the doclet name, as well as the API and even methods in the API. When you are done, you can press a save button in the main doclet to store the changed doclet, including any scripts that you've added. The scripts are run as soon as all doclets are loaded and ready.