Using subCanvasMode in Xopus 3

By default Xopus makes the canvas, the holder for the document, contentEditable. This ensures that when the nodes are drawn by the stylesheets, they can be edited. The whole canvas is made editable. In order to have more control over which areas of the document are editable, and which are not, it is possible to enable subCanvasMode.

<x:advanced>
  <x:subCanvasMode>true</x:subCanvasMode>
</x:advanced>

In order to then to make something editable, you will have to set contentEditable="true" explicitly on output elements in your stylesheet. Nodes that are represented within this element will then be editable.

The <subCanvasMode> configuration option is useful for more complex integrations. For example if you edit your whole site in Xopus, but do not want Xopus to interpret the menu of your site as editable (because links cannot be clicked when they are placed in a contentEditable environment), you can set <subCanvasMode> to true and only make the contents of your website editable.

<xsl:template match="website">
  <ol id="menu">
    <li><a href="/">home</a></li>
    …
  </ol>

  <div id="content" contentEditable="true">
    <xsl:apply-templates select="title"/>
    <xsl:apply-templates select="body"/>
  </div>
  
  <div id="footer" contentEditable="true">
    <xsl:apply-templates select="footer"/>
  </div>
</xsl:template>

subCanvasMode In Use

You can see another example of this in our Recipe Demo which uses <subCanvasMode>. In this case it is used to allow the developer to create special submenus.

These submenu's can be found when you click on the time-unit, the category, or the unit in the nutritional facts section. These submenu's use the Xopus API, and are not standard menu's in Xopus. Building these kind of menu's can be beneficial for editing attributes that would normally be edited in the attributes editor.