Cauldron #
Cauldron is an authoring environment for Codestrates v2 that allows, for example, to manage and edit fragments. It provides three components that support this: the tree browser, the inspector, and tabbed editors. The following screenshot shows the overall structure of Cauldron:
Overview of Cauldron: Cauldron in its docked layout allows to see the application (A) to the side. Fragments and assets can be browsed in the Tree Browser (B) and inspected and renamed using the Inspector (C). Tabbed editors (D) allow to display code editors in a flexible way. The integrated console (E) allows to inspect logs without leaving Cauldron. (Cauldron can also be used full screen or floating.)
Opening Cauldron #
When creating a new codestrate, Cauldron can be opened by pressing the Edit button in the top right corner of the page.
Alternatively, open the browser’s JavaScript console and type cauldronEditor().
Drag the top bar of Cauldron allows for docking it to the left, right, bottom or as a free-floating window.
Fragment Authoring #
Adding Fragments #
The tree browser to the left shows fragments and non-transient DOM elements in the body of the webstrate, and all assets associated with the webstrate.
Create a new fragment by right-clicking the body element and select it from the fragment menu.
Edit its id, class and human-readable name from the inspector in the bottom left corner.
Double-clicking the fragment will open an editor for it.
Fragments can also be added to DOM elements nested inside body.
Executing Fragments #
A fragment containing executable code can be run once by pressing the Run button in the top right corner of an editor. Pressing the Auto button will toggle execution on page load.
Pressing the Auto button on a code fragment with markup code (e.g., HTML) will render it to the DOM. Pressing Auto on a CSS fragment will activate its rules.
Requiring Fragments #
To generate the code for requiring another fragment, simply drag it into an editor of another one.
This requires that the source fragment has an id attribute.
Adding and Editing DOM Elements #
From the tree browser it is possible to add regular DOM elements to the body of the page. These can be used as folders for fragments, but it is also possible to create content without using fragments. To edit a DOM element, right-click it and select “Edit InnerHTML.” You can now edit the inner HTML of the element. Note that you have to press save to store the changes back in the DOM. Cauldron will give a warning if a DOM element containing fragments is attempted edited.
Uploading Assets #
Assets can be uploaded by dragging files to the Assets part of the tree browser. Selecting assets in the tree browser, further, allows to download or delete them.
Package Manager UI #
Cauldron comes with a UI to manage packages using the Webstrates Package Manager (WPM). It is described on the WPM page of the documentation.
Programmability #
Cauldron is completely (re)programmable. See the Cauldron API for more information.